wix-style-react/src/GenericModalLayout/docs/index.story.js

wix-style-react

import React from 'react';
import {
  header,
  tabs,
  tab,
  description,
  importExample,
  title,
  divider,
  example,
  playground,
  api,
  testkit,
} from 'wix-storybook-utils/Sections';

import { storySettings } from './storySettings';

import { ModalWrapper } from './modalWrapper';
import GenericModalLayout from '..';
import * as examples from './examples';

const exampleItems = [
  {
    label: 'Full height content',
    value: (
      <div style={{ backgroundColor: '#fbfba1', minHeight: '100%' }}>
        content
      </div>
    ),
  },
  {
    label: 'Content',
    value: <div style={{ backgroundColor: '#fbfba1' }}>content</div>,
  },
];

export default {
  category: `${storySettings.category}/Modal`,
  storyName: 'GenericModalLayout',

  component: GenericModalLayout,
  componentPath: '..',
  componentWrapper: ({ component }) => <ModalWrapper>{component}</ModalWrapper>,

  componentProps: {
    header: 'header',
    content: exampleItems[0].value,
    footer: 'footer',
    fullscreen: true,
  },

  exampleProps: {
    content: exampleItems,
  },

  sections: [
    header(),

    tabs([
      tab({
        title: 'Description',
        sections: [
          description(
            'GenericModalLayout provides a general structure of a modal. Use it to set up a custom design.',
          ),

          importExample(),

          divider(),

          title('Examples'),

          example({
            title: 'Simple Usage',
            source: examples.simple,
          }),
          example({
            title: 'Fullscreen',
            source: examples.fullscreen,
          }),
        ],
      }),

      ...[
        { title: 'API', sections: [api()] },
        { title: 'Testkit', sections: [testkit()] },
        { title: 'Playground', sections: [playground()] },
      ].map(tab),
    ]),
  ],
};