orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
378 lines • 13.3 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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, typography, color, compose } from "styled-system";
import { css } from "@styled-system/css";
import shouldForwardProp from "@styled-system/should-forward-prop";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const WrapperStyles = compose(space, layout);
const LabelStyles = compose(space, layout, typography, color);
const InputStyles = compose(space, layout, typography, color);
const Wrapper = /*#__PURE__*/styled("div").withConfig({
shouldForwardProp,
displayName: "Wrapper",
componentId: "sc-1oyenoa-0"
})(props => css({
position: "relative",
width: props.fullWidth ? "100%" : "auto"
}), WrapperStyles);
const Input = /*#__PURE__*/styled("textarea").withConfig({
shouldForwardProp,
displayName: "Input",
componentId: "sc-1oyenoa-1"
}).attrs(props => ({
"data-testid": props["data-testid"] ? props["data-testid"] : null
}))(props => css({
display: "block",
cursor: "text",
appearance: "none",
boxShadow: "none",
fontFamily: themeGet("fonts.main")(props),
fontSize: themeGet("fontSizes.2")(props),
zIndex: "1",
borderRadius: themeGet("radii.2")(props),
transition: themeGet("transition.transitionDefault")(props),
background: props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props),
color: props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props),
width: props.fullWidth ? "100%" : "auto",
padding: "between",
borderWidth: themeGet("borderWidths.1")(props),
borderStyle: "solid",
borderColor: props.invalid ? themeGet("colors.dangerLight")(props) : props.valid ? themeGet("colors.successLight")(props) : themeGet("colors.black30")(props),
resize: props.resize || "both",
"&:hover": {
borderColor: props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props)
},
"&:focus": {
outline: "0",
boxShadow: props.invalid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props),
borderColor: props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props)
}
}), InputStyles);
const Label = /*#__PURE__*/styled("label").withConfig({
shouldForwardProp,
displayName: "Label",
componentId: "sc-1oyenoa-2"
})(props => css({
display: "block",
zIndex: "2",
textAlign: "left",
fontSize: themeGet("fontSizes.1")(props),
fontWeight: props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props),
transition: themeGet("transition.transitionDefault")(props),
mb: props.floating ? 0 : "xs",
span: {
color: themeGet("colors.danger")(props),
fontWeight: themeGet("fontWeights.2")(props)
},
color: props.inverted ? props.valid ? themeGet("colors.successLightest")(props) : props.invalid ? themeGet("colors.dangerLightest")(props) : themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props)
}), LabelStyles);
const Asterisk = () => {
return /*#__PURE__*/_jsx("span", {
children: " *"
});
};
const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
inverted,
id,
value,
disabled,
label,
invalid,
valid,
fullWidth,
mandatory,
bold,
cols,
rows,
resize,
onChange,
defaultValue,
autoFocus,
theme,
WrapperStyles,
LabelStyles,
ariaLabel,
onKeyDown,
InputStyles
} = props;
const component = /*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({
fullWidth: fullWidth
}, WrapperStyles), {}, {
children: [label && /*#__PURE__*/_jsxs(Label, _objectSpread(_objectSpread({
inverted: inverted,
invalid: invalid,
valid: valid,
htmlFor: id,
mandatory: mandatory,
bold: bold
}, LabelStyles), {}, {
children: [label, " ", mandatory && /*#__PURE__*/_jsx(Asterisk, {})]
})), /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
ref: ref,
id: id,
fullWidth: fullWidth,
cols: cols,
disabled: disabled,
rows: rows,
resize: resize,
autoFocus: autoFocus,
valid: valid,
invalid: invalid,
onChange: onChange,
"data-testid": props["data-testid"],
defaultValue: defaultValue,
"aria-label": ariaLabel,
onKeyDown: onKeyDown
}, InputStyles), {}, {
children: value
}))]
}));
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
});
TextArea.propTypes = {
/** Must be used to specify a unique ID. */
id: PropTypes.string.isRequired,
/** Use value to specify text in text area. */
value: PropTypes.string,
/** Specifies the text for the TextArea label. */
label: PropTypes.string,
/** Specifies aria-label for TextArea. This is only required if not using the label prop.*/
ariaLabel: (props, propName) => {
if (!props.label && (props[propName] == null || props[propName] === "")) {
return new Error("Missing prop `".concat(propName, "` not specified for TextArea 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 TextArea component. Expected `string`, received `").concat(typeof props[propName], "`."));
}
return null;
},
/** Set the label text to bold font-weight. */
bold: PropTypes.bool,
/** Sets disabled attribute and styling */
disabled: PropTypes.bool,
/** Makes text box take up full width of parent */
fullWidth: PropTypes.bool,
/** Sets specified width of input area in columns */
cols: PropTypes.string,
/** Sets specified height of input area in rows */
rows: PropTypes.string,
/** Applies invalid styles (coloured with "warning" colour from design system) */
invalid: PropTypes.bool,
/** Applies valid styles (coloured with "success" colour from design system) */
valid: PropTypes.bool,
/** Shows asterisk to denote a mandatory field */
mandatory: PropTypes.bool,
/** Set inverted styling for dark backgrounds */
inverted: PropTypes.bool,
/** Set additional styles for the `Wrapper` if needed */
WrapperStyles: PropTypes.object,
/** Set additional styles for the `Label` if needed */
LabelStyles: PropTypes.object,
/** Set additional styles for the `Input` textarea if needed */
InputStyles: PropTypes.object,
/** Specifies `data-testid` for testing */
"data-testid": PropTypes.string,
/** Specifies whether TextArea should automatically get focus */
autoFocus: PropTypes.bool,
/** Specifies `onChange` function */
onChange: PropTypes.func,
/** Specifies `textarea` default value (different from placeholder) */
defaultValue: PropTypes.string,
/** Specifies the design theme object */
theme: PropTypes.object,
/** Controls how the textarea can be resized (none, both, horizontal, vertical) */
resize: PropTypes.oneOf(["none", "both", "horizontal", "vertical"]),
onKeyDown: PropTypes.func
};
TextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "TextArea",
"props": {
"id": {
"description": "Must be used to specify a unique ID.",
"type": {
"name": "string"
},
"required": true
},
"value": {
"description": "Use value to specify text in text area.",
"type": {
"name": "string"
},
"required": false
},
"label": {
"description": "Specifies the text for the TextArea label.",
"type": {
"name": "string"
},
"required": false
},
"ariaLabel": {
"description": "Specifies aria-label for TextArea. This is only required if not using the label prop.",
"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 TextArea 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 TextArea component. Expected \\`string\\`, received \\`${typeof props[\n propName\n ]}\\`.`\n );\n }\n return null;\n}"
},
"required": false
},
"bold": {
"description": "Set the label text to bold font-weight.",
"type": {
"name": "bool"
},
"required": false
},
"disabled": {
"description": "Sets disabled attribute and styling",
"type": {
"name": "bool"
},
"required": false
},
"fullWidth": {
"description": "Makes text box take up full width of parent",
"type": {
"name": "bool"
},
"required": false
},
"cols": {
"description": "Sets specified width of input area in columns",
"type": {
"name": "string"
},
"required": false
},
"rows": {
"description": "Sets specified height of input area in rows",
"type": {
"name": "string"
},
"required": false
},
"invalid": {
"description": "Applies invalid styles (coloured with \"warning\" colour from design system)",
"type": {
"name": "bool"
},
"required": false
},
"valid": {
"description": "Applies valid styles (coloured with \"success\" colour from design system)",
"type": {
"name": "bool"
},
"required": false
},
"mandatory": {
"description": "Shows asterisk to denote a mandatory field",
"type": {
"name": "bool"
},
"required": false
},
"inverted": {
"description": "Set inverted styling for dark backgrounds",
"type": {
"name": "bool"
},
"required": false
},
"WrapperStyles": {
"description": "Set additional styles for the `Wrapper` if needed",
"type": {
"name": "object"
},
"required": false
},
"LabelStyles": {
"description": "Set additional styles for the `Label` if needed",
"type": {
"name": "object"
},
"required": false
},
"InputStyles": {
"description": "Set additional styles for the `Input` textarea if needed",
"type": {
"name": "object"
},
"required": false
},
"data-testid": {
"description": "Specifies `data-testid` for testing",
"type": {
"name": "string"
},
"required": false
},
"autoFocus": {
"description": "Specifies whether TextArea should automatically get focus",
"type": {
"name": "bool"
},
"required": false
},
"onChange": {
"description": "Specifies `onChange` function",
"type": {
"name": "func"
},
"required": false
},
"defaultValue": {
"description": "Specifies `textarea` default value (different from placeholder)",
"type": {
"name": "string"
},
"required": false
},
"theme": {
"description": "Specifies the design theme object",
"type": {
"name": "object"
},
"required": false
},
"resize": {
"description": "Controls how the textarea can be resized (none, both, horizontal, vertical)",
"type": {
"name": "enum",
"value": [{
"value": "\"none\"",
"computed": false
}, {
"value": "\"both\"",
"computed": false
}, {
"value": "\"horizontal\"",
"computed": false
}, {
"value": "\"vertical\"",
"computed": false
}]
},
"required": false
},
"onKeyDown": {
"description": "",
"type": {
"name": "func"
},
"required": false
}
}
};
export default TextArea;