@roo-ui/components/dist/Icon/Icon.story.js

'use strict';

var _templateObject = _taggedTemplateLiteral(['\n  font-family: monospace;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n'], ['\n  font-family: monospace;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n']);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _storybookReadme = require('storybook-readme');

var _map = require('lodash/map');

var _map2 = _interopRequireDefault(_map);

var _groupBy = require('lodash/groupBy');

var _groupBy2 = _interopRequireDefault(_groupBy);

var _icons = require('@roo-ui/icons');

var _icons2 = _interopRequireDefault(_icons);

var _ = require('..');

var _2 = require('.');

var _3 = _interopRequireDefault(_2);

var _README = require('./README.md');

var _README2 = _interopRequireDefault(_README);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var groupedPaths = (0, _groupBy2.default)((0, _map2.default)(_icons2.default, function (_ref, name) {
  var category = _ref.category;
  return { category: category, name: name };
}), 'category');

var Grid = _styledComponents2.default.div.withConfig({
  displayName: 'Iconstory__Grid'
})(['display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));']);

var Caption = _.Paragraph.extend(_templateObject);

var renderIcons = function renderIcons(group) {
  return function () {
    return _react2.default.createElement(
      Grid,
      null,
      groupedPaths[group].map(function (_ref2) {
        var name = _ref2.name;
        return _react2.default.createElement(
          _.Box,
          { p: 4 },
          _react2.default.createElement(_3.default, { color: 'grey.1', size: 48, name: name }),
          _react2.default.createElement(
            Caption,
            { title: name, fontSize: 'xs', color: 'grey.1' },
            name
          )
        );
      })
    );
  };
};

(0, _react3.storiesOf)('Components|Icon', module).addDecorator((0, _storybookReadme.withDocs)(_README2.default)).add('action', renderIcons('action')).add('alert', renderIcons('alert')).add('av', renderIcons('av')).add('communication', renderIcons('communication')).add('content', renderIcons('content')).add('device', renderIcons('device')).add('editor', renderIcons('editor')).add('file', renderIcons('file')).add('hardware', renderIcons('hardware')).add('image', renderIcons('image')).add('maps', renderIcons('maps')).add('navigation', renderIcons('navigation')).add('notification', renderIcons('notification')).add('places', renderIcons('places')).add('rating', renderIcons('rating')).add('social', renderIcons('social')).add('toggle', renderIcons('toggle')).add('qantas', renderIcons('qantas'));