@madie/madie-design-system 1.0.0 → 1.0.1

package/README.md

@@ -1,5 +1,4 @@
-# QPP-Style React
+# Madie/madie-design-system React
 
-This directory contains react implementations of the components for QPP.
+This directory contains react implementations of the components for Madie.
 
-A storybook with examples is published at [https://cmsgov.github.io/qpp-style](https://cmsgov.github.io/qpp-style)

package/components/Header/ImpersonatorBanner.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import cookie from 'cookie';
 import axios from 'axios';
-import CloseIcon from '@material-ui/icons/Close';
+import CloseIcon from '@mui/icons-material/Close';
 
 import { TextButton } from '../Button';
 import { deleteImpersonatedUser, revertQppHasAuthsCookie } from '../../session/logout';
@@ -21,7 +21,7 @@ const ImpersonatorBanner = () => {
   ].join(' ');
 
   const onClick = () => {
-    const fn = () => {      
+    const fn = () => {
       deleteImpersonatedUser({ qpp_impersonated_user: user });
       // Set qpp_has_authorizations cookie back to impersonator's value
       revertQppHasAuthsCookie();

package/components/Link/Link.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import DSLink from './index';
 import { withKnobs } from '@storybook/addon-knobs';
-import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
 export default {
   title: 'Link',

package/components/Pagination/index.jsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { makeStyles } from "@mui/styles";
+import PropTypes from "prop-types";
+import {
+  Pagination as PaginationComponent,
+  PaginationItem,
+  Select,
+  MenuItem,
+  Typography,
+} from "@mui/material";
+
+const useStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexGrow: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    minHeight: 90,
+    padding: "0px 24px",
+  },
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  // text
+  dark: {
+    color: "#333333",
+  },
+  faded: {
+    color: "#757575",
+  },
+  //select
+  select: {
+    margin: "0 11px",
+    "& .MuiSelect-select": {
+      margin: "0 11px",
+    },
+  },
+  // pagination
+  ul: {
+    "& .MuiPaginationItem-root": {
+      color: "#0073C8",
+      border: "solid 1px #CACACA",
+      "&:focus": {
+        border: "0.0625rem solid #125496",
+        borderRadius: "0.1875rem",
+        boxShadow: "0 0 0 0.25rem #cbe4ff",
+        outline: "none",
+      },
+    },
+    "& .Mui-selected": {
+      color: "#fff",
+      backgroundColor: "#0073C8 !important",
+    },
+    "& .MuiPaginationItem-ellipsis": {
+      border: "solid 1px transparent",
+    },
+    "& .MuiPaginationItem-previousNext": {
+      border: "solid 1px transparent",
+    },
+  },
+  next: {
+    border: "solid 1px transparent",
+    "&::before": {
+      content: '"Next  "',
+      marginRight: 5,
+      fontSize: 14,
+      fontFamily: "Rubik",
+    },
+  },
+  prev: {
+    border: "solid 1px transparent",
+    "&::after": {
+      content: '"  Previous"',
+      marginLeft: 5,
+      fontSize: 14,
+      fontFamily: "Rubik",
+    },
+  },
+  selected: {
+    backgroundColor: "#0073C8",
+    border: "solid 1px #0073C8",
+    color: "#fff",
+  },
+});
+
+// for ts later implemeentation.
+// interface PaginationProps {
+//     totalItems: number; // total items
+//     visibleItems: number; // returned by paging object in spring
+//     count: number; // page count
+//     limit: number; // items per page
+//     limitOptions: number[]; // limit options
+//     shape?: "rounded" | "circular"; // style
+//     page: number; // current page zer0 indexed
+//     siblingCount?: number;
+//     boundaryCount?: number;
+//     handlePageChange: (e: any, v: any) => void;
+//     handleLimitChange: (e: any) => void;
+//     hidePrevButton: boolean;
+//     hideNextButton: boolean;
+//   }
+
+const Pagination = ({
+  totalItems = 0,
+  visibleItems = 0,
+  count = 1,
+  offset = 0,
+  shape = "rounded",
+  page = 0,
+  limit = 10,
+  limitOptions = [10, 25, 50],
+  handlePageChange,
+  handleLimitChange,
+  hidePrevButton = true,
+  hideNextButton = false,
+}) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <div className={classes.row}>
+        <Typography fontSize={14} fontFamily="Rubik" className={classes.dark}>
+          Items per page
+        </Typography>
+        <Select
+          size="small"
+          classes={{
+            root: classes.select,
+          }}
+          id="pagination-limit-select"
+          value={limit}
+          label={null}
+          onChange={handleLimitChange}
+        >
+          {limitOptions.map((val) => (
+            <MenuItem value={val} key={`limit-${val}`} data-testid="limit-option">
+              {val}
+            </MenuItem>
+          ))}
+        </Select>
+        <Typography
+          fontSize={14}
+          className={classes.faded}
+          fontFamily="Rubik"
+        >{`${offset + 1} - ${
+          visibleItems + offset
+        } of ${totalItems}`}</Typography>
+      </div>
+      <PaginationComponent
+        classes={{
+          ul: classes.ul,
+          selected: classes.selected,
+        }}
+        renderItem={(props) => {
+          if (props.type === "next") {
+            return (
+              <PaginationItem {...props} classes={{ text: classes.next }} />
+            );
+          }
+          if (props.type === "previous") {
+            return (
+              <PaginationItem
+                {...props}
+                classes={{ text: classes.prev }}
+              />
+            );
+          }
+          return <PaginationItem {...props} />;
+        }}
+        count={count}
+        page={page}
+        shape={shape}
+        siblingCount={2}
+        boundaryCount={0}
+        onChange={handlePageChange}
+        hidePrevButton={hidePrevButton}
+        hideNextButton={hideNextButton}
+      />
+    </div>
+  );
+};
+
+Pagination.propTypes = {
+  totalItems: PropTypes.number,
+  visibleItems: PropTypes.number,
+  count: PropTypes.number,
+  offset: PropTypes.number,
+  shape: PropTypes.string,
+  limit: PropTypes.number,
+  page: PropTypes.number,
+  limitOptions: PropTypes.array,
+  handlePageChange: PropTypes.func,
+  handleLimitChange: PropTypes.func,
+  hidePrevButton: PropTypes.bool,
+  hideNextButton: PropTypes.bool,
+  type: PropTypes.string,
+};
+
+export { Pagination };

package/components/Search/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import SearchIcon from '@material-ui/icons/Search';
+import SearchIcon from '@mui/icons-material/Search';
 
 const Search = ({
   id,

package/components/Tabs/Tab.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MuiTab from '@material-ui/core/Tab';
+import { Tab as MuiTab } from '@mui/material';
 
 const Tab = ({ href, ...rest }) => {
   return (

package/components/Tabs/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import MuiTabs from '@material-ui/core/Tabs'
+import { Tabs as MuiTabs } from '@mui/material'
 import TabPanel from './TabPanel'
 import LinkTab from './Tab'
 
@@ -12,7 +12,7 @@ const getPanelChildren = (children) => {
 
 const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) => {
   const [value, setValue] = useState(defaultSelectedId || selected)
-  
+
   useEffect(() => {
     if (selected) {
       setValue(selected)
@@ -37,10 +37,10 @@ const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) =>
       }
       return child
     })
-  }  
+  }
 
   const panels = getPanelChildren(children)
-  
+
   const tabList = panels.map(
     (panel) => {
       const { id, tab, tabHref, disabled } = panel?.props || {}
@@ -49,7 +49,7 @@ const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) =>
   )
 
   const foundIndex = tabList.findIndex(({ id }) => id === value)
-  
+
   const tabIndex = foundIndex >= 0 ? foundIndex : 0
 
   return (

package/components/index.js

@@ -8,6 +8,7 @@ import FlashNotification from './FlashNotification/FlashNotificationUI';
 import Footer from './Footer/FooterUI';
 import Header from './Header/HeaderUI';
 import Modal from './Modal';
+import { Pagination } from './Pagination';
 import SideNav from './SideNav/UI/SideNavUI';
 import Spinner from './UnwrappedSpinner';
 import TabPanel from './Tabs/TabPanel';
@@ -113,6 +114,7 @@ export {
   Icons,
   Infotip,
   Modal,
+  Pagination,
   Search,
   SideNav,
   Spinner,