orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
220 lines (218 loc) • 8.68 kB
JavaScript
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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Item = styled(Box).withConfig({
displayName: "Card__Item",
componentId: "sc-yfq75p-0"
})(["word-break:break-word;"]);
const ChangeIcon = styled.div.withConfig({
displayName: "Card__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 = styled.small.withConfig({
displayName: "Card__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,
title,
subtitle,
changeIcon,
changeValue,
children,
theme,
fluid,
...props
} = _ref;
const component = /*#__PURE__*/_jsxs(Item, {
colour: colour,
borderRadius: "2",
bg: "white",
height: fluid ? "100%" : "auto",
width: fluid ? "100%" : "auto",
p: "r",
...(colour ? {
borderTop: "3px solid",
borderTopColor: colour,
borderTopLeftRadius: "0",
borderTopRightRadius: "0"
} : {
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) */
colour: PropTypes.string,
/** 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)",
"type": {
"name": "string"
},
"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
}
}
};