orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
315 lines • 9.27 kB
JavaScript
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 = styled("div").withConfig({
displayName: "RadioButton__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 = styled("label").withConfig({
displayName: "RadioButton__RadioButtonLabel",
componentId: "sc-d2jy6y-1"
})(props => css({
display: "flex",
alignItems: "center",
cursor: props.disabled ? "default" : "pointer",
opacity: props.disabled ? "0.5" : "1"
}));
const RadioButtonControl = styled.input.attrs({
type: "radio"
}).withConfig({
displayName: "RadioButton__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 = styled("div").withConfig({
displayName: "RadioButton__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 = styled("div").withConfig({
displayName: "RadioButton__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 = styled("div").withConfig({
displayName: "RadioButton__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,
...props
} = _ref;
const component = /*#__PURE__*/_jsx(RadioButtonItem, {
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, {
...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 \`${propName}\` not specified for Radio component. When \`label\` is not provided, \`${propName}\` is required.`);
}
if (props[propName] && typeof props[propName] !== "string") {
return new Error(`Invalid propType \`${propName}\` supplied to Radio component. Expected \`string\`, received \`${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
}
}
};