wix-style-react/dist/es/stories/CardGalleryItem/CardGalleryItem.story.js

wix-style-react

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

/* eslint-disable no-console */
import React from 'react';
import CodeExample from 'wix-storybook-utils/CodeExample';

import ExampleBasic from './ExampleBasic';
import ExampleBasicRaw from '!raw-loader!./ExampleBasic';

import CardGalleryItem from 'wix-style-react/CardGalleryItem';
import { storySettings } from './storySettings';

var kind = storySettings.kind,
    storyName = storySettings.storyName,
    dataHook = storySettings.dataHook;

var 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';
var imageUrls = {
  '4/3': 'https://static.wixstatic.com/media/89ea07a19c3d415e99a8a8a3c0ab1de8.jpg/v1/fill/w_640,h_480,al_c,q_80,usm_0.66_1.00_0.01/89ea07a19c3d415e99a8a8a3c0ab1de8.jpg',
  '16/9': 'https://static.wixstatic.com/media/89ea07a19c3d415e99a8a8a3c0ab1de8.jpg/v1/fill/w_640,h_360,al_c,q_80,usm_0.66_1.00_0.01/89ea07a19c3d415e99a8a8a3c0ab1de8.jpg',
  '21/9': 'https://static.wixstatic.com/media/89ea07a19c3d415e99a8a8a3c0ab1de8.jpg/v1/fill/w_700,h_300,al_c,q_80,usm_0.66_1.00_0.01/89ea07a19c3d415e99a8a8a3c0ab1de8.jpg'
};

var getPrimaryActionProps = function getPrimaryActionProps(label) {
  return {
    label: label,
    onClick: function onClick() {
      alert('Primary action clicked');
    }
  };
};
var getSecondaryActionProps = function getSecondaryActionProps(label) {
  return {
    label: label,
    onClick: function onClick() {
      alert('Secondary action clicked');
    }
  };
};
var commonProps = {
  title: 'Card Title',
  subtitle: 'Card subtitle',
  backgroundImageUrl: backgroundImageUrl
};
var exampleProps = {
  title: ['Card Title', 'Long Card Content Title Long Card Content Title'],
  subtitle: ['Card subtitle', 'Long card content subtitle long card content subtitle'],
  backgroundImageUrl: [{ label: '4/3', value: imageUrls['4/3'] }, { label: '16/9', value: imageUrls['16/9'] }, { label: '21/9', value: imageUrls['21/9'] }]
};

export default {
  category: kind,
  storyName: storyName,

  component: CardGalleryItem,
  componentPath: '../../src/CardGalleryItem',

  componentProps: _extends({}, commonProps, {
    dataHook: dataHook,
    primaryActionProps: getPrimaryActionProps('Button'),
    secondaryActionProps: getSecondaryActionProps('Text Link')
  }),

  exampleProps: exampleProps,

  examples: React.createElement(
    'div',
    null,
    React.createElement(
      CodeExample,
      { title: 'Basic', code: ExampleBasicRaw },
      React.createElement(ExampleBasic, null)
    )
  )
};