wix-style-react/dist/stories/Button/testButton.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 _Button = require('../../src/Button');

var _Button2 = _interopRequireDefault(_Button);

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', 'destructive', 'premium', 'dark', 'light', 'transparent'];

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(
            _Button2.default,
            _extends({}, rest, { upgrade: true, skin: skin }),
            'Click me'
          )
        );
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 6 },
      skins.map(function (skin) {
        return _react2.default.createElement(
          'div',
          { style: { margin: '5px 0' } },
          _react2.default.createElement(
            _Button2.default,
            _extends({}, rest, { upgrade: true, skin: skin, disabled: true }),
            'Click me'
          )
        );
      })
    )
  );
};

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.BUTTON_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, { priority: 'primary', title: 'Primary' }),
        _react2.default.createElement(ButtonBlock, { priority: 'secondary', title: 'Secondary' })
      )
    )
  );
});

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.BUTTON_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: 'large', title: 'Large' }),
        _react2.default.createElement(ButtonBlock, { size: 'medium', title: 'Medium' })
      ),
      _react2.default.createElement(
        _Layout.Layout,
        null,
        _react2.default.createElement(ButtonBlock, { size: 'small', title: 'Small' })
      )
    )
  );
});

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.BUTTON_AFFIXES, function () {
  return _react2.default.createElement(
    TestContainer,
    null,
    _react2.default.createElement(
      'div',
      { style: { marginLeft: '10px' } },
      _react2.default.createElement(
        _Layout.Layout,
        null,
        _react2.default.createElement(ButtonBlock, {
          priority: 'primary',
          size: 'small',
          title: 'Affixes (small)',
          suffixIcon: _react2.default.createElement(_AddChannel2.default, null),
          prefixIcon: _react2.default.createElement(_AddChannel2.default, null)
        }),
        _react2.default.createElement(ButtonBlock, {
          priority: 'primary',
          size: 'medium',
          title: 'Affixes (medium)',
          suffixIcon: _react2.default.createElement(_AddChannel2.default, null),
          prefixIcon: _react2.default.createElement(_AddChannel2.default, null)
        })
      ),
      _react2.default.createElement(
        _Layout.Layout,
        null,
        _react2.default.createElement(
          _Layout.Cell,
          { span: 5 },
          _react2.default.createElement(ButtonBlock, {
            priority: 'primary',
            size: 'large',
            title: 'Affixes (large)',
            suffixIcon: _react2.default.createElement(_AddChannel2.default, null),
            prefixIcon: _react2.default.createElement(_AddChannel2.default, null)
          })
        )
      )
    )
  );
});

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.BUTTON_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', priority: 'primary', title: 'as Anchor (primary)' }),
        _react2.default.createElement(ButtonBlock, {
          as: 'a',
          priority: 'secondary',
          title: 'as Anchor (secondary)'
        })
      )
    )
  );
});