@madie/madie-design-system 1.2.62 → 2.0.1

package/components/Modal/Modal.stories.js

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
 import Modal from "./index";
-import { withKnobs, boolean, text } from "@storybook/addon-knobs";
 import { humanReadable } from "./HumanReadable";
 
 export default {
     title: "Modal",
     component: Modal,
-    decorators: [withKnobs],
 };
 
 const useModal = () => {
@@ -16,9 +14,12 @@ const useModal = () => {
     return [open, openModal, closeModal];
 };
 
+const lorem =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.";
+
 export const WithDesignSystem = () => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+
     return (
         <div className="qpp-u-padding--12">
             <button className="qpp-c-button" onClick={openModal}>
@@ -26,16 +27,11 @@ export const WithDesignSystem = () => {
             </button>
             <Modal
                 useDesignSystem
-                isOpen={open || knobIsOpen}
-                title={text("Title text", "Title Text")}
+                isOpen={open}
+                title="Title Text"
                 onRequestClose={closeModal}
             >
-                <p>
-                    {text(
-                        "bodyText",
-                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris."
-                    )}
-                </p>
+                <p>{lorem}</p>
             </Modal>
         </div>
     );
@@ -43,7 +39,7 @@ export const WithDesignSystem = () => {
 
 export const WithDesignSystemDialog = () => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+
     return (
         <div className="qpp-u-padding--12">
             <button className="qpp-c-button" onClick={openModal}>
@@ -51,8 +47,8 @@ export const WithDesignSystemDialog = () => {
             </button>
             <Modal
                 useDesignSystem
-                isOpen={open || knobIsOpen}
-                title={text("Title text", "Title Text")}
+                isOpen={open}
+                title="Title Text"
                 onRequestClose={closeModal}
                 primary={{
                     title: "Yes, go for it",
@@ -65,12 +61,7 @@ export const WithDesignSystemDialog = () => {
                     title: "No, take me back",
                 }}
             >
-                <p>
-                    {text(
-                        "bodyText",
-                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris."
-                    )}
-                </p>
+                <p>{lorem}</p>
             </Modal>
         </div>
     );
@@ -78,7 +69,7 @@ export const WithDesignSystemDialog = () => {
 
 export const WithDesignSystemOverflow = () => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+
     return (
         <div className="qpp-u-padding--12">
             <button className="qpp-c-button" onClick={openModal}>
@@ -86,8 +77,8 @@ export const WithDesignSystemOverflow = () => {
             </button>
             <Modal
                 useDesignSystem
-                isOpen={open || knobIsOpen}
-                title={text("Title text", "Title Text")}
+                isOpen={open}
+                title="Title Text"
                 onRequestClose={closeModal}
                 primary={{
                     title: "Yes, go for it",
@@ -100,68 +91,9 @@ export const WithDesignSystemOverflow = () => {
                     title: "No, take me back",
                 }}
             >
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Phasellus ac pulvinar massa, in mattis ligula. Vestibulum
-                    enim velit, ullamcorper vitae lorem ullamcorper, blandit
-                    fringilla mauris. Aenean odio nulla, dapibus convallis est
-                    ac, tempor congue lorem. Aliquam facilisis tortor eget
-                    lectus gravida bibendum. Suspendisse vel posuere risus.
-                    Etiam condimentum sollicitudin est, eget auctor lectus
-                    suscipit nec. Duis efficitur vitae risus at malesuada.
-                    Mauris tempus turpis sed lacus lacinia, et mattis tortor
-                    eleifend. In sit amet felis vel quam egestas ultricies ac ac
-                    nisl. Morbi elementum dui libero, non convallis risus ornare
-                    vel. Maecenas posuere ipsum ut sem aliquet, quis maximus
-                    dolor cursus. Praesent vulputate orci tellus, sed fringilla
-                    arcu mollis sit amet. Phasellus eros turpis, consequat sit
-                    amet placerat sed, mollis ac justo.
-                </p>
-                <p>
-                    Cras quis pharetra elit. Mauris lacinia quam quis metus
-                    mattis lobortis vel nec arcu. Fusce nec tellus vel nunc
-                    cursus vestibulum. Quisque pretium, arcu at sagittis
-                    posuere, leo magna tempus nunc, vel malesuada nunc mauris ac
-                    ante. Donec arcu velit, imperdiet vitae purus nec, imperdiet
-                    auctor nisi. Cras ornare, elit sit amet viverra bibendum,
-                    justo dolor congue mi, quis pretium erat orci a lorem. Sed
-                    rhoncus quam ut tellus hendrerit accumsan.
-                </p>
-                <p>
-                    Donec varius elit vitae elit efficitur fermentum. Vestibulum
-                    ante ipsum primis in faucibus orci luctus et ultrices
-                    posuere cubilia curae; Nulla facilisi. Ut malesuada
-                    venenatis varius. Nunc libero massa, luctus sagittis sapien
-                    ultrices, pulvinar venenatis purus. In nec orci ac nibh
-                    sagittis lobortis vel sed massa. Morbi pretium odio vitae
-                    malesuada ullamcorper. Pellentesque facilisis posuere
-                    consectetur. Nam maximus finibus ante, non eleifend neque
-                    euismod et.
-                </p>
-                <p>
-                    Pellentesque vehicula nec massa nec accumsan. Pellentesque
-                    non odio eu felis hendrerit pellentesque non sed neque.
-                    Morbi dui nisl, facilisis id gravida non, vehicula at dui.
-                    In eleifend suscipit imperdiet. Quisque facilisis augue et
-                    mi lobortis tristique. Praesent auctor dictum erat, non
-                    mollis ante tempus id. Integer et libero iaculis, imperdiet
-                    neque at, pharetra nisl. Suspendisse diam massa, vehicula eu
-                    varius ullamcorper, semper vel velit. Morbi consequat mattis
-                    nisi, id dignissim est bibendum non. Suspendisse semper
-                    laoreet neque, ac tincidunt tortor. Ut posuere urna a
-                    convallis consectetur. Mauris varius cursus libero sed
-                    molestie. Duis id dignissim arcu. Mauris tincidunt egestas
-                    congue.
-                </p>
-                <p>
-                    Donec rutrum erat vitae nulla ultricies, quis laoreet orci
-                    consequat. Nunc et justo volutpat dolor feugiat convallis.
-                    Vivamus efficitur nisi quis risus eleifend, ut tincidunt
-                    turpis volutpat. Nam commodo turpis dolor, dapibus rutrum
-                    erat facilisis a. Ut a dictum urna. Maecenas vel egestas
-                    odio. Ut venenatis est dolor, eget ullamcorper diam finibus
-                    et. Proin tincidunt porta pellentesque.
-                </p>
+                {[...Array(5)].map((_, i) => (
+                    <p key={i}>{lorem.repeat(5)}</p>
+                ))}
             </Modal>
         </div>
     );
@@ -169,8 +101,6 @@ export const WithDesignSystemOverflow = () => {
 
 export const WithDesignSystemOverflowForHR = () => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
-
     const hr = humanReadable();
 
     return (
@@ -178,11 +108,10 @@ export const WithDesignSystemOverflowForHR = () => {
             <button className="qpp-c-button" onClick={openModal}>
                 Open Modal
             </button>
-
             <div data-testid="view-hr-modal">
                 <Modal
                     useDesignSystem
-                    isOpen={open || knobIsOpen}
+                    isOpen={open}
                     title="Human Readable"
                     onRequestClose={closeModal}
                     width="75rem"

package/components/Modal/index.jsx

@@ -1,18 +1,16 @@
 import React from "react";
-import PropTypes from "prop-types";
 
 import DsModal from "./Modal";
 
-const Modal = ({ useDesignSystem, ...rest }) => {
+/**
+ * @param {{
+ *   useDesignSystem?: boolean
+ * } & React.ComponentProps<typeof DsModal>} props
+ */
+const Modal = ({ useDesignSystem = false, ...rest }) => {
     return <DsModal {...rest} />;
 };
 
-Modal.propTypes = {
-    useDesignSystem: PropTypes.bool,
-};
-Modal.defaultProps = {
-    useDesignSystem: false,
-};
 Modal.displayName = "Modal";
 
 export default Modal;

package/components/NumberInput/NumberInput.stories.js

@@ -1,12 +1,9 @@
 import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import NumberInput from "./index";
-import PropTypes from "prop-types";
 
 export default {
     title: "NumberInput",
     component: NumberInput,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (
@@ -14,72 +11,58 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
 
-export const BasicNumberInput = () => {
-    return (
-        <Wrapper>
-            <NumberInput id="basic-number-input" label="Demo number input" />
-        </Wrapper>
-    );
-};
+export const BasicNumberInput = () => (
+    <Wrapper>
+        <NumberInput id="basic-number-input" label="Demo number input" />
+    </Wrapper>
+);
 
-export const NumberInputWithNoNegativeNumbers = () => {
-    return (
-        <Wrapper>
-            <NumberInput
-                id="basic-number-input"
-                label="Demo number input"
-                aria-label="Demo number input"
-                placeholder="Type a number…"
-                allowNegative={false}
-            />
-        </Wrapper>
-    );
-};
+export const NumberInputWithNoNegativeNumbers = () => (
+    <Wrapper>
+        <NumberInput
+            id="number-input-non-negative"
+            label="Demo number input"
+            aria-label="Demo number input"
+            placeholder="Type a number…"
+            allowNegative={false}
+        />
+    </Wrapper>
+);
 
-export const NumberInputWithErrorAndHelperText = () => {
-    return (
-        <Wrapper>
-            <NumberInput
-                id="basic-number-input"
-                error={true}
-                label="Demo number input"
-                aria-label="Demo number input"
-                placeholder="Type a number…"
-                helperText={"Please Enter a valid integer"}
-            />
-        </Wrapper>
-    );
-};
+export const NumberInputWithErrorAndHelperText = () => (
+    <Wrapper>
+        <NumberInput
+            id="number-input-error"
+            error={true}
+            label="Demo number input"
+            aria-label="Demo number input"
+            placeholder="Type a number…"
+            helperText="Please Enter a valid integer"
+        />
+    </Wrapper>
+);
 
-export const NumberInputDisabled = () => {
-    return (
-        <Wrapper>
-            <NumberInput
-                id="basic-number-input"
-                label="Demo number input"
-                aria-label="Demo number input"
-                placeholder="Type a number…"
-                disabled={true}
-            />
-        </Wrapper>
-    );
-};
+export const NumberInputDisabled = () => (
+    <Wrapper>
+        <NumberInput
+            id="number-input-disabled"
+            label="Demo number input"
+            aria-label="Demo number input"
+            placeholder="Type a number…"
+            disabled={true}
+        />
+    </Wrapper>
+);
 
-export const NumberInputWithTooltip = () => {
-    return (
-        <Wrapper>
-            <NumberInput
-                id="basic-number-input"
-                label="Demo number input"
-                aria-label="Demo number input"
-                placeholder="Type a number…"
-                tooltipText={"Provides information"}
-            />
-        </Wrapper>
-    );
-};
+export const NumberInputWithTooltip = () => (
+    <Wrapper>
+        <NumberInput
+            id="number-input-tooltip"
+            label="Demo number input"
+            aria-label="Demo number input"
+            placeholder="Type a number…"
+            tooltipText="Provides information"
+        />
+    </Wrapper>
+);

package/components/NumberInput/index.jsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import PropTypes from "prop-types";
 import TextField from "../TextField";
 
 export default function NumberInput({
@@ -61,15 +60,3 @@ export default function NumberInput({
         />
     );
 }
-
-NumberInput.propTypes = {
-    id: PropTypes.string,
-    error: PropTypes.bool,
-    helperText: PropTypes.string,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    label: PropTypes.string,
-    tooltipText: PropTypes.string,
-    inputProps: PropTypes.object,
-    allowNegative: PropTypes.bool,
-};

package/components/Pagination/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { visuallyHidden } from "@mui/utils";
 
 import {
@@ -198,20 +197,4 @@ const Pagination = ({
     );
 };
 
-Pagination.propTypes = {
-    totalItems: PropTypes.number,
-    visibleItems: PropTypes.number,
-    count: PropTypes.number,
-    offset: PropTypes.number,
-    shape: PropTypes.string,
-    limit: PropTypes.number,
-    page: PropTypes.number,
-    limitOptions: PropTypes.array,
-    handlePageChange: PropTypes.func,
-    handleLimitChange: PropTypes.func,
-    hidePrevButton: PropTypes.bool,
-    hideNextButton: PropTypes.bool,
-    type: PropTypes.string,
-};
-
 export { Pagination };

package/components/Popover/Popover.stories.js

@@ -1,37 +1,29 @@
 import React, { useState } from "react";
 import Popover from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "Popover",
     component: Popover,
-    decorators: [withKnobs],
 };
 
 export const PopOver = () => {
     const [anchorEl, setAnchorEl] = useState(null);
     const [optionsOpen, setOptionsOpen] = useState(false);
 
-    const onClose = () => {
-        setOptionsOpen(false);
-    };
+    const onClose = () => setOptionsOpen(false);
 
     const handleOpen = (e) => {
         setAnchorEl(e.currentTarget);
         setOptionsOpen(true);
     };
 
-    const viewEditredirect = () => {
-        setOptionsOpen(false);
-    };
+    const viewEditredirect = () => setOptionsOpen(false);
 
-    const zipData = () => {
-        setOptionsOpen(false);
-    };
+    const zipData = () => setOptionsOpen(false);
 
     return (
         <div className="qpp-u-padding--12">
-            <button className="qpp-c-button" onClick={(e) => handleOpen(e)}>
+            <button className="qpp-c-button" onClick={handleOpen}>
                 Open Popover
             </button>
             <Popover
@@ -42,13 +34,13 @@ export const PopOver = () => {
                 editViewSelectOptionProps={{
                     label: "View",
                     toImplementFunction: viewEditredirect,
-                    dataTestId: `edit-measure-1`,
+                    dataTestId: "edit-measure-1",
                 }}
                 otherSelectOptionProps={[
                     {
                         label: "Export",
                         toImplementFunction: zipData,
-                        dataTestId: `export-measure-1`,
+                        dataTestId: "export-measure-1",
                     },
                 ]}
             />

package/components/Popover/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Popover from "@mui/material/Popover";
 
 const MadiePopover = ({
@@ -107,26 +106,4 @@ const MadiePopover = ({
     );
 };
 
-MadiePopover.propTypes = {
-    optionsOpen: PropTypes.bool,
-    anchorEl: PropTypes.any,
-    handleClose: PropTypes.func,
-    canEdit: PropTypes.bool,
-    editViewSelectOptionProps: PropTypes.object,
-    otherSelectOptionProps: PropTypes.arrayOf(
-        PropTypes.shape({
-            dataTestId: PropTypes.string,
-            label: PropTypes.string,
-            toImplementFunction: PropTypes.func,
-        })
-    ),
-    additionalSelectOptionProps: PropTypes.arrayOf(
-        PropTypes.shape({
-            dataTestId: PropTypes.string,
-            label: PropTypes.string,
-            toImplementFunction: PropTypes.func,
-        })
-    ),
-};
-
 export default MadiePopover;

package/components/RadioButton/RadioButton.jsx

@@ -6,9 +6,8 @@ import {
     Radio,
     RadioGroup,
 } from "@mui/material";
-import PropTypes from "prop-types";
 import InputLabel from "../InputLabel";
-import { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 const RadioButton = ({
     id,
@@ -22,7 +21,9 @@ const RadioButton = ({
     ...rest
 }) => {
     if (disabled) {
-        const option = options?.find(option => String(option.value) === String(rest.value));
+        const option = options?.find(
+            (option) => String(option.value) === String(rest.value),
+        );
         return (
             <ReadOnlyTextField
                 required={required}
@@ -32,7 +33,7 @@ const RadioButton = ({
                 {...rest}
                 value={option?.label}
             />
-        )
+        );
     }
     return (
         <FormControl error={error} fullWidth>
@@ -119,15 +120,4 @@ const RadioButton = ({
     );
 };
 
-RadioButton.propTypes = {
-    id: PropTypes.string,
-    dataTestId: PropTypes.string,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    error: PropTypes.bool,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.any),
-};
-
 export default RadioButton;

package/components/RadioButton/RadioButton.stories.jsx

@@ -36,12 +36,16 @@ const TemplateRadioButton = (args) => {
 export const RadioButtonWithLabel = TemplateRadioButton.bind({});
 RadioButtonWithLabel.args = {};
 
-export const RadioButtonWithLabelDisabledWithNoValue = TemplateRadioButton.bind({});
+export const RadioButtonWithLabelDisabledWithNoValue = TemplateRadioButton.bind(
+    {},
+);
 RadioButtonWithLabelDisabledWithNoValue.args = {
     disabled: true,
 };
 
-export const RadioButtonWithLabelDisabledWithValue = TemplateRadioButton.bind({});
+export const RadioButtonWithLabelDisabledWithValue = TemplateRadioButton.bind(
+    {},
+);
 RadioButtonWithLabelDisabledWithValue.args = {
     disabled: true,
     value: "options 3",

package/components/ReadOnlyTextField/ReadOnlyTextField.stories.js

@@ -1,12 +1,10 @@
 import React from "react";
-import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import ReadOnlyTextField from "./index";
 import { FormHelperText } from "@mui/material";
+
 export default {
     title: "ReadOnlyTextField",
     component: ReadOnlyTextField,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (
@@ -14,10 +12,7 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
+
 export const Textfield = () => (
     <Wrapper>
         <ReadOnlyTextField
@@ -73,7 +68,7 @@ export const Error = () => (
             data-testid="measure-name-text-field"
             size="small"
             helperText={
-                <FormHelperText data-testid={`helper-text`} error={true}>
+                <FormHelperText data-testid="helper-text" error>
                     An error message
                 </FormHelperText>
             }

package/components/ReadOnlyTextField/index.jsx

@@ -1,7 +1,6 @@
 import React from "react";
-import {FormControl, TextareaAutosize} from "@mui/material";
+import { FormControl, TextareaAutosize } from "@mui/material";
 import InputLabel from "../InputLabel";
-import PropTypes from "prop-types";
 import _ from "lodash";
 
 const ReadOnlyTextField = ({
@@ -77,11 +76,4 @@ const ReadOnlyTextField = ({
     );
 };
 
-ReadOnlyTextField.propTypes = {
-    id: 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,
-};
 export default ReadOnlyTextField;

package/components/RichTextEditor/RichTextEditor.stories.js

@@ -1,11 +1,10 @@
 import React, { useState } from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import RichTextEditor from "./index";
+
 export default {
     title: "RichTextEditor",
     component: RichTextEditor,
     decorators: [
-        withKnobs,
         (storyFn) => <div style={{ padding: "120px" }}>{storyFn()}</div>,
     ],
 };
@@ -16,10 +15,11 @@ export const TextEditor = () => {
     const handleChange = (selectedVal) => {
         setValue(selectedVal);
     };
+
     return (
         <RichTextEditor
-            label={"Test Text Editor"}
-            required={true}
+            label="Test Text Editor"
+            required
             onChange={handleChange}
             content={value}
             disabled={false}
@@ -27,22 +27,24 @@ export const TextEditor = () => {
     );
 };
 
+TextEditor.storyName = "Rich Text Editor";
+
 export const ReadOnlyTextEditor = () => {
     const [value, setValue] = useState(
-        "<p>This is <strong>readonly</strong> content</p>"
+        "<p>This is <strong>readonly</strong> content</p>",
     );
 
     const handleChange = (selectedVal) => {
         setValue(selectedVal);
     };
+
     return (
         <RichTextEditor
             label="Test Text Editor"
-            required={true}
+            required
             onChange={handleChange}
             content={value}
-            disabled={true}
+            disabled
         />
     );
 };
-TextEditor.storyName = "Rich Text Editor";