@madie/madie-design-system 1.0.28 → 1.0.29

package/components/AutoComplete/AutoComplete.jsx

@@ -0,0 +1,172 @@
+import React from "react";
+import {
+    FormControl,
+    FormHelperText,
+    Autocomplete as MUIAutoComplete,
+    TextField,
+    Checkbox,
+} from "@mui/material";
+import PropTypes from "prop-types";
+import InputLabel from "../InputLabel";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+
+const autoCompleteStyles = {
+    borderRadius: "3px",
+    height: 40,
+    border: "1px solid #DDDDDD",
+    "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "3px",
+        "& legend": {
+            width: 0,
+        },
+    },
+    "& .MuiAutocomplete-inputFocused": {
+        border: "none",
+        boxShadow: "none",
+        outline: "none",
+    },
+    "& .MuiAutocomplete-inputRoot": {
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+    "& .Mui-disabled" : {
+        backgroundColor: "#dddddd",
+        border: "#dddddd",
+    }
+};
+
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+
+// unique props are required when we have duplicate options
+const renderOptionSingle = (props, option) => {
+    const uniqueProps = {
+        ...props,
+        key: `${props.key}_${props.id}`,
+    };
+    return <li {...uniqueProps}>{option}</li>;
+};
+
+const renderOptionMultiple = (props, option, selected) => {
+    const uniqueProps = {
+        ...props,
+        key: `${props.key}_${props.id}`,
+    };
+    return (
+        <li {...uniqueProps}>
+            <Checkbox
+                icon={icon}
+                checkedIcon={checkedIcon}
+                style={{ marginRight: 8 }}
+                checked={selected}
+            />
+            {option}
+        </li>
+    );
+};
+
+const AutoComplete = ({
+    id,
+    dataTestId,
+    options = [],
+    disabled = false,
+    label,
+    placeholder,
+    multiple = false,
+    required = false,
+    error = false,
+    helperText,
+    onChange,
+    ...rest
+}) => {
+    return (
+        <FormControl error={error} fullWidth>
+            <InputLabel
+                htmlFor={`${id}`}
+                id={`${id}-label`}
+                disabled={disabled}
+                required={required}
+                shrink
+                error={error}
+            >
+                {label}
+            </InputLabel>
+            <MUIAutoComplete
+                disablePortal
+                id={id}
+                data-testid={dataTestId}
+                options={options}
+                disabled={disabled}
+                multiple={multiple}
+                disableCloseOnSelect={multiple}
+                sx={
+                    multiple
+                        ? {
+                              ...autoCompleteStyles,
+                              height: "auto",
+                              "& .MuiAutocomplete-inputRoot": {
+                                  paddingTop: 1,
+                                  paddingBottom: 1,
+                              },
+                          }
+                        : autoCompleteStyles
+                }
+                renderInput={(params) => {
+                    const { inputProps } = params;
+                    inputProps["aria-required"] = required;
+                    inputProps["aria-describedby"] = `${id}-helper-text`;
+                    inputProps["aria-labelledby"] = `${id}-label`;
+                    return (
+                        <TextField
+                            {...params}
+                            placeholder={placeholder}
+                            inputProps={inputProps}
+                            label=""
+                            error={error}
+                        />
+                    );
+                }}
+                renderOption={(props, option, { selected }) => {
+                    return multiple
+                        ? renderOptionMultiple(props, option, selected)
+                        : renderOptionSingle(props, option);
+                }}
+                {...rest}
+                onChange={(_event, selectedVal) =>
+                    onChange(id, selectedVal || "")
+                }
+            />
+            {helperText && (
+                <FormHelperText
+                    tabIndex={0}
+                    aria-live="polite"
+                    id={`${id}-helper-text`}
+                    data-testid={`${id}-helper-text`}
+                    error={error}
+                    sx={ error &&
+                        { color: "#AE1C1C !important" }
+                    }
+                >
+                    {helperText}
+                </FormHelperText>
+            )}
+        </FormControl>
+    );
+};
+
+AutoComplete.propTypes = {
+    id: PropTypes.string,
+    dataTestId: PropTypes.string,
+    placeholder: PropTypes.string,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    multiple: PropTypes.bool,
+    error: PropTypes.bool,
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.element),
+    onChange: PropTypes.any,
+};
+
+export default AutoComplete;

package/components/AutoComplete/AutoComplete.stories.js

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import AutoComplete from "./AutoComplete";
+
+export default {
+    title: "AutoComplete",
+    component: AutoComplete,
+};
+
+const options = ["Option1", "Option2", "Option3", "Option4", "Option5"];
+
+const TemplateSingleSelect = (args) => {
+    const [value, setValue] = useState("");
+    const handleChange = (id, selectedVal) => {
+        setValue(selectedVal);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <AutoComplete
+                id="autocomplete"
+                dataTestId="autocomplete"
+                label="Auto Complete"
+                options={options}
+                onChange={handleChange}
+                value={value}
+                {...args}
+            />
+        </div>
+    );
+};
+
+export const AutoCompleteWithLabel = TemplateSingleSelect.bind({});
+AutoCompleteWithLabel.args = {
+    placeholder: "Search for a value",
+};
+
+export const AutoCompleteWithLabelDisabled = TemplateSingleSelect.bind({});
+AutoCompleteWithLabelDisabled.args = {
+    disabled: true,
+    value: "Option1"
+};
+
+export const AutoCompleteWithHelperText = TemplateSingleSelect.bind({});
+AutoCompleteWithHelperText.args = {
+    helperText: "Helper text goes here",
+    placeholder: "Search for a value",
+};
+
+export const AutoCompleteRequired = TemplateSingleSelect.bind({});
+AutoCompleteRequired.args = {
+    required: true,
+    placeholder: "Search for a value",
+};
+
+export const AutoCompleteWithError = TemplateSingleSelect.bind({});
+AutoCompleteWithError.args = {
+    required: true,
+    helperText: "This field is required",
+    error: true,
+};
+
+const TemplateMultipleSelect = (args) => {
+    const [value, setValue] = useState(["Option1", "Option2"]);
+    const handleChange = (id, selectedVal) => {
+        setValue(selectedVal);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <AutoComplete
+                id="autocomplete"
+                dataTestId="autocomplete"
+                label="Auto Complete"
+                multiple={true}
+                options={options}
+                onChange={handleChange}
+                value={value}
+                {...args}
+            />
+        </div>
+    );
+};
+
+export const AutoCompleteMultipleWithLabel = TemplateMultipleSelect.bind({});
+AutoCompleteMultipleWithLabel.args = {
+    placeholder: "Start typing to search for a value",
+};
+
+export const AutoCompleteMultipleDisabled = TemplateMultipleSelect.bind({});
+AutoCompleteMultipleDisabled.args = {
+    disabled: true,
+    placeholder: "Start typing",
+};
+
+export const AutoCompleteMultipleWithError = TemplateMultipleSelect.bind({});
+AutoCompleteMultipleWithError.args = {
+    required: true,
+    helperText: "At least one field is required",
+    error: true,
+};

package/components/Button/Button.stories.js

@@ -36,7 +36,9 @@ export const FormAction = () => (
             <Button variant="action">Button</Button>
         </Container>
         <Container>
-            <Button variant="action" disabled>Disabled</Button>
+            <Button variant="action" disabled>
+                Disabled
+            </Button>
         </Container>
     </div>
 );
@@ -47,7 +49,9 @@ export const Cyan = () => (
             <Button className="qpp-c-button--cyan">Button</Button>
         </Container>
         <Container>
-            <Button variant="cyan" disabled>Disabled</Button>
+            <Button variant="cyan" disabled>
+                Disabled
+            </Button>
         </Container>
     </div>
 );
@@ -58,7 +62,9 @@ export const Secondary = () => (
             <Button variant="secondary">Button</Button>
         </Container>
         <Container>
-            <Button variant="secondary" disabled>Disabled</Button>
+            <Button variant="secondary" disabled>
+                Disabled
+            </Button>
         </Container>
     </div>
 );
@@ -69,7 +75,9 @@ export const Danger = () => (
             <Button variant="danger">Button</Button>
         </Container>
         <Container>
-            <Button disabled variant="danger">Disabled</Button>
+            <Button disabled variant="danger">
+                Disabled
+            </Button>
         </Container>
     </div>
 );
@@ -80,7 +88,9 @@ export const DangerPrimary = () => (
             <Button variant="danger-primary">Button</Button>
         </Container>
         <Container>
-            <Button disabled variant="danger-primary">Disabled</Button>
+            <Button disabled variant="danger-primary">
+                Disabled
+            </Button>
         </Container>
     </div>
 );
@@ -88,19 +98,24 @@ export const DangerPrimary = () => (
 export const Outline = () => (
     <Container>
         <Button variant="outline">Button</Button>
-        <hr/>
-        <Button variant="outline" disabled>Button</Button>
+        <hr />
+        <Button variant="outline" disabled>
+            Button
+        </Button>
     </Container>
 );
 
 export const OutlineFilled = () => (
     <Container className="qpp-u-fill--blue-80">
         <Button variant="outline-filled">Button</Button>
-        <hr/>
-        <Button variant="outline-filled" disabled>Button</Button>
+        <hr />
+        <Button variant="outline-filled" disabled>
+            Button
+        </Button>
         <hr />
         <Button variant="outline-filled">
-            <FeatherIcon icon="download" />Button
+            <FeatherIcon icon="download" />
+            Button
         </Button>
     </Container>
 );
@@ -108,8 +123,10 @@ export const OutlineFilled = () => (
 export const OutlineSecondary = () => (
     <Container>
         <Button variant="outline-secondary">Button</Button>
-        <hr/>
-        <Button variant="outline-secondary" disabled>Button</Button>
+        <hr />
+        <Button variant="outline-secondary" disabled>
+            Button
+        </Button>
     </Container>
 );
 
@@ -119,7 +136,9 @@ export const White = () => (
             <Button variant="white">Button</Button>
         </Container>
         <Container className="qpp-u-fill--blue-80">
-            <Button variant="white" disabled>Button</Button>
+            <Button variant="white" disabled>
+                Button
+            </Button>
         </Container>
     </div>
 );

package/components/InputLabel/index.jsx

@@ -23,7 +23,7 @@ const Label = ({ required, disabled, error, ...rest }) => {
                     fontSize: 14,
                     color: "#333",
                     "& .MuiInputLabel-asterisk": {
-                        color: "#D92F2F",
+                        color: "#AE1C1C !important",
                         marginRight: "3px !important", //this was
                     },
                 },
@@ -38,7 +38,7 @@ const Label = ({ required, disabled, error, ...rest }) => {
                     color: "rgba(0,0,0,0.6)",
                 },
                 error && {
-                    color: "#D92F2F",
+                    color: "#AE1C1C !important",
                 },
             ]}
             {...rest}

package/components/MadieAlert/index.jsx

@@ -67,8 +67,7 @@ MadieAlert.propTypes = {
     content: PropTypes.node,
     canClose: PropTypes.bool,
     alertProps: PropTypes.object,
-    closeButtonProps: PropTypes.object
+    closeButtonProps: PropTypes.object,
 };
 
-
 export default MadieAlert;

package/components/Pagination/index.jsx

@@ -88,7 +88,7 @@ const Pagination = ({
                     onChange={handleLimitChange}
                     inputProps={{
                         "aria-labelledby": "items-per-page",
-                        "aria-describedby": "offset-of-total-items"
+                        "aria-describedby": "offset-of-total-items",
                     }}
                 >
                     {limitOptions.map((val) => (

package/components/index.js

@@ -1,5 +1,6 @@
 import Accordion from "./Accordion";
 import Alert from "./Alert";
+import AutoComplete from "./AutoComplete/AutoComplete"
 import Breadcrumb from "./Breadcrumb";
 import Button, { TextButton } from "./Button";
 import CalloutBox from "./CalloutBox";
@@ -113,6 +114,7 @@ const Icons = {
 export {
     Accordion,
     Alert,
+    AutoComplete,
     Breadcrumb,
     Button,
     CalloutBox,