@madie/madie-design-system 1.2.7 → 1.2.9

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

@@ -2,10 +2,10 @@ 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 TextArea from "../TextArea/index";
+import Select from "../Select/index";
 import Button from "../Button";
-import { Switch, FormGroup, FormControlLabel } from '@mui/material';
+import { Switch, FormGroup, FormControlLabel } from "@mui/material";
 
 export default {
     title: "MadieDialog",
@@ -37,69 +37,77 @@ export const Dialog = () => {
     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"
-        />
+                <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",
-                 }}
+                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",
-                       }}
+                    <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",
+                        }}
+                    />
 
-                     />
-                   </div>
-                   </MadieDialog>
+                    <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

@@ -98,19 +98,33 @@ const MadieDialog = ({
                             {title}
                         </DialogTitle>
                         {required && (
-                            <Box sx={{
-                                display: 'flex',
-                                flexDirection: 'row',
-                                flexGrow: 1,
-                                alignSelf: 'center',
-                                marginBottom: '-4px',
-                                marginLeft: '15px'
-                            }}>
+                            <Box
+                                sx={{
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    flexGrow: 1,
+                                    alignSelf: "center",
+                                    marginBottom: "-4px",
+                                    marginLeft: "15px",
+                                }}
+                            >
                                 <Typography
-                                style={{ fontSize: 16, fontWeight: 400, fontFamily: "Rubik", color: "#515151" }}
+                                    style={{
+                                        fontSize: 16,
+                                        fontWeight: 400,
+                                        fontFamily: "Rubik",
+                                        color: "#515151",
+                                    }}
                                 >
-                                <span style={{ color: "#D92F2F", marginRight: 3 }}>*</span>
-                                Indicates required field
+                                    <span
+                                        style={{
+                                            color: "#D92F2F",
+                                            marginRight: 3,
+                                        }}
+                                    >
+                                        *
+                                    </span>
+                                    Indicates required field
                                 </Typography>
                             </Box>
                         )}
@@ -125,7 +139,7 @@ const MadieDialog = ({
                             </IconButton>
                         </div>
                     </Box>
-                    <Divider sx={{borderColor: "#8c8c8c"}}/>
+                    <Divider sx={{ borderColor: "#8c8c8c" }} />
                     <DialogContent sx={{ padding: "32px" }}>
                         {showRequiredFieldMessage && (
                             <Box
@@ -159,7 +173,7 @@ const MadieDialog = ({
 
                         {children}
                     </DialogContent>
-                    <Divider sx={{borderColor: "#8c8c8c"}}/>
+                    <Divider sx={{ borderColor: "#8c8c8c" }} />
                     <DialogActions
                         sx={{
                             padding: "16px",
@@ -222,11 +236,11 @@ const MadieDialog = ({
                             </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",

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";
 
@@ -63,7 +65,6 @@ const ReadOnlyTextField = ({
                         color: "#AE1C1C !important",
                     },
                 ]}
-                
             >
                 {label}
             </InputLabel>
@@ -96,7 +97,7 @@ const ReadOnlyTextField = ({
                         },
                     },
                     "& .MuiInputBase-root": {
-                        height: '40px',
+                        height: "40px",
                     },
                     "& .MuiInputBase-input": {
                         lineHeight: "19px",

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", maxWidth: "100%" }}
                 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"