orcs-design-system 3.2.4 → 3.2.6

package/es/components/TextArea/index.js

@@ -1,5 +1,3 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _extends from "@babel/runtime/helpers/extends";
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
@@ -7,126 +5,130 @@ 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";
-var WrapperStyles = compose(space, layout);
-var LabelStyles = compose(space, layout, typography, color);
-var InputStyles = compose(space, layout, typography, color);
-var Wrapper = styled("div").withConfig({
-  shouldForwardProp: shouldForwardProp,
+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 = styled("div").withConfig({
+  shouldForwardProp,
   displayName: "TextArea__Wrapper",
   componentId: "sc-1oyenoa-0"
-})(function (props) {
-  return css({
-    position: "relative",
-    width: props.fullWidth ? "100%" : "auto"
-  });
-}, WrapperStyles);
-var Input = styled("textarea").withConfig({
-  shouldForwardProp: shouldForwardProp,
+})(props => css({
+  position: "relative",
+  width: props.fullWidth ? "100%" : "auto"
+}), WrapperStyles);
+const Input = styled("textarea").withConfig({
+  shouldForwardProp,
   displayName: "TextArea__Input",
   componentId: "sc-1oyenoa-1"
-}).attrs(function (props) {
-  return {
-    "data-testid": props["data-testid"] ? props["data-testid"] : null
-  };
-})(function (props) {
-  return 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),
-    "&: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);
-var Label = styled("label").withConfig({
-  shouldForwardProp: shouldForwardProp,
+}).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),
+  "&: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 = styled("label").withConfig({
+  shouldForwardProp,
   displayName: "TextArea__Label",
   componentId: "sc-1oyenoa-2"
-})(function (props) {
-  return 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)
+})(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: " *"
   });
-}, LabelStyles);
-var Asterisk = function Asterisk() {
-  return /*#__PURE__*/React.createElement("span", null, " *");
 };
-var TextArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var inverted = props.inverted,
-    id = props.id,
-    value = props.value,
-    disabled = props.disabled,
-    label = props.label,
-    invalid = props.invalid,
-    valid = props.valid,
-    fullWidth = props.fullWidth,
-    mandatory = props.mandatory,
-    bold = props.bold,
-    cols = props.cols,
-    rows = props.rows,
-    onChange = props.onChange,
-    defaultValue = props.defaultValue,
-    autoFocus = props.autoFocus,
-    theme = props.theme,
-    WrapperStyles = props.WrapperStyles,
-    LabelStyles = props.LabelStyles,
-    ariaLabel = props.ariaLabel,
-    InputStyles = props.InputStyles;
-  var component = /*#__PURE__*/React.createElement(Wrapper, _extends({
-    fullWidth: fullWidth
-  }, WrapperStyles), label && /*#__PURE__*/React.createElement(Label, _extends({
-    inverted: inverted,
-    invalid: invalid,
-    valid: valid,
-    htmlFor: id,
-    mandatory: mandatory,
-    bold: bold
-  }, LabelStyles), label, " ", mandatory && /*#__PURE__*/React.createElement(Asterisk, null)), /*#__PURE__*/React.createElement(Input, _extends({
-    ref: ref,
-    id: id,
+const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    inverted,
+    id,
+    value,
+    disabled,
+    label,
+    invalid,
+    valid,
+    fullWidth,
+    mandatory,
+    bold,
+    cols,
+    rows,
+    onChange,
+    defaultValue,
+    autoFocus,
+    theme,
+    WrapperStyles,
+    LabelStyles,
+    ariaLabel,
+    InputStyles
+  } = props;
+  const component = /*#__PURE__*/_jsxs(Wrapper, {
     fullWidth: fullWidth,
-    cols: cols,
-    disabled: disabled,
-    rows: rows,
-    autoFocus: autoFocus,
-    valid: valid,
-    invalid: invalid,
-    onChange: onChange,
-    "data-testid": props["data-testid"],
-    defaultValue: defaultValue,
-    "aria-label": ariaLabel
-  }, InputStyles), value));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    ...WrapperStyles,
+    children: [label && /*#__PURE__*/_jsxs(Label, {
+      inverted: inverted,
+      invalid: invalid,
+      valid: valid,
+      htmlFor: id,
+      mandatory: mandatory,
+      bold: bold,
+      ...LabelStyles,
+      children: [label, " ", mandatory && /*#__PURE__*/_jsx(Asterisk, {})]
+    }), /*#__PURE__*/_jsx(Input, {
+      ref: ref,
+      id: id,
+      fullWidth: fullWidth,
+      cols: cols,
+      disabled: disabled,
+      rows: rows,
+      autoFocus: autoFocus,
+      valid: valid,
+      invalid: invalid,
+      onChange: onChange,
+      "data-testid": props["data-testid"],
+      defaultValue: defaultValue,
+      "aria-label": ariaLabel,
+      ...InputStyles,
+      children: value
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 });
 TextArea.propTypes = {
   /** Must be used to specify a unique ID. */
@@ -136,12 +138,12 @@ TextArea.propTypes = {
   /** 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: function ariaLabel(props, propName) {
+  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 new Error("Invalid propType `".concat(propName, "` supplied to TextArea component. Expected `string`, received `").concat(typeof props[propName], "`."));
     }
     return null;
   },

package/es/components/TextInput/TextInput.stories.js

@@ -1,145 +1,125 @@
 import React from "react";
 import TextInput from ".";
 import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/TextInput",
   component: TextInput
 };
-export var defaultTextInput = function defaultTextInput() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+export const defaultTextInput = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "r",
+  children: [/*#__PURE__*/_jsx(TextInput, {
     id: "textInput1",
-    key: "textInput1",
     type: "text",
     label: "Full name",
     placeholder: "E.g. John Smith",
     my: "20px"
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput1"), /*#__PURE__*/_jsx(TextInput, {
     id: "textInput2",
-    key: "textInput2",
     type: "text",
     label: "Full name - invalid message",
     placeholder: "E.g. John Smith",
     invalid: true
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput2"), /*#__PURE__*/_jsx(TextInput, {
     id: "textInput3",
-    key: "textInput3",
     type: "text",
     label: "Full name",
     placeholder: "E.g. John Smith",
     valid: true
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput3"), /*#__PURE__*/_jsx(TextInput, {
     id: "textInput4",
-    key: "textInput4",
     type: "text",
     label: "Full name",
     placeholder: "E.g. John Smith",
     mandatory: true
-  }));
-};
+  }, "textInput4")]
+});
 defaultTextInput.story = {
   name: "Default"
 };
-var numberProps = {
+const numberProps = {
   decimalScale: 2,
   prefix: "$"
 };
-export var number = function number() {
-  return [/*#__PURE__*/React.createElement(TextInput, {
-    id: "numInput1",
-    key: "numInput1",
-    numberProps: numberProps,
-    label: "Currency",
-    value: "345345.55"
-  })];
-};
-export var floatingLabel = function floatingLabel() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+export const number = () => [/*#__PURE__*/_jsx(TextInput, {
+  id: "numInput1",
+  numberProps: numberProps,
+  label: "Currency",
+  value: "345345.55"
+}, "numInput1")];
+export const floatingLabel = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "r",
+  children: [/*#__PURE__*/_jsx(TextInput, {
     id: "textInput5",
-    key: "textInput5",
     type: "text",
     label: "Full name",
     placeholder: "E.g. John Smith",
     floating: true
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput5"), /*#__PURE__*/_jsx(TextInput, {
     id: "textInput6",
-    key: "textInput6",
     type: "text",
     label: "Full name - invalid message",
     placeholder: "E.g. John Smith",
     floating: true,
     invalid: true
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput6"), /*#__PURE__*/_jsx(TextInput, {
     id: "textInput7",
-    key: "textInput7",
     type: "text",
     label: "Full name",
     placeholder: "E.g. John Smith",
     floating: true,
     valid: true
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput7"), /*#__PURE__*/_jsx(TextInput, {
     id: "textInput8",
-    key: "textInput8",
     type: "text",
     label: "Full name",
     placeholder: "E.g. John Smith",
     floating: true,
     mandatory: true
-  }));
-};
-export var withIcons = function withIcons() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput8")]
+});
+export const withIcons = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "r",
+  children: [/*#__PURE__*/_jsx(TextInput, {
     id: "textInput9",
-    key: "textInput9",
     type: "text",
     label: "Phone number",
     placeholder: "E.g. (03) 9451 1786",
     iconLeft: ["fas", "phone"],
     "data-testid": "test-id"
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput9"), /*#__PURE__*/_jsx(TextInput, {
     id: "textInput10",
-    key: "textInput10",
     type: "text",
     label: "Phone number",
     placeholder: "E.g. (03) 9451 1786",
     floating: true,
     iconLeft: ["fas", "phone"]
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput10"), /*#__PURE__*/_jsx(TextInput, {
     fullWidth: true,
     id: "textInput11",
-    key: "textInput11",
     type: "text",
     label: "What are you looking for?",
     placeholder: "E.g. agile teams",
     iconRight: ["fas", "search"]
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  }, "textInput11"), /*#__PURE__*/_jsx(TextInput, {
     fullWidth: true,
     id: "textInput12",
-    key: "textInput12",
     type: "text",
     label: "What are you looking for?",
     placeholder: "E.g. agile teams",
     floating: true,
     iconRight: ["fas", "search"]
-  }));
-};
-export var disabled = function disabled() {
-  return /*#__PURE__*/React.createElement(TextInput, {
-    id: "textInput13",
-    key: "textInput13",
-    type: "text",
-    label: "Full name",
-    placeholder: "E.g. John Smith",
-    my: "20px",
-    value: "This is uneditable",
-    disabled: true
-  });
-};
+  }, "textInput12")]
+});
+export const disabled = () => /*#__PURE__*/_jsx(TextInput, {
+  id: "textInput13",
+  type: "text",
+  label: "Full name",
+  placeholder: "E.g. John Smith",
+  my: "20px",
+  value: "This is uneditable",
+  disabled: true
+}, "textInput13");
 defaultTextInput.__docgenInfo = {
   "description": "",
   "methods": [],