wix-style-react/dist/stories/MultiSelect/ExampleThumbVariations.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _MultiSelect = require('wix-style-react/MultiSelect');

var _MultiSelect2 = _interopRequireDefault(_MultiSelect);

var _Heading = require('wix-style-react/Heading');

var _Heading2 = _interopRequireDefault(_Heading);

var _Layout = require('wix-style-react/Layout');

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

exports.default = function () {
  return _react2.default.createElement(
    _Layout.Layout,
    null,
    _react2.default.createElement(
      _Layout.Cell,
      { span: 4 },
      _react2.default.createElement(
        _Heading2.default,
        { appearance: 'H3' },
        'Sizes'
      )
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 8 },
      _react2.default.createElement(
        _Layout.Layout,
        { gap: '10px' },
        _react2.default.createElement(
          _Layout.Cell,
          null,
          _react2.default.createElement(_MultiSelect2.default, {
            tags: [{ id: '1', label: 'tiny-1', size: 'tiny' }, { id: '2', label: 'tiny-2', size: 'tiny' }, { id: '3', label: 'tiny-3', size: 'tiny' }]
          })
        ),
        _react2.default.createElement(
          _Layout.Cell,
          null,
          _react2.default.createElement(_MultiSelect2.default, {
            tags: [{ id: '1', label: 'small-1', size: 'small' }, { id: '2', label: 'small-2', size: 'small' }, { id: '3', label: 'small-3', size: 'small' }]
          })
        ),
        _react2.default.createElement(
          _Layout.Cell,
          null,
          _react2.default.createElement(_MultiSelect2.default, {
            tags: [{ id: '1', label: 'medium-1', size: 'medium' }, { id: '2', label: 'medium-2', size: 'medium' }, { id: '3', label: 'medium-3', size: 'medium' }]
          })
        ),
        _react2.default.createElement(
          _Layout.Cell,
          null,
          _react2.default.createElement(_MultiSelect2.default, {
            tags: [{ id: '1', label: 'large-1', size: 'large' }, { id: '2', label: 'large-2', size: 'large' }, { id: '3', label: 'large-3', size: 'large' }]
          })
        )
      )
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 4 },
      _react2.default.createElement(
        _Heading2.default,
        { appearance: 'H3' },
        'Theme'
      )
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 8 },
      _react2.default.createElement(_MultiSelect2.default, {
        tags: [{ id: '1', label: 'Default' }, { id: '2', label: 'Error theme', theme: 'error' }, { id: '3', label: 'Warning theme', theme: 'warning' }]
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 4 },
      _react2.default.createElement(
        _Heading2.default,
        { appearance: 'H3' },
        'Removable / Disabled'
      )
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 8 },
      _react2.default.createElement(_MultiSelect2.default, {
        tags: [{ id: '1', label: 'Removable' }, { id: '2', label: 'Non-Removable', removable: false }, { id: '3', label: 'Disabled', disabled: true }]
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 4 },
      _react2.default.createElement(
        _Heading2.default,
        { appearance: 'H3' },
        'With Thumb'
      )
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 8 },
      _react2.default.createElement(_MultiSelect2.default, {
        tags: [{
          id: '1',
          label: 'Green',
          thumb: _react2.default.createElement('div', {
            style: {
              backgroundColor: 'green',
              height: '100%',
              width: '100%'
            }
          })
        }, {
          id: '2',
          label: 'Red',
          thumb: _react2.default.createElement('div', {
            style: {
              backgroundColor: 'red',
              height: '100%',
              width: '100%'
            }
          })
        }, {
          id: '3',
          label: 'Yellow',
          thumb: _react2.default.createElement('div', {
            style: {
              backgroundColor: 'yellow',
              height: '100%',
              width: '100%'
            }
          })
        }]
      })
    )
  );
};