@wix/design-system/dist/esm/LinearProgressBar/docs/index.story.js

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/LinearProgressBar/docs/index.story.jsx";
import React from 'react';
import { header, tabs, tab, description, importExample, title, columns, divider, code, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from '../test/storySettings';
import LinearProgressBar from '..';
import * as examples from './examples';
export default {
  category: storySettings.category,
  storyName: 'LinearProgressBar',
  component: LinearProgressBar,
  componentPath: '..',
  componentProps: {
    errorMessage: 'some error message',
    value: 20,
    light: false,
    error: false,
    showProgressIndication: false,
    label: '47/125',
    skin: 'standard',
    min: 0,
    max: 100
  },
  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-design-system/src/LinearProgressBar/',
    component: /*#__PURE__*/React.createElement("div", {
      style: {
        width: '50%'
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 49,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement(LinearProgressBar, {
      value: 45,
      showProgressIndication: true,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 50,
        columnNumber: 11
      }
    }))
  }), tabs([tab({
    title: 'Description',
    sections: [columns([description({
      title: 'Description',
      text: 'Component for indicating a progress along a process.'
    })]), columns([importExample("import { LinearProgressBar } from '@wix/design-system';")]), divider(), title('Examples'), code({
      title: 'Progress Indication',
      description: 'Displaying a progress indicator in percentage.',
      source: examples.progressIndication
    }), code({
      title: 'Custom Label',
      description: 'Displaying custom progress text instead of percentage.',
      source: examples.customLabel
    }), code({
      title: 'Min & Max',
      description: 'Custom `min` and `max` values for the progress range.',
      source: examples.minMax
    }), code({
      title: 'Prefix Indication',
      description: 'A prefix node displayed before the progress bar.',
      source: examples.prefixIndication
    }), code({
      title: 'Skins',
      description: 'LinearProgressBar has 5 skins: `"standard"` (default), `"warning"`, `"success"`, `"premium"` and `"neutral"`.',
      source: examples.skins
    }), code({
      title: 'Padding',
      description: 'Override default padding.',
      source: examples.padding
    }), code({
      title: 'Themes',
      description: 'Appear in all different themes.',
      source: examples.themes
    }), code({
      title: 'Error',
      description: 'Error state',
      source: examples.errors
    })]
  })].concat(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};