orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
309 lines (306 loc) • 12.5 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["alternate", "icon", "colour", "variant", "title", "subtitle", "changeIcon", "changeValue", "children", "theme", "fluid"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import styled, { css, ThemeProvider } from "styled-components";
import PropTypes from "prop-types";
import Icon from "../Icon/";
import Box from "../Box/";
import Flex from "../Flex/";
import { H3, H4 } from "../Typography";
import { themeGet } from "@styled-system/theme-get";
import { variant } from "styled-system";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Item = /*#__PURE__*/styled(Box).withConfig({
displayName: "Item",
componentId: "sc-yfq75p-0"
})(["word-break:break-word;", ""], props => variant({
prop: "variant",
variants: {
default: {},
primary: {
borderTop: "3px solid",
borderTopColor: themeGet("colors.primary")(props),
borderTopLeftRadius: "0",
borderTopRightRadius: "0"
},
success: {
borderTop: "3px solid",
borderTopColor: themeGet("colors.success")(props),
borderTopLeftRadius: "0",
borderTopRightRadius: "0"
},
warning: {
borderTop: "3px solid",
borderTopColor: themeGet("colors.warning")(props),
borderTopLeftRadius: "0",
borderTopRightRadius: "0"
},
danger: {
borderTop: "3px solid",
borderTopColor: themeGet("colors.danger")(props),
borderTopLeftRadius: "0",
borderTopRightRadius: "0"
},
greyDark: {
borderTop: "3px solid",
borderTopColor: themeGet("colors.greyDark")(props),
borderTopLeftRadius: "0",
borderTopRightRadius: "0"
}
}
}));
const ChangeIcon = /*#__PURE__*/styled.div.withConfig({
displayName: "ChangeIcon",
componentId: "sc-yfq75p-1"
})(["display:inline-block;width:14px;height:2px;background-size:14px 14px;background-color:", ";margin:0 0 0 ", ";", ""], props => themeGet("colors.greyDark")(props), props => themeGet("space.3")(props), props => props.changeIcon === "arrowUp" ? css(["background-color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' version='1.1'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-1173.000000, -214.000000)' fill='%2378797D'%3E%3Cg transform='translate(1173.000000, 210.000000)'%3E%3Cpath d='M0.1 12.1L0.8 12.8C1 13 1.3 13 1.4 12.8L6.9 7.3 6.9 19.4C6.9 19.6 7.1 19.8 7.3 19.8L8.3 19.8C8.6 19.8 8.8 19.6 8.8 19.4L8.8 7.3 14.3 12.8C14.4 13 14.7 13 14.9 12.8L15.6 12.1C15.7 11.9 15.7 11.7 15.6 11.5L8.1 4.1C8 4 7.7 4 7.5 4.1L0.1 11.5C0 11.7 0 11.9 0.1 12.1Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");height:14px;"]) : props.changeIcon === "arrowDown" ? css(["background-color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' version='1.1'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-1173.000000, -214.000000)' fill='%2378797D'%3E%3Cg transform='translate(1173.000000, 210.000000)'%3E%3Cpath d='M0.1 12.1L0.8 12.8C1 13 1.3 13 1.4 12.8L6.9 7.3 6.9 19.4C6.9 19.6 7.1 19.8 7.3 19.8L8.3 19.8C8.6 19.8 8.8 19.6 8.8 19.4L8.8 7.3 14.3 12.8C14.4 13 14.7 13 14.9 12.8L15.6 12.1C15.7 11.9 15.7 11.7 15.6 11.5L8.1 4.1C8 4 7.7 4 7.5 4.1L0.1 11.5C0 11.7 0 11.9 0.1 12.1Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");height:14px;transform:rotate(180deg);"]) : css([""]));
const ChangeValue = /*#__PURE__*/styled.small.withConfig({
displayName: "ChangeValue",
componentId: "sc-yfq75p-2"
})(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";margin:0 0 0 ", ";"], props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.0")(props), props => themeGet("colors.greyDark")(props), props => themeGet("space.3")(props));
/**
* Example of basic, alternative and complex cards. Child elements can be anything, plain text, graphs, or other components. Subtitles, icons, change values, coloured borders are all optional, not mandatory.
*
* If your UI is split into different areas or sections you can also choose to colour code your cards to match, by applying a colour prop which adds the corresponding colour as a top border.
*/
export default function Card(_ref) {
let {
alternate,
icon,
colour,
variant: variantProp,
title,
subtitle,
changeIcon,
changeValue,
children,
theme,
fluid
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
// Support both colour (legacy) and variant props for backward compatibility
const variant = variantProp || colour || "default";
// Warn if using deprecated colour prop
if (colour && !variantProp) {
if (process.env.NODE_ENV !== "production") {
console.warn("Card: The `colour` prop is deprecated. Please use `variant` instead. `colour` will be removed in a future version.");
}
}
const component = /*#__PURE__*/_jsxs(Item, _objectSpread(_objectSpread(_objectSpread({
variant: variant,
borderRadius: "2",
bg: "white",
height: fluid ? "100%" : "auto",
width: fluid ? "100%" : "auto",
p: "r"
}, variant !== "default" ? {} : {
boxBorder: "default"
}), props), {}, {
children: [!icon & !title & !subtitle ? null : /*#__PURE__*/_jsxs(Flex, {
mb: "r",
width: "100%",
alignItems: alternate ? "center" : "flex-start",
flexDirection: alternate ? "row" : "column",
children: [icon ? /*#__PURE__*/_jsx(Icon, {
icon: icon,
size: "1x",
mr: "s"
}) : null, title ? /*#__PURE__*/_jsx(H3, {
children: title
}) : null, changeIcon ? /*#__PURE__*/_jsx(ChangeIcon, {
changeIcon: changeIcon
}) : null, changeValue ? /*#__PURE__*/_jsx(ChangeValue, {
children: changeValue
}) : null, subtitle ? /*#__PURE__*/_jsx(H4, {
fontSize: "1",
color: "greyDark",
ml: alternate ? "auto" : 0,
children: subtitle
}) : null]
}), /*#__PURE__*/_jsx(Box, {
children: children
})]
}));
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
Card.propTypes = {
/** Applies an icon to header of specified name */
icon: PropTypes.array,
/** Card title */
title: PropTypes.node,
/** Card subtitle */
subtitle: PropTypes.node,
/** Can specify a width in pixels or percentages. Can also use calc. */
width: PropTypes.string,
/** Can specify a height in pixels or percentages. Can also use calc. */
height: PropTypes.string,
/** Adds a coloured top border. Uses the system colours (eg primary, warning) @deprecated Use `variant` instead. */
colour: PropTypes.oneOf(["primary", "success", "warning", "danger", "greyDark"]),
/** Adds a coloured top border variant. Uses the system colours (eg primary, warning) */
variant: PropTypes.oneOf(["primary", "success", "warning", "danger", "greyDark", "default"]),
/** Specify the icon to be used for the changeValue element. */
changeIcon: PropTypes.oneOf(["arrowUp", "arrowDown"]),
/** Adds a gray inline element to the card heading to describe change in value */
changeValue: PropTypes.string,
/** Pushes subtitle to the right of the title rather than stacked underneath */
alternate: PropTypes.bool,
/** Forces card to take 100% width and height of parent element */
fluid: PropTypes.bool,
/** Card contents. */
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
/** Specifies the system design theme. */
theme: PropTypes.object
};
Card.__docgenInfo = {
"description": "Example of basic, alternative and complex cards. Child elements can be anything, plain text, graphs, or other components. Subtitles, icons, change values, coloured borders are all optional, not mandatory.\n\nIf your UI is split into different areas or sections you can also choose to colour code your cards to match, by applying a colour prop which adds the corresponding colour as a top border.",
"methods": [],
"displayName": "Card",
"props": {
"icon": {
"description": "Applies an icon to header of specified name",
"type": {
"name": "array"
},
"required": false
},
"title": {
"description": "Card title",
"type": {
"name": "node"
},
"required": false
},
"subtitle": {
"description": "Card subtitle",
"type": {
"name": "node"
},
"required": false
},
"width": {
"description": "Can specify a width in pixels or percentages. Can also use calc.",
"type": {
"name": "string"
},
"required": false
},
"height": {
"description": "Can specify a height in pixels or percentages. Can also use calc.",
"type": {
"name": "string"
},
"required": false
},
"colour": {
"description": "Adds a coloured top border. Uses the system colours (eg primary, warning) @deprecated Use `variant` instead.",
"type": {
"name": "enum",
"value": [{
"value": "\"primary\"",
"computed": false
}, {
"value": "\"success\"",
"computed": false
}, {
"value": "\"warning\"",
"computed": false
}, {
"value": "\"danger\"",
"computed": false
}, {
"value": "\"greyDark\"",
"computed": false
}]
},
"required": false
},
"variant": {
"description": "Adds a coloured top border variant. Uses the system colours (eg primary, warning)",
"type": {
"name": "enum",
"value": [{
"value": "\"primary\"",
"computed": false
}, {
"value": "\"success\"",
"computed": false
}, {
"value": "\"warning\"",
"computed": false
}, {
"value": "\"danger\"",
"computed": false
}, {
"value": "\"greyDark\"",
"computed": false
}, {
"value": "\"default\"",
"computed": false
}]
},
"required": false
},
"changeIcon": {
"description": "Specify the icon to be used for the changeValue element.",
"type": {
"name": "enum",
"value": [{
"value": "\"arrowUp\"",
"computed": false
}, {
"value": "\"arrowDown\"",
"computed": false
}]
},
"required": false
},
"changeValue": {
"description": "Adds a gray inline element to the card heading to describe change in value",
"type": {
"name": "string"
},
"required": false
},
"alternate": {
"description": "Pushes subtitle to the right of the title rather than stacked underneath",
"type": {
"name": "bool"
},
"required": false
},
"fluid": {
"description": "Forces card to take 100% width and height of parent element",
"type": {
"name": "bool"
},
"required": false
},
"children": {
"description": "Card contents.",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "arrayOf",
"value": {
"name": "node"
}
}]
},
"required": false
},
"theme": {
"description": "Specifies the system design theme.",
"type": {
"name": "object"
},
"required": false
}
}
};