orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
319 lines • 10.4 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["name", "value", "label", "variant", "disabled", "checked", "onChange", "theme", "ariaLabel"];
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 { pick } from "lodash";
import styled, { ThemeProvider } from "styled-components";
import { space, layout, compose, variant, typography } from "styled-system";
import { css } from "@styled-system/css";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const RadioButtonStyles = compose(space, layout);
const RadioButtonItem = /*#__PURE__*/styled("div").withConfig({
displayName: "RadioButtonItem",
componentId: "sc-d2jy6y-0"
})(props => css({
color: themeGet("colors.greyDarkest")(props)
}), props => variant({
variants: {
default: {},
white: {
color: themeGet("colors.white")(props)
}
}
}), RadioButtonStyles);
const RadioButtonLabel = /*#__PURE__*/styled("label").withConfig({
displayName: "RadioButtonLabel",
componentId: "sc-d2jy6y-1"
})(props => css({
display: "flex",
alignItems: "center",
cursor: props.disabled ? "default" : "pointer",
opacity: props.disabled ? "0.5" : "1"
}));
const RadioButtonControl = /*#__PURE__*/styled.input.attrs({
type: "radio"
}).withConfig({
displayName: "RadioButtonControl",
componentId: "sc-d2jy6y-2"
})(props => css({
opacity: "0",
position: "absolute",
margin: "0",
zIndex: "-1",
width: "0",
height: "0",
overflow: "hidden",
pointerEvents: "none",
"+ div > div": {
transform: "scale(0)"
},
"&:checked + div > div": {
transform: "scale(1)"
},
"&:focus + div": {
boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black30")(props)
}
}), props => variant({
variants: {
default: {},
white: {
"&:focus + div": {
boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.white30")(props)
}
},
primary: {
"&:focus + div": {
boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props)
}
},
success: {
"&:focus + div": {
boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props)
}
},
warning: {
"&:focus + div": {
boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.warning30")(props)
}
},
danger: {
"&:focus + div": {
boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props)
}
}
}
}));
const RadioButtonCircle = /*#__PURE__*/styled("div").withConfig({
displayName: "RadioButtonCircle",
componentId: "sc-d2jy6y-3"
})(props => css({
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "20px",
height: "20px",
borderRadius: "10px",
border: "solid 2px",
borderColor: themeGet("colors.greyDarker")(props),
transition: themeGet("transition.transitionDefault")(props)
}), props => variant({
variants: {
default: {},
white: {
borderColor: themeGet("colors.white")(props)
},
primary: {
borderColor: themeGet("colors.primary")(props)
},
success: {
borderColor: themeGet("colors.success")(props)
},
warning: {
borderColor: themeGet("colors.warning")(props)
},
danger: {
borderColor: themeGet("colors.danger")(props)
}
}
}));
const RadioButtonDot = /*#__PURE__*/styled("div").withConfig({
displayName: "RadioButtonDot",
componentId: "sc-d2jy6y-4"
})(props => css({
position: "absolute",
display: "block",
width: "10px",
height: "10px",
borderRadius: "8px",
transform: "scale(0)",
backgroundColor: themeGet("colors.greyDarker")(props),
transition: themeGet("transition.transitionDefault")(props)
}), props => variant({
variants: {
default: {},
white: {
backgroundColor: themeGet("colors.white")(props)
},
primary: {
backgroundColor: themeGet("colors.primary")(props)
},
success: {
backgroundColor: themeGet("colors.success")(props)
},
warning: {
backgroundColor: themeGet("colors.warning")(props)
},
danger: {
backgroundColor: themeGet("colors.danger")(props)
}
}
}));
const RadioButtonText = /*#__PURE__*/styled("div").withConfig({
displayName: "RadioButtonText",
componentId: "sc-d2jy6y-5"
})(props => css({
paddingLeft: "s",
fontSize: themeGet("fontSizes.2")(props),
fontWeight: themeGet("fontWeights.1")(props)
}), typography);
export default function RadioButton(_ref) {
let {
name,
value,
label,
variant,
disabled,
checked,
onChange,
theme,
ariaLabel
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const component = /*#__PURE__*/_jsx(RadioButtonItem, _objectSpread(_objectSpread({
variant: variant
}, props), {}, {
children: /*#__PURE__*/_jsxs(RadioButtonLabel, {
disabled: disabled,
children: [/*#__PURE__*/_jsx(RadioButtonControl, {
name: name,
variant: variant,
value: value,
disabled: disabled,
checked: checked,
onChange: onChange,
"aria-label": ariaLabel
}), /*#__PURE__*/_jsx(RadioButtonCircle, {
variant: variant,
children: /*#__PURE__*/_jsx(RadioButtonDot, {
variant: variant
})
}), /*#__PURE__*/_jsx(RadioButtonText, _objectSpread(_objectSpread({}, pick(props, typography.propNames)), {}, {
children: label
}))]
})
}));
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
RadioButton.propTypes = {
/** Sets a name to define the radio button group */
name: PropTypes.string,
/** Sets the value of the radio button */
value: PropTypes.string,
/** Sets the label of the radio button */
label: PropTypes.string,
// ariaLabel prop must be specified if label is not provided
ariaLabel: (props, propName) => {
if (!props.label && (props[propName] == null || props[propName] === "")) {
return new Error("Missing prop `".concat(propName, "` not specified for Radio component. When `label` is not provided, `").concat(propName, "` is required."));
}
if (props[propName] && typeof props[propName] !== "string") {
return new Error("Invalid propType `".concat(propName, "` supplied to Radio component. Expected `string`, received `").concat(typeof props[propName], "`."));
}
return null;
},
/** Sets radio button colour. Default is greyDarker. Use white for inverted styling */
variant: PropTypes.oneOf(["success", "warning", "danger", "primary", "white"]),
/** Applies disabled attribute and styling */
disabled: PropTypes.bool,
/** Applies checked attribute and styling */
checked: PropTypes.bool,
/** Function to call when checked */
onChange: PropTypes.func,
/** Specifies the system design theme */
theme: PropTypes.object
};
RadioButton.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "RadioButton",
"props": {
"name": {
"description": "Sets a name to define the radio button group",
"type": {
"name": "string"
},
"required": false
},
"value": {
"description": "Sets the value of the radio button",
"type": {
"name": "string"
},
"required": false
},
"label": {
"description": "Sets the label of the radio button",
"type": {
"name": "string"
},
"required": false
},
"ariaLabel": {
"description": "",
"type": {
"name": "custom",
"raw": "(props, propName) => {\n if (!props.label && (props[propName] == null || props[propName] === \"\")) {\n return new Error(\n `Missing prop \\`${propName}\\` not specified for Radio component. When \\`label\\` is not provided, \\`${propName}\\` is required.`\n );\n }\n if (props[propName] && typeof props[propName] !== \"string\") {\n return new Error(\n `Invalid propType \\`${propName}\\` supplied to Radio component. Expected \\`string\\`, received \\`${typeof props[\n propName\n ]}\\`.`\n );\n }\n return null;\n}"
},
"required": false
},
"variant": {
"description": "Sets radio button colour. Default is greyDarker. Use white for inverted styling",
"type": {
"name": "enum",
"value": [{
"value": "\"success\"",
"computed": false
}, {
"value": "\"warning\"",
"computed": false
}, {
"value": "\"danger\"",
"computed": false
}, {
"value": "\"primary\"",
"computed": false
}, {
"value": "\"white\"",
"computed": false
}]
},
"required": false
},
"disabled": {
"description": "Applies disabled attribute and styling",
"type": {
"name": "bool"
},
"required": false
},
"checked": {
"description": "Applies checked attribute and styling",
"type": {
"name": "bool"
},
"required": false
},
"onChange": {
"description": "Function to call when checked",
"type": {
"name": "func"
},
"required": false
},
"theme": {
"description": "Specifies the system design theme",
"type": {
"name": "object"
},
"required": false
}
}
};