orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
131 lines • 3.73 kB
JavaScript
import React from "react";
import styled, { ThemeProvider } from "styled-components";
import { grid, space, layout, flex, color, compose } from "styled-system";
import { css } from "@styled-system/css";
import shouldForwardProp from "@styled-system/should-forward-prop";
import PropTypes from "prop-types";
import { jsx as _jsx } from "react/jsx-runtime";
const GridStyles = compose(space, layout, grid, flex, color);
const GridWrapper = styled("div").withConfig({
shouldForwardProp,
displayName: "Grid__GridWrapper",
componentId: "sc-1rlajun-0"
}).attrs(props => ({
"data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
}))(css({
boxSizing: "border-box",
display: "grid"
}), GridStyles);
const GridItem = styled("div").withConfig({
shouldForwardProp,
displayName: "Grid__GridItem",
componentId: "sc-1rlajun-1"
}).attrs(props => ({
"data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
}))(css({
boxSizing: "border-box",
minWidth: "0"
}), GridStyles);
export default function Grid(_ref) {
let {
children,
theme,
...props
} = _ref;
const component = /*#__PURE__*/_jsx(GridWrapper, {
...props,
children: children
});
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
Grid.propTypes = {
/** Children of `Grid` are taken as node elements */
children: PropTypes.node,
/** Auto flow direction and rules */
gridAutoFlow: PropTypes.oneOf(["row", "column", "row dense", "column dense", "inherit", "initial", "unset"]),
/** Defines the spacings between columns and rows. Takes the nth value, or a specific alias, from the design system spacing scale (specified in theme). */
gridGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Specifies the system design theme. */
theme: PropTypes.object
};
Grid.defaultProps = {
gridAutoFlow: "row",
gridGap: "0"
};
GridItem.defaultProps = {
padding: "0"
};
export { GridItem };
Grid.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Grid",
"props": {
"gridAutoFlow": {
"defaultValue": {
"value": "\"row\"",
"computed": false
},
"description": "Auto flow direction and rules",
"type": {
"name": "enum",
"value": [{
"value": "\"row\"",
"computed": false
}, {
"value": "\"column\"",
"computed": false
}, {
"value": "\"row dense\"",
"computed": false
}, {
"value": "\"column dense\"",
"computed": false
}, {
"value": "\"inherit\"",
"computed": false
}, {
"value": "\"initial\"",
"computed": false
}, {
"value": "\"unset\"",
"computed": false
}]
},
"required": false
},
"gridGap": {
"defaultValue": {
"value": "\"0\"",
"computed": false
},
"description": "Defines the spacings between columns and rows. Takes the nth value, or a specific alias, from the design system spacing scale (specified in theme).",
"type": {
"name": "union",
"value": [{
"name": "number"
}, {
"name": "string"
}]
},
"required": false
},
"children": {
"description": "Children of `Grid` are taken as node elements",
"type": {
"name": "node"
},
"required": false
},
"theme": {
"description": "Specifies the system design theme.",
"type": {
"name": "object"
},
"required": false
}
}
};