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

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _storiesHierarchy = require('../storiesHierarchy');

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

var _Thumbnail = require('wix-style-react/Thumbnail');

var _Thumbnail2 = _interopRequireDefault(_Thumbnail);

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

var _examples = require('./examples');

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

var kind = (0, _storiesHierarchy.getTestStoryKind)(_storySettings.storySettings); /* eslint-disable react/prop-types */


(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.multipleThumbnails, function () {
  return _react2.default.createElement(
    _Layout.Layout,
    null,
    _react2.default.createElement(
      _Layout.Cell,
      { span: 4 },
      _react2.default.createElement(_Thumbnail2.default, {
        title: 'Thumbnail Title',
        description: 'Not selected',
        image: (0, _examples.getImageUrl)(234, 72)
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 4 },
      _react2.default.createElement(_Thumbnail2.default, {
        title: 'Thumbnail Title',
        description: 'Selected',
        image: (0, _examples.getImageUrl)(234, 72),
        selected: true
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 4 },
      _react2.default.createElement(_Thumbnail2.default, {
        title: 'Thumbnail Title',
        description: 'Selected & disabled',
        image: (0, _examples.getImageUrl)(234, 72),
        selected: true,
        disabled: true
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      null,
      _react2.default.createElement(_Thumbnail2.default, {
        dataHook: _storySettings.storySettings.dataHook,
        title: 'Thumbnail Title',
        description: 'Without image',
        width: 270
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      null,
      _react2.default.createElement(_Thumbnail2.default, {
        dataHook: _storySettings.storySettings.dataHook,
        title: 'Thumbnail without description',
        width: 270
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 4 },
      _react2.default.createElement(_Thumbnail2.default, {
        backgroundImage: (0, _examples.getImageUrl)(270, 270),
        selected: true,
        width: 270,
        height: 170
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 4 },
      _react2.default.createElement(_Thumbnail2.default, {
        backgroundImage: (0, _examples.getImageUrl)(270, 270),
        selected: true,
        disabled: true,
        width: 270,
        height: 170
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      null,
      _react2.default.createElement(
        _Layout.Layout,
        { gap: '12px' },
        [1, 2, 3, 4].map(function (n) {
          return _react2.default.createElement(
            _Layout.Cell,
            { key: n, span: 1 },
            _react2.default.createElement(_Thumbnail2.default, {
              size: 'tiny',
              backgroundImage: (0, _examples.getImageUrl)(64, 64),
              selected: n === 2,
              disabled: n === 4,
              width: 64,
              height: 64
            })
          );
        })
      )
    )
  );
});