orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
128 lines • 4.27 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["children", "gap", "theme", "display", "flexDirection", "flexWrap", "justifyContent", "alignItems"];
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 PropTypes from "prop-types";
import styled, { ThemeProvider } from "styled-components";
import { space, layout, flexbox, color, border, position, background, compose } from "styled-system";
import { css } from "@styled-system/css";
import shouldForwardProp from "@styled-system/should-forward-prop";
import styledPropTypes from "@styled-system/prop-types";
import { jsx as _jsx } from "react/jsx-runtime";
const FlexStyles = compose(space, layout, flexbox, color, border, position, background);
const FlexWrapper = /*#__PURE__*/styled("div").withConfig({
shouldForwardProp,
displayName: "FlexWrapper",
componentId: "sc-1f3kfw7-0"
}).attrs(props => ({
"data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
}))(props => css({
boxSizing: "border-box",
gap: props.gap
}), FlexStyles);
const FlexItem = /*#__PURE__*/styled("div").withConfig({
displayName: "FlexItem",
componentId: "sc-1f3kfw7-1"
})(css({
boxSizing: "border-box"
}), FlexStyles);
export default function Flex(_ref) {
let {
children,
gap,
theme,
display = "flex",
flexDirection = "row",
flexWrap = "nowrap",
justifyContent = "flex-start",
alignItems = "stretch"
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const component = /*#__PURE__*/_jsx(FlexWrapper, _objectSpread(_objectSpread({
gap: gap,
display: display,
flexDirection: flexDirection,
flexWrap: flexWrap,
justifyContent: justifyContent,
alignItems: alignItems
}, props), {}, {
children: children
}));
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
Flex.propTypes = _objectSpread(_objectSpread(_objectSpread({
/** Children of `Flex` are taken as node elements */
children: PropTypes.node,
gap: PropTypes.string,
theme: PropTypes.object
}, styledPropTypes.space), styledPropTypes.layout), styledPropTypes.flexbox);
export { FlexItem };
Flex.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Flex",
"props": {
"display": {
"defaultValue": {
"value": "\"flex\"",
"computed": false
},
"required": false
},
"flexDirection": {
"defaultValue": {
"value": "\"row\"",
"computed": false
},
"required": false
},
"flexWrap": {
"defaultValue": {
"value": "\"nowrap\"",
"computed": false
},
"required": false
},
"justifyContent": {
"defaultValue": {
"value": "\"flex-start\"",
"computed": false
},
"required": false
},
"alignItems": {
"defaultValue": {
"value": "\"stretch\"",
"computed": false
},
"required": false
},
"children": {
"description": "Children of `Flex` are taken as node elements",
"type": {
"name": "node"
},
"required": false
},
"gap": {
"description": "",
"type": {
"name": "string"
},
"required": false
},
"theme": {
"description": "",
"type": {
"name": "object"
},
"required": false
}
},
"composes": ["@styled-system/prop-types"]
};