@madie/madie-design-system 1.2.102 → 1.2.103

package/components/Modal/Modal.stories.js

@@ -1,12 +1,16 @@
 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],
+    args: {
+        isOpen: false,
+        titleText: "Title 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.",
+    },
 };
 
 const useModal = () => {
@@ -16,9 +20,9 @@ const useModal = () => {
     return [open, openModal, closeModal];
 };
 
-export const WithDesignSystem = () => {
+export const WithDesignSystem = (args) => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+    const knobIsOpen = args.isOpen;
     return (
         <div className="qpp-u-padding--12">
             <button className="qpp-c-button" onClick={openModal}>
@@ -27,23 +31,18 @@ export const WithDesignSystem = () => {
             <Modal
                 useDesignSystem
                 isOpen={open || knobIsOpen}
-                title={text("Title text", "Title Text")}
+                title={args.titleText}
                 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>{args.bodyText}</p>
             </Modal>
         </div>
     );
 };
 
-export const WithDesignSystemDialog = () => {
+export const WithDesignSystemDialog = (args) => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+    const knobIsOpen = args.isOpen;
     return (
         <div className="qpp-u-padding--12">
             <button className="qpp-c-button" onClick={openModal}>
@@ -52,7 +51,7 @@ export const WithDesignSystemDialog = () => {
             <Modal
                 useDesignSystem
                 isOpen={open || knobIsOpen}
-                title={text("Title text", "Title Text")}
+                title={args.titleText}
                 onRequestClose={closeModal}
                 primary={{
                     title: "Yes, go for it",
@@ -65,20 +64,15 @@ 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>{args.bodyText}</p>
             </Modal>
         </div>
     );
 };
 
-export const WithDesignSystemOverflow = () => {
+export const WithDesignSystemOverflow = (args) => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+    const knobIsOpen = args.isOpen;
     return (
         <div className="qpp-u-padding--12">
             <button className="qpp-c-button" onClick={openModal}>
@@ -87,7 +81,7 @@ export const WithDesignSystemOverflow = () => {
             <Modal
                 useDesignSystem
                 isOpen={open || knobIsOpen}
-                title={text("Title text", "Title Text")}
+                title={args.titleText}
                 onRequestClose={closeModal}
                 primary={{
                     title: "Yes, go for it",
@@ -167,9 +161,9 @@ export const WithDesignSystemOverflow = () => {
     );
 };
 
-export const WithDesignSystemOverflowForHR = () => {
+export const WithDesignSystemOverflowForHR = (args) => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+    const knobIsOpen = args.isOpen;
 
     const hr = humanReadable();
 

package/components/NotificationBanner/NotificationBanner.stories.js

@@ -1,21 +1,22 @@
 import React from "react";
 import NotificationBanner from "./index";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
 
 export default {
     title: "NotificationBanner",
     component: NotificationBanner,
-    decorators: [withKnobs],
+    args: {
+        dismissable: false,
+    },
 };
 
-export const ExampleNotificationBanner = () => (
+export const ExampleNotificationBanner = (args) => (
     <NotificationBanner
         result={{
             content: "CONTENT",
             label: "Label",
             name: "name",
             color: "blue",
-            dismissable: boolean("dismissable", false),
+            dismissable: args.dismissable,
         }}
     />
 );

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 }) => (

package/components/Popover/Popover.stories.js

@@ -1,11 +1,9 @@
 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 = () => {

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 }) => (

package/components/RichTextEditor/RichTextEditor.stories.js

@@ -1,11 +1,9 @@
 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>,
     ],
 };

package/components/SearchAndFilter/index.jsx

@@ -93,7 +93,7 @@ const SearchAndFilter = ({
                   style={{ cursor: "pointer" }}
                   onClick={onSearchClear}
                 >
-                  <IconButton>
+                  <IconButton aria-label="Clear search">
                     <ClearIcon />
                   </IconButton>
                 </InputAdornment>

package/components/Select/Select.stories.js

@@ -1,13 +1,11 @@
 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],
 };
 
 const Wrapper = ({ children }) => (

package/components/Tabs/Tabs.stories.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import "./tabs.scss";
 import Tabs from "./index";
 import Tab from "./Tab";
@@ -7,7 +6,6 @@ import Tab from "./Tab";
 export default {
     title: "Tabs",
     component: Tabs,
-    decorators: [withKnobs],
 };
 
 export const TypeA = () => {

package/components/TextArea/TextArea.stories.js

@@ -1,12 +1,10 @@
 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],
 };
 
 const Wrapper = ({ children }) => (

package/components/TextField/TextField.stories.js

@@ -1,6 +1,5 @@
 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";
@@ -8,7 +7,6 @@ import ClearIcon from "@mui/icons-material/Clear";
 export default {
     title: "TextField",
     component: TextField,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (

package/components/TextInput/TextInput.stories.js

@@ -1,12 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import TextInput from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "Text Input",
     component: TextInput,
-    decorators: [withKnobs],
 };
 
 const optionalProps = {

package/components/TimeField/TimeField.jsx

@@ -6,7 +6,7 @@ import InputLabel from "../InputLabel";
 import { kebabCase } from "lodash";
 import PropTypes from "prop-types";
 import dayjs from "dayjs";
-import { ReadOnlyTextField } from "../ReadOnlyTextField";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 const timeFieldStyle = {
     width: "170px",

package/components/TimeField/TimeField.stories.js

@@ -1,11 +1,9 @@
 import React, { useState } from "react";
 import TimeField from "./TimeField";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "TimeField",
     component: TimeField,
-    decorators: [withKnobs],
 };
 export const TimeFieldComponent = (args) => {
     const [value, setValue] = useState("");

package/components/Toast/Toast.stories.js

@@ -1,11 +1,9 @@
 import React, { useState } from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import Toast from "./index";
 
 export default {
     title: "Toast",
     component: Toast,
-    decorators: [withKnobs],
 };
 
 export const SuccessToast = () => {

package/components/TruncateText/TruncateText.stories.js

@@ -1,11 +1,9 @@
 import * as React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import TruncateText from "./index";
 
 export default {
     title: "Truncate Text",
     component: TruncateText,
-    decorators: [withKnobs],
 };
 
 export const FullText = () => (

package/components/TruncateText/index.js

@@ -3,6 +3,8 @@ import React, { useState } from "react";
 import _ from "lodash";
 import PropTypes from "prop-types";
 
+let idCounter = 0;
+
 const TruncateText = ({
     text,
     maxLength = 120,
@@ -10,6 +12,7 @@ const TruncateText = ({
     fontSize = "1rem",
 }) => {
     const [isExpanded, setIsExpanded] = useState(false);
+    const [contentId] = useState(() => `truncate-text-${++idCounter}`);
 
     if (!text || _.trim(text) === "") {
         return null;
@@ -21,10 +24,13 @@ const TruncateText = ({
 
     return (
         <div data-testid={`${dataTestId}-content`} style={{ fontSize }}>
-            <span>{displayedText}</span>
+            <span id={contentId}>{displayedText}</span>
             {text.length > maxLength && (
                 <IconButton
+                    type="button"
                     onClick={toggleExpanded}
+                    aria-expanded={isExpanded}
+                    aria-controls={contentId}
                     data-testid={`${dataTestId}-toggle-button`}
                     color="primary"
                     sx={{
@@ -33,6 +39,11 @@ const TruncateText = ({
                         cursor: "pointer",
                         textDecoration: "underline",
                         fontSize: "inherit",
+                        borderRadius: "2px",
+                        "&:focus-visible": {
+                            outline: "2px solid #0073c8",
+                            outlineOffset: "2px",
+                        },
                     }}
                 >
                     {isExpanded ? "Show less" : "Show more"}

package/components/index.js

@@ -29,7 +29,6 @@ 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";
@@ -167,7 +166,6 @@ export {
     RichTextEditor,
     SearchAndFilter,
     Select,
-    Spinner,
     TabPanel,
     Tabs,
     Tab,