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

"use strict";

var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));

var _emotionTheming = require("emotion-theming");

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

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

var _map = _interopRequireDefault(require("lodash/map"));

var _groupBy = _interopRequireDefault(require("lodash/groupBy"));

var _themes = require("@roo-ui/themes");

var allIcons = _interopRequireWildcard(require("@roo-ui/icons"));

var _2 = require("..");

var _3 = _interopRequireDefault(require("."));

var _README = _interopRequireDefault(require("./README.md"));

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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

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; }

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

var groupedPaths = (0, _groupBy.default)((0, _map.default)(allIcons, function (_ref, name) {
  var category = _ref.category;
  return {
    category: category,
    name: name
  };
}), 'category');
var Grid = (0, _styledBase.default)("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__*/
0, _styledBase.default)(_2.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 = (0, _emotionTheming.withTheme)(function (_ref2) {
  var theme = _ref2.theme;
  return _react.default.createElement(Grid, null, (0, _map.default)(theme.icons, function (_, name) {
    return _react.default.createElement(_2.Box, {
      p: 4,
      key: name
    }, _react.default.createElement(_3.default, {
      color: "greys.steel",
      size: 48,
      name: name
    }), _react.default.createElement(Caption, {
      title: name,
      fontSize: "xs",
      color: "greys.steel"
    }, name));
  }));
});

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

(0, _react2.storiesOf)('Components|Icon', module).addDecorator((0, _storybookReadme.withDocs)(_README.default)).add('default icons', function () {
  return _react.default.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'));