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

wix-style-react

/* eslint-disable no-console */
import React from 'react';

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

import More from 'wix-ui-icons-common/More';
import Add from 'wix-ui-icons-common/Add';
import Edit from 'wix-ui-icons-common/Edit';
import Delete from 'wix-ui-icons-common/Delete';

import { storySettings } from '../test/storySettings';

import PopoverMenu from '..';

import IconButton from '../../IconButton';

import { placements } from '../../Popover';
import testkitDesc from './testkit.md';
import compound from './compound.md';

import * as examples from './examples';

const commonProps = {
  appendTo: 'window',
  triggerElement: (
    <IconButton priority="secondary">
      <More />
    </IconButton>
  ),
};

const menuItems = [
  <PopoverMenu.MenuItem
    key="add"
    text="Add"
    onClick={e => console.log(e)}
    prefixIcon={<Add />}
  />,
  <PopoverMenu.MenuItem
    key="edit"
    text="Edit"
    onClick={e => console.log(e)}
    prefixIcon={<Edit />}
  />,
  <PopoverMenu.MenuItem
    key="delete"
    text="Delete"
    onClick={e => console.log(e)}
    prefixIcon={<Delete />}
    subtitle="delete"
  />,
];
export default {
  category: `${storySettings.category}/${storySettings.storyName}`,
  storyName: 'PopoverMenu',

  component: PopoverMenu,
  componentPath: '..',
  componentProps: {
    ...commonProps,
    children: [...menuItems],
  },

  exampleProps: {
    placement: placements.map(placement => ({
      label: placement,
      value: placement,
    })),
  },

  sections: [
    header({
      issueUrl: 'https://github.com/wix-private/wix-design-systems/issues/new/choose',
      sourceUrl:
        'https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-style-react/src/PopoverMenu/',
      component: <PopoverMenu {...commonProps}>{menuItems}</PopoverMenu>,
    }),

    tabs([
      tab({
        title: 'Description',
        sections: [
          columns([
            description({
              title: 'Description',
              text: 'PopoverMenu renders a trigger element that when the user click on it, a popup box with menu options appear.',
            }),
          ]),

          columns([
            importExample("import { PopoverMenu } from 'wix-style-react';"),
          ]),

          divider(),

          title('Examples'),

          ...[
            {
              title: 'Element (Trigger)',
              subtitle:
                'Any component that is meant for triggering an action can be used as trigger element.',
              source: examples.trigger,
            },
            {
              title: 'Render props (Trigger)',
              subtitle:
                'Trigger events can be access through triggerElement prop render props. ',
              source: examples.renderprops,
            },
            {
              title: 'Text Wrap',
              subtitle:
                'By default all menu items text gets ellipsed when reaches boundaries limit. Passing `textWrap` disables ellipsis and wrap text to new line.',
              source: examples.wrap,
            },
          ].map(example),
        ],
      }),

      ...[
        { title: 'PopoverMenu API', sections: [api()] },
        {
          title: 'Compound Components API',
          sections: [description(compound)],
        },
        { title: 'Testkit', sections: [description(testkitDesc)] },
        { title: 'Playground', sections: [playground()] },
      ].map(tab),
    ]),
  ],
};