@madie/madie-design-system 1.0.2 → 1.0.3

package/components/Select/Select.stories.js

@@ -0,0 +1,168 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import MUISelect from "./index";
+import { MenuItem, FormHelperText } from "@mui/material";
+
+export default {
+    title: "Select",
+    component: Select,
+    decorators: [withKnobs],
+};
+
+const Wrapper = ({ children }) => (
+    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        {children}
+    </div>
+);
+Wrapper.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+
+const options = [
+    { key: "key1", value: "value1", testId: "testid1", name: "name1" },
+    { key: "key2", value: "value2", testId: "testid2", name: "name2" },
+    { key: "key3", value: "value2", testId: "testid3", name: "name3" },
+];
+export const Select = () => (
+    <Wrapper>
+        <MUISelect
+            defaultValue=""
+            placeHolder={{ name: "placeholder", value: "" }}
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+        />
+    </Wrapper>
+);
+
+export const WithHelperText = () => (
+    <Wrapper>
+        <MUISelect
+            placeHolder={{ name: "placeholder", value: "" }}
+            defaultValue=""
+            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`}
+                    children={"A descriptive message"}
+                    error={false}
+                />
+            }
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+        />
+    </Wrapper>
+);
+
+export const Disabled = () => (
+    <Wrapper>
+        <MUISelect
+            placeHolder={{ name: "placeholder", value: "" }}
+            defaultValue=""
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            disabled
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+        />
+    </Wrapper>
+);
+
+export const Required = () => (
+    <Wrapper>
+        <MUISelect
+            required
+            placeHolder={{ name: "placeholder", value: "" }}
+            defaultValue=""
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+        />
+    </Wrapper>
+);
+
+export const Error = () => (
+    <Wrapper>
+        <MUISelect
+            error
+            placeHolder={{ name: "placeholder", value: "" }}
+            defaultValue=""
+            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`}
+                    children={"An error message"}
+                    error={true}
+                />
+            }
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+        />
+    </Wrapper>
+);

package/components/Select/index.jsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { FormControl, Select as MUISelect, MenuItem } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import InputLabel from "../InputLabel";
+import FormHelperText from "@mui/material/FormHelperText";
+import PropTypes from "prop-types";
+
+const useStyles = makeStyles({
+    icon: {
+        color: "#323232",
+    },
+    select: {
+        border: "1px solid #DDDDDD",
+        // hide legend
+        "& .MuiOutlinedInput-notchedOutline": {
+            "& legend": {
+                width: 0,
+            },
+        },
+        "& .MuiInputBase-input": {
+            paddingTop: 7.5,
+            paddingBottom: 7.5,
+            fontFamily: "Rubik",
+            fontSize: 14,
+            borderRadius: 3,
+        },
+    },
+});
+//   custom select to make this way easier
+const Select = ({
+    placeHolder = undefined, // expects placeholder objects of { name: value } and inserts into the render item function.
+    required = false,
+    disabled = false,
+    id,
+    error = false,
+    label,
+    helperText = undefined,
+    options = [
+        <MenuItem
+            key="test"
+            value="test value"
+            data-testid="measure-model-option-"
+        >
+            test value
+        </MenuItem>,
+    ],
+    ...rest
+}) => {
+    const classes = useStyles();
+    const placehold = <span>{placeHolder?.name || "placeholder"}</span>;
+    return (
+        <FormControl error={error} fullWidth>
+            <InputLabel
+                disabled={disabled}
+                htmlFor={id}
+                required={required}
+                shrink
+            >
+                {label}
+            </InputLabel>
+            <MUISelect
+                className={classes.select}
+                classes={{ icon: classes.icon }}
+                displayEmpty
+                IconComponent={ExpandMoreIcon}
+                error={error}
+                disabled={disabled}
+                required={required}
+                id={id}
+                label={null}
+                {...rest}
+                renderValue={(selected) => {
+                    if (placeHolder) {
+                        if (selected === placeHolder.value) {
+                            return placehold;
+                        }
+                    }
+                    return selected;
+                }}
+            >
+                {options && options}
+            </MUISelect>
+            {helperText && <FormHelperText>{helperText}</FormHelperText>}
+        </FormControl>
+    );
+};
+
+Select.propTypes = {
+    id: PropTypes.string,
+    placeHolder: PropTypes.shape({
+        name: PropTypes.string,
+        value: PropTypes.any,
+    }), // expects placeholder objects of { name: value } and inserts into the render item function.
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    error: PropTypes.bool,
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.element),
+};
+
+export default Select;

package/components/SessionDialog/sessionDialog.js

@@ -1,26 +1,26 @@
-import React from 'react';
-import { render } from 'react-dom';
-import SessionDialogUI from '../SessionDialogUI';
+import React from "react";
+import { render } from "react-dom";
+import SessionDialogUI from "../SessionDialogUI";
 
 /**
  * Renders the Session Dialog UI content.
  */
 export default class SessionDialog {
-  /**
-   * @param {Object} options - An object containing content and config data
-   * @param {Boolean} options.showImmediate
-   * @param {Number} options.warningTimeout
-   * @param {String} options.appElement
-   * @param {HTMLElement} options.rootElement - Elem inside which to render
-   */
-  constructor(options) {
-    render(
-      <SessionDialogUI
-        showImmediate={options.showImmediate}
-        warningTimeout={options.warningTimeout}
-        appElement={options.appElement}
-      />,
-      options.rootElement
-    );
-  }
+    /**
+     * @param {Object} options - An object containing content and config data
+     * @param {Boolean} options.showImmediate
+     * @param {Number} options.warningTimeout
+     * @param {String} options.appElement
+     * @param {HTMLElement} options.rootElement - Elem inside which to render
+     */
+    constructor(options) {
+        render(
+            <SessionDialogUI
+                showImmediate={options.showImmediate}
+                warningTimeout={options.warningTimeout}
+                appElement={options.appElement}
+            />,
+            options.rootElement
+        );
+    }
 }