@madie/madie-design-system 1.2.62 → 2.0.0

package/components/TextArea/TextArea.stories.js

@@ -1,12 +1,22 @@
 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 +24,118 @@ 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

@@ -24,7 +24,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

package/components/TextField/TextField.stories.js

@@ -1,14 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import TextField from "./index";
 import { FormHelperText, IconButton, InputAdornment } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from "@mui/icons-material/Clear";
+
 export default {
     title: "TextField",
     component: TextField,
-    decorators: [withKnobs],
+    argTypes: {
+        disabled: { control: "boolean" },
+        error: { control: "boolean" },
+        required: { control: "boolean" },
+        size: {
+            control: { type: "select" },
+            options: ["small", "medium", "large"], // adjust if your component supports different sizes
+        },
+        helperText: { control: "text" },
+        label: { control: "text" },
+        placeholder: { control: "text" },
+        labelColor: { control: "color" },
+        value: { control: "text" },
+    },
 };
 
 const Wrapper = ({ children }) => (
@@ -16,143 +29,114 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
+
 Wrapper.propTypes = {
     className: PropTypes.string,
     children: PropTypes.node,
 };
 
-export const Textfield = () => (
+const Template = (args) => (
     <Wrapper>
         <TextField
-            placeholder="Placeholder"
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
+            {...args}
+            id={args.id || "measureName"}
+            inputProps={{
+                "data-testid": "measure-name-input",
+                ...args.inputProps,
+            }}
+            data-testid={args["data-testid"] || "measure-name-text-field"}
         />
     </Wrapper>
 );
 
-export const WithHelperText = () => (
-    <Wrapper>
-        <TextField
-            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 Interactive = Template.bind({});
+Interactive.args = {
+    size: "small",
+    disabled: false,
+    error: false,
+    required: false,
+    helperText: "",
+    label: "Text Label",
+    placeholder: "Placeholder",
+    labelColor: undefined,
+    value: "",
+};
 
-export const Disabled = () => (
-    <Wrapper>
+export const WithHelperText = Template.bind({});
+WithHelperText.args = {
+    ...Interactive.args,
+    helperText: (
+        <FormHelperText data-testid="helper-text" error={false}>
+            a descriptive message
+        </FormHelperText>
+    ),
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...Interactive.args,
+    disabled: true,
+    label: "Disabled Text Label",
+};
+
+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 WithToolTipText = Template.bind({});
+WithToolTipText.args = {
+    ...Interactive.args,
+    label: "Confirm New Version #",
+    tooltipText: "Input the new version # located to the left to confirm.",
+    helperText: "test",
+    id: "measure-name",
+};
+
+export const VariedHeights = () => (
+    <div
+        className="qpp-u-padding--16"
+        style={{ width: 900, marginBottom: "16px", display: "flex", gap: 16 }}
+    >
         <TextField
             placeholder="Placeholder"
-            label="Disabled Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
+            required
+            label="Text Label"
+            id="measureName1"
+            inputProps={{ "data-testid": "measure-name-input1" }}
+            data-testid="measure-name-text-field1"
             size="small"
-            disabled
+            helperText="An error message"
         />
-    </Wrapper>
-);
-
-export const Required = () => (
-    <Wrapper>
         <TextField
             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"
+            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>
         <TextField
             placeholder="Placeholder"
             error
             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"
         />
-    </Wrapper>
-);
-
-export const WithToolTipText = () => (
-    <Wrapper>
-        <TextField
-            placeholder="Placeholder"
-            label="Confirm New Version #"
-            data-testid="measure-name-text-field"
-            size="small"
-            tooltipText="Input the new version # located to the left to confirm."
-            helperText="test"
-            id="measure-name"
-            // previously this was how it was done. it could make more sense to only pass it an id and progrematically determine it. Example:
-            // inputProps={{
-            //     "data-testid": "measure-name-input",
-            //     "aria-describedby":
-            //         "measure-name-helper-text measure-name-tooltip",
-            // }}
-        />
-    </Wrapper>
-);
-
-export const VariedHeights = () => (
-    <div
-        className="qpp-u-padding--16"
-        style={{ width: 900, marginBottom: "16px" }}
-    >
-        <div style={{ display: "flex", flexDirection: "row" }}>
-            <TextField
-                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"
-            />
-            <TextField
-                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 "
-            />
-            <TextField
-                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>
 );
 
@@ -176,7 +160,7 @@ export const WithLeftAndRightIcon = () => (
                     ),
                     endAdornment: (
                         <InputAdornment position="end">
-                            <IconButton onClick="">
+                            <IconButton onClick={() => {}}>
                                 <ClearIcon />
                             </IconButton>
                         </InputAdornment>
@@ -188,16 +172,9 @@ export const WithLeftAndRightIcon = () => (
     </Wrapper>
 );
 
-export const TextfieldDifferentLabel = () => (
-    <Wrapper>
-        <TextField
-            placeholder="Placeholder"
-            label="Text Label with different color"
-            labelColor={"#1976d2"}
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-        />
-    </Wrapper>
-);
+export const TextfieldDifferentLabel = Template.bind({});
+TextfieldDifferentLabel.args = {
+    ...Interactive.args,
+    label: "Text Label with different color",
+    labelColor: "#1976d2",
+};

package/components/TextField/index.jsx

@@ -32,7 +32,7 @@ const TextField = ({
                 size="small"
                 {...rest}
             />
-        )
+        );
     }
     // get a copy of input props
     const newInputProps = { ...inputProps } || {};

package/components/TimeField/TimeField.stories.js

@@ -1,26 +1,36 @@
 import React, { useState } from "react";
 import TimeField from "./TimeField";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "TimeField",
     component: TimeField,
-    decorators: [withKnobs],
+    argTypes: {
+        disabled: { control: "boolean" },
+        label: { control: "text" },
+    },
 };
-export const TimeFieldComponent = (args) => {
+
+const Template = (args) => {
     const [value, setValue] = useState("");
-    const handleTimeChange = (newValue, v) => {
+
+    const handleTimeChange = (newValue) => {
         console.log("Time changed: newValue = ", newValue);
         setValue(newValue);
     };
+
     return (
-        <div className="qpp-u-padding--16">
+        <div className="qpp-u-padding--16" style={{ width: 300 }}>
             <TimeField
-                disabled={false}
-                label="Result Time"
-                handleTimeChange={handleTimeChange}
+                {...args}
                 value={value}
+                handleTimeChange={handleTimeChange}
             />
         </div>
     );
 };
+
+export const Default = Template.bind({});
+Default.args = {
+    disabled: false,
+    label: "Result Time",
+};