orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
220 lines • 7.11 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["children", "theme", "dataTestId", "bg"];
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, { forwardRef } from "react";
import styled, { ThemeProvider } from "styled-components";
import { space, layout, flexbox, color, border, position, variant, background, compose } from "styled-system";
import shouldForwardProp from "@styled-system/should-forward-prop";
import { css } from "@styled-system/css";
import PropTypes from "prop-types";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx } from "react/jsx-runtime";
const boxStyles = compose(space, layout, flexbox, color, border, position, background);
const BoxWrapper = /*#__PURE__*/styled("div").withConfig({
shouldForwardProp,
displayName: "BoxWrapper",
componentId: "sc-jr1api-0"
}).attrs(props => ({
"data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
}))(css({
width: "auto",
display: "block",
overflow: "visible"
}), variant({
prop: "shadow",
variants: {
default: {
boxShadow: "boxDefault"
}
}
}), props => variant({
prop: "boxBorder",
variants: {
default: {
borderStyle: "solid",
borderWidth: themeGet("borderWidths.1")(props),
borderColor: themeGet("colors.greyLighter")(props)
}
}
}), boxStyles);
export const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
children,
theme,
dataTestId,
bg = "transparent"
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const component = /*#__PURE__*/_jsx(BoxWrapper, _objectSpread(_objectSpread({
ref: ref,
dataTestId: dataTestId,
bg: bg
}, props), {}, {
children: children
}));
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
});
Box.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Box",
"props": {
"bg": {
"defaultValue": {
"value": "\"transparent\"",
"computed": false
},
"description": "Sets the background colour of the box.",
"type": {
"name": "string"
},
"required": false
},
"children": {
"description": "Children of `Box` are taken as node elements",
"type": {
"name": "node"
},
"required": false
},
"display": {
"description": "Sets `Box` display mode. Default is `block`.",
"type": {
"name": "enum",
"value": [{
"value": "\"inline\"",
"computed": false
}, {
"value": "\"block\"",
"computed": false
}, {
"value": "\"contents\"",
"computed": false
}, {
"value": "\"inline-block\"",
"computed": false
}, {
"value": "\"none\"",
"computed": false
}, {
"value": "\"initial\"",
"computed": false
}, {
"value": "\"inherit\"",
"computed": false
}]
},
"required": false
},
"overflow": {
"description": "Sets behaviour of elements in `Box` that are larger than their container. Default is `visible`.",
"type": {
"name": "enum",
"value": [{
"value": "\"visible\"",
"computed": false
}, {
"value": "\"hidden\"",
"computed": false
}, {
"value": "\"scroll\"",
"computed": false
}, {
"value": "\"auto\"",
"computed": false
}]
},
"required": false
},
"p": {
"description": "Sets the inner padding on all four sides. Takes values from the `space` array in `systemtheme.js`.",
"type": {
"name": "union",
"value": [{
"name": "number"
}, {
"name": "string"
}]
},
"required": false
},
"m": {
"description": "Sets the outer margin on all four sides. Takes values from the `space` array in `systemtheme.js`.",
"type": {
"name": "union",
"value": [{
"name": "number"
}, {
"name": "string"
}]
},
"required": false
},
"width": {
"description": "Sets the width of the box.",
"type": {
"name": "union",
"value": [{
"name": "array"
}, {
"name": "string"
}]
},
"required": false
},
"height": {
"description": "Sets the height of the box. Default is `auto`.",
"type": {
"name": "union",
"value": [{
"name": "array"
}, {
"name": "string"
}]
},
"required": false
},
"dataTestId": {
"description": "Specifies the `data-testid` attribute for testing.",
"type": {
"name": "string"
},
"required": false
},
"theme": {
"description": "Specifies the colour theme",
"type": {
"name": "object"
},
"required": false
}
}
};
export default Box;
Box.propTypes = {
/** Children of `Box` are taken as node elements */
children: PropTypes.node,
/** Sets `Box` display mode. Default is `block`. */
display: PropTypes.oneOf(["inline", "block", "contents", "inline-block", "none", "initial", "inherit"]),
/** Sets behaviour of elements in `Box` that are larger than their container. Default is `visible`. */
overflow: PropTypes.oneOf(["visible", "hidden", "scroll", "auto"]),
/** Sets the inner padding on all four sides. Takes values from the `space` array in `systemtheme.js`. */
p: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Sets the outer margin on all four sides. Takes values from the `space` array in `systemtheme.js`. */
m: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Sets the background colour of the box. */
bg: PropTypes.string,
/** Sets the width of the box. */
width: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
/** Sets the height of the box. Default is `auto`. */
height: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
/** Specifies the `data-testid` attribute for testing. */
dataTestId: PropTypes.string,
/** Specifies the colour theme */
theme: PropTypes.object
};