wix-style-react/src/FillPreview/test/FillPreview.visual.js

wix-style-react

import React, { useEffect } from 'react';
import HomeSmall from 'wix-ui-icons-common/HomeSmall';
import { storiesOf } from '@storybook/react';
import FillPreview from '../FillPreview';
import { storySettings } from './storySettings';

const commonProps = {
  dataHook: storySettings.dataHook,
};

const tests = [
  {
    describe: 'Selected and disabled states',
    its: [
      {
        it: 'Simply selected',
        props: {
          fill: '#ffd7d7',
          selected: true,
        },
      },
      {
        it: 'Selected with no color',
        props: {
          selected: true,
        },
      },
      {
        it: 'Disabled state ',
        props: {
          fill: '#ffd7d7',
          disabled: true,
        },
      },
    ],
  },
  {
    describe: 'Gradients',
    its: [
      {
        it: 'linear-gradient',
        props: {
          fill:
            'linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)',
        },
      },
      {
        it: 'radial-gradient',
        props: {
          fill: 'radial-gradient(gold, orange, red)',
        },
      },
      {
        it: 'repeating-linear-gradient',
        props: {
          fill:
            'repeating-linear-gradient(-45deg, transparent, transparent 5px, black 5px, black 10px)',
        },
      },
      {
        it: 'repeating-radial-gradient',
        props: {
          fill:
            'repeating-radial-gradient(black, black 5px, white 5px, white 10px)',
        },
      },
    ],
  },
  {
    describe: 'Icon',
    its: [
      {
        it: 'transparent background',
        props: {
          fill: <HomeSmall />,
        },
      },
    ],
  },
];

tests.forEach(({ describe, its }) => {
  its.forEach(({ it, props }) => {
    storiesOf(`FillPreview${describe ? '/' + describe : ''}`, module).add(
      it,
      () => <FillPreview {...commonProps} {...props} />,
    );
  });
});