orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
216 lines • 6.09 kB
JavaScript
import React, { forwardRef } from "react";
import styled, { ThemeProvider } from "styled-components";
import { space, layout, flexbox, color, border, position, variant, 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);
const BoxWrapper = styled("div").withConfig({
shouldForwardProp,
displayName: "Box__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,
...props
} = _ref;
const component = /*#__PURE__*/_jsx(BoxWrapper, {
ref: ref,
dataTestId: dataTestId,
...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
};
Box.defaultProps = {
bg: "transparent"
};