@madie/madie-design-system 1.2.52 → 1.2.55

package/components/MadieAlert/index.jsx

@@ -5,6 +5,7 @@ import InfoIcon from "@mui/icons-material/Info"; // info
 import CancelIcon from "@mui/icons-material/Cancel"; // error
 import CheckCircleIcon from "@mui/icons-material/CheckCircle"; //success
 import ContentCopyIcon from "@mui/icons-material/ContentCopy"; //copy
+import FullscreenExitRoundedIcon from '@mui/icons-material/FullscreenExitRounded';
 import Tooltip from "@mui/material/Tooltip";
 import { IconButton } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
@@ -18,12 +19,14 @@ const MadieAlert = ({
     visible = true,
     content,
     canClose = true,
+    minimizeAlerts = false, // pass the minimizeAlerts featureflag for now, since it will be standard later
     alertProps, // props to pass to outer component
     closeButtonProps, // props to pass to close button
     copyButton,
 }) => {
     const [copyText, setCopyText] = useState("");
     const [toastOpen, setToastOpen] = useState(false);
+    const [minimized, setMinimized] = useState(false);
 
     const copyButtonBuilder = (content) => {
         const traversal = (contentNode, parentNode = true) => {
@@ -74,7 +77,7 @@ const MadieAlert = ({
     const iconClass = classNames("alert-icon", type);
 
     return (
-        visible && (
+        visible && !minimized && (
             <div className={alertClass} {...alertProps}>
                 <Toast
                     toastKey="copy-success-toast"
@@ -89,6 +92,34 @@ const MadieAlert = ({
                 />
                 <Icon className={iconClass} />
                 <div id="content">{content && content}</div>
+                {
+                    // minimizeAlerts is a feature flag for now, since it will be standard later
+                }
+                {minimizeAlerts && (
+                    <Tooltip title={"Minimize"} arrow>
+                        <IconButton sx={{
+                                    marginLeft: "auto",
+                                    "&:after": {
+                                        content: `''`,
+                                        position: "absolute",
+                                        left: "0px",
+                                        width: "1px",
+                                        height: "40px",
+                                        backgroundColor: "#B0B0B0",
+                                        pointerEvents: "none",
+                                    },
+                                }}
+                            >
+                            <FullscreenExitRoundedIcon 
+                             onClick={(e) => {
+                                e.preventDefault();
+                                setMinimized(true);
+                            }}
+                                sx={{ color: "#242424" }}
+                            />
+                        </IconButton>
+                    </Tooltip>
+                )}
                 {copyButton && (
                     <Tooltip
                         data-testid="copy-button-tooltip"
@@ -98,15 +129,17 @@ const MadieAlert = ({
                         <IconButton
                             sx={{
                                 marginLeft: "auto",
-                                "&:after": {
-                                    content: `''`,
-                                    position: "absolute",
-                                    left: "0px",
-                                    width: "1px",
-                                    height: "40px",
-                                    backgroundColor: "#B0B0B0",
-                                    pointerEvents: "none",
-                                },
+                                ...(!minimizeAlerts && {
+                                    "&:after": {
+                                        content: `''`,
+                                        position: "absolute",
+                                        left: "0px",
+                                        width: "1px",
+                                        height: "40px",
+                                        backgroundColor: "#B0B0B0",
+                                        pointerEvents: "none",
+                                    }
+                                })
                             }}
                         >
                             <ContentCopyIcon
@@ -120,6 +153,7 @@ const MadieAlert = ({
                         </IconButton>
                     </Tooltip>
                 )}
+
                 {canClose && (
                     <IconButton
                         sx={{
@@ -152,9 +186,11 @@ MadieAlert.propTypes = {
     alertProps: PropTypes.object,
     closeButtonProps: PropTypes.object,
     copyButton: PropTypes.bool,
+    minimizeAlerts: PropTypes.bool,
 };
 MadieAlert.defaultProps = {
     copyButton: false,
+    minimizeAlerts: false,
 };
 
 export default MadieAlert;

package/components/MadieDialog/MadieDialog.stories.js

@@ -229,6 +229,58 @@ export const DialogWithActionButtonsHideContinueButton = () => {
     );
 };
 
+export const DialogWithActionButtonsContinueButtonDisabledWithTooltip = () => {
+    const [open, setOpen] = useState(false);
+    const onClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <Button variant="cyan" onClick={() => setOpen(true)}>
+                open Dialog
+            </Button>
+            <MadieDialog
+                title="Human Readable"
+                sx={{
+                    "#modal-body": {
+                        h2: {
+                            borderTop: "1px solid black",
+                        },
+                    },
+                }}
+                dialogProps={{
+                    onClose,
+                    open,
+                    maxWidth: "lg",
+                    fullWidth: true,
+                }}
+                cancelButtonProps={{
+                    variant: "secondary",
+                    cancelText: "Cancel",
+                    "data-testid": "cancel-button",
+                }}
+                continueButtonProps={{
+                    variant: "cyan",
+                    type: "submit",
+                    "data-testid": "continue-button",
+                    continueText: "Continue",
+                    disabled: true,
+                    tooltipText: "Continue button is disabled",
+                }}
+            >
+                <DialogContent>
+                    <div data-testid="view-modal">
+                        <Typography>
+                            <div>Some Text</div>
+                        </Typography>
+                    </div>
+                </DialogContent>
+            </MadieDialog>
+        </>
+    );
+};
+
 export const DialogWithPopoverActionButtons = () => {
     const [open, setOpen] = useState(false);
     const onClose = () => {

package/components/MadieDialog/index.jsx

@@ -10,6 +10,7 @@ import {
     Divider,
     IconButton,
     Typography,
+    Tooltip,
 } from "@mui/material";
 import { Box } from "@mui/system";
 import Button from "../Button";
@@ -37,6 +38,8 @@ const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
         continueText,
         continueIcon,
         popoverOptions,
+        disabled,
+        tooltipText,
         ...otherContinueButtonProps
     } = continueButtonProps;
     const [anchorEl, setAnchorEl] = useState(null);
@@ -94,17 +97,22 @@ const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
                         />
                     </>
                 ) : continueButtonProps ? (
-                    <Button
-                        className="qpp-c-button--cyan"
-                        type="submit"
-                        style={{ marginTop: 0 }}
-                        {...otherContinueButtonProps}
-                    >
+                    <Tooltip title={disabled && tooltipText ? tooltipText : ""}>
                         <span>
-                            {continueText}
-                            {continueIcon}
+                            <Button
+                                className="qpp-c-button--cyan"
+                                type="submit"
+                                style={{ marginTop: 0 }}
+                                {...otherContinueButtonProps}
+                                disabled={disabled}
+                            >
+                                <span>
+                                    {continueText}
+                                    {continueIcon}
+                                </span>
+                            </Button>
                         </span>
-                    </Button>
+                    </Tooltip>
                 ) : null}
             </DialogActions>
         </>

package/components/RichTextEditor/RichTextEditor.stories.js

@@ -0,0 +1,28 @@
+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>,
+    ],
+};
+
+export const TextEditor = () => {
+    const [value, setValue] = useState("test");
+
+    const handleChange = (id, selectedVal) => {
+        setValue(selectedVal);
+    };
+    return (
+        <RichTextEditor
+            label={"Test Text Editor"}
+            required={true}
+            onChange={handleChange}
+            content={value}
+        />
+    );
+};
+TextEditor.storyName = "Rich Text Editor";

package/components/RichTextEditor/index.jsx

@@ -0,0 +1,263 @@
+import React from "react";
+
+import PropTypes from "prop-types";
+import { EditorContent, useEditor } from "@tiptap/react";
+import InputLabel from "../InputLabel";
+
+import Gapcursor from "@tiptap/extension-gapcursor";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+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";
+import FormatUnderlinedIcon from "@mui/icons-material/FormatUnderlined";
+import StrikethroughSIcon from "@mui/icons-material/StrikethroughS";
+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";
+
+const MenuBar = ({ editor }) => {
+    if (!editor) {
+        return null;
+    }
+    return (
+        <div className="control-group">
+            <div className="button-group">
+                <Tooltip
+                    data-testid="bold-tooltip"
+                    title="Bold"
+                    placement="top"
+                    enterDelay={1000}
+                    arrow
+                >
+                    <IconButton
+                        key={"bold"}
+                        onClick={() =>
+                            editor.chain().focus().toggleBold().run()
+                        }
+                        className={editor.isActive("bold") ? "is-active" : ""}
+                    >
+                        <FormatBoldIcon />
+                    </IconButton>
+                </Tooltip>
+                <Tooltip
+                    data-testid="italic-tooltip"
+                    title="Italic"
+                    placement="top"
+                    enterDelay={1000}
+                    arrow
+                >
+                    <IconButton
+                        key={"italic"}
+                        onClick={() =>
+                            editor.chain().focus().toggleItalic().run()
+                        }
+                        className={editor.isActive("italic") ? "is-active" : ""}
+                    >
+                        <FormatItalicIcon />
+                    </IconButton>
+                </Tooltip>
+                <Tooltip
+                    data-testid="underline-tooltip"
+                    title="Underline"
+                    placement="top"
+                    enterDelay={1000}
+                    arrow
+                >
+                    <IconButton
+                        key={"underline"}
+                        onClick={() =>
+                            editor.chain().focus().toggleUnderline().run()
+                        }
+                        className={
+                            editor.isActive("underline") ? "is-active" : ""
+                        }
+                    >
+                        <FormatUnderlinedIcon />
+                    </IconButton>
+                </Tooltip>
+                <Tooltip
+                    data-testid="strikethrough-tooltip"
+                    title="Strikethrough"
+                    placement="top"
+                    enterDelay={1000}
+                    arrow
+                >
+                    <IconButton
+                        key={"strike"}
+                        onClick={() =>
+                            editor.chain().focus().toggleStrike().run()
+                        }
+                        className={editor.isActive("strike") ? "is-active" : ""}
+                        style={{ borderRight: "solid 1px #9c9c9c" }}
+                    >
+                        <StrikethroughSIcon />
+                    </IconButton>
+                </Tooltip>
+                <Tooltip
+                    data-testid="orderedlist-tooltip"
+                    title="Ordered List"
+                    placement="top"
+                    enterDelay={1000}
+                    arrow
+                >
+                    <IconButton
+                        key={"orderedList"}
+                        onClick={() =>
+                            editor.chain().focus().toggleOrderedList().run()
+                        }
+                        className={
+                            editor.isActive("orderedList") ? "is-active" : ""
+                        }
+                    >
+                        <FormatListNumberedIcon />
+                    </IconButton>
+                </Tooltip>
+                <Tooltip
+                    data-testid="bulletedlist-tooltip"
+                    title="Bulleted List"
+                    placement="top"
+                    enterDelay={1000}
+                    arrow
+                >
+                    <IconButton
+                        key={"bulletList"}
+                        onClick={() =>
+                            editor.chain().focus().toggleBulletList().run()
+                        }
+                        className={
+                            editor.isActive("bulletList") ? "is-active" : ""
+                        }
+                        style={{ borderRight: "solid 1px #9c9c9c" }}
+                    >
+                        <FormatListBulletedIcon />
+                    </IconButton>
+                </Tooltip>
+                <Tooltip
+                    data-testid="table-tooltip"
+                    title="Table"
+                    placement="top"
+                    enterDelay={1000}
+                    arrow
+                >
+                    <IconButton
+                        key={"insertTable"}
+                        onClick={() =>
+                            editor.commands.insertTable({
+                                rows: 3,
+                                cols: 3,
+                                withHeaderRow: true,
+                            })
+                        }
+                        className={
+                            editor.isActive("insertTable") ? "is-active" : ""
+                        }
+                    >
+                        <TableChartIcon />
+                    </IconButton>
+                </Tooltip>
+            </div>
+        </div>
+    );
+};
+
+const RichTextEditor = ({
+    id,
+    error = false,
+    required = false,
+    label,
+    onChange,
+    content,
+}) => {
+    const editor = useEditor(
+        {
+            extensions: [
+                StarterKit,
+                Gapcursor,
+                Table.configure({
+                    resizable: true,
+                }),
+                TableRow,
+                TableHeader,
+                TableCell,
+                Underline,
+                Markdown,
+            ],
+            shouldRerenderOnTransaction: false,
+            content,
+            onUpdate: ({ editor }) => {
+                const newValue = editor.storage.markdown.getMarkdown();
+                onChange(newValue);
+                console.log(newValue);
+            },
+        },
+        [content]
+    );
+    return (
+        <>
+            <InputLabel
+                shrink
+                required={required}
+                error={error}
+                htmlFor={id}
+                style={{ marginBottom: 0, height: 16 }} // force a heignt
+                sx={[
+                    {
+                        backgroundColor: "transparent",
+                        borderColor: "#8C8C8C",
+                        display: "inline-flex",
+                        flexDirection: "row-reverse",
+                        alignSelf: "baseline",
+                        textTransform: "none",
+                        // force it outside the select box
+                        position: "initial",
+                        transform: "translateX(0px) translateY(0px)",
+                        fontFamily: "Rubik",
+                        fontWeight: 500,
+                        fontSize: 14,
+                        color: "#333",
+                        "& .MuiInputLabel-asterisk": {
+                            color: "#AE1C1C !important",
+                            marginRight: "3px !important", //this was
+                        },
+                    },
+                    required && {
+                        transform: "translateX(-12px) translateY(0px)",
+                        "& .MuiInputLabel-asterisk": {
+                            color: "#D92F2",
+                            marginRight: "3px !important", //this was
+                        },
+                    },
+                    error && {
+                        color: "#AE1C1C !important",
+                    },
+                ]}
+            >
+                {label}
+            </InputLabel>
+            <MenuBar editor={editor} />
+            <EditorContent editor={editor} />
+        </>
+    );
+};
+
+RichTextEditor.propTypes = {
+    id: PropTypes.string,
+    error: PropTypes.bool,
+    required: PropTypes.bool,
+    label: PropTypes.string,
+    onChange: PropTypes.func,
+    content: PropTypes.any,
+};
+
+MenuBar.propTypes = {
+    editor: PropTypes.any,
+};
+
+export default RichTextEditor;

package/components/index.js

@@ -25,6 +25,7 @@ import Popover from "./Popover";
 import { Pagination } from "./Pagination";
 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";
@@ -42,7 +43,7 @@ import Dropdown from "./Dropdown";
 import DSLink from "./Link";
 import NumberInput from "./NumberInput";
 import TruncateText from "./TruncateText/index";
-import theme from "../themes/actionCenterTheme.js"; 
+import theme from "../themes/actionCenterTheme.js";
 import {
     MyApplicationsIcon,
     UserSignInIcon,
@@ -156,6 +157,7 @@ export {
     Popover,
     RadioButton,
     ReadOnlyTextField,
+    RichTextEditor,
     Search,
     Select,
     Spinner,
@@ -172,5 +174,5 @@ export {
     Tooltip,
     DSLink,
     TruncateText,
-    theme
+    theme,
 };