@madie/madie-design-system 1.0.47 → 1.0.49

package/.babelrc

@@ -1,10 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-env"
-  ],
-  "plugins": [
-    "transform-es2015-modules-umd",
-    "transform-class-properties"
-  ]
+    "presets": ["@babel/preset-react", "@babel/preset-env"],
+    "plugins": ["transform-es2015-modules-umd", "transform-class-properties"]
 }

package/.eslintrc.js

@@ -1,31 +1,31 @@
 module.exports = {
-    extends: ['eslint:recommended', 'plugin:react/recommended'],
-    parser: 'babel-eslint',
+    extends: ["eslint:recommended", "plugin:react/recommended"],
+    parser: "babel-eslint",
     parserOptions: {
-        sourceType: 'module',
+        sourceType: "module",
         ecmaFeatures: {
-            jsx: true
-        }
+            jsx: true,
+        },
     },
     env: {
         es6: true,
         node: true,
         browser: true,
         jquery: true,
-        mocha: true
+        mocha: true,
     },
     rules: {
-        'no-unused-vars': [
-            'error',
+        "no-unused-vars": [
+            "error",
             {
-                args: 'none'
-            }
+                args: "none",
+            },
         ],
-        'linebreak-style': ['error', 'unix'],
-        'no-console': 0,
-        'no-prototype-builtins': [0]
+        "linebreak-style": ["error", "unix"],
+        "no-console": 0,
+        "no-prototype-builtins": [0],
     },
     settings: {
-        react: { version: 'detect' }
-    }
+        react: { version: "detect" },
+    },
 };

package/.storybook/main.js

@@ -1,46 +1,45 @@
-
 module.exports = {
     core: {
-        builder: 'webpack5',
+        builder: "webpack5",
     },
-  stories: [
-    '../components/**/*.stories.@(js|jsx|mdx)',
-    '../lib/**/*.stories.@(js|jsx|mdx)',
-  ],
-  addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addon-storysource',
-    '@storybook/addon-knobs',
-    '@storybook/addon-a11y',
-    '@storybook/addon-docs',
-    '@storybook/addon-backgrounds',
-    '@storybook/addon-viewport',
-    '@storybook/addon-postcss',
-  ],
-  webpackFinal: async (config) => {
-    // do mutation to the config
+    stories: [
+        "../components/**/*.stories.@(js|jsx|mdx)",
+        "../lib/**/*.stories.@(js|jsx|mdx)",
+    ],
+    addons: [
+        "@storybook/addon-actions",
+        "@storybook/addon-links",
+        "@storybook/addon-storysource",
+        "@storybook/addon-knobs",
+        "@storybook/addon-a11y",
+        "@storybook/addon-docs",
+        "@storybook/addon-backgrounds",
+        "@storybook/addon-viewport",
+        "@storybook/addon-postcss",
+    ],
+    webpackFinal: async (config) => {
+        // do mutation to the config
 
-    config.module.rules.push({
-      test: /\.scss$/,
-      resolve: {
-        extensions: ['.scss', '.sass'],
-      },
-      use: [
-        { loader: 'style-loader' },
-        {
-          loader: 'css-loader',
-          options: { sourceMap: true, importLoaders: 1 },
-        },
-        {
-          loader: 'sass-loader',
-          options: {
-            sourceMap: true,
-          },
-        },
-      ],
-    });
+        config.module.rules.push({
+            test: /\.scss$/,
+            resolve: {
+                extensions: [".scss", ".sass"],
+            },
+            use: [
+                { loader: "style-loader" },
+                {
+                    loader: "css-loader",
+                    options: { sourceMap: true, importLoaders: 1 },
+                },
+                {
+                    loader: "sass-loader",
+                    options: {
+                        sourceMap: true,
+                    },
+                },
+            ],
+        });
 
-    return config;
-  },
+        return config;
+    },
 };

package/.storybook/preview-head.html

@@ -3,7 +3,7 @@
   TODO: <Header> should be refactored to no longer rely on bootstrap.
 -->
 <script
-  src="https://code.jquery.com/jquery-3.5.1.min.js"
-  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
-  crossorigin="anonymous"
+    src="https://code.jquery.com/jquery-3.5.1.min.js"
+    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+    crossorigin="anonymous"
 ></script>

package/.storybook/preview.js

@@ -1,5 +1,5 @@
-import '../../shared/styles/_main.scss';
+import "../../shared/styles/_main.scss";
 
 export const parameters = {
-  layout: 'fullscreen',
+    layout: "fullscreen",
 };

package/README.md

@@ -1,4 +1,3 @@
 # Madie/madie-design-system React
 
 This directory contains react implementations of the components for Madie.
-

package/components/AutoComplete/AutoComplete.jsx

@@ -31,10 +31,10 @@ const autoCompleteStyles = {
         paddingTop: 0,
         paddingBottom: 0,
     },
-    "& .Mui-disabled" : {
+    "& .Mui-disabled": {
         backgroundColor: "#EDEDED",
         border: "#EDEDED",
-    }
+    },
 };
 
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
@@ -83,68 +83,78 @@ const AutoComplete = ({
 }) => {
     return (
         <FormControl error={error} fullWidth>
-            <div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/> 
+            <div
+                style={{
+                    width: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    flexGrow: 1,
+                }}
+            />
             <InputLabel
                 htmlFor={`${id}`}
                 id={`${id}-label`}
                 disabled={disabled}
                 required={required}
                 shrink
-                style={{marginBottom: 0, height: 16}} // force a heignt
+                style={{ marginBottom: 0, height: 16 }} // force a heignt
                 sx={[
-                {
-                    backgroundColor: "transparent",
-                    display: "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
+                    {
+                        backgroundColor: "transparent",
+                        display: "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
+                        },
+                    },
+                    disabled && {
+                        color: "rgba(0,0,0,0.6)",
                     },
-                },
-                required && {
-                    transform: "translateX(-12px) translateY(0px)",
-                    "& .MuiInputLabel-asterisk": {
-                        color: "#D92F2",
-                        marginRight: "3px !important", //this was
+                    error && {
+                        color: "#AE1C1C !important",
                     },
-                },
-                disabled && {
-                    color: "rgba(0,0,0,0.6)",
-                },
-                error && {
-                    color: "#AE1C1C !important",
-                },
-            ]}
+                ]}
             >
                 {label}
             </InputLabel>
-            {helperText && (<FormHelperText
+            {helperText && (
+                <FormHelperText
                     tabIndex={0}
                     aria-live="polite"
                     id={`${id}-helper-text`}
                     data-testid={`${id}-helper-text`}
                     error={error}
-                    sx={[{
-                        margin: "4px 0px 0px 0px",
-                        color: "#515151",
-                        lineHeight: 1
-                    },
-                    error && {
-                        color: "#AE1C1C !important",
-                    },
-                ]}
+                    sx={[
+                        {
+                            margin: "4px 0px 0px 0px",
+                            color: "#515151",
+                            lineHeight: 1,
+                        },
+                        error && {
+                            color: "#AE1C1C !important",
+                        },
+                    ]}
                 >
                     {helperText}
-                </FormHelperText>)}
+                </FormHelperText>
+            )}
             <MUIAutoComplete
                 disablePortal
                 id={id}
@@ -178,7 +188,7 @@ const AutoComplete = ({
                                     color: "#333",
                                     "&::placeholder": {
                                         opacity: 1,
-                                        color: "#717171"
+                                        color: "#717171",
                                     },
                                 },
                             }}

package/components/AutoComplete/AutoComplete.stories.js

@@ -36,7 +36,7 @@ AutoCompleteWithLabel.args = {
 export const AutoCompleteWithLabelDisabled = TemplateSingleSelect.bind({});
 AutoCompleteWithLabelDisabled.args = {
     disabled: true,
-    value: "Option1"
+    value: "Option1",
 };
 
 export const AutoCompleteWithHelperText = TemplateSingleSelect.bind({});
@@ -97,15 +97,26 @@ AutoCompleteMultipleWithError.args = {
     error: true,
 };
 
-
 export const AutoCompleteWithVariableHeights = () => {
     return (
         <div className="qpp-u-padding--16">
-            <div style={{display: "flex", flexDirection: "row", flexGrow: 1}}>
-                <TemplateMultipleSelect placeholder="test" required={true} helperText="test"/>
-                <TemplateMultipleSelect placeholder="test" required={true} helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "/>
-                <TemplateMultipleSelect placeholder="test" required={true} helperText="test"/>
+            <div style={{ display: "flex", flexDirection: "row", flexGrow: 1 }}>
+                <TemplateMultipleSelect
+                    placeholder="test"
+                    required={true}
+                    helperText="test"
+                />
+                <TemplateMultipleSelect
+                    placeholder="test"
+                    required={true}
+                    helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "
+                />
+                <TemplateMultipleSelect
+                    placeholder="test"
+                    required={true}
+                    helperText="test"
+                />
             </div>
         </div>
     );
-};
+};

package/components/Breadcrumb/Breadcrumb.md

@@ -4,13 +4,13 @@ The Breadcrumb component is a secondary navigation scheme that reveals the user'
 
 ### Props
 
-| Property name         | Type       | Required | Default Value | Description                                |
-| --------------------- | ---------- | -------- | ------------- | ------------------------------------------ |
-| `breadcrumbClass`     | `String`   | `false`  | ''            | class to append to Breadcrumb nav element  |
-| `crumbs`              | `Array`    | `true`   |               | array of breadcrumbs                       |
-| `dark`                | `Boolean`  | `false`  | `false`       | Use dark mode theme                        |
-| `RouterLink`          | `Function` | `false`  | `null`        | Link component to use instead of `<a>`     |
-| `routerExcludedLinks` | `Array`    | `false`  | `[]`          | Array of paths to exclude from using Link  |
+| Property name         | Type       | Required | Default Value | Description                               |
+| --------------------- | ---------- | -------- | ------------- | ----------------------------------------- |
+| `breadcrumbClass`     | `String`   | `false`  | ''            | class to append to Breadcrumb nav element |
+| `crumbs`              | `Array`    | `true`   |               | array of breadcrumbs                      |
+| `dark`                | `Boolean`  | `false`  | `false`       | Use dark mode theme                       |
+| `RouterLink`          | `Function` | `false`  | `null`        | Link component to use instead of `<a>`    |
+| `routerExcludedLinks` | `Array`    | `false`  | `[]`          | Array of paths to exclude from using Link |
 
 ### Crumbs
 

package/components/DateField/DateField.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import PropTypes from "prop-types";
+import InputLabel from "../InputLabel";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { kebabCase } from "lodash";
+
+export const dateTextFieldStyle = {
+    width: "170px",
+    borderRadius: "3px",
+    height: 40,
+    border: "1px solid #B0B0B0",
+    marginTop: "8px",
+    "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "3px",
+        "& legend": {
+            width: 0,
+        },
+    },
+    "& .MuiOutlinedInput-root": {
+        "&&": {
+            borderRadius: "3px",
+        },
+    },
+    "& .MuiInputBase-input": {
+        color: "#333333",
+        fontFamily: "Rubik",
+        fontSize: 14,
+        borderRadius: "3px",
+        padding: "9px",
+        Width: "170px",
+        "&::placeholder": {
+            opacity: 1,
+            color: "#717171",
+            fontFamily: "Rubik",
+            fontSize: 14,
+        },
+    },
+};
+
+const DateField = ({ label, value, handlDateTimeChange }) => {
+    return (
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <InputLabel
+                data-testid={`${kebabCase(label)}-date`}
+                style={{ marginBottom: 0, height: 16 }}
+                sx={[
+                    {
+                        backgroundColor: "transparent",
+                        textTransform: "none",
+                        height: 17,
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        fontFamily: "Rubik",
+                        fontStyle: "normal",
+                        fontWeight: 500,
+                        fontSize: 14,
+                        color: "#333333",
+                    },
+                ]}
+            >
+                {`${label} Date`}
+            </InputLabel>
+            <DatePicker
+                value={value ? value : null}
+                onChange={handlDateTimeChange}
+                slotProps={{
+                    textField: {
+                        id: "date",
+                        sx: dateTextFieldStyle,
+                    },
+                }}
+            />
+        </LocalizationProvider>
+    );
+};
+DateField.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any,
+    handlDateTimeChange: PropTypes.func.isRequired,
+};
+
+export default DateField;

package/components/DateField/DateField.stories.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import DateField from "./DateField";
+import { withKnobs } from "@storybook/addon-knobs";
+
+export default {
+    title: "DateField",
+    component: DateField,
+    decorators: [withKnobs],
+};
+export const DateFieldComponent = (args) => {
+    const [value, setValue] = useState("");
+    const handlDateTimeChange = (e) => {
+        console.log("Handle change triggered", e.target.value);
+        setValue(e.target.value);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <DateField
+                label="Status"
+                handlDateTimeChange={handlDateTimeChange}
+                value={value}
+            />
+        </div>
+    );
+};

package/components/MadieDeleteDialog/MadieDeleteDialog.stories.js

@@ -40,4 +40,4 @@ export const DeleteDialog = () => {
             />
         </div>
     );
-};
+};

package/components/MadieDeleteDialog/index.jsx

@@ -51,4 +51,4 @@ MadieDeleteDialog.propTypes = {
     onContinue: PropTypes.func,
 };
 
-export default MadieDeleteDialog;
+export default MadieDeleteDialog;

package/components/Pagination/index.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { visuallyHidden } from '@mui/utils';
+import { visuallyHidden } from "@mui/utils";
 
 import {
     Pagination as PaginationComponent,
@@ -60,10 +60,7 @@ const Pagination = ({
         <Container>
             <Row>
                 {/*this span is only for screen reader*/}
-                <span
-                    id="items-per-page"
-                    style={visuallyHidden}
-                >
+                <span id="items-per-page" style={visuallyHidden}>
                     Items per page {limit}.
                 </span>
                 <Typography
@@ -95,8 +92,9 @@ const Pagination = ({
                     label={null}
                     onChange={handleLimitChange}
                     inputProps={{
-                        "aria-labelledby":"items-per-page",
-                        "aria-describedby": "items-per-page offset-of-total-items",
+                        "aria-labelledby": "items-per-page",
+                        "aria-describedby":
+                            "items-per-page offset-of-total-items",
                     }}
                 >
                     {limitOptions.map((val) => (
@@ -215,4 +213,4 @@ Pagination.propTypes = {
     type: PropTypes.string,
 };
 
-export { Pagination };
+export { Pagination };

package/components/Popover/Popover.stories.js

@@ -44,11 +44,13 @@ export const PopOver = () => {
                     toImplementFunction: viewEditredirect,
                     dataTestId: `edit-measure-1`,
                 }}
-                otherSelectOptionProps={[{
-                    label: "Export",
-                    toImplementFunction: zipData,
-                    dataTestId: `export-measure-1`,
-                }]}
+                otherSelectOptionProps={[
+                    {
+                        label: "Export",
+                        toImplementFunction: zipData,
+                        dataTestId: `export-measure-1`,
+                    },
+                ]}
             />
         </div>
     );

package/components/Popover/index.js

@@ -75,7 +75,8 @@ const MadiePopover = ({
                     >
                         {editViewSelectOptionProps.label}
                     </button>
-                    {additionalSelectOptionProps && additionalSelectOptionProps.map((res) => {
+                    {additionalSelectOptionProps &&
+                        additionalSelectOptionProps.map((res) => {
                             return (
                                 <button
                                     key={res.dataTestId}

package/components/RadioButton/RadioButton.jsx

@@ -28,7 +28,7 @@ const RadioButton = ({
                 disabled={disabled}
                 required={required}
                 shrink
-                style={{marginBottom: 0, height: 16}} // force a height
+                style={{ marginBottom: 0, height: 16 }} // force a height
                 sx={[
                     {
                         backgroundColor: "transparent",
@@ -65,31 +65,40 @@ const RadioButton = ({
             >
                 {label}
             </InputLabel>
-            {helperText && (<FormHelperText
-                tabIndex={0}
-                aria-live="polite"
-                id={`${id}-helper-text`}
-                data-testid={`${id}-helper-text`}
-                error={error}
-                sx={[{
-                    margin: "4px 0px 0px 0px",
-                    color: "#515151",
-                    lineHeight: 1
-                },
-                    error && {
-                        color: "#AE1C1C !important",
-                    },
-                ]}
-            >
-                {helperText}
-            </FormHelperText>)}
+            {helperText && (
+                <FormHelperText
+                    tabIndex={0}
+                    aria-live="polite"
+                    id={`${id}-helper-text`}
+                    data-testid={`${id}-helper-text`}
+                    error={error}
+                    sx={[
+                        {
+                            margin: "4px 0px 0px 0px",
+                            color: "#515151",
+                            lineHeight: 1,
+                        },
+                        error && {
+                            color: "#AE1C1C !important",
+                        },
+                    ]}
+                >
+                    {helperText}
+                </FormHelperText>
+            )}
             <RadioGroup
                 aria-labelledby={`${id}-radio-buttons-group`}
                 data-testid={`${id}-radio-buttons-group`}
                 {...rest}
             >
                 {options.map((option, index) => (
-                    <FormControlLabel disabled={disabled} key={index} value={option.value} control={<Radio />} label={option.label} />
+                    <FormControlLabel
+                        disabled={disabled}
+                        key={index}
+                        value={option.value}
+                        control={<Radio />}
+                        label={option.label}
+                    />
                 ))}
             </RadioGroup>
         </FormControl>