wix-style-react/src/CardGalleryItem/test/CardGalleryItem.e2eStory.js

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';

import { getTestStoryKind, Category } from '../../../stories/storiesHierarchy';

import { CardGalleryItem, Badge, IconButton } from 'wix-style-react';

import Edit from 'wix-ui-icons-common/Edit';
import Delete from 'wix-ui-icons-common/Delete';
import Email from 'wix-ui-icons-common/Email';
import More from 'wix-ui-icons-common/More';
import PopoverMenu from '../../PopoverMenu';

const backgroundImageUrl =
  'https://static.wixstatic.com/media/89ea07a19c3d415e99a8a8a3c0ab1de8.jpg/v1/fill/w_343,h_343,al_c,q_80,usm_0.66_1.00_0.01/89ea07a19c3d415e99a8a8a3c0ab1de8.jpg';

const getPrimaryActionProps = label => ({
  label,
  onClick: () => {
    alert('Primary action clicked');
  },
});
const getSecondaryActionProps = label => ({
  label,
  onClick: () => {
    alert('Secondary action clicked');
  },
});

const commonProps = {
  badge: (
    <Badge size="medium" skin="standard" type="solid" uppercase>
      sale
    </Badge>
  ),
  title: 'Card Title',
  subtitle: 'Card subtitle',
  backgroundImageUrl: backgroundImageUrl,
};

export const storySettings = {
  kind: Category.COMPONENTS,
  category: Category.COMPONENTS,
  storyName: 'CardGalleryItem',
  dataHook: 'storybook-card-gallery-item',
};

const exampleProps = {
  ...commonProps,
  dataHook: storySettings.dataHook,
  primaryActionProps: getPrimaryActionProps('Button'),
  secondaryActionProps: getSecondaryActionProps('Text Link'),
  settingsMenu: (
    <PopoverMenu
      triggerElement={({ toggle }) => (
        <IconButton
          onClick={e => {
            e.stopPropagation();
            toggle();
          }}
          skin="light"
          size="small"
          priority="secondary"
        >
          <More />
        </IconButton>
      )}
    >
      <PopoverMenu.MenuItem text="Edit" prefixIcon={<Edit />} />
      <PopoverMenu.MenuItem text="Delete" prefixIcon={<Delete />} />
      <PopoverMenu.MenuItem text="Email" prefixIcon={<Email />} />
      <PopoverMenu.MenuItem text="Something" disabled />
    </PopoverMenu>
  ),
};

export const testStories = {
  cardGalleryItem: 'CardGalleryItem',
};

const kind = getTestStoryKind(storySettings);

storiesOf(kind, module).add(testStories.cardGalleryItem, () => {
  return (
    <div>
      <CardGalleryItem dataHook={storySettings.dataHook} {...exampleProps} />
    </div>
  );
});