wix-style-react/dist/es/stories/MessageBox/Alert.js

wix-style-react

import React from 'react';
import TabbedView from 'wix-storybook-utils/TabbedView';
import Markdown from 'wix-storybook-utils/Markdown';

import Readme from '../../src/MessageBox/README.md';
import ReadmeTestKit from '../../src/MessageBox/README.TESTKIT.md';
import CodeExample from 'wix-storybook-utils/CodeExample';
import { RTLWrapper } from '../utils';

import StandardAlert from './AlertExamples/Standard';
import StandardAlertRaw from '!raw-loader!./AlertExamples/Standard';

import SecondaryAlert from './AlertExamples/Secondary';
import SecondaryAlertRaw from '!raw-loader!./AlertExamples/Secondary';

import FootNoteAlert from './AlertExamples/FootNote';
import FootNoteAlertRaw from '!raw-loader!./AlertExamples/FootNote';

import Image from './AlertExamples/Image';
import ImageRaw from '!raw-loader!./AlertExamples/Image';

import ImageWithSideAction from './AlertExamples/ImageWithSideAction';
import ImageWithSideActionRaw from '!raw-loader!./AlertExamples/ImageWithSideAction';

import ScrollableAlert from './AlertExamples/Scrollable';
import ScrollableAlertRaw from '!raw-loader!./AlertExamples/Scrollable';

import EmptyStateAlert from './AlertExamples/EmptyState';
import EmptyStateAlertRaw from '!raw-loader!./AlertExamples/EmptyState';

import ActionsAlert from './AlertExamples/Actions';
import ActionsAlertRaw from '!raw-loader!./AlertExamples/Actions';

var introduction = '# Alert (`<MessageBoxFunctionalLayout/>`)\nComponents to be used within `wix-style-react/Modal`:\n';

var layoutStyles = {
  margin: '0 30px'
};

export default (function () {
  return React.createElement(
    TabbedView,
    { tabs: ['Usage', 'API', 'TestKits'] },
    React.createElement(
      'div',
      null,
      React.createElement(Markdown, { source: introduction }),
      React.createElement(
        RTLWrapper,
        null,
        React.createElement(
          'div',
          { style: layoutStyles },
          React.createElement(CodeExample, {
            title: 'Standard',
            code: StandardAlertRaw,
            children: React.createElement(StandardAlert, null)
          }),
          React.createElement(CodeExample, {
            title: 'Secondary Action',
            code: SecondaryAlertRaw,
            children: React.createElement(SecondaryAlert, null)
          }),
          React.createElement(CodeExample, {
            title: 'Footnote',
            code: FootNoteAlertRaw,
            children: React.createElement(FootNoteAlert, null)
          }),
          React.createElement(CodeExample, {
            title: 'With EmptyState',
            code: EmptyStateAlertRaw,
            children: React.createElement(EmptyStateAlert, null)
          }),
          React.createElement(CodeExample, {
            title: 'Scrollable',
            code: ScrollableAlertRaw,
            children: React.createElement(ScrollableAlert, null)
          }),
          React.createElement(CodeExample, {
            title: 'With image',
            code: ImageRaw,
            children: React.createElement(Image, null)
          }),
          React.createElement(CodeExample, {
            title: 'With Actions',
            code: ActionsAlertRaw,
            children: React.createElement(ActionsAlert, null)
          }),
          React.createElement(CodeExample, {
            title: 'With Image And Actions',
            code: ImageWithSideActionRaw,
            children: React.createElement(ImageWithSideAction, null)
          })
        )
      )
    ),
    React.createElement(Markdown, { source: Readme }),
    React.createElement(Markdown, { source: ReadmeTestKit })
  );
});