orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
103 lines • 4.57 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["light", "thick", "dash", "inverted", "spanGrid", "theme"];
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, { 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 = /*#__PURE__*/styled.div.withConfig({
shouldForwardProp
}).withConfig({
displayName: "Item",
componentId: "sc-106mlj-0"
})(["", " ", " ", " width:100%;height:", ";min-height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, props => props.thick ? "3px" : "1px", props => props.thick ? "3px" : "1px", props => props.spanGrid ? "1 / -1" : "auto", props => props.dash && props.thick && props.light ? "dashed 3px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick && props.inverted ? "dashed 3px ".concat(themeGet("colors.white20")(props)) : props.dash && props.inverted ? "dashed 1px ".concat(themeGet("colors.white20")(props)) : props.dash && props.light ? "dashed 1px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick ? "dashed 3px ".concat(themeGet("colors.black20")(props)) : props.dash ? "dashed 1px ".concat(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
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const component = /*#__PURE__*/_jsx(Item, _objectSpread({
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
}
}
};