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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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 */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _CodeExample = require('wix-storybook-utils/CodeExample');

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _ExampleBasic = require('./ExampleBasic');

var _ExampleBasic2 = _interopRequireDefault(_ExampleBasic);

var _ExampleBasic3 = require('!raw-loader!./ExampleBasic');

var _ExampleBasic4 = _interopRequireDefault(_ExampleBasic3);

var _CardGalleryItem = require('wix-style-react/CardGalleryItem');

var _CardGalleryItem2 = _interopRequireDefault(_CardGalleryItem);

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

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

var kind = _storySettings.storySettings.kind,
    storyName = _storySettings.storySettings.storyName,
    dataHook = _storySettings.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'] }]
};

exports.default = {
  category: kind,
  storyName: storyName,

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

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

  exampleProps: exampleProps,

  examples: _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _CodeExample2.default,
      { title: 'Basic', code: _ExampleBasic4.default },
      _react2.default.createElement(_ExampleBasic2.default, null)
    )
  )
};