orcs-design-system/es/components/ProgressBar/ProgressBar.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import ProgressBar from ".";
import Box from "../Box";
import Spacer from "../Spacer";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/ProgressBar",
  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
    p: "r",
    children: storyFn()
  })],
  component: ProgressBar
};
export const defaultProgressBar = () => /*#__PURE__*/_jsxs(Spacer, {
  m: "r",
  children: [/*#__PURE__*/_jsx(ProgressBar, {
    ariaLabel: "Percent Completed",
    containerWidth: 100,
    fillWidth: 75
  }), /*#__PURE__*/_jsx(ProgressBar, {
    ariaLabel: "Percent Completed",
    containerWidth: 50,
    fillWidth: 75
  })]
});
defaultProgressBar.storyName = "Default";
export const gradient = () => /*#__PURE__*/_jsx(ProgressBar, {
  ariaLabel: "Percent Completed",
  containerWidth: 100,
  fillWidth: 40,
  gradient: true
});
export const onDarkBackground = () => /*#__PURE__*/_jsx(Box, {
  bg: "greyDarkest",
  p: "r",
  children: /*#__PURE__*/_jsxs(Spacer, {
    m: "r",
    children: [/*#__PURE__*/_jsx(ProgressBar, {
      ariaLabel: "Percent Completed",
      containerWidth: 100,
      fillWidth: 40,
      inverted: true
    }), /*#__PURE__*/_jsx(ProgressBar, {
      ariaLabel: "Percent Completed",
      containerWidth: 100,
      fillWidth: 70,
      gradient: true,
      inverted: true
    })]
  })
});
defaultProgressBar.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultProgressBar"
};
gradient.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "gradient"
};
onDarkBackground.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "onDarkBackground"
};