@madie/madie-design-system 1.0.14 → 1.0.16

package/components/InputLabel/index.jsx

@@ -48,6 +48,6 @@ const Label = ({ required, disabled, error, ...rest }) => {
 Label.propTypes = {
     required: PropTypes.bool.isRequired,
     disabled: PropTypes.bool.isRequired,
-    error: PropTypes.bool
-}
+    error: PropTypes.bool,
+};
 export default Label;

package/components/MadieDialog/index.jsx

@@ -108,7 +108,7 @@ const MadieDialog = ({
                         </div>
                     </Box>
                     <Divider />
-                    <DialogContent sx={{ padding: '32px' }}>
+                    <DialogContent sx={{ padding: "32px" }}>
                         {showRequiredFieldMessage && (
                             <Box
                                 sx={{
@@ -205,7 +205,9 @@ const MadieDialog = ({
                         </div>
                     </Box>
                     <Divider />
-                    <DialogContent sx={{ padding: '32px'}}>{children}</DialogContent>
+                    <DialogContent sx={{ padding: "32px" }}>
+                        {children}
+                    </DialogContent>
                     <Divider />
                     <DialogActions
                         sx={{

package/components/MadieDiscardDialog/MadieDiscardDialog.stories.js

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import MadieDiscardDialog from "./index";
+import Button from "../Button";
+export default {
+    title: "MadieDiscardDialog",
+    component: MadieDiscardDialog,
+    decorators: [withKnobs],
+};
+
+const Wrapper = ({ children }) => (
+    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        {children}
+    </div>
+);
+Wrapper.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export const DiscardDialog = () => {
+    const [open, setOpen] = useState(false);
+    const [text, setText] = useState("I'm some text that you may discard");
+    const onClose = () => {
+        setOpen(false);
+    };
+    const onContinue = () => {
+        setText("");
+        setOpen(false);
+    };
+
+    return (
+        <div className="qpp-u-padding--16" style={{ width: 300 }}>
+            <p>{text}</p>
+            <Button variant="cyan" onClick={() => setOpen(true)}>
+                open Dialog
+            </Button>
+            <MadieDiscardDialog
+                open={open}
+                onContinue={onContinue}
+                onClose={onClose}
+            />
+        </div>
+    );
+};

package/components/MadieDiscardDialog/index.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ErrorIcon from "@mui/icons-material/Error";
+import MadieDialog from "../MadieDialog";
+
+const MadieDiscardDialog = ({ open, onClose, onContinue }) => (
+    <MadieDialog
+        title="Discard Changes?"
+        dialogProps={{
+            open: open,
+            onClose,
+            "data-testid": "discard-dialog",
+        }}
+        cancelButtonProps={{
+            variant: "secondary",
+            onClick: onClose,
+            cancelText: "No, Keep Working",
+            "data-testid": "discard-dialog-cancel-button",
+        }}
+        continueButtonProps={{
+            variant: "primary",
+            type: "submit",
+            "data-testid": "discard-dialog-continue-button",
+            continueText: "Yes, Discard All Changes",
+            onClick: onContinue,
+        }}
+    >
+        <div id="discard-changes-dialog-body">
+            <section className="dialog-warning-body">
+                <p>You have unsaved changes.</p>
+                <p className="strong">
+                    Are you sure you want to discard your changes?
+                </p>
+            </section>
+            <section className="dialog-warning-action">
+                <ErrorIcon />
+                <p>This Action cannot be undone.</p>
+            </section>
+        </div>
+    </MadieDialog>
+);
+
+MadieDiscardDialog.propTypes = {
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+    onContinue: PropTypes.func,
+};
+
+export default MadieDiscardDialog;

package/components/ReadOnlyTextField/ReadOnlyTextField.stories.js

@@ -0,0 +1,99 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import ReadOnlyTextField from "./index";
+import { FormHelperText } from "@mui/material";
+export default {
+    title: "ReadOnlyTextField",
+    component: ReadOnlyTextField,
+    decorators: [withKnobs],
+};
+
+const Wrapper = ({ children }) => (
+    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        {children}
+    </div>
+);
+Wrapper.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+export const Textfield = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+        />
+    </Wrapper>
+);
+
+export const WithHelperText = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText={
+                <FormHelperText data-testid={`helper-text`} error={false}>
+                    a descriptive message
+                </FormHelperText>
+            }
+        />
+    </Wrapper>
+);
+
+export const Disabled = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            disabled
+            required
+        />
+    </Wrapper>
+);
+
+export const Required = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            required
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+        />
+    </Wrapper>
+);
+
+export const Error = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            error
+            required
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText={
+                <FormHelperText data-testid={`helper-text`} error={true}>
+                    An error message
+                </FormHelperText>
+            }
+        />
+    </Wrapper>
+);

package/components/ReadOnlyTextField/index.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { FormControl, TextField as MUITextField } from "@mui/material";
+import InputLabel from "../InputLabel";
+import PropTypes from "prop-types";
+
+const ReadOnlyTextField = ({
+    id,
+    error = false,
+    helperText = undefined,
+    required = false,
+    disabled = false,
+    label,
+    ...rest
+}) => {
+    return (
+        <FormControl fullWidth error={error}>
+            <InputLabel
+                disabled={disabled}
+                shrink
+                required={required}
+                error={error}
+                htmlFor={id}
+            >
+                {label}
+            </InputLabel>
+            <MUITextField
+                sx={{
+                    height: 40, //there's a .13 coming from somewhere.
+                    border: "none",
+                    "& .MuiOutlinedInput-root": {
+                        "& > fieldset": {
+                            border: "none",
+                        },
+                    },
+                    // input base selector
+                    "& .MuiInputBase-input": {
+                        lineHeight: "19px",
+                        fontFamily: "Rubik",
+                        disableUnderline: true,
+                        fontSize: 16,
+                        padding: "9px 0px",
+                        "&::placeholder": {
+                            opacity: 0.6,
+                        },
+                        "&:focus": {
+                            border: "none",
+                            outline: "none",
+                            boxShadow: "none",
+                        },
+                    },
+                }}
+                InputProps={{
+                    readOnly: true,
+                }}
+                disableUnderline={true}
+                label={null}
+                error={error}
+                disabled={disabled}
+                id={id}
+                {...rest}
+            />
+            {helperText && helperText}
+        </FormControl>
+    );
+};
+
+ReadOnlyTextField.propTypes = {
+    id: PropTypes.string,
+    error: PropTypes.bool,
+    helperText: PropTypes.string,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.
+    label: PropTypes.string,
+};
+export default ReadOnlyTextField;

package/components/Select/index.jsx

@@ -88,7 +88,11 @@ const Select = ({
             >
                 {options && options}
             </MUISelect>
-            {helperText && <FormHelperText data-testid={`helper-text`}>{helperText}</FormHelperText>}
+            {helperText && (
+                <FormHelperText data-testid={`helper-text`}>
+                    {helperText}
+                </FormHelperText>
+            )}
         </FormControl>
     );
 };

package/components/index.js

@@ -9,9 +9,11 @@ import Footer from "./Footer/FooterUI";
 import InputLabel from "./InputLabel";
 import FormControlLabel from "./FormControlLabel";
 import MadieDialog from "./MadieDialog";
+import MadieDiscardDialog from "./MadieDiscardDialog";
 import MadieSpinner from "./MadieSpinner";
 import Modal from "./Modal";
 import { Pagination } from "./Pagination";
+import ReadOnlyTextField from "./ReadOnlyTextField";
 import Select from "./Select";
 import Spinner from "./UnwrappedSpinner";
 import TabPanel from "./Tabs/TabPanel";
@@ -121,8 +123,10 @@ export {
     Infotip,
     Modal,
     MadieDialog,
+    MadieDiscardDialog,
     MadieSpinner,
     Pagination,
+    ReadOnlyTextField,
     Search,
     Select,
     Spinner,

package/coverage/clover.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1659034792860" clover="3.2.0">
-  <project timestamp="1659034792860" name="All files">
-    <metrics statements="410" coveredstatements="316" conditionals="222" coveredconditionals="145" methods="126" coveredmethods="64" elements="758" coveredelements="525" complexity="0" loc="410" ncloc="410" packages="20" files="34" classes="34"/>
+<coverage generated="1661382405017" clover="3.2.0">
+  <project timestamp="1661382405017" name="All files">
+    <metrics statements="413" coveredstatements="319" conditionals="222" coveredconditionals="145" methods="127" coveredmethods="65" elements="762" coveredelements="529" complexity="0" loc="413" ncloc="413" packages="21" files="35" classes="35"/>
     <package name="react">
       <metrics statements="4" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="0"/>
       <file name="index.js" path="/Users/matt.mcphillips/madie/madie-design-system/react/index.js">
@@ -108,26 +108,26 @@
       <metrics statements="20" coveredstatements="17" conditionals="13" coveredconditionals="7" methods="3" coveredmethods="2"/>
       <file name="index.js" path="/Users/matt.mcphillips/madie/madie-design-system/react/components/Button/index.js">
         <metrics statements="20" coveredstatements="17" conditionals="13" coveredconditionals="7" methods="3" coveredmethods="2"/>
-        <line num="4" count="1" type="stmt"/>
-        <line num="12" count="1" type="stmt"/>
-        <line num="14" count="1" type="stmt"/>
-        <line num="25" count="4" type="stmt"/>
-        <line num="27" count="4" type="cond" truecount="2" falsecount="0"/>
-        <line num="28" count="3" type="stmt"/>
-        <line num="30" count="4" type="cond" truecount="1" falsecount="1"/>
+        <line num="4" count="2" type="stmt"/>
+        <line num="12" count="2" type="stmt"/>
+        <line num="14" count="2" type="stmt"/>
+        <line num="25" count="14" type="stmt"/>
+        <line num="27" count="14" type="cond" truecount="2" falsecount="0"/>
+        <line num="28" count="8" type="stmt"/>
+        <line num="30" count="14" type="cond" truecount="1" falsecount="1"/>
         <line num="31" count="0" type="stmt"/>
-        <line num="33" count="4" type="cond" truecount="2" falsecount="0"/>
+        <line num="33" count="14" type="cond" truecount="2" falsecount="0"/>
         <line num="34" count="1" type="stmt"/>
-        <line num="37" count="4" type="cond" truecount="1" falsecount="1"/>
+        <line num="37" count="14" type="cond" truecount="1" falsecount="1"/>
         <line num="38" count="0" type="stmt"/>
-        <line num="49" count="4" type="stmt"/>
-        <line num="63" count="1" type="stmt"/>
-        <line num="74" count="1" type="stmt"/>
+        <line num="49" count="14" type="stmt"/>
+        <line num="63" count="2" type="stmt"/>
+        <line num="74" count="2" type="stmt"/>
         <line num="79" count="1" type="stmt"/>
-        <line num="85" count="1" type="cond" truecount="0" falsecount="1"/>
+        <line num="85" count="2" type="cond" truecount="0" falsecount="1"/>
         <line num="86" count="0" type="stmt"/>
-        <line num="89" count="1" type="stmt"/>
-        <line num="93" count="1" type="stmt"/>
+        <line num="89" count="2" type="stmt"/>
+        <line num="93" count="2" type="stmt"/>
       </file>
     </package>
     <package name="react.components.Error">
@@ -235,14 +235,23 @@
       <metrics statements="8" coveredstatements="8" conditionals="4" coveredconditionals="4" methods="2" coveredmethods="2"/>
       <file name="index.jsx" path="/Users/matt.mcphillips/madie/madie-design-system/react/components/MadieDialog/index.jsx">
         <metrics statements="8" coveredstatements="8" conditionals="4" coveredconditionals="4" methods="2" coveredmethods="2"/>
-        <line num="16" count="1" type="stmt"/>
-        <line num="51" count="2" type="stmt"/>
-        <line num="53" count="2" type="stmt"/>
-        <line num="55" count="2" type="stmt"/>
-        <line num="57" count="2" type="stmt"/>
+        <line num="16" count="2" type="stmt"/>
+        <line num="51" count="10" type="stmt"/>
+        <line num="53" count="10" type="stmt"/>
+        <line num="55" count="10" type="stmt"/>
+        <line num="57" count="10" type="stmt"/>
         <line num="76" count="1" type="stmt"/>
         <line num="77" count="1" type="stmt"/>
-        <line num="246" count="1" type="stmt"/>
+        <line num="248" count="2" type="stmt"/>
+      </file>
+    </package>
+    <package name="react.components.MadieDiscardDialog">
+      <metrics statements="3" coveredstatements="3" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
+      <file name="index.jsx" path="/Users/matt.mcphillips/madie/madie-design-system/react/components/MadieDiscardDialog/index.jsx">
+        <metrics statements="3" coveredstatements="3" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
+        <line num="6" count="1" type="stmt"/>
+        <line num="7" count="8" type="stmt"/>
+        <line num="43" count="1" type="stmt"/>
       </file>
     </package>
     <package name="react.components.MadieSpinner">
@@ -336,13 +345,13 @@
       <file name="index.jsx" path="/Users/matt.mcphillips/madie/madie-design-system/react/components/Select/index.jsx">
         <metrics statements="8" coveredstatements="8" conditionals="16" coveredconditionals="16" methods="2" coveredmethods="2"/>
         <line num="8" count="1" type="stmt"/>
-        <line num="29" count="4" type="stmt"/>
-        <line num="33" count="4" type="stmt"/>
-        <line num="83" count="12" type="cond" truecount="2" falsecount="0"/>
-        <line num="84" count="7" type="cond" truecount="2" falsecount="0"/>
-        <line num="85" count="2" type="stmt"/>
-        <line num="88" count="10" type="stmt"/>
-        <line num="98" count="1" type="stmt"/>
+        <line num="28" count="4" type="stmt"/>
+        <line num="32" count="4" type="stmt"/>
+        <line num="81" count="12" type="cond" truecount="2" falsecount="0"/>
+        <line num="82" count="7" type="cond" truecount="2" falsecount="0"/>
+        <line num="83" count="2" type="stmt"/>
+        <line num="86" count="10" type="stmt"/>
+        <line num="100" count="1" type="stmt"/>
       </file>
     </package>
     <package name="react.components.SessionDialog">