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

wix-style-react

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

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

import * as examples from './examples';
import { Size, Skin } from '../constants';

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

  component: CircularProgressBar,
  componentPath: '..',

  componentProps: {
    errorMessage: 'some error message',
    value: 20,
    size: Size.medium,
    skin: Skin.standard,
    light: false,
    error: false,
    errorLabel: '',
    showProgressIndication: false,
    label: undefined,
  },

  exampleProps: {
    size: [Size.small, Size.medium, Size.large],
    skin: [Skin.standard, Skin.premium],
  },

  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/LinearProgressBar/',
      component: (
        <div style={{ width: '50%' }}>
          <CircularProgressBar size="large" value={45} />
          <CircularProgressBar size="medium" value={45} />
          <CircularProgressBar size="small" value={45} />
        </div>
      ),
    }),

    tabs([
      tab({
        title: 'Description',
        sections: [
          columns([
            description({
              title: 'Description',
              text: 'Component for indicating a progress along a process.',
            }),
          ]),

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

          divider(),

          title('Examples'),

          example({
            title: 'Sizes',
            description: 'Appear in all different sizes.',
            source: examples.sizes,
          }),

          example({
            title: 'Progress Indication',
            description: 'Displaying a progress indicator in percentage.',
            source: examples.progressIndication,
          }),

          example({
            title: 'Label',
            description: 'Displaying a textual label',
            source: examples.label,
          }),

          example({
            title: 'Themes',
            description: 'Appear in all different themes.',
            source: examples.themes,
          }),

          example({
            title: 'Error',
            description: 'Error state',
            source: examples.errors,
          }),

          example({
            title: 'Skins',
            description: 'Supported skin appearance',
            source: examples.skins,
          }),
        ],
      }),

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