Merge branch 'master' into merge-angular-cli-webpack-config

.editorconfig

@@ -3,6 +3,6 @@ root = true
 [*]
 end_of_line = lf
 
-[*.{js,json,ts,html}]
+[*.{js,json,ts,vue,html}]
 indent_style = space
 indent_size = 2

addons/a11y/package.json

@@ -27,6 +27,7 @@
  "dependencies": {
  "@storybook/components": "^3.4.0-alpha.4",
  "axe-core": "^2.6.1",
+ "glamorous": "^4.11.2",
  "prop-types": "^15.6.0"
  },
  "peerDependencies": {

addons/a11y/src/components/Panel.js

@@ -6,10 +6,10 @@ import Report from './Report';
 
 const styles = {
  passes: {
- color: '#2ecc71',
+ color: '#0D6731',
  },
  violations: {
- color: '#e74c3c',
+ color: '#AC2300',
  },
 };
 
@@ -47,11 +47,11 @@ class Panel extends Component {
  <Tabs
  tabs={[
  {
- label: <span style={styles.violations}>Violations</span>,
+ label: <span style={styles.violations}>{violations.length} Violations</span>,
  panel: <Report passes={false} items={violations} empty="No a11y violations found." />,
  },
  {
- label: <span style={styles.passes}>Passes</span>,
+ label: <span style={styles.passes}>{passes.length} Passes</span>,
  panel: <Report passes items={passes} empty="No a11y check passed" />,
  },
  ]}

addons/a11y/src/components/Report/RerunButton.js

@@ -0,0 +1,17 @@
+import glamorous from 'glamorous';
+
+const RerunButton = glamorous.button({
+ position: 'absolute',
+ bottom: 0,
+ right: 0,
+ border: 'none',
+ borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
+ borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
+ background: 'rgba(255, 255, 255, 0.5)',
+ padding: '5px 10px',
+ borderRadius: '4px 0 0 0',
+ color: 'rgba(0, 0, 0, 0.5)',
+ textTransform: 'uppercase',
+});
+
+export default RerunButton;

addons/a11y/src/components/Report/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-
+import addons from '@storybook/addons';
+import RerunButton from './RerunButton';
 import Item from './Item';
 
 const styles = {
@@ -17,17 +18,23 @@ const styles = {
  },
 };
 
-function Report({ items, empty, passes }) {
- if (items.length) {
- return (
+function onRerunClick() {
+ const channel = addons.getChannel();
+ channel.emit('addon:a11y:rerun');
+}
+
+const Report = ({ items, empty, passes }) => (
+ <Fragment>
+ {items.length ? (
  <div style={styles.container}>
  {items.map(item => <Item passes={passes} item={item} key={item.id} />)}
  </div>
- );
- }
-
- return <span style={styles.empty}>{empty}</span>;
-}
+ ) : (
+ <span style={styles.empty}>{empty}</span>
+ )}
+ <RerunButton onClick={onRerunClick}>Re-run tests</RerunButton>
+ </Fragment>
+);
 
 Report.propTypes = {
  items: PropTypes.arrayOf(

addons/a11y/src/components/Tabs.js

@@ -5,6 +5,7 @@ import { baseFonts } from '@storybook/components';
 const styles = {
  container: {
  width: '100%',
+ position: 'relative',
  ...baseFonts,
  },
  tabs: {

addons/a11y/src/components/WrapStory.js

@@ -15,8 +15,24 @@ class WrapStory extends Component {
  channel: {},
  };
 
- /* eslint-disable react/no-find-dom-node */
+ constructor(props) {
+ super(props);
+ this.runA11yCheck = this.runA11yCheck.bind(this);
+ }
+
  componentDidMount() {
+ const { channel } = this.props;
+ channel.on('addon:a11y:rerun', this.runA11yCheck);
+ this.runA11yCheck();
+ }
+
+ componentWillUnmount() {
+ const { channel } = this.props;
+ channel.removeListener('addon:a11y:rerun', this.runA11yCheck);
+ }
+
+ /* eslint-disable react/no-find-dom-node */
+ runA11yCheck() {
  const { channel } = this.props;
  const wrapper = findDOMNode(this);
 

addons/background/src/index.js

@@ -5,7 +5,7 @@ import addons from '@storybook/addons';
 
 const style = {
  wrapper: {
- overflow: 'scroll',
+ overflow: 'auto',
  position: 'fixed',
  top: 0,
  bottom: 0,

addons/info/package.json

@@ -18,6 +18,7 @@
  "@storybook/client-logger": "^3.4.0-alpha.4",
  "@storybook/components": "^3.4.0-alpha.4",
  "babel-runtime": "^6.26.0",
+ "glamorous": "^4.11.2",
  "global": "^4.3.2",
  "marksy": "^6.0.3",
  "nested-object-assign": "^1.0.1",