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

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 = {
  container: {
    fontSize: '12px',
  },
  empty: {
    fontSize: '11px',
    padding: '20px 12px',
    width: '100%',
    display: 'block',
    textAlign: 'center',
    textTransform: 'uppercase',
  },
};

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>
    ) : (
      <span style={styles.empty}>{empty}</span>
    )}
    <RerunButton onClick={onRerunClick}>RE-RUN</RerunButton>
  </Fragment>
);

Report.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      description: PropTypes.string,
      nodes: PropTypes.array,
      tags: PropTypes.array,
    })
  ).isRequired,
  empty: PropTypes.string.isRequired,
  passes: PropTypes.bool.isRequired,
};

export default Report;