@madie/madie-design-system 1.0.40 → 1.0.42

package/components/Modal/index.jsx

@@ -1,14 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import LegacyModal from "./LegacyModal";
 import DsModal from "./Modal";
 
 const Modal = ({ useDesignSystem, ...rest }) => {
-    if (useDesignSystem) {
-        return <DsModal {...rest} />;
-    }
-    return <LegacyModal {...rest} />;
+    return <DsModal {...rest} />;
 };
 
 Modal.propTypes = {

package/components/TextArea/TextArea.stories.js

@@ -0,0 +1,141 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import TextArea from "./index";
+import { FormHelperText } from "@mui/material";
+export default {
+    title: "TextArea",
+    component: TextArea,
+    decorators: [withKnobs],
+};
+
+const Wrapper = ({ children }) => (
+    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        {children}
+    </div>
+);
+Wrapper.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+export const Textarea = () => (
+    <Wrapper>
+        <TextArea
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+        />
+    </Wrapper>
+);
+
+export const WithHelperText = () => (
+    <Wrapper>
+        <TextArea
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText={
+                <FormHelperText data-testid={`helper-text`} error={false}>
+                    a descriptive message
+                </FormHelperText>
+            }
+        />
+    </Wrapper>
+);
+
+export const Disabled = () => (
+    <Wrapper>
+        <TextArea
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            disabled
+            required
+        />
+    </Wrapper>
+);
+
+export const Required = () => (
+    <Wrapper>
+        <TextArea
+            placeholder="Placeholder"
+            required
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+        />
+    </Wrapper>
+);
+
+export const Error = () => (
+    <Wrapper>
+        <TextArea
+            placeholder="Placeholder"
+            error
+            required
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText="An error message"
+        />
+    </Wrapper>
+);
+
+export const VariedHeights = () => (
+    <div className="qpp-u-padding--16" style={{ width: 900, marginBottom: "16px" }} >
+        <div style={{display: "flex", flexDirection: "row"}}>
+            <TextArea
+                placeholder="Placeholder"
+                required
+                label="Text Label"
+                id="measureName"
+                inputProps={{ "data-testid": "measure-name-input" }}
+                data-testid="measure-name-text-field"
+                size="small"
+                helperText="An error message"
+            />
+            <TextArea
+                placeholder="Placeholder"
+                required
+                label="Text Label"
+                id="measureName"
+                inputProps={{ "data-testid": "measure-name-input" }}
+                data-testid="measure-name-text-field"
+                size="small"
+                helperText="An error message"
+            />
+            <TextArea
+                placeholder="Placeholder"
+                label="Text Label"
+                id="measureName"
+                inputProps={{ "data-testid": "measure-name-input" }}
+                data-testid="measure-name-text-field"
+                size="small"
+                helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "
+            />
+            <TextArea
+                placeholder="Placeholder"
+                error
+                required
+                label="Text Label"
+                id="measureName"
+                inputProps={{ "data-testid": "measure-name-input" }}
+                data-testid="measure-name-text-field"
+                size="small"
+                helperText="An error message"
+            />
+        </div>
+    </div>)

package/components/TextArea/index.jsx

@@ -0,0 +1,107 @@
+import React from "react";
+import {
+    FormControl,
+    FormHelperText,
+    TextareaAutosize
+} from "@mui/material";
+import InputLabel from "../InputLabel";
+import PropTypes from "prop-types";
+
+const TextArea = ({
+    id,
+    error = false,
+    helperText = undefined,
+    required = false,
+    disabled = false,
+    label,
+    inputProps,
+    ...rest
+}) => {
+    // coerce this to avoid issue passing props to dom.
+    // text area autosize is deprecated and only takes style rules
+    return (
+        <FormControl fullWidth error={error}>
+            <div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/> 
+            <InputLabel
+                disabled={disabled}
+                shrink
+                required={required}
+                error={error}
+                htmlFor={id}
+                style={{marginBottom: 0, height: 16}} // force a heignt
+                sx={[
+                {
+                    backgroundColor: "transparent",
+                    display: "flex",
+                    flexDirection: "row-reverse",
+                    alignSelf: "baseline",
+                    textTransform: "none",
+                    // force it outside the select box
+                    position: "initial",
+                    transform: "translateX(0px) translateY(0px)",
+                    fontFamily: "Rubik",
+                    fontWeight: 500,
+                    fontSize: 14,
+                    color: "#333",
+                    "& .MuiInputLabel-asterisk": {
+                        color: "#AE1C1C !important",
+                        marginRight: "3px !important", //this was
+                    },
+                },
+                required && {
+                    transform: "translateX(-12px) translateY(0px)",
+                    "& .MuiInputLabel-asterisk": {
+                        color: "#D92F2",
+                        marginRight: "3px !important", //this was
+                    },
+                },
+                disabled && {
+                    color: "rgba(0,0,0,0.6)",
+                },
+                error && {
+                    color: "#AE1C1C !important",
+                },
+            ]}
+            >
+                {label}
+            </InputLabel>
+            { helperText && (<FormHelperText
+                tabIndex={0}
+                aria-live="polite"
+                id={`${id}-helper-text`}
+                data-testid={`${id}-helper-text`}
+                sx={[{
+                    margin: "4px 0px 0px 0px",
+                    color: "#515151", 
+                    lineHeight: 1
+                },
+                error && {
+                    color: "#AE1C1C !important",
+                },
+            ]}
+                    >
+                {helperText}
+            </FormHelperText>)}
+            <TextareaAutosize
+                className={error ? "text-area-variable error" : "text-area-variable"}
+                label={null}
+                disabled={disabled}
+                id={id}
+                {...inputProps}
+                {...rest}
+            />
+        </FormControl>
+    );
+};
+
+TextArea.propTypes = {
+    id: PropTypes.string,
+    error: PropTypes.bool,
+    helperText: PropTypes.string,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.
+    label: PropTypes.string,
+    inputProps: PropTypes.any
+};
+export default TextArea;

package/components/index.js

@@ -23,6 +23,7 @@ import Spinner from "./UnwrappedSpinner";
 import TabPanel from "./Tabs/TabPanel";
 import Tabs from "./Tabs/index";
 import TextField from "./TextField";
+import TextArea from './TextArea';
 import Tooltip from "./Tooltip";
 import Toast from "./Toast";
 import Infotip from "./Infotip";
@@ -143,6 +144,7 @@ export {
     TextButton,
     TextInput,
     TextField,
+    TextArea,
     Toast,
     Dropdown,
     Tooltip,