@madie/madie-design-system 1.2.62 → 2.0.1

package/components/Tabs/Tabs.stories.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import "./tabs.scss";
 import Tabs from "./index";
 import Tab from "./Tab";
@@ -7,222 +6,55 @@ import Tab from "./Tab";
 export default {
     title: "Tabs",
     component: Tabs,
-    decorators: [withKnobs],
+    argTypes: {
+        type: {
+            control: { type: "select" },
+            options: ["A", "B", "C", "D"],
+        },
+        size: {
+            control: { type: "select" },
+            options: ["standard", "large"],
+        },
+        orientation: {
+            control: { type: "radio" },
+            options: ["horizontal", "vertical"],
+        },
+    },
 };
 
-export const TypeA = () => {
-    // state, setState
+/**
+ * @param {{
+ *   type: "A" | "B" | "C" | "D",
+ *   size: "standard" | "large",
+ *   orientation: "horizontal" | "vertical"
+ * }} props
+ */
+const Template = ({ type, size, orientation }) => {
     const [selected, setSelected] = useState(1);
+    const handleChange = (_, value) => setSelected(value);
 
-    const handleChange = (e, v) => {
-        // 1,2,3
-        setSelected(v);
-    };
+    const tabProps = { type, size, orientation };
 
     return (
-        <div style={{ margin: "25px" }}>
-            <div style={{ width: "fit-content" }}>
-                Standard: A
-                <Tabs
-                    type="A"
-                    size="standard"
-                    value={selected}
-                    onChange={handleChange}
-                >
-                    <Tab type="A" size="standard" label="Item One" value={1} />
-                    <Tab type="A" size="standard" label="Item Two" value={2} />
-                    <Tab
-                        type="A"
-                        size="standard"
-                        label="Item Three"
-                        value={3}
-                    />
-                    <Tab
-                        type="A"
-                        size="standard"
-                        label="disabled"
-                        value={4}
-                        disabled
-                    />
-                </Tabs>
-            </div>
-            <div style={{ width: "fit-content" }}>
-                Large: A
-                <Tabs
-                    type="A"
-                    size="large"
-                    value={selected}
-                    onChange={handleChange}
-                >
-                    <Tab type="A" size="large" label="Item One" value={1} />
-                    <Tab type="A" size="large" label="Item Two" value={2} />
-                    <Tab type="A" size="large" label="Item Three" value={3} />
-                    <Tab
-                        type="A"
-                        size="large"
-                        label="disabled"
-                        value={4}
-                        disabled
-                    />
-                </Tabs>
-            </div>
-            <div style={{ width: "fit-content" }}>
-                Standard: B
-                <Tabs
-                    type="B"
-                    size="standard"
-                    value={selected}
-                    onChange={handleChange}
-                >
-                    <Tab type="B" size="standard" label="Item One" value={1} />
-                    <Tab type="B" size="standard" label="Item Two" value={2} />
-                    <Tab
-                        type="B"
-                        size="standard"
-                        label="Item Three"
-                        value={3}
-                    />
-                    <Tab
-                        type="B"
-                        size="standard"
-                        label="disabled"
-                        value={4}
-                        disabled
-                    />
-                </Tabs>
-            </div>
-
-            <div style={{ width: "fit-content" }}>
-                Large: B
-                <Tabs
-                    type="B"
-                    size="large"
-                    value={selected}
-                    onChange={handleChange}
-                >
-                    <Tab type="B" size="large" label="Item One" value={1} />
-                    <Tab type="B" size="large" label="Item Two" value={2} />
-                    <Tab type="B" size="large" label="Item Three" value={3} />
-                    <Tab
-                        type="B"
-                        size="large"
-                        label="disabled"
-                        value={4}
-                        disabled
-                    />
-                </Tabs>
-            </div>
-            <div style={{ width: "fit-content" }}>
-                Standard: C
-                <Tabs type="C" value={selected} onChange={handleChange}>
-                    <Tab type="C" size="standard" label="Item One" value={1} />
-                    <Tab type="C" size="standard" label="Item Two" value={2} />
-                    <Tab
-                        type="C"
-                        size="standard"
-                        label="Item Three"
-                        value={3}
-                    />
-                    <Tab
-                        type="C"
-                        size="standard"
-                        label="disabled"
-                        value={4}
-                        disabled
-                    />
-                </Tabs>
-            </div>
-            <div style={{ width: "fit-content" }}>
-                Large: C
-                <Tabs type="C" value={selected} onChange={handleChange}>
-                    <Tab type="C" size="large" label="Item One" value={1} />
-                    <Tab type="C" size="large" label="Item Two" value={2} />
-                    <Tab type="C" size="large" label="Item Three" value={3} />
-                    <Tab
-                        type="C"
-                        size="large"
-                        label="disabled"
-                        value={4}
-                        disabled
-                    />
-                </Tabs>
-            </div>
-            <div className={"vertical-standard-type-c-wrapper"}>
-                <div className={"vertical-standard-type-c"}>
-                    <h4>Vertical Standard: C</h4>
-                    <Tabs
-                        type="C"
-                        value={selected}
-                        onChange={handleChange}
-                        orientation="vertical"
-                    >
-                        <Tab
-                            type="C"
-                            size="standard"
-                            label="Item One"
-                            value={1}
-                            orientation="vertical"
-                        />
-                        <Tab
-                            type="C"
-                            size="standard"
-                            label="Item Two"
-                            value={2}
-                            orientation="vertical"
-                        />
-                        <Tab
-                            type="C"
-                            size="standard"
-                            label="Item Three"
-                            value={3}
-                            orientation="vertical"
-                        />
-                        <Tab
-                            type="C"
-                            size="standard"
-                            label="disabled"
-                            value={4}
-                            disabled
-                            orientation="vertical"
-                        />
-                    </Tabs>
-                </div>
-            </div>
-            <div style={{ width: "fit-content" }}>
-                Standard: D
-                <Tabs type="D" value={selected} onChange={handleChange}>
-                    <Tab type="D" size="standard" label="Item One" value={1} />
-                    <Tab type="D" size="standard" label="Item Two" value={2} />
-                    <Tab
-                        type="D"
-                        size="standard"
-                        label="Item Three"
-                        value={3}
-                    />
-                    <Tab
-                        type="D"
-                        size="standard"
-                        label="disabled"
-                        value={4}
-                        disabled
-                    />
-                </Tabs>
-            </div>
-            <div style={{ width: "fit-content" }}>
-                Large: D
-                <Tabs type="D" value={selected} onChange={handleChange}>
-                    <Tab type="D" size="large" label="Item One" value={1} />
-                    <Tab type="D" size="large" label="Item Two" value={2} />
-                    <Tab type="D" size="large" label="Item Three" value={3} />
-                    <Tab
-                        type="D"
-                        size="large"
-                        label="disabled"
-                        value={4}
-                        disabled
-                    />
-                </Tabs>
-            </div>
+        <div
+            style={{
+                margin: "25px",
+                width: orientation === "vertical" ? 200 : "fit-content",
+            }}
+        >
+            <Tabs {...tabProps} value={selected} onChange={handleChange}>
+                <Tab {...tabProps} label="Item One" value={1} />
+                <Tab {...tabProps} label="Item Two" value={2} />
+                <Tab {...tabProps} label="Item Three" value={3} />
+                <Tab {...tabProps} label="disabled" value={4} disabled />
+            </Tabs>
         </div>
     );
 };
+
+export const InteractiveTabs = Template.bind({});
+InteractiveTabs.args = {
+    type: "A",
+    size: "standard",
+    orientation: "horizontal",
+};

package/components/Tabs/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Tabs as MuiTabs } from "@mui/material";
 
 const typeA = {
@@ -63,7 +62,12 @@ const baseStyle = {
     },
 };
 
-const Tabs = ({ type, size, orientation, ...rest }) => {
+const Tabs = ({
+    type = "A",
+    size = "standard",
+    orientation = "horizontal",
+    ...rest
+}) => {
     let style = { ...baseStyle };
 
     switch (type) {
@@ -74,11 +78,10 @@ const Tabs = ({ type, size, orientation, ...rest }) => {
             style = { ...style, ...typeB };
             break;
         case "C":
-            if (orientation === "vertical") {
-                style = { ...style, ...typeC, ...typeCVerticalSelected };
-            } else {
-                style = { ...style, ...typeC };
-            }
+            style =
+                orientation === "vertical"
+                    ? { ...style, ...typeC, ...typeCVerticalSelected }
+                    : { ...style, ...typeC };
             break;
         case "D":
             style = { ...style, ...typeD };
@@ -92,25 +95,4 @@ const Tabs = ({ type, size, orientation, ...rest }) => {
     );
 };
 
-Tabs.propTypes = {
-    orientation: PropTypes.string,
-    type: PropTypes.oneOf(["A", "B", "C", "D"]),
-    size: PropTypes.oneOf(["standard", "large"]),
-    ariaLabel: PropTypes.string,
-    selected: PropTypes.string,
-    defaultSelectedId: PropTypes.string,
-    onChange: PropTypes.func,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
-};
-
-Tabs.defaultProps = {
-    orientation: "horizontal",
-    type: "A",
-    size: "standard",
-    selected: null,
-    defaultSelectedId: null,
-    onChange: null,
-    children: null,
-};
-
 export default Tabs;

package/components/TextArea/TextArea.stories.js

@@ -1,12 +1,21 @@
 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],
+    argTypes: {
+        disabled: { control: "boolean" },
+        error: { control: "boolean" },
+        required: { control: "boolean" },
+        size: {
+            control: { type: "select" },
+            options: ["small", "medium", "large"], // adjust if needed
+        },
+        helperText: { control: "text" },
+        value: { control: "text" },
+    },
 };
 
 const Wrapper = ({ children }) => (
@@ -14,148 +23,113 @@ const Wrapper = ({ children }) => (
         {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 = () => (
+const Template = (args) => (
     <Wrapper>
         <TextArea
-            placeholder="Placeholder"
-            label="Text Label"
+            {...args}
             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>
-            }
+            label="Text Label"
+            placeholder="Placeholder"
         />
     </Wrapper>
 );
 
-export const DisabledWithValue = () => (
-    <Wrapper>
+export const Interactive = Template.bind({});
+Interactive.args = {
+    size: "small",
+    disabled: false,
+    error: false,
+    required: false,
+    helperText: "",
+    value: "",
+};
+
+export const WithHelperText = Template.bind({});
+WithHelperText.args = {
+    ...Interactive.args,
+    helperText: (
+        <FormHelperText data-testid="helper-text" error={false}>
+            a descriptive message
+        </FormHelperText>
+    ),
+};
+
+export const DisabledWithValue = Template.bind({});
+DisabledWithValue.args = {
+    ...Interactive.args,
+    value: "This is a disabled text area",
+    disabled: true,
+    required: true,
+};
+
+export const DisabledWithNoValue = Template.bind({});
+DisabledWithNoValue.args = {
+    ...Interactive.args,
+    disabled: true,
+    required: true,
+};
+
+export const Required = Template.bind({});
+Required.args = {
+    ...Interactive.args,
+    required: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+    ...Interactive.args,
+    error: true,
+    required: true,
+    helperText: "An error message",
+};
+
+export const VariedHeights = () => (
+    <div
+        className="qpp-u-padding--16"
+        style={{ width: 900, marginBottom: "16px", display: "flex", gap: 16 }}
+    >
         <TextArea
             placeholder="Placeholder"
+            required
             label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
+            id="measureName1"
+            inputProps={{ "data-testid": "measure-name-input1" }}
+            data-testid="measure-name-text-field1"
             size="small"
-            value="This is a disabled text area"
-            disabled
-            required
+            helperText="An error message"
         />
-    </Wrapper>
-);
-
-export const DisabledWithNoValue = () => (
-    <Wrapper>
         <TextArea
             placeholder="Placeholder"
+            required
             label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
+            id="measureName2"
+            inputProps={{ "data-testid": "measure-name-input2" }}
+            data-testid="measure-name-text-field2"
             size="small"
-            disabled
-            required
+            helperText="An error message"
         />
-    </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"
+            id="measureName3"
+            inputProps={{ "data-testid": "measure-name-input3" }}
+            data-testid="measure-name-text-field3"
             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"
         />
-    </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"
+            id="measureName4"
+            inputProps={{ "data-testid": "measure-name-input4" }}
+            data-testid="measure-name-text-field4"
             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

@@ -1,8 +1,7 @@
 import React from "react";
 import { FormControl, FormHelperText, TextareaAutosize } from "@mui/material";
 import InputLabel from "../InputLabel";
-import PropTypes from "prop-types";
-import { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 const TextArea = ({
     id,
@@ -24,7 +23,7 @@ const TextArea = ({
                 size="small"
                 {...rest}
             />
-        )
+        );
     }
     // coerce this to avoid issue passing props to dom.
     // text area autosize is deprecated and only takes style rules
@@ -131,15 +130,4 @@ const TextArea = ({
     );
 };
 
-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,
-    maxLength: PropTypes.number,
-};
 export default TextArea;