wix-style-react/dist/es/stories/Button/testButton.js

wix-style-react

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

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 */
import React from 'react';
import { storiesOf } from '@storybook/react';

import { getTestStoryKind } from '../storiesHierarchy';
import { storySettings, testStories } from './storySettings';

import Button from '../../src/Button';
import { Layout, Cell } from '../../src/Layout';
import AddChannel from 'wix-style-react/new-icons/AddChannel';

var kind = getTestStoryKind(storySettings);
var dataHook = 'story-button-test';

var TestContainer = function TestContainer(_ref) {
  var children = _ref.children;
  return React.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 React.createElement(
    Layout,
    null,
    React.createElement(
      Cell,
      null,
      React.createElement(
        'h1',
        { style: { fontSize: '30px', margin: '15px 5px' } },
        title
      )
    ),
    React.createElement(
      Cell,
      { span: 6 },
      skins.map(function (skin) {
        return React.createElement(
          'div',
          { style: { margin: '5px 0' } },
          React.createElement(
            Button,
            _extends({}, rest, { upgrade: true, skin: skin }),
            'Click me'
          )
        );
      })
    ),
    React.createElement(
      Cell,
      { span: 6 },
      skins.map(function (skin) {
        return React.createElement(
          'div',
          { style: { margin: '5px 0' } },
          React.createElement(
            Button,
            _extends({}, rest, { upgrade: true, skin: skin, disabled: true }),
            'Click me'
          )
        );
      })
    )
  );
};

storiesOf(kind, module).add(testStories.BUTTON_SKINS, function () {
  return React.createElement(
    TestContainer,
    null,
    React.createElement(
      'div',
      { style: { marginLeft: '10px' } },
      React.createElement(
        Layout,
        null,
        React.createElement(ButtonBlock, { priority: 'primary', title: 'Primary' }),
        React.createElement(ButtonBlock, { priority: 'secondary', title: 'Secondary' })
      )
    )
  );
});

storiesOf(kind, module).add(testStories.BUTTON_SIZES, function () {
  return React.createElement(
    TestContainer,
    null,
    React.createElement(
      'div',
      { style: { marginLeft: '10px' } },
      React.createElement(
        Layout,
        null,
        React.createElement(ButtonBlock, { size: 'large', title: 'Large' }),
        React.createElement(ButtonBlock, { size: 'medium', title: 'Medium' })
      ),
      React.createElement(
        Layout,
        null,
        React.createElement(ButtonBlock, { size: 'small', title: 'Small' })
      )
    )
  );
});

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

storiesOf(kind, module).add(testStories.BUTTON_AS, function () {
  return React.createElement(
    TestContainer,
    null,
    React.createElement(
      'div',
      { style: { marginLeft: '10px' } },
      React.createElement(
        Layout,
        null,
        React.createElement(ButtonBlock, { as: 'a', priority: 'primary', title: 'as Anchor (primary)' }),
        React.createElement(ButtonBlock, {
          as: 'a',
          priority: 'secondary',
          title: 'as Anchor (secondary)'
        })
      )
    )
  );
});