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

wix-style-react

import * as React from 'react';
import FloatingHelper from 'wix-style-react/FloatingHelper';
import Image from 'wix-ui-icons-common/Image';

import { storySettings } from './StorySettings';
import { storySettings as helperStorySettings } from '../FloatingHelperContent/StorySettings';

import CodeExample from 'wix-storybook-utils/CodeExample';

import { SimpleExample } from './SimpleExample';
import SimpleExampleRaw from '!raw-loader!./SimpleExample';

import { FullExample } from './FullExample';
import FullExampleRaw from '!raw-loader!./FullExample';

import { ProgrammaticExample } from './ProgrammaticExample';
import ProgrammaticExampleRaw from '!raw-loader!./ProgrammaticExample';

import { ControlledExample } from './ControlledExample';
import ControlledExampleRaw from '!raw-loader!./ControlledExample';

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

export default {
  category: storySettings.kind,
  storyName: storySettings.story,
  component: FloatingHelper,
  componentPath: '../../src/FloatingHelper',

  componentProps: {
    'data-hook': storySettings.dataHook,
    content: React.createElement(FloatingHelper.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(FloatingHelper.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(FloatingHelper.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(Image, { 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' } },
        helperStorySettings.story
      )
    ),
    React.createElement(
      CodeExample,
      { title: 'Simple Example', code: SimpleExampleRaw },
      React.createElement(
        'div',
        { style: exampleWrapperStyle },
        React.createElement(SimpleExample, null)
      )
    ),
    React.createElement(
      CodeExample,
      { title: 'Full Example', code: FullExampleRaw },
      React.createElement(
        'div',
        { style: exampleWrapperStyle },
        React.createElement(FullExample, null)
      )
    ),
    React.createElement(
      CodeExample,
      {
        title: 'Programmatic Open Example',
        code: ProgrammaticExampleRaw
      },
      React.createElement(
        'div',
        { style: exampleWrapperStyle },
        React.createElement(ProgrammaticExample, null)
      )
    ),
    React.createElement(
      CodeExample,
      { title: 'Controlled Example', code: ControlledExampleRaw },
      React.createElement(
        'div',
        { style: exampleWrapperStyle },
        React.createElement(ControlledExample, null)
      )
    )
  )
};