orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
131 lines (129 loc) • 4.03 kB
JavaScript
import React from "react";
import Box from "../Box";
import Spacer from "../Spacer";
import Flex from "../Flex";
import Badge from ".";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default {
title: "Components/Badge",
component: Badge,
decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
height: "150px",
children: storyFn()
})]
};
export const defaultBadge = () => /*#__PURE__*/_jsx(Badge, {
children: "Default"
});
defaultBadge.storyName = "Default";
// eslint-disable-next-line react/prop-types
export const ColourVariants = function () {
let {
altStyle = false
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Box, {
p: "r",
children: /*#__PURE__*/_jsx(Flex, {
flexWrap: "wrap",
children: /*#__PURE__*/_jsxs(Spacer, {
m: "1",
children: [/*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
children: "Default"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "success",
children: "Success"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "warning",
children: "Warning"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "danger",
children: "Danger"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "primaryLight",
children: "Low priority"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "primary",
children: "Medium priority"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "primaryDark",
children: "High priority"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "secondary",
children: "Secondary"
})]
})
})
}), /*#__PURE__*/_jsx(Box, {
p: "r",
bg: "greyDarkest",
children: /*#__PURE__*/_jsx(Flex, {
flexWrap: "wrap",
children: /*#__PURE__*/_jsxs(Spacer, {
m: "1",
children: [/*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
children: "Default"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "success",
children: "Success"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "warning",
children: "Warning"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "danger",
children: "Danger"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "primaryLight",
children: "Low priority"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "primary",
children: "Medium priority"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "primaryDark",
children: "High priority"
}), /*#__PURE__*/_jsx(Badge, {
altStyle: altStyle,
variant: "secondary",
children: "Secondary"
})]
})
})
})]
});
};
// eslint-disable-next-line react/no-unknown-property
export const altStyleColourVariants = () => /*#__PURE__*/_jsx(ColourVariants, {
altStyle: true
});
altStyleColourVariants.storyName = "Alt style colour variants";
ColourVariants.storyName = "Colour variants";
defaultBadge.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultBadge"
};
ColourVariants.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "ColourVariants"
};
altStyleColourVariants.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "altStyleColourVariants"
};