@madie/madie-design-system 1.2.6 → 1.2.8

package/components/AutoComplete/AutoComplete.jsx

@@ -34,7 +34,7 @@ const autoCompleteStyles = {
         backgroundColor: "#EDEDED",
         border: "#EDEDED",
     },
-    '& .MuiChip-deleteIcon': {
+    "& .MuiChip-deleteIcon": {
         color: "#757575",
     },
 };
@@ -216,7 +216,7 @@ const AutoComplete = ({
                         : renderOptionSingle(props, option);
                 }}
                 {...rest}
-                onChange={(_event, selectedVal, reason, detail ) =>
+                onChange={(_event, selectedVal, reason, detail) =>
                     onChange(id, selectedVal || "", reason, detail)
                 }
             />

package/components/DateField/DateField.jsx

@@ -5,10 +5,10 @@ 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";
-import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc';
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 
-dayjs.extend(utc)
+dayjs.extend(utc);
 dayjs.utc();
 export const dateTextFieldStyle = {
     width: "170px",
@@ -84,7 +84,7 @@ DateField.propTypes = {
     label: PropTypes.string.isRequired,
     value: PropTypes.object,
     handleDateChange: PropTypes.func.isRequired,
-    disabled:PropTypes.bool
+    disabled: PropTypes.bool,
 };
 
 export default DateField;

package/components/DateTimeField/DateTimeField.jsx

@@ -4,13 +4,13 @@ import InputLabel from "../InputLabel";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc';
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 
 import { FormControl } from "@mui/material";
 import { kebabCase } from "lodash";
 
-dayjs.extend(utc)
+dayjs.extend(utc);
 dayjs.utc();
 export const dateTimeTextFieldStyle = {
     width: "240px",
@@ -44,7 +44,12 @@ export const dateTimeTextFieldStyle = {
     },
 };
 
-const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange,disabled }) => {
+const DateTimeField = ({
+    label,
+    dateTimeValue,
+    handleDateTimeChange,
+    disabled,
+}) => {
     return (
         <FormControl>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -74,7 +79,7 @@ DateTimeField.propTypes = {
     dateTimeValue: PropTypes.object,
     handleDateTimeChange: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
-    disabled:PropTypes.bool
+    disabled: PropTypes.bool,
 };
 
-export default DateTimeField;
+export default DateTimeField;

package/components/DateTimeField/DateTimeField.stories.jsx

@@ -11,7 +11,7 @@ export default {
 export const TimeDateFieldComponent = (args) => {
     const [value, setValue] = useState("");
     const handleDateTimeChange = (e) => {
-        setValue(e.target.value)
+        setValue(e.target.value);
     };
     return (
         <div className="qpp-u-padding--16">
@@ -23,4 +23,4 @@ export const TimeDateFieldComponent = (args) => {
             />
         </div>
     );
-};
+};

package/components/MadieDialog/MadieDialog.stories.js

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import MadieDialog from "./index";
+import TextArea from "../TextArea/index";
+import Select from "../Select/index";
+import Button from "../Button";
+import { Switch, FormGroup, FormControlLabel } from "@mui/material";
+
+export default {
+    title: "MadieDialog",
+    component: MadieDialog,
+    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 Dialog = () => {
+    const [open, setOpen] = useState(false);
+    const onClose = () => {
+        setOpen(false);
+    };
+    const onContinue = () => {
+        setOpen(false);
+    };
+
+    const [form, setForm] = useState(false);
+    const [required, setRequired] = useState(false);
+    return (
+        <div className="qpp-u-padding--16" style={{ width: 300 }}>
+            <FormGroup>
+                <FormControlLabel
+                    control={
+                        <Switch
+                            checked={form}
+                            onChange={(e) => setForm(e.target.checked)}
+                            name="Form"
+                        />
+                    }
+                    label="Form"
+                />
+                <FormControlLabel
+                    control={
+                        <Switch
+                            checked={required}
+                            onChange={(e) => setRequired(e.target.checked)}
+                            name="Required"
+                        />
+                    }
+                    label="Required"
+                />
+            </FormGroup>
+            <Button variant="cyan" onClick={() => setOpen(true)}>
+                open Dialog
+            </Button>
+            <MadieDialog
+                form={form}
+                required={required}
+                title="Madie Dialog"
+                dialogProps={{
+                    open,
+                    onClose,
+                    onSubmit: onContinue,
+                }}
+                cancelButtonProps={{
+                    cancelText: "Discard Changes",
+                    "data-testid": "cancel-button",
+                }}
+                continueButtonProps={{
+                    continueText: "Save",
+                    "data-testid": "save-button",
+                }}
+            >
+                <div>
+                    <Select
+                        id={`measure-referenceType`}
+                        label="Type"
+                        placeHolder={{ name: "Select", value: "" }}
+                        inputProps={{
+                            "data-testid": `measure-referenceType-input`,
+                        }}
+                        data-testid={`measure-referenceType`}
+                        required
+                        SelectDisplayProps={{
+                            "aria-required": "true",
+                        }}
+                    />
+
+                    <TextArea
+                        required
+                        label="Reference"
+                        placeholder="Enter"
+                        id="measure-referenceText"
+                        data-testid="measure-referenceText"
+                        inputProps={{
+                            "data-testid": "measure-referenceText-input",
+                            "aria-describedby":
+                                "measure-referenceText-helper-text",
+                        }}
+                    />
+                </div>
+            </MadieDialog>
+        </div>
+    );
+};

package/components/MadieDialog/index.jsx

@@ -36,6 +36,7 @@ const MadieDialog = ({
         }
     */
     form,
+    required,
     title,
     dialogProps,
     cancelButtonProps,
@@ -96,18 +97,49 @@ const MadieDialog = ({
                         >
                             {title}
                         </DialogTitle>
+                        {required && (
+                            <Box
+                                sx={{
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    flexGrow: 1,
+                                    alignSelf: "center",
+                                    marginBottom: "-4px",
+                                    marginLeft: "15px",
+                                }}
+                            >
+                                <Typography
+                                    style={{
+                                        fontSize: 16,
+                                        fontWeight: 400,
+                                        fontFamily: "Rubik",
+                                        color: "#515151",
+                                    }}
+                                >
+                                    <span
+                                        style={{
+                                            color: "#D92F2F",
+                                            marginRight: 3,
+                                        }}
+                                    >
+                                        *
+                                    </span>
+                                    Indicates required field
+                                </Typography>
+                            </Box>
+                        )}
                         <div>
                             <IconButton onClick={onClose} aria-label="Close">
                                 <CloseIcon
                                     sx={{
-                                        color: "#242424",
+                                        color: "#D92F2F",
                                     }}
                                     data-testid="close-button"
                                 />
                             </IconButton>
                         </div>
                     </Box>
-                    <Divider sx={{borderColor: "#8c8c8c"}}/>
+                    <Divider sx={{ borderColor: "#8c8c8c" }} />
                     <DialogContent sx={{ padding: "32px" }}>
                         {showRequiredFieldMessage && (
                             <Box
@@ -141,7 +173,7 @@ const MadieDialog = ({
 
                         {children}
                     </DialogContent>
-                    <Divider sx={{borderColor: "#8c8c8c"}}/>
+                    <Divider sx={{ borderColor: "#8c8c8c" }} />
                     <DialogActions
                         sx={{
                             padding: "16px",
@@ -197,18 +229,18 @@ const MadieDialog = ({
                             <IconButton onClick={onClose} aria-label="Close">
                                 <CloseIcon
                                     sx={{
-                                        color: "#242424",
+                                        color: "#D92F2F",
                                     }}
                                     data-testid="close-button"
                                 />
                             </IconButton>
                         </div>
                     </Box>
-                    <Divider sx={{borderColor: "#8c8c8c"}}/>
+                    <Divider sx={{ borderColor: "#8c8c8c" }} />
                     <DialogContent sx={{ padding: "32px" }}>
                         {children}
                     </DialogContent>
-                    <Divider sx={{borderColor: "#8c8c8c"}}/>
+                    <Divider sx={{ borderColor: "#8c8c8c" }} />
                     <DialogActions
                         sx={{
                             padding: "16px",
@@ -246,6 +278,7 @@ const MadieDialog = ({
 };
 
 MadieDialog.propTypes = {
+    required: PropTypes.bool,
     form: PropTypes.bool,
     title: PropTypes.string,
     dialogProps: PropTypes.object,

package/components/MadieTooltip/MadieTooltip.stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import MadieTooltip from "./index";
+
+const offsetDecorator = (storyFn) => (
+    <div style={{ marginLeft: 120, marginTop: 25 }}>{storyFn()}</div>
+);
+
+export default {
+    title: "MadieTooltip",
+    component: MadieTooltip,
+};
+
+export const ExampleTooltip = () => (
+    <div>
+        <div>
+            <MadieTooltip text="Input the new version #" />
+        </div>
+        <div style={{ marginLeft: 200 }}>
+            <MadieTooltip color="#000" />
+        </div>
+        <div style={{ marginLeft: 350 }}>
+            <MadieTooltip color="#000" />
+        </div>
+    </div>
+);
+
+ExampleTooltip.storyName = "Madie Tooltip example";
+ExampleTooltip.decorators = [offsetDecorator];

package/components/MadieTooltip/index.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import TooltipIcon from "../MadieTooltipIcon";
+import PropTypes from "prop-types";
+
+// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
+const MadieToolTip = ({ tooltipText = "informational text", id }) => {
+    const [activeTip, setActiveTip] = useState(false);
+    return (
+        <button
+            data-testid={`${id}-button`}
+            tabIndex={0}
+            onFocus={() => setActiveTip(true)}
+            onBlur={() => {
+                setActiveTip(false);
+            }}
+            onMouseEnter={() => {
+                setActiveTip(true);
+            }}
+            onMouseLeave={() => {
+                setActiveTip(false);
+            }}
+            onKeyDown={(e) => {
+                if (e.key === "Escape") {
+                    setActiveTip(false);
+                }
+            }}
+            className="madie-tooltip-button"
+        >
+            <TooltipIcon />
+            <div
+                role="tooltip"
+                id={id}
+                data-testid={id}
+                aria-live="polite"
+                className={activeTip ? "madie-tooltip" : "madie-tooltip hidden"}
+            >
+                <p>{tooltipText}</p>
+            </div>
+        </button>
+    );
+};
+
+MadieToolTip.propTypes = {
+    tooltipText: PropTypes.string,
+    id: PropTypes.string,
+};
+
+export default MadieToolTip;

package/components/MadieTooltipIcon/MadieTooltipIcon.stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import MadieToolTipIcon from "./index";
+
+const offsetDecorator = (storyFn) => (
+    <div style={{ margin: "80px" }}>{storyFn()}</div>
+);
+
+export default {
+    title: "MadieToolTipIcon",
+    component: MadieToolTipIcon,
+};
+
+export const ExampleTooltipIcon = () => (
+    <div>
+        <div>
+            {`<TooltipIcon color="#0073C8"/>`}
+            <MadieToolTipIcon />
+        </div>
+    </div>
+);
+
+ExampleTooltipIcon.storyName = "Madie Tooltip Icon example";
+ExampleTooltipIcon.decorators = [offsetDecorator];

package/components/MadieTooltipIcon/index.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const TooltipIcon = ({ color = "#0073C8", ...props }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        {...props}
+    >
+        <g clipPath="url(#clip0_17397_1786)">
+            <path
+                d="M6.4165 10.5H7.58317V9.33334H6.4165V10.5ZM6.99984 1.16667C3.77984 1.16667 1.1665 3.78001 1.1665 7.00001C1.1665 10.22 3.77984 12.8333 6.99984 12.8333C10.2198 12.8333 12.8332 10.22 12.8332 7.00001C12.8332 3.78001 10.2198 1.16667 6.99984 1.16667ZM6.99984 11.6667C4.42734 11.6667 2.33317 9.57251 2.33317 7.00001C2.33317 4.42751 4.42734 2.33334 6.99984 2.33334C9.57234 2.33334 11.6665 4.42751 11.6665 7.00001C11.6665 9.57251 9.57234 11.6667 6.99984 11.6667ZM6.99984 3.50001C5.71067 3.50001 4.6665 4.54417 4.6665 5.83334H5.83317C5.83317 5.19167 6.35817 4.66667 6.99984 4.66667C7.6415 4.66667 8.1665 5.19167 8.1665 5.83334C8.1665 7.00001 6.4165 6.85417 6.4165 8.75001H7.58317C7.58317 7.43751 9.33317 7.29167 9.33317 5.83334C9.33317 4.54417 8.289 3.50001 6.99984 3.50001Z"
+                fill={color}
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_17397_1786">
+                <rect width="14" height="14" fill={color} />
+            </clipPath>
+        </defs>
+    </svg>
+);
+
+export default TooltipIcon;
+
+TooltipIcon.propTypes = {
+    color: PropTypes.string,
+};

package/components/Popover/index.js

@@ -44,8 +44,9 @@ const MadiePopover = ({
                             height: "16px",
                             width: "16px",
                             background: "#F7F7F7",
-                            border: 'solid 1px #8c8c8c',
-                            borderColor: "#8c8c8c transparent transparent #8c8c8c",
+                            border: "solid 1px #8c8c8c",
+                            borderColor:
+                                "#8c8c8c transparent transparent #8c8c8c",
                             content: '""',
                             transform: "rotate(45deg)",
                         },

package/components/ReadOnlyTextField/index.jsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { FormControl, TextField as MUITextField,
+import {
+    FormControl,
+    TextField as MUITextField,
     FormHelperText,
- } from "@mui/material";
+} from "@mui/material";
 import InputLabel from "../InputLabel";
 import PropTypes from "prop-types";
 
@@ -16,12 +18,53 @@ const ReadOnlyTextField = ({
 }) => {
     return (
         <FormControl fullWidth error={error}>
+            <div
+                style={{
+                    width: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    flexGrow: 1,
+                }}
+            />
             <InputLabel
                 disabled={disabled}
                 shrink
                 required={required}
                 error={error}
                 htmlFor={id}
+                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",
+                        },
+                    },
+                    required && {
+                        transform: "translateX(-12px) translateY(0px)",
+                        "& .MuiInputLabel-asterisk": {
+                            color: "#D92F2",
+                            marginRight: "3px !important", //this was
+                        },
+                    },
+                    disabled && {
+                        color: "rgba(0,0,0,0.6)",
+                    },
+                    error && {
+                        color: "#AE1C1C !important",
+                    },
+                ]}
             >
                 {label}
             </InputLabel>
@@ -47,14 +90,15 @@ const ReadOnlyTextField = ({
             )}
             <MUITextField
                 sx={{
-                    height: 40, //there's a .13 coming from somewhere.
                     border: "none",
                     "& .MuiOutlinedInput-root": {
                         "& > fieldset": {
                             border: "none",
                         },
                     },
-                    // input base selector
+                    "& .MuiInputBase-root": {
+                        height: "40px",
+                    },
                     "& .MuiInputBase-input": {
                         lineHeight: "19px",
                         fontFamily: "Rubik",

package/components/Search/index.js

@@ -17,7 +17,7 @@ const Search = ({
 }) => {
     const inputStyle = {
         width: inputWidth,
-        borderColor: "#8C8C8C"
+        borderColor: "#8C8C8C",
     };
     return (
         <form role="search" className="qpp-c-search qpp-c-search--compact">

package/components/TextArea/index.jsx

@@ -90,7 +90,7 @@ const TextArea = ({
                 </FormHelperText>
             )}
             <TextareaAutosize
-                style={{ marginTop: '8px'}}
+                style={{ marginTop: "8px" }}
                 className={
                     error ? "text-area-variable error" : "text-area-variable"
                 }

package/components/TextField/TextField.stories.js

@@ -93,6 +93,26 @@ export const Error = () => (
     </Wrapper>
 );
 
+export const WithToolTipText = () => (
+    <Wrapper>
+        <TextField
+            placeholder="Placeholder"
+            label="Confirm New Version #"
+            data-testid="measure-name-text-field"
+            size="small"
+            tooltipText="Input the new version # located to the left to confirm."
+            helperText="test"
+            id="measure-name"
+            // previously this was how it was done. it could make more sense to only pass it an id and progrematically determine it. Example:
+            // inputProps={{
+            //     "data-testid": "measure-name-input",
+            //     "aria-describedby":
+            //         "measure-name-helper-text measure-name-tooltip",
+            // }}
+        />
+    </Wrapper>
+);
+
 export const VariedHeights = () => (
     <div
         className="qpp-u-padding--16"