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

wix-style-react

/* eslint-disable react/prop-types */
import React from 'react';
import { storiesOf } from '@storybook/react';

import { getTestStoryKind } from '../storiesHierarchy';
import { storySettings, testStories } from './storySettings';
import Thumbnail from 'wix-style-react/Thumbnail';
import { Layout, Cell } from 'wix-style-react/Layout';
import { getImageUrl } from './examples';

var kind = getTestStoryKind(storySettings);

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