@madie/madie-design-system 1.0.2 → 1.0.3

package/components/Tabs/index.js

@@ -1,95 +1,100 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { Tabs as MuiTabs } from '@mui/material'
-import TabPanel from './TabPanel'
-import LinkTab from './Tab'
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { Tabs as MuiTabs } from "@mui/material";
+import TabPanel from "./TabPanel";
+import LinkTab from "./Tab";
 
-const isTabPanel = (child) => child?.type === TabPanel
+const isTabPanel = (child) => child?.type === TabPanel;
 
 const getPanelChildren = (children) => {
-  return React.Children.toArray(children).filter(isTabPanel)
+    return React.Children.toArray(children).filter(isTabPanel);
 };
 
-const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) => {
-  const [value, setValue] = useState(defaultSelectedId || selected)
+const Tabs = ({
+    children,
+    onChange,
+    selected,
+    defaultSelectedId,
+    ariaLabel,
+}) => {
+    const [value, setValue] = useState(defaultSelectedId || selected);
 
-  useEffect(() => {
-    if (selected) {
-      setValue(selected)
-    }
-  }, [selected])
+    useEffect(() => {
+        if (selected) {
+            setValue(selected);
+        }
+    }, [selected]);
 
-  if (!children) return null
+    if (!children) return null;
 
-  const handleChange = (event, newValue) => {
-    if (onChange) {
-      onChange(tabList[newValue]?.id, event)
-    }
-    if (setValue) {
-      setValue(tabList[newValue]?.id)
-    }
-  }
+    const handleChange = (event, newValue) => {
+        if (onChange) {
+            onChange(tabList[newValue]?.id, event);
+        }
+        if (setValue) {
+            setValue(tabList[newValue]?.id);
+        }
+    };
 
-  const renderChildren = () => {
-    return React.Children.map(children, (child, index) => {
-      if (isTabPanel(child)) {
-        return React.cloneElement(child, { index, value: tabIndex })
-      }
-      return child
-    })
-  }
+    const renderChildren = () => {
+        return React.Children.map(children, (child, index) => {
+            if (isTabPanel(child)) {
+                return React.cloneElement(child, { index, value: tabIndex });
+            }
+            return child;
+        });
+    };
 
-  const panels = getPanelChildren(children)
+    const panels = getPanelChildren(children);
 
-  const tabList = panels.map(
-    (panel) => {
-      const { id, tab, tabHref, disabled } = panel?.props || {}
-      return { tab, tabHref, disabled, id }
-    },
-  )
+    const tabList = panels.map((panel) => {
+        const { id, tab, tabHref, disabled } = panel?.props || {};
+        return { tab, tabHref, disabled, id };
+    });
 
-  const foundIndex = tabList.findIndex(({ id }) => id === value)
+    const foundIndex = tabList.findIndex(({ id }) => id === value);
 
-  const tabIndex = foundIndex >= 0 ? foundIndex : 0
+    const tabIndex = foundIndex >= 0 ? foundIndex : 0;
 
-  return (
-    <>
-      <div className="qpp-c-tabs qpp-c-tabs--mui">
-        <MuiTabs value={tabIndex} onChange={handleChange} aria-label={ariaLabel}>
-          {tabList.map(({ tab, tabHref, disabled, id }, index) => (
-            <LinkTab
-              index={index}
-              key={`link-tab-${tab}`}
-              label={tab}
-              href={tabHref}
-              disabled={disabled}
-              id={`qpp-c-tabs__item--${id}`}
-            />
-          ))}
-        </MuiTabs>
-      </div>
-      {renderChildren()}
-    </>
-  )
-}
+    return (
+        <>
+            <div className="qpp-c-tabs qpp-c-tabs--mui">
+                <MuiTabs
+                    value={tabIndex}
+                    onChange={handleChange}
+                    aria-label={ariaLabel}
+                >
+                    {tabList.map(({ tab, tabHref, disabled, id }, index) => (
+                        <LinkTab
+                            index={index}
+                            key={`link-tab-${tab}`}
+                            label={tab}
+                            href={tabHref}
+                            disabled={disabled}
+                            id={`qpp-c-tabs__item--${id}`}
+                        />
+                    ))}
+                </MuiTabs>
+            </div>
+            {renderChildren()}
+        </>
+    );
+};
 
 Tabs.propTypes = {
-  ariaLabel: PropTypes.string,
-  selected: PropTypes.string,
-  defaultSelectedId: PropTypes.string,
-  onChange: PropTypes.func,
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ])
-}
+    ariaLabel: PropTypes.string,
+    selected: PropTypes.string,
+    defaultSelectedId: PropTypes.string,
+    onChange: PropTypes.func,
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+};
 
 Tabs.defaultProps = {
-  ariaLabel: 'qpp tabs',
-  selected: null,
-  defaultSelectedId: null,
-  onChange: null,
-  children: null,
-}
+    ariaLabel: "qpp tabs",
+    selected: null,
+    defaultSelectedId: null,
+    onChange: null,
+    children: null,
+};
 
-export default Tabs
+export default Tabs;

package/components/TextField/TextField.stories.js

@@ -0,0 +1,103 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import TextField from "./index";
+import { FormHelperText } from "@mui/material";
+export default {
+    title: "TextField",
+    component: TextField,
+    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>
+        <TextField
+            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>
+        <TextField
+            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`}
+                    children={"a descriptive message"}
+                    error={false}
+                />
+            }
+        />
+    </Wrapper>
+);
+
+export const Disabled = () => (
+    <Wrapper>
+        <TextField
+            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>
+        <TextField
+            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>
+        <TextField
+            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`}
+                    children="An error message"
+                    error={true}
+                />
+            }
+        />
+    </Wrapper>
+);

package/components/TextField/index.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { FormControl, TextField as MUITextField } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import InputLabel from "../InputLabel";
+import PropTypes from "prop-types";
+
+const useStyles = makeStyles({
+    asterisk: {
+        color: "#D92F2F",
+    },
+    select: {
+        borderRadius: 3,
+        height: 40, //there's a .13 coming from somewhere.
+        border: "1px solid #DDDDDD",
+        // remove weird line break from legend
+        "& .MuiOutlinedInput-notchedOutline": {
+            "& legend": {
+                width: 0,
+            },
+        },
+        "& .MuiOutlinedInput-root": {
+            borderRadius: 3,
+        },
+        // input base selector
+        "& .MuiInputBase-input": {
+            fontFamily: "Rubik",
+            fontSize: 14,
+            borderRadius: 3,
+            padding: "9px 14px",
+            "&::placeholder": {
+                opacity: 1,
+            },
+        },
+    },
+    // add a little space
+});
+const TextField = ({
+    id,
+    error = false,
+    helperText = undefined,
+    required = false,
+    disabled = false,
+    label,
+    ...rest
+}) => {
+    const classes = useStyles();
+    return (
+        <FormControl fullWidth error={error}>
+            <InputLabel
+                disabled={disabled}
+                shrink
+                required={required}
+                error={error}
+                htmlFor={id}
+            >
+                {label}
+            </InputLabel>
+            <MUITextField
+                className={classes.select}
+                label={null}
+                error={error}
+                disabled={disabled}
+                id={id}
+                {...rest}
+            />
+            {helperText && helperText}
+        </FormControl>
+    );
+};
+
+TextField.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 TextField;

package/components/TextInput/TextInput.stories.js

@@ -1,118 +1,118 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import TextInput from './index';
-import { withKnobs } from '@storybook/addon-knobs';
+import React from "react";
+import PropTypes from "prop-types";
+import TextInput from "./index";
+import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
-  title: 'Text Input',
-  component: TextInput,
-  decorators: [withKnobs],
+    title: "Text Input",
+    component: TextInput,
+    decorators: [withKnobs],
 };
 
 const optionalProps = {
-  'aria-label': 'example label',
+    "aria-label": "example label",
 };
 
 const Wrapper = ({ children }) => (
-  <div className="qpp-u-padding--16">{children}</div>
+    <div className="qpp-u-padding--16">{children}</div>
 );
 Wrapper.propTypes = {
-  children: PropTypes.node,
+    children: PropTypes.node,
 };
 
 export const InputField = () => (
-  <Wrapper>
-    <TextInput
-      style={{ width: 'auto' }}
-      id="example"
-      name="single-example"
-      value="Example value"
-      label="Input Field"
-      {...optionalProps}
-    />
-  </Wrapper>
+    <Wrapper>
+        <TextInput
+            style={{ width: "auto" }}
+            id="example"
+            name="single-example"
+            value="Example value"
+            label="Input Field"
+            {...optionalProps}
+        />
+    </Wrapper>
 );
 
 export const InputFieldWithPlaceholder = () => (
-  <Wrapper>
-    <TextInput
-      id="placeholder-example"
-      name="placheholder"
-      label="Placeholder Example"
-      placeholder="Placeholder value"
-    />
-  </Wrapper>
+    <Wrapper>
+        <TextInput
+            id="placeholder-example"
+            name="placheholder"
+            label="Placeholder Example"
+            placeholder="Placeholder value"
+        />
+    </Wrapper>
 );
 export const DisabledInputField = () => (
-  <Wrapper>
-    <TextInput
-      disabled={true}
-      id="disabled-example"
-      name="disabled_example"
-      value="Example value"
-      label="Disabled Example"
-    />
-  </Wrapper>
+    <Wrapper>
+        <TextInput
+            disabled={true}
+            id="disabled-example"
+            name="disabled_example"
+            value="Example value"
+            label="Disabled Example"
+        />
+    </Wrapper>
 );
 
 export const FocusedInputField = () => (
-  <Wrapper>
-    <TextInput
-      id="focused-example"
-      name="focused_example"
-      value="Example value"
-      label="Focused Example"
-      className="qpp-c-text-input--focus"
-    />
-  </Wrapper>
+    <Wrapper>
+        <TextInput
+            id="focused-example"
+            name="focused_example"
+            value="Example value"
+            label="Focused Example"
+            className="qpp-c-text-input--focus"
+        />
+    </Wrapper>
 );
 
 export const ErrorInputField = () => (
-  <Wrapper>
-    <TextInput
-      className="qpp-u-margin-bottom--8"
-      id="error-example"
-      name="error_example"
-      value="Example value"
-      error="Error Message"
-      label="Error Example"
-    />
-  </Wrapper>
+    <Wrapper>
+        <TextInput
+            className="qpp-u-margin-bottom--8"
+            id="error-example"
+            name="error_example"
+            value="Example value"
+            error="Error Message"
+            label="Error Example"
+        />
+    </Wrapper>
 );
 
 export const SuccessInputField = () => (
-  <Wrapper>
-    <TextInput
-      variant="success"
-      id="success-example"
-      name="success"
-      value="Example value"
-      label="Success Example"
-    />
-  </Wrapper>
+    <Wrapper>
+        <TextInput
+            variant="success"
+            id="success-example"
+            name="success"
+            value="Example value"
+            label="Success Example"
+        />
+    </Wrapper>
 );
 
 export const InputFieldWithHint = () => (
-  <Wrapper>
-    <TextInput
-      className="qpp-u-margin-bottom--8"
-      id="hint-example"
-      name="hint"
-      value="Example value"
-      label="Hint Example"
-      hint="Hint Message"
-    />
-  </Wrapper>
+    <Wrapper>
+        <TextInput
+            className="qpp-u-margin-bottom--8"
+            id="hint-example"
+            name="hint"
+            value="Example value"
+            label="Hint Example"
+            hint="Hint Message"
+        />
+    </Wrapper>
 );
 
 export const BigInput = () => (
-  <Wrapper>
-    <TextInput
-      id="big-example"
-      name="hint"
-      value="Example value"
-      label="Big Example"
-      size="big"
-    />
-  </Wrapper>
+    <Wrapper>
+        <TextInput
+            id="big-example"
+            name="hint"
+            value="Example value"
+            label="Big Example"
+            size="big"
+        />
+    </Wrapper>
 );