storybookjs · ndelangen · Jul 1, 2018 · May 19, 2018 · May 19, 2018 · May 20, 2018
@@ -31,7 +31,6 @@
     "@storybook/core-events": "4.0.0-alpha.8",
     "axe-core": "^3.0.2",
     "babel-runtime": "^6.26.0",
-    "emotion": "^9.1.3",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3"

@@ -1,65 +1,93 @@
 import React, { Component } from 'react';
-import addons from '@storybook/addons';
+import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
 
-import { CHECK_EVENT_ID } from '../shared';
+import { STORY_RENDERED } from '@storybook/core-events';
+import { ActionBar, ActionButton } from '@storybook/components';
+
+import { CHECK_EVENT_ID, RERUN_EVENT_ID, REQUEST_CHECK_EVENT_ID } from '../shared';
 
 import Tabs from './Tabs';
 import Report from './Report';
 
-const Passes = styled('span')({
-  color: '#0D6731',
-});
+const Passes = styled('span')(({ theme }) => ({
+  color: theme.successColor,
+}));
 
-const Violations = styled('span')({
-  color: '#AC2300',
-});
+const Violations = styled('span')(({ theme }) => ({
+  color: theme.failColor,
+}));
 
 class Panel extends Component {
-  constructor(props, ...args) {
-    super(props, ...args);
-    this.state = {
-      passes: [],
-      violations: [],
-    };
-    this.channel = addons.getChannel();
-
-    this.onUpdate = this.onUpdate.bind(this);
-  }
+  static propTypes = {
+    active: PropTypes.bool.isRequired,
+    channel: PropTypes.shape({
+      on: PropTypes.func,
+      emit: PropTypes.func,
+      removeListener: PropTypes.func,
+    }).isRequired,
+  };
+
+  state = {
+    passes: [],
+    violations: [],
+  };
 
   componentDidMount() {
-    this.channel.on(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.on(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.on(STORY_RENDERED, this.requestCheck);
+    this.props.channel.on(RERUN_EVENT_ID, this.requestCheck);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.active && this.props.active) {
+      this.requestCheck();
+    }
   }
 
   componentWillUnmount() {
-    this.channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.removeListener(STORY_RENDERED, this.requestCheck);
+    this.props.channel.removeListener(RERUN_EVENT_ID, this.requestCheck);
   }
 
-  onUpdate({ passes, violations }) {
+  onUpdate = ({ passes, violations }) => {
     this.setState({
       passes,
       violations,
     });
-  }
+  };
+
+  requestCheck = () => {
+    if (this.props.active) {
+      this.props.channel.emit(REQUEST_CHECK_EVENT_ID);
+    }
+  };
 
   render() {
     const { passes, violations } = this.state;
+    const { active } = this.props;
 
-    return (
-      <Tabs
-        tabs={[
-          {
-            label: <Violations>{violations.length} Violations</Violations>,
-            panel: <Report passes={false} items={violations} empty="No a11y violations found." />,
-          },
-          {
-            label: <Passes>{passes.length} Passes</Passes>,
-            panel: <Report passes items={passes} empty="No a11y check passed" />,
-          },
-        ]}
-      />
-    );
+    return active ? (
+      <div>
+        <Tabs
+          tabs={[
+            {
+              label: <Violations>{violations.length} Violations</Violations>,
+              panel: <Report passes={false} items={violations} empty="No a11y violations found." />,
+            },
+            {
+              label: <Passes>{passes.length} Passes</Passes>,
+              panel: <Report passes items={passes} empty="No a11y check passed" />,
+            },
+          ]}
+        />
+        <ActionBar>
+          <ActionButton onClick={this.requestCheck}>RERUN TEST</ActionButton>
+        </ActionBar>
+      </div>
+    ) : null;
   }
 }
 

@@ -3,18 +3,18 @@ import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
 
-const Wrapper = styled('div')({
-  backgroundColor: 'rgb(234, 234, 234)',
+const Wrapper = styled('div')(({ theme }) => ({
+  backgroundColor: theme.barFill,
   padding: '12px',
   marginBottom: '10px',
-});
+}));
 const Help = styled('p')({
   margin: '0 0 12px',
 });
 const Link = styled('a')({
   marginTop: '12px',
   textDecoration: 'underline',
-  color: 'rgb(130, 130, 130)',
+  color: 'inherit',
   display: 'block',
 });
 

@@ -7,19 +7,28 @@ import Info from './Info';
 import Tags from './Tags';
 import Elements from './Elements';
 
-const Wrapper = styled('div')({
+const Wrapper = styled('div')(({ theme }) => ({
   padding: '0 14px',
   cursor: 'pointer',
-  borderBottom: '1px solid rgb(234, 234, 234)',
-});
+  borderBottom: theme.mainBorder,
+}));
 
-const HeaderBar = styled('button')({
+const HeaderBar = styled('button')(({ theme }) => ({
   padding: '12px 0px',
   display: 'block',
   width: '100%',
   border: 0,
   background: 'none',
-});
+  color: 'inherit',
+
+  borderTop: '3px solid transparent',
+  borderBottom: '3px solid transparent',
+
+  '&:focus': {
+    outline: '0 none',
+    borderBottom: `3px solid ${theme.highlightColor}`,
+  },
+}));
 
 class Item extends Component {
   static propTypes = {

@@ -9,14 +9,12 @@ const Wrapper = styled('div')({
   margin: '12px 0',
 });
 
-const Item = styled('div')({
+const Item = styled('div')(({ theme }) => ({
   margin: '0 6px',
   padding: '5px',
-  border: '1px solid rgb(234, 234, 234)',
-  borderRadius: '2px',
-  color: 'rgb(130, 130, 130)',
-  fontSize: '12px',
-});
+  border: theme.mainBorder,
+  borderRadius: theme.mainBorderRadius,
+}));
 
 function Tags({ tags }) {
   return <Wrapper>{tags.map(tag => <Item key={tag}>{tag}</Item>)}</Wrapper>;

@@ -1,26 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import addons from '@storybook/addons';
 import { Placeholder } from '@storybook/components';
 
-import { RERUN_EVENT_ID } from '../../shared';
-
-import RerunButton from './RerunButton';
 import Item from './Item';
 
-function onRerunClick() {
-  const channel = addons.getChannel();
-  channel.emit(RERUN_EVENT_ID);
-}
-
 const Report = ({ items, empty, passes }) => (
   <div>
     {items.length ? (
       items.map(item => <Item passes={passes} item={item} key={item.id} />)
     ) : (
       <Placeholder>{empty}</Placeholder>
     )}
-    <RerunButton onClick={onRerunClick}>Re-run tests</RerunButton>
   </div>
 );
 

@@ -6,13 +6,14 @@ import styled from 'react-emotion';
 const Container = styled('div')({
   width: '100%',
   position: 'relative',
+  minHeight: '100%',
 });
 
-const List = styled('div')({
-  borderBottom: '1px solid rgb(234, 234, 234)',
+const List = styled('div')(({ theme }) => ({
+  borderBottom: theme.mainBorder,
   flexWrap: 'wrap',
   display: 'flex',
-});
+}));
 
 const Item = styled('button')(
   ({ active }) =>
@@ -22,9 +23,7 @@ const Item = styled('button')(
           fontWeight: 600,
         }
       : {},
-  {
-    color: 'rgb(68, 68, 68)',
-    fontSize: '11px',
+  ({ theme }) => ({
     textDecoration: 'none',
     textTransform: 'uppercase',
     padding: '10px 15px',
@@ -33,9 +32,16 @@ const Item = styled('button')(
     fontWeight: 500,
     opacity: 0.7,
     border: 'none',
+    borderTop: '3px solid transparent',
+    borderBottom: '3px solid transparent',
     background: 'none',
     flex: 1,
-  }
+
+    '&:focus': {
+      outline: '0 none',
+      borderBottom: `3px solid ${theme.highlightColor}`,
+    },
+  })
 );
 
 class Tabs extends Component {

@@ -4,7 +4,7 @@ import addons from '@storybook/addons';
 import Events from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 
-import { CHECK_EVENT_ID, RERUN_EVENT_ID } from './shared';
+import { CHECK_EVENT_ID, REQUEST_CHECK_EVENT_ID } from './shared';
 
 let axeOptions = {};
 
@@ -23,11 +23,10 @@ const runA11yCheck = () => {
 
 const a11ySubscription = () => {
   const channel = addons.getChannel();
-  channel.on(Events.STORY_RENDERED, runA11yCheck);
-  channel.on(RERUN_EVENT_ID, runA11yCheck);
+  channel.on(REQUEST_CHECK_EVENT_ID, runA11yCheck);
+
   return () => {
-    channel.removeListener(Events.STORY_RENDERED, runA11yCheck);
-    channel.removeListener(RERUN_EVENT_ID, runA11yCheck);
+    channel.removeListener(REQUEST_CHECK_EVENT_ID, runA11yCheck);
   };
 };
 

@@ -5,12 +5,12 @@ import Panel from './components/Panel';
 import { ADDON_ID, PANEL_ID } from './shared';
 
 function init() {
-  addons.register(ADDON_ID, () => {
+  addons.register(ADDON_ID, api => {
+    const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Accessibility',
-      render() {
-        return <Panel />;
-      },
+      // eslint-disable-next-line react/prop-types
+      render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
     });
   });
 }

@@ -3,5 +3,6 @@ const ADDON_ID = '@storybook/addon-a11y';
 const PANEL_ID = `${ADDON_ID}/panel`;
 const CHECK_EVENT_ID = `${ADDON_ID}/check`;
 const RERUN_EVENT_ID = `${ADDON_ID}/rerun`;
+const REQUEST_CHECK_EVENT_ID = `${ADDON_ID}/request-check`;
 
-export { ADDON_ID, PANEL_ID, CHECK_EVENT_ID, RERUN_EVENT_ID };
+export { ADDON_ID, PANEL_ID, CHECK_EVENT_ID, RERUN_EVENT_ID, REQUEST_CHECK_EVENT_ID };
diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -25,7 +25,7 @@
     "@storybook/core-events": "4.0.0-alpha.8",
     "babel-runtime": "^6.26.0",
     "deep-equal": "^1.0.1",
-    "emotion": "^9.1.3",
+    "emotion-theming": "^9.1.2",
     "global": "^4.3.2",
     "lodash.isequal": "^4.5.0",
     "make-error": "^1.3.4",