@madie/madie-design-system 1.2.57 → 1.2.59

package/components/RichTextEditor/RichTextEditor.stories.js

@@ -13,7 +13,7 @@ export default {
 export const TextEditor = () => {
     const [value, setValue] = useState("test");
 
-    const handleChange = (id, selectedVal) => {
+    const handleChange = (selectedVal) => {
         setValue(selectedVal);
     };
     return (
@@ -22,6 +22,26 @@ export const TextEditor = () => {
             required={true}
             onChange={handleChange}
             content={value}
+            disabled={false}
+        />
+    );
+};
+
+export const ReadOnlyTextEditor = () => {
+    const [value, setValue] = useState(
+        "<p>This is <strong>readonly</strong> content</p>"
+    );
+
+    const handleChange = (selectedVal) => {
+        setValue(selectedVal);
+    };
+    return (
+        <RichTextEditor
+            label="Test Text Editor"
+            required={true}
+            onChange={handleChange}
+            content={value}
+            disabled={true}
         />
     );
 };

package/components/RichTextEditor/index.jsx

@@ -11,7 +11,6 @@ import TableHeader from "@tiptap/extension-table-header";
 import TableRow from "@tiptap/extension-table-row";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
-import { Markdown } from "tiptap-markdown";
 import { IconButton } from "@mui/material";
 import FormatBoldIcon from "@mui/icons-material/FormatBold";
 import FormatItalicIcon from "@mui/icons-material/FormatItalic";
@@ -21,13 +20,15 @@ import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
 import TableChartIcon from "@mui/icons-material/TableChart";
 import { Tooltip } from "@mui/material";
+import { kebabCase } from "lodash";
+import DOMPurify from "dompurify";
 
 const MenuBar = ({ editor }) => {
     if (!editor) {
         return null;
     }
     return (
-        <div className="control-group">
+        <div className="control-group" data-testid="rich-text-editor-toolbar">
             <div className="button-group">
                 <Tooltip
                     data-testid="bold-tooltip"
@@ -174,12 +175,12 @@ const RichTextEditor = ({
     label,
     onChange,
     content,
+    disabled,
 }) => {
     const editor = useEditor(
         {
             extensions: [
                 StarterKit,
-                Markdown,
                 Gapcursor,
                 Table.configure({
                     resizable: true,
@@ -192,21 +193,23 @@ const RichTextEditor = ({
             shouldRerenderOnTransaction: false,
             content,
             onUpdate: ({ editor }) => {
-                const newValue = editor.storage.markdown.getMarkdown();
+                const newValue = editor.getHTML();
                 onChange(newValue);
-                console.log(newValue);
             },
         },
         [content]
     );
     return (
-        <div className="rich-text-editor">
+        <div
+            className="rich-text-editor"
+            data-testid={`${kebabCase(label)}-rich-text-editor`}
+        >
             <InputLabel
                 shrink
                 required={required}
                 error={error}
                 htmlFor={id}
-                style={{ marginBottom: 0, height: 16 }} // force a heignt
+                style={{ marginBottom: 0, height: 16 }} // force a height
                 sx={[
                     {
                         backgroundColor: "transparent",
@@ -241,8 +244,21 @@ const RichTextEditor = ({
             >
                 {label}
             </InputLabel>
-            <MenuBar editor={editor} />
-            <EditorContent editor={editor} />
+            {disabled ? (
+                    <p
+                        data-testid={`${id}-value`}
+                        aria-labelledby={label}
+                        dangerouslySetInnerHTML={{
+                            __html: content ? DOMPurify.sanitize(content) : "-",
+                        }}
+                    />
+
+                ) : (
+                    <>
+                        <MenuBar editor={editor}/>
+                        <EditorContent editor={editor}/>
+                    </>
+                )}
         </div>
     );
 };
@@ -254,6 +270,7 @@ RichTextEditor.propTypes = {
     label: PropTypes.string,
     onChange: PropTypes.func,
     content: PropTypes.any,
+    disabled: PropTypes.bool,
 };
 
 MenuBar.propTypes = {

package/components/Select/index.jsx

@@ -31,15 +31,6 @@ const Select = ({
     );
     return (
         <FormControl error={error} fullWidth>
-            {/* to deal with multiple height helper text in a single row*/}
-            <div
-                style={{
-                    width: 1,
-                    display: "flex",
-                    flexDirection: "column",
-                    flexGrow: 1,
-                }}
-            />
             <InputLabel
                 // {/* has init at .2rem/3.2 px bottom. passing sx breaks style. */}
                 id={`${id}-label`}

package/components/Tabs/Tabs.stories.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { withKnobs } from "@storybook/addon-knobs";
-
+import "./tabs.scss";
 import Tabs from "./index";
 import Tab from "./Tab";
 
@@ -147,44 +147,46 @@ export const TypeA = () => {
                     />
                 </Tabs>
             </div>
-            <div>
-                Vertical Standard: C
-                <Tabs
-                    type="C"
-                    value={selected}
-                    onChange={handleChange}
-                    orientation="vertical"
-                >
-                    <Tab
+            <div className={"vertical-standard-type-c-wrapper"}>
+                <div className={"vertical-standard-type-c"}>
+                    <h4>Vertical Standard: C</h4>
+                    <Tabs
                         type="C"
-                        size="standard"
-                        label="Item One"
-                        value={1}
+                        value={selected}
+                        onChange={handleChange}
                         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>
+                    >
+                        <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

package/components/Tabs/index.js

@@ -1,6 +1,6 @@
+import React from "react";
 import PropTypes from "prop-types";
 import { Tabs as MuiTabs } from "@mui/material";
-import React from "react";
 
 const typeA = {
     "& .MuiTabs-flexContainer": {
@@ -30,6 +30,15 @@ const typeC = {
     },
 };
 
+const typeCVerticalSelected = {
+    "& .MuiTab-root.Mui-selected": {
+        borderTop: "solid 1px #8C8C8C",
+        borderBottom: "solid 1px #8C8C8C",
+        borderRight: "1px solid white",
+        width: "calc(100% + 1px)",
+    },
+};
+
 const typeD = {
     backgroundColor: "#FFF",
     color: "#515151",
@@ -40,39 +49,51 @@ const typeD = {
     },
 };
 
-const Tabs = ({ type, size, ...rest }) => {
-    const baseStyle = {
+const baseStyle = {
+    outline: "none",
+    fontFamily: "Rubik, sans Sarif",
+    fontWeight: 400,
+    lineHeight: 19,
+    backgroundColor: "transparent",
+    "& .Mui-selected": {
         outline: "none",
-        fontFamily: "Rubik, sans Sarif",
-        fontWeight: 400,
-        lineHeight: 19,
-        backgroundColor: "transparent",
-        "& .Mui-selected": {
-            outline: "none",
-            fontWeight: 500,
-            color: "#333 !important",
-            backgroundColor: "#fff",
-        },
-    };
-    const style = ((type) => {
-        if (type === "A") {
-            return { ...baseStyle, ...typeA };
-        }
-        if (type === "B") {
-            return { ...baseStyle, ...typeB };
-        }
-        if (type === "C") {
-            return { ...baseStyle, ...typeC };
-        }
-        if (type === "D") {
-            return { ...baseStyle, ...typeD };
-        }
-    })(type);
-    return <MuiTabs disableRipple sx={style} {...rest} />;
+        fontWeight: 500,
+        color: "#333 !important",
+        backgroundColor: "#fff",
+    },
+};
+
+const Tabs = ({ type, size, orientation, ...rest }) => {
+    let style = { ...baseStyle };
+
+    switch (type) {
+        case "A":
+            style = { ...style, ...typeA };
+            break;
+        case "B":
+            style = { ...style, ...typeB };
+            break;
+        case "C":
+            if (orientation === "vertical") {
+                style = { ...style, ...typeC, ...typeCVerticalSelected };
+            } else {
+                style = { ...style, ...typeC };
+            }
+            break;
+        case "D":
+            style = { ...style, ...typeD };
+            break;
+        default:
+            break;
+    }
+
+    return (
+        <MuiTabs disableRipple orientation={orientation} sx={style} {...rest} />
+    );
 };
 
 Tabs.propTypes = {
-    orientatin: PropTypes.string,
+    orientation: PropTypes.string,
     type: PropTypes.oneOf(["A", "B", "C", "D"]),
     size: PropTypes.oneOf(["standard", "large"]),
     ariaLabel: PropTypes.string,

package/components/Tabs/tabs.scss

@@ -0,0 +1,13 @@
+// Required to have OverFlow visible for parent component of Tabs
+// in order to add styling for Mui.selected Tabs
+.vertical-standard-type-c-wrapper * {
+	overflow: visible !important;
+}
+
+.vertical-standard-type-c {
+	> h4 {
+		padding-top: 16px;
+	}
+	width: 300px;
+	border-right: solid 1px #8C8C8C;
+}

package/components/TextArea/index.jsx

@@ -91,7 +91,7 @@ const TextArea = ({
                 </FormHelperText>
             )}
             <TextareaAutosize
-                style={{ marginTop: "8px", maxWidth: "100%", }}
+                style={{ marginTop: "8px", maxWidth: "100%" }}
                 className={
                     error ? "text-area-variable error" : "text-area-variable"
                 }
@@ -100,7 +100,7 @@ const TextArea = ({
                 id={id}
                 {...inputProps}
                 {...rest}
-            />            
+            />
             {maxLength && !disabled && (
                 <span
                     style={{

package/components/TextField/index.jsx

@@ -44,7 +44,7 @@ const TextField = ({
 
     const extendedTextFieldStyles = {
         borderRadius: "3px",
-        
+
         border: "none",
         marginTop: "8px",
         "& .MuiOutlinedInput-notchedOutline": {