orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
147 lines • 4.13 kB
JavaScript
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: "170px",
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 dedicated Product Owner. STATUS: Met",
textAlign: "left",
width: "250px",
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: "250px",
children: /*#__PURE__*/_jsx(StatusDot, {
variant: "warning"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "top",
text: "Team has a dedicated Engineering Lead. STATUS: Not met",
textAlign: "left",
width: "250px",
children: /*#__PURE__*/_jsx(StatusDot, {
variant: "danger"
})
})]
})
})
});
export const withIcon = () => /*#__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: "Additional info",
textAlign: "center",
width: "110px",
children: /*#__PURE__*/_jsx(StatusDot, {
icon: true,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "question"],
color: "white",
size: "xs",
transform: "up-2"
})
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "top",
text: "Target met",
textAlign: "center",
width: "110px",
children: /*#__PURE__*/_jsx(StatusDot, {
variant: "success",
icon: true,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "check"],
color: "white",
size: "xs",
transform: "up-2"
})
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "top",
text: "Under allocated",
textAlign: "center",
width: "110px",
children: /*#__PURE__*/_jsx(StatusDot, {
variant: "warning",
icon: true,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "exclamation"],
color: "white",
size: "xs",
transform: "up-2"
})
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "top",
text: "Over allocated",
textAlign: "center",
width: "110px",
children: /*#__PURE__*/_jsx(StatusDot, {
variant: "danger",
icon: true,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "bell"],
color: "white",
size: "xs",
transform: "up-2"
})
})
})]
})
})
});
defaultStatusDot.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultStatusDot"
};
colour.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "colour"
};
withIcon.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "withIcon"
};