'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _addonKnobs = require('@storybook/addon-knobs');

var _SidebarHeading = require('../../atoms/headings/SidebarHeading');

var _SidebarHeading2 = _interopRequireDefault(_SidebarHeading);

var _index = require('./index');

var _colors = require('./colors.json');

var _ColorGradients = require('./ColorGradients.md');

var _ColorGradients2 = _interopRequireDefault(_ColorGradients);

require('./styles.css');

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

(0, _react3.storiesOf)('brand|colors', module).addDecorator((0, _addonKnobs.withKnobs)({ escapeHTML: false })).add('Colors', function () {
  return _react2.default.createElement(
    _react.Fragment,
    null,
    _react2.default.createElement(_SidebarHeading2.default, { title: 'Mayflower Brand Colors', level: 2 }),
    _react2.default.createElement(
      'ul',
      { className: 'sg-colors' },

      // eslint-disable-next-line react/no-array-index-key
      _colors.themeColors.map(function (color, i) {
        return _react2.default.createElement(_index.ColorSwatch, _extends({ key: 'themeColors' + i }, color, { variable: color.token }));
      })
    ),
    _react2.default.createElement(_SidebarHeading2.default, { title: 'Theme Colors Usage', level: 2 }),
    _react2.default.createElement(
      'ul',
      { className: 'sg-colors' },

      // eslint-disable-next-line react/no-array-index-key
      _colors.primaryColors.map(function (color, i) {
        return _react2.default.createElement(_index.ColorSwatch, _extends({ key: 'primaryColors' + i }, color));
      })
    ),
    _react2.default.createElement(
      'ul',
      { className: 'sg-colors' },

      // eslint-disable-next-line react/no-array-index-key
      _colors.primaryAltColors.map(function (color, i) {
        return _react2.default.createElement(_index.ColorSwatch, _extends({ key: 'primaryAltColors' + i }, color));
      })
    ),
    _react2.default.createElement(
      'ul',
      { className: 'sg-colors' },

      // eslint-disable-next-line react/no-array-index-key
      _colors.highLightColors.map(function (color, i) {
        return _react2.default.createElement(_index.ColorSwatch, _extends({ key: 'highLightColors' + i }, color));
      })
    ),
    _react2.default.createElement(_SidebarHeading2.default, { title: 'Gray Scale Colors', level: 2 }),
    _react2.default.createElement(
      'ul',
      { className: 'sg-colors' },

      // eslint-disable-next-line react/no-array-index-key
      _colors.grayScaleColors.map(function (color, i) {
        return _react2.default.createElement(_index.ColorSwatch, _extends({ key: 'grayScaleColors' + i }, color));
      })
    ),
    _react2.default.createElement(_SidebarHeading2.default, { title: 'Utility Colors', level: 2 }),
    _react2.default.createElement(
      'ul',
      { className: 'sg-colors' },

      // eslint-disable-next-line react/no-array-index-key
      _colors.utilityColors.map(function (color, i) {
        return _react2.default.createElement(_index.ColorSwatch, _extends({ key: 'utilityColors' + i }, color));
      })
    )
  );
}).add('Gradients (Light)', function () {
  return _react2.default.createElement(
    _react.Fragment,
    null,
    _colors.themeColors.map(function (_ref, i) {
      var token = _ref.token,
          name = _ref.name;

      var props = {
        token: token.match(/\$(.*)/)[1],
        name: name,
        effect: 'tint'
      };
      return (
        // eslint-disable-next-line react/no-array-index-key
        _react2.default.createElement(_index.GradientSpectrum, _extends({}, props, { key: 'spectrum_' + token + i }))
      );
    })
  );
}, { info: _ColorGradients2.default }).add('Gradients (Dark)', function () {
  return _react2.default.createElement(
    _react.Fragment,
    null,
    _colors.themeColors.map(function (_ref2, i) {
      var token = _ref2.token,
          name = _ref2.name;

      var props = {
        token: token.match(/\$(.*)/)[1],
        name: name,
        effect: 'shade'
      };
      return (
        // eslint-disable-next-line react/no-array-index-key
        _react2.default.createElement(_index.GradientSpectrum, _extends({}, props, { key: 'spectrum_' + token + i }))
      );
    })
  );
}, { info: _ColorGradients2.default });