Merge branch 'master' of github.com:bufferapp/buffer-components into task/automated-a11y-tests

Author: emplums

.storybook/webpack.config.js

@@ -1,55 +1,32 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { classNames } from '../lib/utils';
-import styles from './style.css';
+import ButtonStateless from '../ButtonStateless';
+import PseudoClassComponent from '../PseudoClassComponent';
 
-const Button = ({
-  borderless,
-  children,
-  disabled,
-  fillContainer,
-  large,
-  onClick,
-  secondary,
-  small,
-  tertiary,
-  warning,
-  noStyle,
-}) => {
-  const classes = classNames(styles, {
-    button: !noStyle,
-    borderless,
-    large,
-    secondary,
-    small,
-    tertiary,
-    warning,
-    'fill-container': fillContainer,
-    'no-style': noStyle,
-  });
-  return (
-    <button
-      className={classes}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  children: PropTypes.node,
-  borderless: PropTypes.bool,
-  disabled: PropTypes.bool,
-  fillContainer: PropTypes.bool,
-  large: PropTypes.bool,
-  noStyle: PropTypes.bool,
-  onClick: PropTypes.func,
-  secondary: PropTypes.bool,
-  small: PropTypes.bool,
-  tertiary: PropTypes.bool,
-  warning: PropTypes.bool,
-};
+class Button extends PseudoClassComponent {
+  render() {
+    const { children, ...rest } = this.props;
+    let hoveredChildren = children;
+    // string as children isn't clonable
+    if (React.isValidElement(children)) {
+      hoveredChildren = React.cloneElement(
+        children,
+        { hovered: this.state.hovered },
+      );
+    }
+    return (
+      <ButtonStateless
+        {...rest}
+        hovered={this.state.hovered}
+        focused={this.state.focused}
+        onMouseEnter={() => this.handleMouseEnter()}
+        onMouseLeave={() => this.handleMouseLeave()}
+        onFocus={() => this.handleFocus()}
+        onBlur={() => this.handleBlur()}
+      >
+        {hoveredChildren}
+      </ButtonStateless>
+    );
+  }
+}
 
 export default Button;

Button/index.jsx

@@ -1,77 +1,23 @@
 import React from 'react';
 import {
-  storiesOf,
   action,
+  storiesOf,
 } from '@kadira/storybook';
 import { checkA11y } from 'storybook-addon-a11y';
 import Button from './index';
-import Text from '../Text';
+import CloseIcon from '../Icon/Icons/CloseIcon';
 
 storiesOf('Button')
   .addDecorator(checkA11y)
-  .add('Default', () => (
-    <Button>Button text</Button>
-  ))
-  .add('borderless', () => (
-    <Button borderless>Button text</Button>
-  ))
-  .add('disabled', () => (
-    <div>
-      <p>Default</p>
-      <Button disabled>Button text</Button><br /><br />
-      <p>Borderless</p>
-      <Button disabled borderless>Button text</Button><br /><br />
-      <p>Large</p>
-      <Button disabled large>Button text</Button><br /><br />
-      <p>Secondary</p>
-      <Button disabled secondary>Button text</Button><br /><br />
-      <p>Small</p>
-      <Button disabled small>Button text</Button><br /><br />
-      <p>Tertiary</p>
-      <Button disabled tertiary>Button text</Button><br /><br />
-      <p>Warning</p>
-      <Button disabled warning>Button text</Button>
-      <p>Click Events Should Not Fire</p>
-      <Button
-        disabled
-        onClick={action('button-click--should-not-happen')}
-      >
-        No Events :(
-      </Button>
-    </div>
-  ))
-  .add('large', () => (
-    <Button large>Button text</Button>
-  ))
-  .add('secondary', () => (
-    <Button secondary>Button text</Button>
-  ))
-  .add('small', () => (
-    <Button small>Button text</Button>
-  ))
-  .add('tertiary', () => (
-    <Button tertiary>Button text</Button>
-  ))
-  .add('warning', () => (
-    <Button warning>Button text</Button>
+  .add('default', () => (
+    <Button onClick={action('on-click')}>Click Me</Button>
   ))
-  .add('fillContainer', () => (
-    <div style={{ boxSizing: 'border-box' }}>
-      <Button fillContainer>Max WIDTH</Button>
-    </div>
+  .add('warning button', () => (
+    <Button onClick={action('on-click')} warning>Warning</Button>
   ))
-  .add('onClick event', () => (
-    <Button
-      onClick={action('button-click')}
-    >
-      Click Me
-    </Button>
+  .add('with icon and text', () => (
+    <Button onClick={action('on-click')} noStyle><CloseIcon />Close</Button>
   ))
-  .add('noStyle', () => (
-    <Button
-      onClick={action('button-click')}
-      noStyle
-    >
-      <Text size={'small'}>Use this as an a11y friendly click target</Text>
-    </Button>
+  .add('with icon only', () => (
+    <Button onClick={action('on-click')} noStyle><CloseIcon /></Button>
   ));