wix-style-react/dist/stories/Thumbnail/index.story.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _Sections = require('wix-storybook-utils/Sections');

var _Thumbnail = require('wix-style-react/Thumbnail');

var _Thumbnail2 = _interopRequireDefault(_Thumbnail);

var _Layout = require('wix-style-react/Layout');

var _LiveCodeExample = require('../utils/Components/LiveCodeExample');

var _LiveCodeExample2 = _interopRequireDefault(_LiveCodeExample);

var _examples = require('./examples');

var examples = _interopRequireWildcard(_examples);

var _exampleControlled = require('!raw-loader!./exampleControlled');

var _exampleControlled2 = _interopRequireDefault(_exampleControlled);

var _README = require('!raw-loader!../../src/Thumbnail/README.md');

var _README2 = _interopRequireDefault(_README);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var sizes = [{ value: 100, label: '100' }, { value: 300, label: '300' }];

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

  component: _Thumbnail2.default,
  componentPath: '../../src/Thumbnail/Thumbnail.js',

  componentProps: function componentProps(setState, getState) {
    return {
      dataHook: _storySettings.storySettings.dataHook,
      title: 'I am a Thumbnail',
      description: 'And I can do this and that',
      image: examples.image,
      size: 'medium',
      backgroundImage: false,
      hideSelectedIcon: false,
      onClick: function onClick() {
        return setState({ selected: !getState().selected });
      }
    };
  },

  exampleProps: {
    onClick: function onClick() {
      return 'Thumbnail Clicked';
    },
    size: [{ label: 'Medium', value: 'medium' }, { label: 'Small', value: 'small' }, { label: 'Tiny', value: 'tiny' }],
    backgroundImage: [{
      label: 'On',
      value: examples.getImageUrl(500, 500)
    }, { label: 'Off', value: false }],
    image: [{
      label: '64x64 image as URL',
      value: examples.getImageUrl(64, 64)
    }, {
      label: '300x200 image as <img/> component',
      value: examples.image
    }],
    width: sizes,
    height: sizes
  },

  sections: [(0, _Sections.tab)({
    title: 'Description',
    sections: [(0, _Sections.description)({
      text: _README2.default
    })].concat(_toConsumableArray([{
      title: 'Thumbnail with title',
      source: examples.exampleDefault
    }, {
      title: 'Thumbnail with image',
      source: examples.selectedWithImage
    }, {
      title: 'Thumbnail with background image',
      source: examples.selectedWithBackgroundImage
    }, {
      title: 'List of small thumbnails',
      source: examples.listOfSmall
    }].map(function (_ref) {
      var source = _ref.source,
          title = _ref.title;
      return (0, _Sections.liveCode)({
        source: source,
        title: title,
        components: { Thumbnail: _Thumbnail2.default, Layout: _Layout.Layout, Cell: _Layout.Cell }
      });
    })), [(0, _Sections.description)({
      title: 'Controlled Thumbnail',
      text: _react2.default.createElement(_LiveCodeExample2.default, {
        initialCode: _exampleControlled2.default,
        autoRender: false
      })
    })])
  }), (0, _Sections.tab)({
    title: 'Playground',
    sections: [(0, _Sections.playground)()]
  }), (0, _Sections.tab)({
    title: 'API',
    sections: [(0, _Sections.api)()]
  }), (0, _Sections.tab)({
    title: 'Testkit',
    sections: [(0, _Sections.testkit)()]
  })]
};