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

Author: emplums

.storybook/addons.js

@@ -1,2 +1,2 @@
-import '@kadira/storybook/addons';
+import '@storybook/addon-actions/register';
 import 'storybook-addon-a11y/register';

.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure } from '@kadira/storybook';
+import { configure } from '@storybook/react';
 
 // automatically import all story.js files
 const req = require.context('../', true, /story\.jsx$/);

.storybook/head.html renamed to .storybook/preview-head.html

@@ -1,6 +1 @@
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
-<style>
-  * {
-    font-family: 'Open Sans', sans-serif;
-  }
-</style>

Button/story.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import {
-  action,
-  storiesOf,
-} from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import { checkA11y } from 'storybook-addon-a11y';
 import Button from './index';
 import CloseIcon from '../Icon/Icons/CloseIcon';
+import Text from '../Text';
 
 storiesOf('Button')
   .addDecorator(checkA11y)
@@ -16,7 +15,10 @@ storiesOf('Button')
     <Button onClick={action('on-click')} warning>Warning</Button>
   ))
   .add('with icon and text', () => (
-    <Button onClick={action('on-click')} noStyle><CloseIcon />Close</Button>
+    <Button onClick={action('on-click')} noStyle>
+      <CloseIcon />
+      <Text>Close</Text>
+    </Button>
   ))
   .add('with icon only', () => (
     <Button onClick={action('on-click')} noStyle><CloseIcon /></Button>

ButtonStateless/index.jsx

@@ -11,6 +11,7 @@ import {
   white,
   curiousBlue,
   geyser,
+  offWhite,
   outerSpace,
   transparent,
   torchRed,
@@ -40,6 +41,7 @@ const Button = ({
   secondary,
   small,
   tertiary,
+  quaternary,
   warning,
   noStyle,
 }) => {
@@ -102,6 +104,15 @@ const Button = ({
       color: outerSpace,
       backgroundColor: transparent,
     },
+    quaternary: {
+      color: outerSpace,
+      backgroundColor: offWhite,
+      borderColor: geyser,
+    },
+    quaternaryHovered: {
+      color: outerSpace,
+      backgroundColor: offWhite,
+    },
     warning: {
       color: outerSpace,
       backgroundColor: transparent,
@@ -116,6 +127,7 @@ const Button = ({
     },
     noStyle: {
       display: 'unset',
+      lineHeight: 'unset',
       margin: 'unset',
       padding: 0,
       fontFamily: 'unset',
@@ -143,6 +155,8 @@ const Button = ({
     small,
     tertiary,
     tertiaryHovered: tertiary && hovered && !disabled,
+    quaternary,
+    quaternaryHovered: quaternary && hovered && !disabled,
     warning,
     warningHovered: warning && hovered && !disabled,
     fillContainer,
@@ -181,6 +195,7 @@ Button.propTypes = {
   secondary: PropTypes.bool,
   small: PropTypes.bool,
   tertiary: PropTypes.bool,
+  quaternary: PropTypes.bool,
   warning: PropTypes.bool,
 };
 

ButtonStateless/story.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  storiesOf,
-  action,
-} from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import { checkA11y } from 'storybook-addon-a11y';
 import Button from './index';
 import Text from '../Text';
@@ -29,6 +27,8 @@ storiesOf('ButtonStateless')
       <Button disabled small>Button text</Button><br /><br />
       <p>Tertiary</p>
       <Button disabled tertiary>Button text</Button><br /><br />
+      <p>Quaternary</p>
+      <Button disabled quaternary>Button text</Button><br /><br />
       <p>Warning</p>
       <Button disabled warning>Button text</Button>
       <p>Click Events Should Not Fire</p>
@@ -62,6 +62,8 @@ storiesOf('ButtonStateless')
       <Button hovered small>Button text</Button><br /><br />
       <p>Tertiary</p>
       <Button hovered tertiary>Button text</Button><br /><br />
+      <p>Quaternary</p>
+      <Button hovered quaternary>Button text</Button><br /><br />
       <p>Warning</p>
       <Button hovered warning>Button text</Button>
       <p>Disabled</p>
@@ -93,6 +95,9 @@ storiesOf('ButtonStateless')
   .add('tertiary', () => (
     <Button tertiary>Button text</Button>
   ))
+  .add('quaternary', () => (
+    <Button quaternary>Button text</Button>
+  ))
   .add('warning', () => (
     <Button warning>Button text</Button>
   ))

CHANGELOG.md

@@ -1,5 +1,55 @@
 # Changelog
 
+## 0.5.22 (June 13, 2017)
+
+- Remove setting font-family with global CSS rule and set fontFamily on components that need it
+
+## 0.5.21 (June 13, 2017)
+
+- Set default `alt` text to empty string
+
+## 0.5.20 (June 8, 2017)
+
+- Change the `lineHeight` CSS property on the `ButtonStateless` component to `'unset'` to fix Safari bug
+
+## 0.5.19 (June 8, 2017)
+
+- Remove `inline-flex` from `InputTime`'s `default` style
+- Add missing `,` in our `fontFamily` value
+
+## 0.5.18 (June 7, 2017)
+
+- Make first day of week configurable in `InputDate`
+
+## 0.5.17 (June 5, 2017)
+
+- Change `InputDate` selected date color to universal blue
+
+## 0.5.16 (June 5, 2017)
+
+- Remove browser prefix strings as keys and replaces them with preferred keys
+
+## 0.5.15 (June 5, 2017)
+
+- Add `CloseSmallIcon`, `Notification`, and `NotificationClose` to `Icon/index.js`
+
+## 0.5.14 (June 5, 2017)
+
+- Add `CloseSmallIcon`, `Notification`, and `NotificationClose` components
+- Update `WarningIcon` component
+
+## 0.5.13 (June 5, 2017)
+
+- Add a `lineHeight: 0` rule to our `noStyle` config on ButtonStateless
+
+## 0.5.12 (June 1, 2017)
+
+- Add `disabled` config to `InputTime` component
+
+## 0.5.11 (May 31, 2017)
+
+- Add `quaternary` config to `ButtonStateless` component
+
 ## 0.5.10 (May 26, 2017)
 
 - Add `noStyle` config to `InputTimes`

Card/story.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  storiesOf,
-  action,
-} from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import { checkA11y } from 'storybook-addon-a11y';
 import Card from './index';
 import Link from '../Link';

Card/test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import a11yTestHelper from '../lib/a11yTestHelper';
+import { testComponentA11y } from '../lib/a11yTestHelper';
 import Card from './index';
 
 describe('Card', () => {
   it('should pass accessibility audit', (done) => {
-    a11yTestHelper.testComponent(
+    testComponentA11y(
       <Card>
         What is a Product Designer? An awesome story by @jgadapee over on Medium!
       </Card>, [], (results) => {

Icon/Icons/CloseSmallIcon.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Icon from '../../Icon';
+
+const CloseSmallIcon = ({ color, size }) => (
+  <Icon color={color} size={size}>
+    <rect height="12" rx="0.5" transform="translate(5.046194, 5.000000) rotate(45.000000) translate(-5.046194, -5.000000)" width="1" x="4.54619413" y="-1" />
+    <rect height="12" rx="0.5" transform="translate(5.046194, 5.000000) scale(-1, 1) rotate(45.000000) translate(-5.046194, -5.000000)" width="1" x="4.54619413" y="-1" />
+  </Icon>
+);
+
+CloseSmallIcon.propTypes = {
+  ...Icon.propTypes,
+};
+
+export default CloseSmallIcon;