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

wix-style-react

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

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

import Stepper from '..';
import { Type, StepType, FitMode } from '../constants';
import responsiveExample from '!raw-loader!./examples/responsive';
import stepTypesExample from '!raw-loader!./examples/stepTypes';
import fitModesExample from '!raw-loader!./examples/fitModes';
import stepperTypeExample from '!raw-loader!./examples/stepperTypes';
import cardExample from '!raw-loader!./examples/card';
import composerHeaderExample from '!raw-loader!./examples/composerHeader';

const steps = [
  { text: 'First step', type: StepType.Completed },
  { text: 'Second step' },
  { text: 'Third step', type: StepType.Disabled },
];

export default {
  category: `${storySettings.category}|${storySettings.storyName}`,
  storyName: 'Stepper',

  component: Stepper,
  componentPath: '..',

  componentProps: setState => ({
    steps,
    type: Type.Circle,
    fit: FitMode.Compact,
    activeStep: 1,
    onClick: activeStep => setState({ activeStep }),
  }),

  exampleProps: {
    steps: [{ label: '3 steps', value: steps }],
    onClick: stepIndex => `I was called with ${stepIndex}`,
  },

  sections: [
    header({
      sourceUrl:
        'https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-style-react/src/Stepper/',
      component: <Stepper steps={steps} activeStep={1} />,
    }),

    tabs([
      tab({
        title: 'Description',
        sections: [
          columns([
            description({
              title: 'Description',
              text: 'Stepper displays the path a user needs to follow to complete the process. It breaks a large number of information into steps and indicates which step is active. It works best when split up to 7 steps.',
            }),
          ]),

          importExample("import { Stepper } from 'wix-style-react';"),

          divider(),

          title('Examples'),

          code({
            title: 'Step types',
            description:
              'Steps can have different types: completed, normal, error and disabled.',
            compact: true,
            source: stepTypesExample,
          }),

          code({
            title: 'Stepper types',
            description:
              'Using `type` prop stepper can appear in `circle` style or plain `text`. Text type is good for neutral and compact layouts.',
            compact: true,
            source: stepperTypeExample,
          }),

          code({
            title: 'Fit modes',
            description:
              'Using `fit` prop stepper can appear in `normal` or `stretched` fit mode. With `stretched` fit the component will grow and fill parent container width.',
            compact: true,
            source: fitModesExample,
          }),

          code({
            title: 'Responsive',
            description:
              "When there is not enough space the active step's text is fully displayed and the rest of the steps are equally shortened.",
            compact: true,
            source: responsiveExample,
          }),

          divider(),

          title('Use Cases'),

          code({
            title: 'Inside a Card',
            description:
              'Stepper is used in a Card header to indicate the path a user needs to follow to complete the process.',
            compact: true,
            source: cardExample,
          }),

          code({
            title: 'Inside a ComposerHeader',
            description:
              'Stepper inside a ComposerHeader can appear in start or center positions and must use type `text`.',
            compact: true,
            source: composerHeaderExample,
          }),
        ],
      }),

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