@madie/madie-design-system 1.2.61 → 2.0.0

package/components/NumberInput/NumberInput.stories.js

@@ -1,12 +1,10 @@
 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 +12,62 @@ 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/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

@@ -118,14 +118,14 @@ MadiePopover.propTypes = {
             dataTestId: PropTypes.string,
             label: PropTypes.string,
             toImplementFunction: PropTypes.func,
-        })
+        }),
     ),
     additionalSelectOptionProps: PropTypes.arrayOf(
         PropTypes.shape({
             dataTestId: PropTypes.string,
             label: PropTypes.string,
             toImplementFunction: PropTypes.func,
-        })
+        }),
     ),
 };
 

package/components/RadioButton/RadioButton.jsx

@@ -22,7 +22,9 @@ const RadioButton = ({
     ...rest
 }) => {
     if (disabled) {
-        const option = options?.find(option => String(option.value) === rest.value);
+        const option = options?.find(
+            (option) => String(option.value) === String(rest.value),
+        );
         return (
             <ReadOnlyTextField
                 required={required}
@@ -32,7 +34,7 @@ const RadioButton = ({
                 {...rest}
                 value={option?.label}
             />
-        )
+        );
     }
     return (
         <FormControl error={error} fullWidth>

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,11 @@
 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 +13,12 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
+
 Wrapper.propTypes = {
     className: PropTypes.string,
     children: PropTypes.node,
 };
+
 export const Textfield = () => (
     <Wrapper>
         <ReadOnlyTextField
@@ -73,7 +74,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,5 +1,5 @@
 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";

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";

package/components/RichTextEditor/index.jsx

@@ -197,7 +197,7 @@ const RichTextEditor = ({
                 onChange(newValue);
             },
         },
-        [content]
+        [content],
     );
     return (
         <div
@@ -245,20 +245,19 @@ const RichTextEditor = ({
                 {label}
             </InputLabel>
             {disabled ? (
-                    <p
-                        data-testid={`${id}-value`}
-                        aria-labelledby={label}
-                        dangerouslySetInnerHTML={{
-                            __html: content ? DOMPurify.sanitize(content) : "-",
-                        }}
-                    />
-
-                ) : (
-                    <>
-                        <MenuBar editor={editor}/>
-                        <EditorContent editor={editor}/>
-                    </>
-                )}
+                <p
+                    data-testid={`${id}-value`}
+                    aria-labelledby={label}
+                    dangerouslySetInnerHTML={{
+                        __html: content ? DOMPurify.sanitize(content) : "-",
+                    }}
+                />
+            ) : (
+                <>
+                    <MenuBar editor={editor} />
+                    <EditorContent editor={editor} />
+                </>
+            )}
         </div>
     );
 };

package/components/Search/Search.stories.js

@@ -1,11 +1,9 @@
 import React from "react";
 import Search from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "Search",
     component: Search,
-    decorators: [withKnobs],
 };
 
 export const ExampleSearch = () => (
@@ -13,8 +11,8 @@ export const ExampleSearch = () => (
         id="Example id"
         name="Example name"
         placeholder="Example placeholder"
-        inputAriaLabel="Example input arial-label"
-        buttonAriaLabel="Example button arial-label"
+        inputAriaLabel="Example input aria-label"
+        buttonAriaLabel="Example button aria-label"
     />
 );