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

wix-style-react

import React from 'react';
import {
  tab,
  tabs,
  api,
  playground,
  divider,
  importExample,
  header,
  title,
  example as baseExample,
  testkit,
} from 'wix-storybook-utils/Sections';
import Help from 'wix-ui-icons-common/Help';
import CloseButton from '..';
import { storySettings } from './storySettings';

import * as examples from './examples';

const Link = ({ children, ...rest }) => <a {...rest}>{children}</a>;

const example = config => baseExample({ components: { Link }, ...config });

export default {
  category: `${storySettings.category}|${storySettings.storyName}`,
  storyName: 'CloseButton',
  component: CloseButton,
  componentPath: '..',

  componentProps: {
    as: 'button',
    skin: 'standard',
    size: 'small',
    disabled: false,
  },

  exampleProps: {
    onClick: () => 'I was called!',
    as: ['button', 'a', 'span', 'div'],
    children: [
      { label: 'No children', value: null },
      { label: 'Custom Icon', value: <Help /> },
    ],
  },

  sections: [
    header({
      sourceUrl: `https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-style-react/src/${CloseButton.displayName}/`,
    }),

    tabs([
      tab({
        title: 'Description',
        sections: [
          importExample("import { CloseButton } from 'wix-style-react';"),

          divider(),

          title('Examples'),

          example({
            title: 'Skin',
            text: 'Close button has 5 skins. `standard`, `light`, `dark`, `standardFilled`, `lightFilled` and `transparent`.',
            source: examples.skinsExamples,
          }),

          example({
            title: 'Size',
            text: 'Close button has three sizes – `small`, `medium`, and `large`.',
            source: examples.sizesExamples,
          }),

          example({
            title: 'Custom Icon',
            text: 'Additional actions next to the close button can be formed by using close button with a custom icon',
            source: examples.customExamples,
          }),

          example({
            title: 'Custom HTML tag',
            text: `
                  This component can be rendered as any given HTML tag – \`<button/>\`, \`<a/>\`, \`<Link/>\` (from react router), \`<div/>\`, \`<span/>\` etc.<br/>
                  All props/attributes will pass to the <em>rendered</em> HTML tag.<br/>
                  <br/>
                  For example:<br/>
                  - as an \`<a/>\`, the component can have attributes like \`href\`, \`target\`, etc.<br/>
                  - as a \`<Link/>\` from react router, the component can have props like \`to\`, \`replace\`, etc.
                `,
            source: examples.custom,
          }),
        ],
      }),

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