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

wix-style-react

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

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

import StatisticsWidget from '..';

import OneStatistic from '!raw-loader!./examples/OneStatistic';
import OnlyValues from '!raw-loader!./examples/OnlyValues';
import WithChildren from '!raw-loader!./examples/WithChildren';
import Descriptions from '!raw-loader!./examples/Descriptions';
import InfoIcons from '!raw-loader!./examples/InfoIcons';
import LongText from '!raw-loader!./examples/LongText';
import CustomLongText from '!raw-loader!./examples/CustomLongText';
import Trends from '!raw-loader!./examples/Trends';
import InvertedTrends from '!raw-loader!./examples/InvertedTrends';
import onClick from '!raw-loader!./examples/onClick';
import Card from '!raw-loader!./examples/Card';
import InteractiveCard from '!raw-loader!./examples/InteractiveCard';
import TinyValues from '!raw-loader!./examples/TinyValues';
import EmptyValues from '!raw-loader!./examples/EmptyValues';
import AlignItems from '!raw-loader!./examples/AlignItems';
import Loader from '!raw-loader!./examples/Loader';

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

  component: StatisticsWidget,
  componentPath: '..',

  sections: [
    header(),

    tabs([
      tab({
        title: 'Description',
        sections: [
          columns([
            description({
              title: 'Description',
              text: 'StatisticsWidget displays various statistics with a short explanation. Can display up to 5 items with value, description, and change in percents.',
            }),
          ]),

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

          divider(),

          title('Examples'),

          example({
            title: 'One statistic',
            autoRender: false,
            source: OneStatistic,
          }),

          code({
            compact: true,
            autoRender: false,
            title: 'Only values',
            source: OnlyValues,
          }),

          code({
            compact: true,
            autoRender: false,
            title: 'descriptions',
            description:
              'Should be short, contains an explanation of the current statistic.',
            source: Descriptions,
          }),

          example({
            title: 'Info icon',
            description:
              "Since description is small by design, there is a possibility to clarify the meaning of each statistic by specifying 'descriptionInfo' property.  It this case widget will render an info icon with a text inside a tooltip.",
            autoRender: false,
            source: InfoIcons,
          }),

          example({
            title: 'Long text',
            description:
              'When there is not enough space, part of the value or description will be hidden with an ellipsis. Hover it to see full text.',
            autoRender: false,
            source: LongText,
          }),

          example({
            compact: true,
            autoRender: false,
            title: 'Tiny Values',
            description:
              'Uses a bold Text component instead of a Heading to display the values and the descriptions.',
            source: TinyValues,
          }),

          example({
            compact: true,
            autoRender: false,
            title: 'Loader',
            description:
              'Uses a bold Text component instead of a Heading to display the values and the descriptions.',
            source: Loader,
          }),

          example({
            compact: true,
            autoRender: false,
            title: 'Empty Values',
            description: 'Shows dashes instead of values.',
            source: EmptyValues,
          }),

          example({
            compact: true,
            autoRender: false,
            title: 'Align items to start',
            description:
              'There is a possibility to display the children items aligned to a specific side.',
            source: AlignItems,
          }),

          example({
            title: 'Custom text instead of ellipsis',
            description:
              'There is a possibility to set custom text on value, when there is not enough space for long version. Full text will be still visible on hover',
            autoRender: false,
            source: CustomLongText,
          }),

          example({
            title: 'Trends',
            description:
              'Shows a change since the last period. Positive change displays with an arrow up, negative - with an arrow down.',
            autoRender: false,
            source: Trends,
          }),

          code({
            compact: true,
            autoRender: false,
            title: 'Inverted trends',
            description:
              'By default, positive numbers are displayed in green, negative - with red. This could be changed with `invertedPercentage` property.',
            source: InvertedTrends,
          }),

          code({
            compact: true,
            autoRender: false,
            title: 'onClick',
            description:
              "It is possible to specify an 'onClick' handler for every statistic. The items with this property are focusable with Tab button. Also, the handler will be called on Space or Enter press.",
            source: onClick,
          }),

          code({
            compact: true,
            autoRender: false,
            title: 'Inside a card',
            description: 'Statistics widget inside a card.',
            source: Card,
          }),

          code({
            compact: true,
            autoRender: false,
            title: 'Inside a stateful component',
            description:
              'Statistics widget inside a card with multiple filters.',
            source: InteractiveCard,
          }),

          code({
            compact: true,
            autoRender: false,
            title: 'With Children',
            description: 'Appears below other info in section.',
            source: WithChildren,
          }),
        ],
      }),

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