orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
99 lines • 3.5 kB
JavaScript
import React from "react";
import styled, { ThemeProvider } from "styled-components";
import PropTypes from "prop-types";
import { space, layout, color } from "styled-system";
import { themeGet } from "@styled-system/theme-get";
import shouldForwardProp from "@styled-system/should-forward-prop";
import { jsx as _jsx } from "react/jsx-runtime";
const Item = styled.div.withConfig({
shouldForwardProp
}).withConfig({
displayName: "Divider__Item",
componentId: "sc-106mlj-0"
})(["", " ", " ", " display:block;width:100%;height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, props => props.thick ? "3px" : "1px", props => props.spanGrid ? "1 / -1" : "auto", props => props.dash && props.thick && props.light ? `dashed 3px ${themeGet("colors.black10")(props)}` : props.dash && props.thick && props.inverted ? `dashed 3px ${themeGet("colors.white20")(props)}` : props.dash && props.inverted ? `dashed 1px ${themeGet("colors.white20")(props)}` : props.dash && props.light ? `dashed 1px ${themeGet("colors.black10")(props)}` : props.dash && props.thick ? `dashed 3px ${themeGet("colors.black20")(props)}` : props.dash ? `dashed 1px ${themeGet("colors.black20")(props)}` : "none", props => props.dash ? "transparent" : props.inverted ? themeGet("colors.white20")(props) : props.light ? themeGet("colors.black10")(props) : themeGet("colors.black20")(props));
export default function Divider(_ref) {
let {
light,
thick,
dash,
inverted,
spanGrid,
theme,
...props
} = _ref;
const component = /*#__PURE__*/_jsx(Item, {
light: light,
thick: thick,
dash: dash,
inverted: inverted,
spanGrid: spanGrid,
...props
});
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
Divider.propTypes = {
/** Divider will use a lighter grey colour */
light: PropTypes.bool,
/** Divider will be 3px instead of 1px */
thick: PropTypes.bool,
/** Divider will have a dashed line instead of solid line */
dash: PropTypes.bool,
/** Divider will be a darker colour more suited for dark backgrounds */
inverted: PropTypes.bool,
/** Divider will span all columns when in a grid so it can be used as a row divider */
spanGrid: PropTypes.bool,
/** Specifies the system design theme. */
theme: PropTypes.object
};
Divider.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Divider",
"props": {
"light": {
"description": "Divider will use a lighter grey colour",
"type": {
"name": "bool"
},
"required": false
},
"thick": {
"description": "Divider will be 3px instead of 1px",
"type": {
"name": "bool"
},
"required": false
},
"dash": {
"description": "Divider will have a dashed line instead of solid line",
"type": {
"name": "bool"
},
"required": false
},
"inverted": {
"description": "Divider will be a darker colour more suited for dark backgrounds",
"type": {
"name": "bool"
},
"required": false
},
"spanGrid": {
"description": "Divider will span all columns when in a grid so it can be used as a row divider",
"type": {
"name": "bool"
},
"required": false
},
"theme": {
"description": "Specifies the system design theme.",
"type": {
"name": "object"
},
"required": false
}
}
};