@madie/madie-design-system 1.2.62 → 2.0.0

package/components/Toast/Toast.stories.js

@@ -1,21 +1,31 @@
 import React, { useState } from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import Toast from "./index";
 
 export default {
     title: "Toast",
     component: Toast,
-    decorators: [withKnobs],
+    argTypes: {
+        toastType: {
+            control: {
+                type: "select",
+                options: ["success", "warning", "info", "danger"],
+            },
+        },
+        message: { control: "text" },
+        autoHideDuration: { control: "number" },
+    },
 };
 
-export const SuccessToast = () => {
+const Template = (args) => {
     const [toastOpen, setToastOpen] = useState(false);
+
     return (
         <div
             style={{
                 height: "100vh",
                 width: "100vw",
                 backgroundColor: "#242424",
+                position: "relative",
             }}
         >
             <button
@@ -23,119 +33,49 @@ export const SuccessToast = () => {
                 style={{
                     position: "absolute",
                     top: "50%",
-                    left: "calc(50% - 80px)",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    padding: "8px 16px",
+                    cursor: "pointer",
                 }}
             >
-                Simulate Success
+                Show Toast
             </button>
             <Toast
+                {...args}
                 toastKey="toast-key"
-                testId="success-toast"
-                toastType="success"
+                testId={`${args.toastType}-toast`}
                 open={toastOpen}
-                message="An action has successfully been completed"
                 onClose={() => setToastOpen(false)}
-                autoHideDuration={3000}
             />
         </div>
     );
 };
 
-export const WarningToast = () => {
-    const [toastOpen, setToastOpen] = useState(false);
-    return (
-        <div
-            style={{
-                height: "100vh",
-                width: "100vw",
-                backgroundColor: "#242424",
-            }}
-        >
-            <button
-                onClick={() => setToastOpen(true)}
-                style={{
-                    position: "absolute",
-                    top: "50%",
-                    left: "calc(50% - 80px)",
-                }}
-            >
-                Simulate Warning
-            </button>
-            <Toast
-                toastKey="toast-key"
-                toastType="warning"
-                testId="warning-toast"
-                open={toastOpen}
-                message="Something has gone wrong. consider fixing before continuing"
-                onClose={() => setToastOpen(false)}
-                autoHideDuration={3000}
-            />
-        </div>
-    );
+export const SuccessToast = Template.bind({});
+SuccessToast.args = {
+    toastType: "success",
+    message: "An action has successfully been completed",
+    autoHideDuration: 3000,
 };
 
-export const InfoToast = () => {
-    const [toastOpen, setToastOpen] = useState(false);
-    return (
-        <div
-            style={{
-                height: "100vh",
-                width: "100vw",
-                backgroundColor: "#242424",
-            }}
-        >
-            <button
-                onClick={() => setToastOpen(true)}
-                style={{
-                    position: "absolute",
-                    top: "50%",
-                    left: "calc(50% - 80px)",
-                }}
-            >
-                Simulate Info
-            </button>
-            <Toast
-                toastKey="toast-key"
-                toastType="info"
-                testId="info-toast"
-                open={toastOpen}
-                message="Some useful information"
-                onClose={() => setToastOpen(false)}
-                autoHideDuration={3000}
-            />
-        </div>
-    );
+export const WarningToast = Template.bind({});
+WarningToast.args = {
+    toastType: "warning",
+    message: "Something has gone wrong. Consider fixing before continuing",
+    autoHideDuration: 3000,
 };
 
-export const DangerToast = () => {
-    const [toastOpen, setToastOpen] = useState(false);
-    return (
-        <div
-            style={{
-                height: "100vh",
-                width: "100vw",
-                backgroundColor: "#242424",
-            }}
-        >
-            <button
-                onClick={() => setToastOpen(true)}
-                style={{
-                    position: "absolute",
-                    top: "50%",
-                    left: "calc(50% - 80px)",
-                }}
-            >
-                Simulate Danger
-            </button>
-            <Toast
-                toastKey="toast-key"
-                toastType="danger"
-                testId="danger-toast"
-                open={toastOpen}
-                message="Something has gone wrong. Please try again"
-                onClose={() => setToastOpen(false)}
-                autoHideDuration={3000}
-            />
-        </div>
-    );
+export const InfoToast = Template.bind({});
+InfoToast.args = {
+    toastType: "info",
+    message: "Some useful information",
+    autoHideDuration: 3000,
+};
+
+export const DangerToast = Template.bind({});
+DangerToast.args = {
+    toastType: "danger",
+    message: "Something has gone wrong. Please try again",
+    autoHideDuration: 3000,
 };

package/components/TruncateText/TruncateText.stories.js

@@ -1,25 +1,30 @@
 import * as React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import TruncateText from "./index";
 
 export default {
     title: "Truncate Text",
     component: TruncateText,
-    decorators: [withKnobs],
+    argTypes: {
+        text: { control: "text" },
+        maxLength: { control: { type: "number", min: 0 } },
+        dataTestId: { control: "text" },
+        fontSize: { control: "text" },
+    },
 };
 
-export const FullText = () => (
-    <TruncateText
-        text="Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing"
-        maxLength={120}
-        dataTestId={"measure-comments"}
-    />
-);
-export const TruncatedText = () => (
-    <TruncateText
-        text="Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain"
-        maxLength={60}
-        dataTestId={"measure-comments"}
-        fontSize="1rem"
-    />
-);
+const Template = (args) => <TruncateText {...args} />;
+
+export const FullText = Template.bind({});
+FullText.args = {
+    text: "Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing",
+    maxLength: 120,
+    dataTestId: "measure-comments",
+};
+
+export const TruncatedText = Template.bind({});
+TruncatedText.args = {
+    text: "Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain",
+    maxLength: 60,
+    dataTestId: "measure-comments",
+    fontSize: "1rem",
+};

package/components/hooks/useGetConfig.js

@@ -22,7 +22,7 @@ const useGetConfig = ({
 
     useEffect(() => {
         const storageContent = JSON.parse(
-            localStorage.getItem(localStorageName)
+            localStorage.getItem(localStorageName),
         );
         if (
             storageContent?.content &&
@@ -59,7 +59,7 @@ const useGetConfig = ({
 
                     localStorage.setItem(
                         localStorageName,
-                        JSON.stringify(storageItem)
+                        JSON.stringify(storageItem),
                     );
                     setResult(storageItem);
                 })

package/components/index.js

@@ -1,14 +1,8 @@
 import Accordion from "./Accordion";
-import Alert from "./Alert";
 import AutoComplete from "./AutoComplete/AutoComplete";
-import Breadcrumb from "./Breadcrumb";
 import Button, { TextButton } from "./Button";
-import CalloutBox from "./CalloutBox";
-import Card from "./Card";
 import DateField from "./DateField/DateField";
 import DateTimeField from "./DateTimeField/DateTimeField";
-import FlashNotification from "./FlashNotification/FlashNotificationUI";
-import Footer from "./Footer/FooterUI";
 import Instant from "./Instant";
 import InputLabel from "./InputLabel";
 import FormControlLabel from "./FormControlLabel";
@@ -27,20 +21,14 @@ import RadioButton from "./RadioButton/RadioButton";
 import ReadOnlyTextField from "./ReadOnlyTextField";
 import RichTextEditor from "./RichTextEditor";
 import Select from "./Select";
-import Spinner from "./UnwrappedSpinner";
 import TabPanel from "./Tabs/TabPanel";
 import Tabs from "./Tabs/index";
 import Tab from "./Tabs/Tab";
 import TextField from "./TextField";
 import TimeField from "./TimeField/TimeField";
 import TextArea from "./TextArea";
-import Tooltip from "./Tooltip";
 import Toast from "./Toast";
-import Infotip from "./Infotip";
 import Search from "./Search";
-import TextInput from "./TextInput";
-import Dropdown from "./Dropdown";
-import DSLink from "./Link";
 import NumberInput from "./NumberInput";
 import TruncateText from "./TruncateText/index";
 import theme from "../themes/actionCenterTheme.js";
@@ -128,20 +116,13 @@ const Icons = {
 
 export {
     Accordion,
-    Alert,
     AutoComplete,
-    Breadcrumb,
     Button,
-    CalloutBox,
-    Card,
     DateField,
     DateTimeField,
-    FlashNotification,
-    Footer,
     FormControlLabel,
     InputLabel,
     Icons,
-    Infotip,
     Instant,
     Modal,
     MadieAlert,
@@ -160,19 +141,14 @@ export {
     RichTextEditor,
     Search,
     Select,
-    Spinner,
     TabPanel,
     Tabs,
     Tab,
     TextButton,
-    TextInput,
     TimeField,
     TextField,
     TextArea,
     Toast,
-    Dropdown,
-    Tooltip,
-    DSLink,
     TruncateText,
     theme,
 };