@madie/madie-design-system 1.0.31 → 1.0.34

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,8 +95,8 @@ const Pagination = ({
                     label={null}
                     onChange={handleLimitChange}
                     inputProps={{
-                        "aria-labelledby": "items-per-page",
-                        "aria-describedby": "offset-of-total-items",
+                        "aria-labelledby":"items-per-page",
+                        "aria-describedby": "items-per-page offset-of-total-items",
                     }}
                 >
                     {limitOptions.map((val) => (
@@ -207,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/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,