"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports._90X90 = exports._84X84 = exports._60X60 = exports._48X48 = exports._36X24 = exports._24X24 = exports._240X240 = exports._120X120 = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var Illustrations = _interopRequireWildcard(require("@teamleader/ui-illustrations"));

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

var _utils = require("../../../.storybook/utils");

var _box = _interopRequireDefault(require("../box"));

var _typography = require("../typography");

var _description = _interopRequireDefault(require("./description.md"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

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

var gridStyles = {
  display: 'flex',
  flexWrap: 'wrap'
};
var itemProps = {
  alignItems: 'center',
  display: 'inline-flex',
  marginBottom: 3,
  marginRight: 3
};
var itemStyles = {
  width: '480px',
  whiteSpace: 'nowrap'
};
var _default = {
  title: (0, _utils.addStoryInGroup)(_utils.LOW_LEVEL_BLOCKS, 'Illustration'),
  parameters: {
    docs: {
      description: {
        component: _description.default
      }
    }
  }
};
exports.default = _default;

var _24X24 = function _24X24() {
  return /*#__PURE__*/_react.default.createElement(_box.default, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('24X24');
  }).map(function (key) {
    var Illustration = Illustrations[key];
    return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/_react.default.createElement(_box.default, {
      flex: "0 0 24px"
    }, /*#__PURE__*/_react.default.createElement(Illustration, null)), /*#__PURE__*/_react.default.createElement(_typography.TextSmall, {
      marginLeft: 3
    }, key));
  }));
};

exports._24X24 = _24X24;
_24X24.storyName = '24x24';

var _36X24 = function _36X24() {
  return /*#__PURE__*/_react.default.createElement(_box.default, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('36X24');
  }).map(function (key) {
    var Illustration = Illustrations[key];
    return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/_react.default.createElement(_box.default, {
      flex: "0 0 36px"
    }, /*#__PURE__*/_react.default.createElement(Illustration, null)), /*#__PURE__*/_react.default.createElement(_typography.TextSmall, {
      marginLeft: 3
    }, key));
  }));
};

exports._36X24 = _36X24;
_36X24.storyName = '36x24';

var _48X48 = function _48X48() {
  return /*#__PURE__*/_react.default.createElement(_box.default, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('48X48');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/_react.default.createElement(_box.default, {
      flex: "0 0 48px"
    }, /*#__PURE__*/_react.default.createElement(IllustrationToRender, null)), /*#__PURE__*/_react.default.createElement(_typography.TextSmall, {
      marginLeft: 3
    }, key));
  }));
};

exports._48X48 = _48X48;
_48X48.storyName = '48x48';

var _60X60 = function _60X60() {
  return /*#__PURE__*/_react.default.createElement(_box.default, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('60X60');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/_react.default.createElement(_box.default, {
      flex: "0 0 60px"
    }, /*#__PURE__*/_react.default.createElement(IllustrationToRender, null)), /*#__PURE__*/_react.default.createElement(_typography.TextSmall, {
      marginLeft: 3
    }, key));
  }));
};

exports._60X60 = _60X60;
_60X60.storyName = '60x60';

var _84X84 = function _84X84() {
  return /*#__PURE__*/_react.default.createElement(_box.default, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('84X84');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/_react.default.createElement(_box.default, {
      flex: "0 0 84px"
    }, /*#__PURE__*/_react.default.createElement(IllustrationToRender, null)), /*#__PURE__*/_react.default.createElement(_typography.TextSmall, {
      marginLeft: 3
    }, key));
  }));
};

exports._84X84 = _84X84;
_84X84.storyName = '84x84';

var _90X90 = function _90X90() {
  return /*#__PURE__*/_react.default.createElement(_box.default, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('90X90');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/_react.default.createElement(_box.default, {
      flex: "0 0 90px"
    }, /*#__PURE__*/_react.default.createElement(IllustrationToRender, null)), /*#__PURE__*/_react.default.createElement(_typography.TextSmall, {
      marginLeft: 3
    }, key));
  }));
};

exports._90X90 = _90X90;
_90X90.storyName = '90x90';

var _120X120 = function _120X120() {
  return /*#__PURE__*/_react.default.createElement(_box.default, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('120X120');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/_react.default.createElement(_box.default, {
      flex: "0 0 120px"
    }, /*#__PURE__*/_react.default.createElement(IllustrationToRender, null)), /*#__PURE__*/_react.default.createElement(_typography.TextSmall, {
      marginLeft: 3
    }, key));
  }));
};

exports._120X120 = _120X120;
_120X120.storyName = '120x120';

var _240X240 = function _240X240() {
  return /*#__PURE__*/_react.default.createElement(_box.default, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('240X240');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/_react.default.createElement(_box.default, {
      flex: "0 0 240px"
    }, /*#__PURE__*/_react.default.createElement(IllustrationToRender, null)), /*#__PURE__*/_react.default.createElement(_typography.TextSmall, {
      marginLeft: 3
    }, key));
  }));
};

exports._240X240 = _240X240;
_240X240.storyName = '240x240';