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

import _styled from "@emotion/styled-base";

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import { ThemeProvider, withTheme } from 'emotion-theming';
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withDocs } from 'storybook-readme';
import map from 'lodash/map';
import groupBy from 'lodash/groupBy';
import { qantas } from '@roo-ui/themes';
import * as allIcons from '@roo-ui/icons';
import { Box, Paragraph } from '..';
import Icon from '.';
import README from './README.md';

var themeWithAllIcons = _objectSpread({}, qantas, {
  icons: allIcons
});

var groupedPaths = groupBy(map(allIcons, function (_ref, name) {
  var category = _ref.category;
  return {
    category: category,
    name: name
  };
}), 'category');

var Grid = _styled("div", {
  target: "eup8sy00",
  label: "Grid"
})(process.env.NODE_ENV === "production" ? {
  name: "1dnrxvd",
  styles: "display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));"
} : {
  name: "1dnrxvd",
  styles: "display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9JY29uL0ljb24uc3RvcnkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJ1QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvSWNvbi9JY29uLnN0b3J5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgVGhlbWVQcm92aWRlciwgd2l0aFRoZW1lIH0gZnJvbSAnZW1vdGlvbi10aGVtaW5nJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBzdG9yaWVzT2YgfSBmcm9tICdAc3Rvcnlib29rL3JlYWN0JztcbmltcG9ydCB7IHdpdGhEb2NzIH0gZnJvbSAnc3Rvcnlib29rLXJlYWRtZSc7XG5pbXBvcnQgbWFwIGZyb20gJ2xvZGFzaC9tYXAnO1xuaW1wb3J0IGdyb3VwQnkgZnJvbSAnbG9kYXNoL2dyb3VwQnknO1xuaW1wb3J0IHsgcWFudGFzIH0gZnJvbSAnQHJvby11aS90aGVtZXMnO1xuaW1wb3J0ICogYXMgYWxsSWNvbnMgZnJvbSAnQHJvby11aS9pY29ucyc7XG5cbmltcG9ydCB7IEJveCwgUGFyYWdyYXBoIH0gZnJvbSAnLi4nO1xuaW1wb3J0IEljb24gZnJvbSAnLic7XG5pbXBvcnQgUkVBRE1FIGZyb20gJy4vUkVBRE1FLm1kJztcblxuY29uc3QgdGhlbWVXaXRoQWxsSWNvbnMgPSB7IC4uLnFhbnRhcywgaWNvbnM6IGFsbEljb25zIH07XG5cbmNvbnN0IGdyb3VwZWRQYXRocyA9IGdyb3VwQnkoXG4gIG1hcChhbGxJY29ucywgKHsgY2F0ZWdvcnkgfSwgbmFtZSkgPT4gKHsgY2F0ZWdvcnksIG5hbWUgfSkpLFxuICAnY2F0ZWdvcnknLFxuKTtcblxuY29uc3QgR3JpZCA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KGF1dG8tZmlsbCwgbWlubWF4KDcuNXJlbSwgMWZyKSk7XG5gO1xuXG5jb25zdCBDYXB0aW9uID0gc3R5bGVkKFBhcmFncmFwaClgXG4gIGZvbnQtZmFtaWx5OiBtb25vc3BhY2U7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuYDtcblxuY29uc3QgSWNvbnNJblRoZW1lID0gd2l0aFRoZW1lKCh7IHRoZW1lIH0pID0+IChcbiAgPEdyaWQ+XG4gICAge21hcCh0aGVtZS5pY29ucywgKF8sIG5hbWUpID0+IChcbiAgICAgIDxCb3ggcD17NH0ga2V5PXtuYW1lfT5cbiAgICAgICAgPEljb24gY29sb3I9XCJncmV5cy5zdGVlbFwiIHNpemU9ezQ4fSBuYW1lPXtuYW1lfSAvPlxuICAgICAgICA8Q2FwdGlvbiB0aXRsZT17bmFtZX0gZm9udFNpemU9XCJ4c1wiIGNvbG9yPVwiZ3JleXMuc3RlZWxcIj57bmFtZX08L0NhcHRpb24+XG4gICAgICA8L0JveD5cbiAgICApKX1cbiAgPC9HcmlkPlxuKSk7XG5cbmNvbnN0IHJlbmRlckljb25zSW5DYXRlZ29yeSA9IGdyb3VwID0+ICgpID0+IChcbiAgPEdyaWQ+XG4gICAgPFRoZW1lUHJvdmlkZXIgdGhlbWU9e3RoZW1lV2l0aEFsbEljb25zfT5cbiAgICAgIHtncm91cGVkUGF0aHNbZ3JvdXBdLm1hcCgoeyBuYW1lIH0pID0+IChcbiAgICAgICAgPEJveCBwPXs0fSBrZXk9e25hbWV9PlxuICAgICAgICAgIDxJY29uIGNvbG9yPVwiZ3JleXMuc3RlZWxcIiBzaXplPXs0OH0gbmFtZT17bmFtZX0gLz5cbiAgICAgICAgICA8Q2FwdGlvbiB0aXRsZT17bmFtZX0gZm9udFNpemU9XCJ4c1wiIGNvbG9yPVwiZ3JleXMuc3RlZWxcIj57bmFtZX08L0NhcHRpb24+XG4gICAgICAgIDwvQm94PlxuICAgICAgKSl9XG4gICAgPC9UaGVtZVByb3ZpZGVyPlxuICA8L0dyaWQ+XG4pO1xuXG5zdG9yaWVzT2YoJ0NvbXBvbmVudHN8SWNvbicsIG1vZHVsZSlcbiAgLmFkZERlY29yYXRvcih3aXRoRG9jcyhSRUFETUUpKVxuICAuYWRkKCdkZWZhdWx0IGljb25zJywgKCkgPT4gPEljb25zSW5UaGVtZSAvPilcbiAgLmFkZCgnYWxlcnQnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ2FsZXJ0JykpXG4gIC5hZGQoJ2F2JywgcmVuZGVySWNvbnNJbkNhdGVnb3J5KCdhdicpKVxuICAuYWRkKCdjb21tdW5pY2F0aW9uJywgcmVuZGVySWNvbnNJbkNhdGVnb3J5KCdjb21tdW5pY2F0aW9uJykpXG4gIC5hZGQoJ2NvbnRlbnQnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ2NvbnRlbnQnKSlcbiAgLmFkZCgnZGV2aWNlJywgcmVuZGVySWNvbnNJbkNhdGVnb3J5KCdkZXZpY2UnKSlcbiAgLmFkZCgnZWRpdG9yJywgcmVuZGVySWNvbnNJbkNhdGVnb3J5KCdlZGl0b3InKSlcbiAgLmFkZCgnZmlsZScsIHJlbmRlckljb25zSW5DYXRlZ29yeSgnZmlsZScpKVxuICAuYWRkKCdoYXJkd2FyZScsIHJlbmRlckljb25zSW5DYXRlZ29yeSgnaGFyZHdhcmUnKSlcbiAgLmFkZCgnaW1hZ2UnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ2ltYWdlJykpXG4gIC5hZGQoJ21hcHMnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ21hcHMnKSlcbiAgLmFkZCgnbmF2aWdhdGlvbicsIHJlbmRlckljb25zSW5DYXRlZ29yeSgnbmF2aWdhdGlvbicpKVxuICAuYWRkKCdub3RpZmljYXRpb24nLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ25vdGlmaWNhdGlvbicpKVxuICAuYWRkKCdwbGFjZXMnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3BsYWNlcycpKVxuICAuYWRkKCdyYXRpbmcnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3JhdGluZycpKVxuICAuYWRkKCdzb2NpYWwnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3NvY2lhbCcpKVxuICAuYWRkKCd0b2dnbGUnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3RvZ2dsZScpKVxuICAuYWRkKCdxYW50YXMnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3FhbnRhcycpKTtcbiJdfQ== */"
});

var Caption =
/*#__PURE__*/
_styled(Paragraph, {
  target: "eup8sy01",
  label: "Caption"
})(process.env.NODE_ENV === "production" ? {
  name: "zavpsn",
  styles: "font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
} : {
  name: "zavpsn",
  styles: "font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9JY29uL0ljb24uc3RvcnkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJpQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvSWNvbi9JY29uLnN0b3J5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgVGhlbWVQcm92aWRlciwgd2l0aFRoZW1lIH0gZnJvbSAnZW1vdGlvbi10aGVtaW5nJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBzdG9yaWVzT2YgfSBmcm9tICdAc3Rvcnlib29rL3JlYWN0JztcbmltcG9ydCB7IHdpdGhEb2NzIH0gZnJvbSAnc3Rvcnlib29rLXJlYWRtZSc7XG5pbXBvcnQgbWFwIGZyb20gJ2xvZGFzaC9tYXAnO1xuaW1wb3J0IGdyb3VwQnkgZnJvbSAnbG9kYXNoL2dyb3VwQnknO1xuaW1wb3J0IHsgcWFudGFzIH0gZnJvbSAnQHJvby11aS90aGVtZXMnO1xuaW1wb3J0ICogYXMgYWxsSWNvbnMgZnJvbSAnQHJvby11aS9pY29ucyc7XG5cbmltcG9ydCB7IEJveCwgUGFyYWdyYXBoIH0gZnJvbSAnLi4nO1xuaW1wb3J0IEljb24gZnJvbSAnLic7XG5pbXBvcnQgUkVBRE1FIGZyb20gJy4vUkVBRE1FLm1kJztcblxuY29uc3QgdGhlbWVXaXRoQWxsSWNvbnMgPSB7IC4uLnFhbnRhcywgaWNvbnM6IGFsbEljb25zIH07XG5cbmNvbnN0IGdyb3VwZWRQYXRocyA9IGdyb3VwQnkoXG4gIG1hcChhbGxJY29ucywgKHsgY2F0ZWdvcnkgfSwgbmFtZSkgPT4gKHsgY2F0ZWdvcnksIG5hbWUgfSkpLFxuICAnY2F0ZWdvcnknLFxuKTtcblxuY29uc3QgR3JpZCA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KGF1dG8tZmlsbCwgbWlubWF4KDcuNXJlbSwgMWZyKSk7XG5gO1xuXG5jb25zdCBDYXB0aW9uID0gc3R5bGVkKFBhcmFncmFwaClgXG4gIGZvbnQtZmFtaWx5OiBtb25vc3BhY2U7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuYDtcblxuY29uc3QgSWNvbnNJblRoZW1lID0gd2l0aFRoZW1lKCh7IHRoZW1lIH0pID0+IChcbiAgPEdyaWQ+XG4gICAge21hcCh0aGVtZS5pY29ucywgKF8sIG5hbWUpID0+IChcbiAgICAgIDxCb3ggcD17NH0ga2V5PXtuYW1lfT5cbiAgICAgICAgPEljb24gY29sb3I9XCJncmV5cy5zdGVlbFwiIHNpemU9ezQ4fSBuYW1lPXtuYW1lfSAvPlxuICAgICAgICA8Q2FwdGlvbiB0aXRsZT17bmFtZX0gZm9udFNpemU9XCJ4c1wiIGNvbG9yPVwiZ3JleXMuc3RlZWxcIj57bmFtZX08L0NhcHRpb24+XG4gICAgICA8L0JveD5cbiAgICApKX1cbiAgPC9HcmlkPlxuKSk7XG5cbmNvbnN0IHJlbmRlckljb25zSW5DYXRlZ29yeSA9IGdyb3VwID0+ICgpID0+IChcbiAgPEdyaWQ+XG4gICAgPFRoZW1lUHJvdmlkZXIgdGhlbWU9e3RoZW1lV2l0aEFsbEljb25zfT5cbiAgICAgIHtncm91cGVkUGF0aHNbZ3JvdXBdLm1hcCgoeyBuYW1lIH0pID0+IChcbiAgICAgICAgPEJveCBwPXs0fSBrZXk9e25hbWV9PlxuICAgICAgICAgIDxJY29uIGNvbG9yPVwiZ3JleXMuc3RlZWxcIiBzaXplPXs0OH0gbmFtZT17bmFtZX0gLz5cbiAgICAgICAgICA8Q2FwdGlvbiB0aXRsZT17bmFtZX0gZm9udFNpemU9XCJ4c1wiIGNvbG9yPVwiZ3JleXMuc3RlZWxcIj57bmFtZX08L0NhcHRpb24+XG4gICAgICAgIDwvQm94PlxuICAgICAgKSl9XG4gICAgPC9UaGVtZVByb3ZpZGVyPlxuICA8L0dyaWQ+XG4pO1xuXG5zdG9yaWVzT2YoJ0NvbXBvbmVudHN8SWNvbicsIG1vZHVsZSlcbiAgLmFkZERlY29yYXRvcih3aXRoRG9jcyhSRUFETUUpKVxuICAuYWRkKCdkZWZhdWx0IGljb25zJywgKCkgPT4gPEljb25zSW5UaGVtZSAvPilcbiAgLmFkZCgnYWxlcnQnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ2FsZXJ0JykpXG4gIC5hZGQoJ2F2JywgcmVuZGVySWNvbnNJbkNhdGVnb3J5KCdhdicpKVxuICAuYWRkKCdjb21tdW5pY2F0aW9uJywgcmVuZGVySWNvbnNJbkNhdGVnb3J5KCdjb21tdW5pY2F0aW9uJykpXG4gIC5hZGQoJ2NvbnRlbnQnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ2NvbnRlbnQnKSlcbiAgLmFkZCgnZGV2aWNlJywgcmVuZGVySWNvbnNJbkNhdGVnb3J5KCdkZXZpY2UnKSlcbiAgLmFkZCgnZWRpdG9yJywgcmVuZGVySWNvbnNJbkNhdGVnb3J5KCdlZGl0b3InKSlcbiAgLmFkZCgnZmlsZScsIHJlbmRlckljb25zSW5DYXRlZ29yeSgnZmlsZScpKVxuICAuYWRkKCdoYXJkd2FyZScsIHJlbmRlckljb25zSW5DYXRlZ29yeSgnaGFyZHdhcmUnKSlcbiAgLmFkZCgnaW1hZ2UnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ2ltYWdlJykpXG4gIC5hZGQoJ21hcHMnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ21hcHMnKSlcbiAgLmFkZCgnbmF2aWdhdGlvbicsIHJlbmRlckljb25zSW5DYXRlZ29yeSgnbmF2aWdhdGlvbicpKVxuICAuYWRkKCdub3RpZmljYXRpb24nLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ25vdGlmaWNhdGlvbicpKVxuICAuYWRkKCdwbGFjZXMnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3BsYWNlcycpKVxuICAuYWRkKCdyYXRpbmcnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3JhdGluZycpKVxuICAuYWRkKCdzb2NpYWwnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3NvY2lhbCcpKVxuICAuYWRkKCd0b2dnbGUnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3RvZ2dsZScpKVxuICAuYWRkKCdxYW50YXMnLCByZW5kZXJJY29uc0luQ2F0ZWdvcnkoJ3FhbnRhcycpKTtcbiJdfQ== */"
});

var IconsInTheme = withTheme(function (_ref2) {
  var theme = _ref2.theme;
  return React.createElement(Grid, null, map(theme.icons, function (_, name) {
    return React.createElement(Box, {
      p: 4,
      key: name
    }, React.createElement(Icon, {
      color: "greys.steel",
      size: 48,
      name: name
    }), React.createElement(Caption, {
      title: name,
      fontSize: "xs",
      color: "greys.steel"
    }, name));
  }));
});

var renderIconsInCategory = function renderIconsInCategory(group) {
  return function () {
    return React.createElement(Grid, null, React.createElement(ThemeProvider, {
      theme: themeWithAllIcons
    }, groupedPaths[group].map(function (_ref3) {
      var name = _ref3.name;
      return React.createElement(Box, {
        p: 4,
        key: name
      }, React.createElement(Icon, {
        color: "greys.steel",
        size: 48,
        name: name
      }), React.createElement(Caption, {
        title: name,
        fontSize: "xs",
        color: "greys.steel"
      }, name));
    })));
  };
};

storiesOf('Components|Icon', module).addDecorator(withDocs(README)).add('default icons', function () {
  return React.createElement(IconsInTheme, null);
}).add('alert', renderIconsInCategory('alert')).add('av', renderIconsInCategory('av')).add('communication', renderIconsInCategory('communication')).add('content', renderIconsInCategory('content')).add('device', renderIconsInCategory('device')).add('editor', renderIconsInCategory('editor')).add('file', renderIconsInCategory('file')).add('hardware', renderIconsInCategory('hardware')).add('image', renderIconsInCategory('image')).add('maps', renderIconsInCategory('maps')).add('navigation', renderIconsInCategory('navigation')).add('notification', renderIconsInCategory('notification')).add('places', renderIconsInCategory('places')).add('rating', renderIconsInCategory('rating')).add('social', renderIconsInCategory('social')).add('toggle', renderIconsInCategory('toggle')).add('qantas', renderIconsInCategory('qantas'));