@madie/madie-design-system 1.0.32 → 1.0.35

package/components/Pagination/index.jsx

@@ -1,5 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { visuallyHidden } from '@mui/utils';
+
 import {
     Pagination as PaginationComponent,
     PaginationItem,
@@ -57,13 +59,19 @@ const Pagination = ({
     return (
         <Container>
             <Row>
+                {/*this span is only for screen reader*/}
+                <span
+                    id="items-per-page"
+                    style={visuallyHidden}
+                >
+                    Items per page {limit}.
+                </span>
                 <Typography
                     fontSize={14}
                     fontFamily="Rubik"
                     sx={{
                         color: "#333333",
                     }}
-                    id="items-per-page"
                 >
                     Items per page
                 </Typography>
@@ -87,6 +95,7 @@ const Pagination = ({
                     label={null}
                     onChange={handleLimitChange}
                     inputProps={{
+                        "aria-labelledby":"items-per-page",
                         "aria-describedby": "items-per-page offset-of-total-items",
                     }}
                 >
@@ -206,4 +215,4 @@ Pagination.propTypes = {
     type: PropTypes.string,
 };
 
-export { Pagination };
+export { Pagination };

package/components/Popover/Popover.stories.js

@@ -0,0 +1,55 @@
+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 handleOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+        setOptionsOpen(true);
+    };
+
+    const viewEditredirect = () => {
+        setOptionsOpen(false);
+    };
+
+    const zipData = () => {
+        setOptionsOpen(false);
+    };
+
+    return (
+        <div className="qpp-u-padding--12">
+            <button className="qpp-c-button" onClick={(e) => handleOpen(e)}>
+                Open Popover
+            </button>
+            <Popover
+                optionsOpen={optionsOpen}
+                anchorEl={anchorEl}
+                onClose={onClose}
+                canEdit={true}
+                editViewSelectOptionProps={{
+                    label: "View",
+                    toImplementFunction: viewEditredirect,
+                    dataTestId: `edit-measure-1`,
+                }}
+                otherSelectOptionProps={[{
+                    label: "Export",
+                    toImplementFunction: zipData,
+                    dataTestId: `export-measure-1`,
+                }]}
+            />
+        </div>
+    );
+};

package/components/Popover/index.js

@@ -0,0 +1,110 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Popover from "@mui/material/Popover";
+
+const MadiePopover = ({
+    optionsOpen,
+    anchorEl,
+    handleClose,
+    canEdit,
+    editViewSelectOptionProps,
+    otherSelectOptionProps,
+}) => {
+    return (
+        <Popover
+            open={optionsOpen}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "right",
+            }}
+            transformOrigin={{
+                vertical: "top",
+                horizontal: "left",
+            }}
+            sx={{
+                ".MuiPopover-paper": {
+                    boxShadow: "none",
+                    overflow: "visible",
+                    ".popover-content": {
+                        border: "solid 1px #979797",
+                        position: "relative",
+                        marginTop: "16px",
+                        marginLeft: "-70px",
+                        borderRadius: "6px",
+                        background: "#F7F7F7",
+                        width: "115px",
+                        "&::before": {
+                            borderWidth: "thin",
+                            position: "absolute",
+                            top: "-8px",
+                            left: "calc(50% - 8px)",
+                            height: "16px",
+                            width: "16px",
+                            background: "#F7F7F7",
+                            borderColor:
+                                "#979797 transparent transparent #979797",
+                            content: '""',
+                            transform: "rotate(45deg)",
+                        },
+                        ".btn-container": {
+                            display: "flex",
+                            flexDirection: "column",
+                            padding: "10px 0",
+                            button: {
+                                zIndex: 2,
+                                fontSize: 14,
+                                padding: "0px 12px",
+                                textAlign: "left",
+                                "&:hover": {
+                                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                                },
+                            },
+                        },
+                    },
+                },
+            }}
+        >
+            <div className="popover-content" data-testid="popover-content">
+                <div className="btn-container">
+                    <button
+                        data-testid={editViewSelectOptionProps.dataTestId}
+                        onClick={editViewSelectOptionProps.toImplementFunction}
+                    >
+                        {editViewSelectOptionProps.label}
+                    </button>
+                    {canEdit &&
+                        otherSelectOptionProps.map((res) => {
+                            return (
+                                <button
+                                    key={res.dataTestId}
+                                    data-testid={res.dataTestId}
+                                    onClick={res.toImplementFunction}
+                                >
+                                    {res.label}
+                                </button>
+                            );
+                        })}
+                </div>
+            </div>
+        </Popover>
+    );
+};
+
+MadiePopover.propTypes = {
+    optionsOpen: PropTypes.bool,
+    anchorEl: PropTypes.any,
+    handleClose: PropTypes.func,
+    canEdit: PropTypes.bool,
+    editViewSelectOptionProps: PropTypes.object,
+    otherSelectOptionProps: PropTypes.arrayOf(
+        PropTypes.shape({
+            dataTestId: PropTypes.string,
+            label: PropTypes.string,
+            toImplementFunction: PropTypes.func,
+        })
+    ),
+};
+
+export default MadiePopover;

package/components/Toast/Toast.stories.js

@@ -41,6 +41,72 @@ export const SuccessToast = () => {
     );
 };
 
+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 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 DangerToast = () => {
     const [toastOpen, setToastOpen] = useState(false);
     return (

package/components/Toast/index.jsx

@@ -1,73 +1,84 @@
 import React from "react";
-import PropTypes from "prop-types";
+
+import ErrorIcon from "@mui/icons-material/Error"; // warning
+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 { IconButton, Snackbar } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import ClearIcon from "@mui/icons-material/Clear";
+
+import classNames from "classnames";
+import PropTypes from "prop-types";
 
 const Toast = ({
-    open,
+    toastType = "warning",
+    open = true,
     message,
-    toastType, // 'danger | success, more later when mockups come out
-    autoHideDuration,
+    canClose = true,
     onClose,
+    autoHideDuration,
     testId,
     toastKey,
+    toastProps, // props to pass to outer component
+    closeButtonProps, // props to pass to close button
     ...rest
 }) => {
-    const dangerColor = "#D92F2F";
-    const successColor = "#4d7e23";
-    // we can map our colors and icons to make this reusable for multiple info types.
-    const colorMap = {
-        danger: dangerColor,
-        success: successColor,
-    };
-    const iconMap = {
-        danger: ErrorOutlineIcon,
-        success: CheckCircleOutlineIcon,
+    // we have four states to render for
+    const typeSelect = {
+        warning: ErrorIcon,
+        info: InfoIcon,
+        danger: CancelIcon,
+        success: CheckCircleIcon,
     };
-    const selectedColor = colorMap[toastType];
-    const SelectedIcon = iconMap[toastType];
+    const Icon = typeSelect[toastType];
+
+    const toastClass = classNames("toast", toastType);
+    const iconClass = classNames("alert-icon", toastType);
 
-    const Message = (
-        <div className="messageCont">
-            <div>
-                <div className="errorCont">
-                    {SelectedIcon && <SelectedIcon className="leftIcon" />}
-                </div>
-                <p className="messageText" data-testid={testId}>
-                    {message}
-                </p>
-            </div>
-            <div style={{ display: "block" }}>
-                <IconButton
-                    className="icon-button"
-                    aria-label="close"
-                    color="inherit"
-                    sx={{ p: 0 }}
-                    onClick={onClose}
-                    data-testId="close-error-button"
-                >
-                    <CloseIcon />
-                </IconButton>
-            </div>
-        </div>
-    );
     return (
         <Snackbar
             key={toastKey ? toastKey : undefined}
-            anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+            anchorOrigin={{ vertical: "top", horizontal: "center" }}
+            autoHideDuration={autoHideDuration}
+            open={open}
+            onClose={onClose}
+            message={
+                <div className={toastClass} {...toastProps}>
+                    <Icon className={iconClass} />
+                    <div id="message" data-testid={testId}>{message}</div>
+                    {canClose && (
+                        <IconButton
+                            onClick={onClose}
+                            sx={{
+                                marginLeft: "auto",
+                                "&:after": {
+                                    content: `''`,
+                                    position: "absolute",
+                                    left: "0px",
+                                    width: "1px",
+                                    height: "40px",
+                                    backgroundColor: "#B0B0B0",
+                                    pointerEvents: "none",
+                                },
+                            }}
+                            {...closeButtonProps}
+                        >
+                            <ClearIcon sx={{ color: "#242424" }} />
+                        </IconButton>
+                    )}
+                </div>
+            }
             sx={{
                 overflow: "hidden",
-                color: selectedColor,
-                borderRadius: 1,
+                // borderRadius: 4,
                 "& .MuiPaper-root": {
                     backgroundColor: "#fff",
                     padding: 0,
-                    color: selectedColor,
                 },
-                "& .MuiSvgIcon-root": {
-                    color: "#242424",
+                "& .MuiSnackbar-root": {
+                    overflow: "hidden",
+                    borderRadius: 4,
                 },
                 "& .MuiSnackbarContent-message": {
                     padding: 0,
@@ -79,50 +90,26 @@ const Toast = ({
                         justifyContent: "space-between",
                         div: {
                             display: "flex",
-                            ".messageText": {
-                                m: 0,
-                                p: 2.375,
-                                fontFamily: "Rubik",
-                                fontWeight: 500,
-                                fontSize: 14,
-                            },
-                            ".errorCont": {
-                                backgroundColor: selectedColor,
-                                ".leftIcon": {
-                                    m: 2,
-                                    color: "#fff",
-                                },
-                            },
-                            ".icon-button": {
-                                m: 2,
-                                "&. MuiSvgIcon-root": {
-                                    color: "#242424",
-                                },
-                            },
                         },
                     },
-                    "& .MuiSvgIcon-root": {
-                        color: "#242424",
-                    },
                 },
             }}
-            autoHideDuration={autoHideDuration}
-            open={open}
-            onClose={onClose}
-            message={message ? Message : undefined}
             {...rest}
         />
     );
 };
 
 Toast.propTypes = {
+    toastType: PropTypes.string,
     open: PropTypes.bool,
-    message: PropTypes.string,
-    toastType: PropTypes.string, // 'danger | success, more later when mockups come out
-    autoHideDuration: PropTypes.number,
+    message: PropTypes.node,
+    canClose: PropTypes.bool,
     onClose: PropTypes.func,
+    autoHideDuration: PropTypes.number,
     testId: PropTypes.string,
     toastKey: PropTypes.string,
+    toastProps: PropTypes.object,
+    closeButtonProps: PropTypes.object,
 };
 
 export default Toast;

package/components/index.js

@@ -1,6 +1,6 @@
 import Accordion from "./Accordion";
 import Alert from "./Alert";
-import AutoComplete from "./AutoComplete/AutoComplete"
+import AutoComplete from "./AutoComplete/AutoComplete";
 import Breadcrumb from "./Breadcrumb";
 import Button, { TextButton } from "./Button";
 import CalloutBox from "./CalloutBox";
@@ -15,6 +15,7 @@ import MadieDiscardDialog from "./MadieDiscardDialog";
 import MadieDeleteDialog from "./MadieDeleteDialog";
 import MadieSpinner from "./MadieSpinner";
 import Modal from "./Modal";
+import Popover from "./Popover";
 import { Pagination } from "./Pagination";
 import ReadOnlyTextField from "./ReadOnlyTextField";
 import Select from "./Select";
@@ -132,6 +133,7 @@ export {
     MadieDeleteDialog,
     MadieSpinner,
     Pagination,
+    Popover,
     ReadOnlyTextField,
     Search,
     Select,