From 08d05bc7273bab97a2b8b184b83215fa87a5bbce Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 5 Sep 2018 16:46:41 -0400 Subject: [PATCH 01/13] Initial files --- src-docs/src/views/button/button_example.js | 21 +++ src-docs/src/views/button/facet.js | 11 ++ src/components/button/_index.scss | 1 + .../__snapshots__/button_facet.test.js.snap | 18 ++ .../button/button_facet/_button_facet.scss | 3 + .../button/button_facet/_index.scss | 1 + .../button/button_facet/button_facet.js | 164 ++++++++++++++++++ .../button/button_facet/button_facet.test.js | 16 ++ src/components/button/button_facet/index.js | 3 + src/components/button/index.js | 4 + src/components/index.js | 1 + 11 files changed, 243 insertions(+) create mode 100644 src-docs/src/views/button/facet.js create mode 100644 src/components/button/button_facet/__snapshots__/button_facet.test.js.snap create mode 100644 src/components/button/button_facet/_button_facet.scss create mode 100644 src/components/button/button_facet/_index.scss create mode 100644 src/components/button/button_facet/button_facet.js create mode 100644 src/components/button/button_facet/button_facet.test.js create mode 100644 src/components/button/button_facet/index.js diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index cf470e48f4a..b13cb0c2a50 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -13,6 +13,7 @@ import { EuiCode, EuiButtonGroup, EuiButtonToggle, + EuiButtonFacet, EuiLink, } from '../../../../src/components'; @@ -56,6 +57,10 @@ import ButtonGroup from './button_group'; const buttonGroupSource = require('!!raw-loader!./button_group'); const buttonGroupHtml = renderToHtml(ButtonGroup); +import Facet from './facet'; +const facetSource = require('!!raw-loader!./facet'); +const facetHtml = renderToHtml(Facet); + export const ButtonExample = { title: 'Button', sections: [{ @@ -241,5 +246,21 @@ export const ButtonExample = {

), demo: , + }, { + title: 'Facet', + source: [{ + type: GuideSectionTypes.JS, + code: facetSource, + }, { + type: GuideSectionTypes.HTML, + code: facetHtml, + }], + text: ( +

+ Blach +

+ ), + demo: , + props: { EuiButtonFacet }, }], }; diff --git a/src-docs/src/views/button/facet.js b/src-docs/src/views/button/facet.js new file mode 100644 index 00000000000..7e5d16a3f73 --- /dev/null +++ b/src-docs/src/views/button/facet.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { + EuiButtonFacet, +} from '../../../../src/components'; + +export default () => ( + + Created by me + +); diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss index ed5bdc25801..22a0dd20dce 100644 --- a/src/components/button/_index.scss +++ b/src/components/button/_index.scss @@ -3,6 +3,7 @@ @import 'button'; @import 'button_empty/index'; +@import 'button_facet/index'; @import 'button_icon/index'; @import 'button_toggle/index'; @import 'button_group/index'; diff --git a/src/components/button/button_facet/__snapshots__/button_facet.test.js.snap b/src/components/button/button_facet/__snapshots__/button_facet.test.js.snap new file mode 100644 index 00000000000..71282af5069 --- /dev/null +++ b/src/components/button/button_facet/__snapshots__/button_facet.test.js.snap @@ -0,0 +1,18 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiButtonFacet is rendered 1`] = ` + +`; diff --git a/src/components/button/button_facet/_button_facet.scss b/src/components/button/button_facet/_button_facet.scss new file mode 100644 index 00000000000..350b3cdf3a5 --- /dev/null +++ b/src/components/button/button_facet/_button_facet.scss @@ -0,0 +1,3 @@ +.euiButtonFacet { + +} diff --git a/src/components/button/button_facet/_index.scss b/src/components/button/button_facet/_index.scss new file mode 100644 index 00000000000..334f91e496f --- /dev/null +++ b/src/components/button/button_facet/_index.scss @@ -0,0 +1 @@ +@import 'button_facet'; diff --git a/src/components/button/button_facet/button_facet.js b/src/components/button/button_facet/button_facet.js new file mode 100644 index 00000000000..417494e5c7d --- /dev/null +++ b/src/components/button/button_facet/button_facet.js @@ -0,0 +1,164 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiLoadingSpinner +} from '../../loading'; + +import { getSecureRelForTarget } from '../../../services'; + +import { + ICON_TYPES, + EuiIcon, +} from '../../icon'; + +const colorToClassNameMap = { + primary: 'euiButtonEmpty--primary', + danger: 'euiButtonEmpty--danger', + disabled: 'euiButtonEmpty--disabled', + text: 'euiButtonEmpty--text', + ghost: 'euiButtonEmpty--ghost', +}; + +export const COLORS = Object.keys(colorToClassNameMap); + +const sizeToClassNameMap = { + xs: 'euiButtonEmpty--xSmall', + s: 'euiButtonEmpty--small', + l: 'euiButtonEmpty--large', +}; + +export const SIZES = Object.keys(sizeToClassNameMap); + +const iconSideToClassNameMap = { + left: '', + right: 'euiButtonEmpty--iconRight', +}; + +export const ICON_SIDES = Object.keys(iconSideToClassNameMap); + +const flushTypeToClassNameMap = { + 'left': 'euiButtonEmpty--flushLeft', + 'right': 'euiButtonEmpty--flushRight', +}; + +export const FLUSH_TYPES = Object.keys(flushTypeToClassNameMap); + +export const EuiButtonFacet = ({ + children, + className, + iconType, + iconSide, + color, + size, + flush, + isDisabled, + isLoading, + href, + target, + rel, + type, + buttonRef, + ...rest +}) => { + + // If in the loading state, force disabled to true + isDisabled = isLoading ? true : isDisabled; + + const classes = classNames( + 'euiButtonEmpty', + colorToClassNameMap[color], + sizeToClassNameMap[size], + iconSideToClassNameMap[iconSide], + flushTypeToClassNameMap[flush], + className, + ); + + // Add an icon to the button if one exists. + let buttonIcon; + + if (isLoading) { + buttonIcon = ( + + ); + } else if (iconType) { + buttonIcon = ( +