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

TeamForm's Design System, aka: ORCS

import React from "react";
import StatusDot from ".";
import Box from "../Box";
import Flex from "../Flex";
import Spacer from "../Spacer";
import Icon from "../Icon";
import Popover from "../Popover";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/StatusDot",
  component: StatusDot
};
export const defaultStatusDot = () => /*#__PURE__*/_jsx(Box, {
  p: "l",
  children: /*#__PURE__*/_jsx(Flex, {
    justifyContent: "center",
    alignItems: "center",
    children: /*#__PURE__*/_jsx(Popover, {
      direction: "top",
      text: "New approvals received",
      textAlign: "center",
      width: "fit-content",
      children: /*#__PURE__*/_jsx(StatusDot, {})
    })
  })
});
defaultStatusDot.storyName = "Default";
export const colour = () => /*#__PURE__*/_jsx(Box, {
  p: "l",
  children: /*#__PURE__*/_jsx(Flex, {
    justifyContent: "center",
    alignItems: "center",
    children: /*#__PURE__*/_jsxs(Spacer, {
      m: "xxs",
      children: [/*#__PURE__*/_jsx(Popover, {
        direction: "top",
        text: "Team has a Product Owner. STATUS: Met",
        textAlign: "left",
        width: "fit-content",
        children: /*#__PURE__*/_jsx(StatusDot, {
          variant: "success"
        })
      }), /*#__PURE__*/_jsx(Popover, {
        direction: "top",
        text: "Team members are in less than 3 locations. STATUS: Not enough data",
        textAlign: "left",
        width: "fit-content",
        children: /*#__PURE__*/_jsx(StatusDot, {
          variant: "warning"
        })
      }), /*#__PURE__*/_jsx(Popover, {
        direction: "top",
        text: "Team has a Team Lead. STATUS: Not met",
        textAlign: "left",
        width: "fit-content",
        children: /*#__PURE__*/_jsx(StatusDot, {
          variant: "danger"
        })
      }), /*#__PURE__*/_jsx(Popover, {
        direction: "top",
        text: "Team has an Engineering Lead. STATUS: Not applicable",
        textAlign: "left",
        width: "fit-content",
        children: /*#__PURE__*/_jsx(StatusDot, {
          variant: "disabled"
        })
      })]
    })
  })
});
export const withIcon = () => /*#__PURE__*/_jsxs(Flex, {
  p: "l",
  justifyContent: "center",
  alignItems: "center",
  gap: "s",
  children: [/*#__PURE__*/_jsx(Popover, {
    direction: "top",
    text: "On track",
    textAlign: "center",
    width: "fit-content",
    children: /*#__PURE__*/_jsx(StatusDot, {
      variant: "success",
      icon: true,
      children: /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "check"],
        color: "white",
        size: "xs"
      })
    })
  }), /*#__PURE__*/_jsx(Popover, {
    direction: "top",
    text: "Blocked",
    textAlign: "center",
    width: "fit-content",
    children: /*#__PURE__*/_jsx(StatusDot, {
      variant: "warning",
      icon: true,
      children: /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "ban"],
        color: "white",
        size: "xs"
      })
    })
  }), /*#__PURE__*/_jsx(Popover, {
    direction: "top",
    text: "At risk",
    textAlign: "center",
    width: "fit-content",
    children: /*#__PURE__*/_jsx(StatusDot, {
      variant: "danger",
      icon: true,
      children: /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "exclamation"],
        color: "white",
        size: "xs"
      })
    })
  })]
});
defaultStatusDot.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultStatusDot"
};
colour.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "colour"
};
withIcon.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withIcon"
};