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

wix-style-react

'use strict';

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

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _FloatingHelper = require('wix-style-react/FloatingHelper');

var _FloatingHelper2 = _interopRequireDefault(_FloatingHelper);

var _Image = require('wix-ui-icons-common/Image');

var _Image2 = _interopRequireDefault(_Image);

var _StorySettings = require('./StorySettings');

var _StorySettings2 = require('../FloatingHelperContent/StorySettings');

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

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _SimpleExample = require('./SimpleExample');

var _SimpleExample2 = require('!raw-loader!./SimpleExample');

var _SimpleExample3 = _interopRequireDefault(_SimpleExample2);

var _FullExample = require('./FullExample');

var _FullExample2 = require('!raw-loader!./FullExample');

var _FullExample3 = _interopRequireDefault(_FullExample2);

var _ProgrammaticExample = require('./ProgrammaticExample');

var _ProgrammaticExample2 = require('!raw-loader!./ProgrammaticExample');

var _ProgrammaticExample3 = _interopRequireDefault(_ProgrammaticExample2);

var _ControlledExample = require('./ControlledExample');

var _ControlledExample2 = require('!raw-loader!./ControlledExample');

var _ControlledExample3 = _interopRequireDefault(_ControlledExample2);

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

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; } }

var exampleWrapperStyle = { marginTop: 100, marginBottom: 100 };

exports.default = {
  category: _StorySettings.storySettings.kind,
  storyName: _StorySettings.storySettings.story,
  component: _FloatingHelper2.default,
  componentPath: '../../src/FloatingHelper',

  componentProps: {
    'data-hook': _StorySettings.storySettings.dataHook,
    content: React.createElement(_FloatingHelper2.default.Content, {
      title: 'Don\u2019t forget to setup payments',
      body: 'In order to sell your music you need to choose a payment method.'
    }),
    target: React.createElement(
      'span',
      null,
      'I am a FloatingHelper target'
    ),
    placement: 'right',
    initiallyOpened: true
  },

  exampleProps: {
    placement: ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'],

    target: [{ label: 'Simple text', value: 'I am simple text target' }, { label: 'Simple span', value: React.createElement(
        'span',
        null,
        'I am a span target'
      ) }],

    content: [{
      label: 'with title & body only',
      value: React.createElement(_FloatingHelper2.default.Content, {
        title: 'Don\u2019t forget to setup payments',
        body: 'In order to sell your music you need to choose a payment method.'
      })
    }, {
      label: 'with all items',
      value: React.createElement(_FloatingHelper2.default.Content, {
        title: 'Don\u2019t forget to setup payments',
        body: 'In order to sell your music you need to choose a payment method.',
        actionText: 'Ok, Take Me There',
        onActionClick: function onActionClick() {
          return null;
        },
        image: React.createElement(_Image2.default, { width: '102', height: '102' })
      })
    }]
  },

  examples: React.createElement(
    'div',
    null,
    React.createElement(
      'p',
      { style: { fontSize: 20 } },
      'The content property should receive a ',
      '<FloatingHelper.Content>',
      ' ',
      'element.',
      React.createElement('br', null),
      'See story:',
      React.createElement('br', null),
      React.createElement(
        'p',
        { style: { fontSize: 25, fontWeight: 'bold' } },
        _StorySettings2.storySettings.story
      )
    ),
    React.createElement(
      _CodeExample2.default,
      { title: 'Simple Example', code: _SimpleExample3.default },
      React.createElement(
        'div',
        { style: exampleWrapperStyle },
        React.createElement(_SimpleExample.SimpleExample, null)
      )
    ),
    React.createElement(
      _CodeExample2.default,
      { title: 'Full Example', code: _FullExample3.default },
      React.createElement(
        'div',
        { style: exampleWrapperStyle },
        React.createElement(_FullExample.FullExample, null)
      )
    ),
    React.createElement(
      _CodeExample2.default,
      {
        title: 'Programmatic Open Example',
        code: _ProgrammaticExample3.default
      },
      React.createElement(
        'div',
        { style: exampleWrapperStyle },
        React.createElement(_ProgrammaticExample.ProgrammaticExample, null)
      )
    ),
    React.createElement(
      _CodeExample2.default,
      { title: 'Controlled Example', code: _ControlledExample3.default },
      React.createElement(
        'div',
        { style: exampleWrapperStyle },
        React.createElement(_ControlledExample.ControlledExample, null)
      )
    )
  )
};