@madie/madie-design-system 1.2.62 → 2.0.0

package/components/Select/Select.stories.js

@@ -1,13 +1,24 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import Select from "./index";
 import { MenuItem, Box } from "@mui/material";
 
 export default {
     title: "Select",
     component: Select,
-    decorators: [withKnobs],
+    argTypes: {
+        defaultValue: { control: "text" },
+        placeHolder: { control: "object" },
+        label: { control: "text" },
+        id: { control: "text" },
+        size: {
+            control: { type: "select", options: ["small", "medium", "large"] },
+        },
+        disabled: { control: "boolean" },
+        required: { control: "boolean" },
+        error: { control: "boolean" },
+        helperText: { control: "text" },
+    },
 };
 
 const Wrapper = ({ children }) => (
@@ -19,7 +30,6 @@ const Wrapper = ({ children }) => (
     </div>
 );
 Wrapper.propTypes = {
-    className: PropTypes.string,
     children: PropTypes.node,
 };
 
@@ -28,135 +38,56 @@ const options = [
     { key: "key2", value: "value2", testId: "testid2", name: "name2" },
     { key: "key3", value: "value2", testId: "testid3", name: "name3" },
 ];
-export const SelectWithLabel = () => (
-    <Wrapper>
-        <Select
-            defaultValue=""
-            placeHolder={{ name: "placeholder", value: "" }}
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-    </Wrapper>
-);
 
-export const WithHelperText = () => (
-    <Wrapper>
-        <Select
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText="A descriptive message"
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-    </Wrapper>
-);
+const renderedOptions = options.map(({ key, value, testId, name }) => (
+    <MenuItem key={key} value={value} data-testid={`option-${testId}`}>
+        {name}
+    </MenuItem>
+));
 
-export const Disabled = () => (
+const Template = (args) => (
     <Wrapper>
-        <Select
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            disabled
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
+        <Select {...args} options={renderedOptions} />
     </Wrapper>
 );
 
-export const Required = () => (
-    <Wrapper>
-        <Select
-            required
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-    </Wrapper>
-);
+export const SelectWithLabel = Template.bind({});
+SelectWithLabel.args = {
+    defaultValue: "",
+    placeHolder: { name: "placeholder", value: "" },
+    label: "Text Label",
+    id: "measureName",
+    size: "small",
+    disabled: false,
+    required: false,
+    error: false,
+    helperText: "",
+};
 
-export const Error = () => (
-    <Wrapper>
-        <Select
-            error
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText="An error message An error message An error message"
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-    </Wrapper>
-);
+export const WithHelperText = Template.bind({});
+WithHelperText.args = {
+    ...SelectWithLabel.args,
+    helperText: "A descriptive message",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...SelectWithLabel.args,
+    disabled: true,
+};
+
+export const Required = Template.bind({});
+Required.args = {
+    ...SelectWithLabel.args,
+    required: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+    ...SelectWithLabel.args,
+    error: true,
+    helperText: "An error message An error message An error message",
+};
 
 export const VariedHeights = () => (
     <div
@@ -174,20 +105,9 @@ export const VariedHeights = () => (
                 data-testid="measure-name-text-field"
                 size="small"
                 helperText="An error message"
-                options={options.map(({ key, value, testId, name }) => {
-                    return (
-                        <MenuItem
-                            key={key}
-                            value={value}
-                            data-testid={`option-${testId}`}
-                        >
-                            {name}
-                        </MenuItem>
-                    );
-                })}
+                options={renderedOptions}
             />
             <Select
-                // error
                 placeHolder={{ name: "placeholder", value: "" }}
                 defaultValue=""
                 label="Text Label"
@@ -196,20 +116,9 @@ export const VariedHeights = () => (
                 data-testid="measure-name-text-field"
                 size="small"
                 helperText=""
-                options={options.map(({ key, value, testId, name }) => {
-                    return (
-                        <MenuItem
-                            key={key}
-                            value={value}
-                            data-testid={`option-${testId}`}
-                        >
-                            {name}
-                        </MenuItem>
-                    );
-                })}
+                options={renderedOptions}
             />
             <Select
-                // error
                 placeHolder={{ name: "placeholder", value: "" }}
                 defaultValue=""
                 label="Text Label"
@@ -218,17 +127,7 @@ export const VariedHeights = () => (
                 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 "
-                options={options.map(({ key, value, testId, name }) => {
-                    return (
-                        <MenuItem
-                            key={key}
-                            value={value}
-                            data-testid={`option-${testId}`}
-                        >
-                            {name}
-                        </MenuItem>
-                    );
-                })}
+                options={renderedOptions}
             />
         </Box>
     </div>

package/components/Select/index.jsx

@@ -34,7 +34,7 @@ const Select = ({
                 size="small"
                 {...rest}
             />
-        )
+        );
     }
 
     const placehold = (

package/components/Tabs/Tabs.stories.js

@@ -1,228 +1,96 @@
 import React, { useState } from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import "./tabs.scss";
 import Tabs from "./index";
 import Tab from "./Tab";
+import PropTypes from "prop-types";
 
 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
+const Template = ({ type, size, orientation }) => {
     const [selected, setSelected] = useState(1);
 
-    const handleChange = (e, v) => {
-        // 1,2,3
-        setSelected(v);
+    const handleChange = (event, value) => {
+        setSelected(value);
     };
 
-    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>
+    const tabProps = {
+        type,
+        size,
+        orientation,
+    };
 
-            <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>
+    const tabsOrientation =
+        orientation === "vertical" ? "vertical" : "horizontal";
+
+    return (
+        <div
+            style={{
+                margin: "25px",
+                width: orientation === "vertical" ? 200 : "fit-content",
+            }}
+        >
+            <Tabs
+                type={type}
+                size={size}
+                orientation={tabsOrientation}
+                value={selected}
+                onChange={handleChange}
+            >
+                <Tab
+                    {...tabProps}
+                    label="Item One"
+                    value={1}
+                    orientation={tabsOrientation}
+                />
+                <Tab
+                    {...tabProps}
+                    label="Item Two"
+                    value={2}
+                    orientation={tabsOrientation}
+                />
+                <Tab
+                    {...tabProps}
+                    label="Item Three"
+                    value={3}
+                    orientation={tabsOrientation}
+                />
+                <Tab
+                    {...tabProps}
+                    label="disabled"
+                    value={4}
+                    disabled
+                    orientation={tabsOrientation}
+                />
+            </Tabs>
         </div>
     );
 };
+
+Template.propTypes = {
+    type: PropTypes.string.isRequired,
+    size: PropTypes.string.isRequired,
+    orientation: PropTypes.oneOf(["horizontal", "vertical"]).isRequired,
+};
+export const InteractiveTabs = Template.bind({});
+InteractiveTabs.args = {
+    type: "A",
+    size: "standard",
+    orientation: "horizontal",
+};