wix-style-react/dist/es/stories/TextButton/testStory.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 TextButton from '../../src/TextButton';
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', 'light', 'premium', 'dark'];

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

storiesOf(kind, module).add(testStories.TEXTBUTTON_SKINS, function () {
  return React.createElement(
    TestContainer,
    null,
    React.createElement(
      'div',
      { style: { marginLeft: '10px' } },
      React.createElement(
        Layout,
        null,
        React.createElement(ButtonBlock, { title: 'Underline: none' }),
        React.createElement(ButtonBlock, { underline: 'onHover', title: 'Underline: onHover' })
      ),
      React.createElement(
        Layout,
        null,
        React.createElement(ButtonBlock, { underline: 'always', title: 'Underline: always' }),
        React.createElement(ButtonBlock, { weight: 'normal', title: 'Weight: normal' })
      )
    )
  );
});

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

storiesOf(kind, module).add(testStories.TEXTBUTTON_AS, function () {
  return React.createElement(
    TestContainer,
    null,
    React.createElement(
      'div',
      { style: { marginLeft: '10px' } },
      React.createElement(
        Layout,
        null,
        React.createElement(ButtonBlock, { as: 'a', title: 'as Anchor (underline:none)' }),
        React.createElement(ButtonBlock, {
          as: 'a',
          underline: 'always',
          title: 'as Anchor (underline: always)'
        })
      )
    )
  );
});