wix-style-react/dist/stories/IconButton/testStory.js

wix-style-react

'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 _storiesHierarchy = require('../storiesHierarchy');

var _storySettings = require('./storySettings');

var _IconButton = require('../../src/IconButton');

var _IconButton2 = _interopRequireDefault(_IconButton);

var _Layout = require('../../src/Layout');

var _AddChannel = require('wix-style-react/new-icons/AddChannel');

var _AddChannel2 = _interopRequireDefault(_AddChannel);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /* eslint-disable react/prop-types */


var kind = (0, _storiesHierarchy.getTestStoryKind)(_storySettings.storySettings);
var dataHook = 'story-button-test';

var TestContainer = function TestContainer(_ref) {
  var children = _ref.children;
  return _react2.default.createElement(
    'div',
    {
      dataHook: dataHook,
      style: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: '#f0f4f7'
      }
    },
    children
  );
};

var skins = ['standard', 'inverted', 'light'];

var ButtonBlock = function ButtonBlock(values) {
  var title = values.title,
      rest = _objectWithoutProperties(values, ['title']);

  return _react2.default.createElement(
    _Layout.Layout,
    null,
    _react2.default.createElement(
      _Layout.Cell,
      null,
      _react2.default.createElement(
        'h1',
        { style: { fontSize: '30px', margin: '15px 5px' } },
        title
      )
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 6 },
      skins.map(function (skin) {
        return _react2.default.createElement(
          'div',
          { style: { margin: '5px 0' } },
          _react2.default.createElement(
            _IconButton2.default,
            _extends({}, rest, { skin: skin }),
            _react2.default.createElement(_AddChannel2.default, null)
          )
        );
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 6 },
      skins.map(function (skin) {
        return _react2.default.createElement(
          'div',
          { style: { margin: '5px 0' } },
          _react2.default.createElement(
            _IconButton2.default,
            _extends({}, rest, { skin: skin, disabled: true }),
            _react2.default.createElement(_AddChannel2.default, null)
          )
        );
      })
    )
  );
};

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.ICONBUTTON_SKINS, function () {
  return _react2.default.createElement(
    TestContainer,
    null,
    _react2.default.createElement(
      'div',
      { style: { marginLeft: '10px' } },
      _react2.default.createElement(
        _Layout.Layout,
        null,
        _react2.default.createElement(ButtonBlock, { title: 'Primary' }),
        _react2.default.createElement(ButtonBlock, { priority: 'secondary', title: 'Secondary' })
      )
    )
  );
});

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.ICONBUTTON_SIZES, function () {
  return _react2.default.createElement(
    TestContainer,
    null,
    _react2.default.createElement(
      'div',
      { style: { marginLeft: '10px' } },
      _react2.default.createElement(
        _Layout.Layout,
        null,
        _react2.default.createElement(ButtonBlock, { size: 'small', title: 'Small' }),
        _react2.default.createElement(ButtonBlock, { title: 'Medium' })
      )
    )
  );
});

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.ICONBUTTON_AS, function () {
  return _react2.default.createElement(
    TestContainer,
    null,
    _react2.default.createElement(
      'div',
      { style: { marginLeft: '10px' } },
      _react2.default.createElement(
        _Layout.Layout,
        null,
        _react2.default.createElement(ButtonBlock, { as: 'a', title: 'as Anchor (primary)' }),
        _react2.default.createElement(ButtonBlock, {
          as: 'a',
          priority: 'secondary',
          title: 'as Anchor (secondary)'
        })
      )
    )
  );
});