@madie/madie-design-system 1.0.0 → 1.0.3

package/.storybook/main.js

@@ -2,6 +2,9 @@ const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
+    core: {
+        builder: 'webpack5',
+    },
   stories: [
     '../components/**/*.stories.@(js|jsx|mdx)',
     '../lib/**/*.stories.@(js|jsx|mdx)',

package/README.md

@@ -1,5 +1,4 @@
-# QPP-Style React
+# Madie/madie-design-system React
 
-This directory contains react implementations of the components for QPP.
+This directory contains react implementations of the components for Madie.
 
-A storybook with examples is published at [https://cmsgov.github.io/qpp-style](https://cmsgov.github.io/qpp-style)

package/components/Accordion/Accordion.stories.js

@@ -1,20 +1,20 @@
-import React from 'react';
-import Accordion from '.';
+import React from "react";
+import Accordion from ".";
 
 export default {
-  title: 'Accordion',
-  component: Accordion,
+    title: "Accordion",
+    component: Accordion,
 };
 
 export const Example = () => (
-  <div style={{ padding: '20px', maxWidth: '500px' }}>
-    <Accordion title="Accordion title">My accordion content</Accordion>
-  </div>
+    <div style={{ padding: "20px", maxWidth: "500px" }}>
+        <Accordion title="Accordion title">My accordion content</Accordion>
+    </div>
 );
 
 export const Focus = () => (
-  <div style={{ padding: '20px', maxWidth: '500px' }}>
-    <input />
-    <Accordion title="Accordion title">My accordion content</Accordion>
-  </div>
+    <div style={{ padding: "20px", maxWidth: "500px" }}>
+        <input />
+        <Accordion title="Accordion title">My accordion content</Accordion>
+    </div>
 );

package/components/Accordion/index.jsx

@@ -1,93 +1,95 @@
-import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Chevron } from '../../lib/Chevron.jsx';
+import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Chevron } from "../../lib/Chevron.jsx";
 
 const Accordion = (props) => {
-  const content = useRef(null);
-  const [setActive, setActiveState] = useState(props.isOpen ? 'active' : '');
-  const ariaPressed = setActive ? 'true' : 'false';
-  const getHeight = (node) => {
-    if (node) {
-      return `${node.scrollHeight}px`;
-    }
-    return 'auto';
-  };
-  const height = setActive ? getHeight(content.current) : '0px';
-  const rotate = setActive ? 'accordion-icon rotate' : 'accordion-icon';
-
-  function toggleAccordion() {
-    setActiveState(setActive === '' ? 'active' : '');
-  }
+    const content = useRef(null);
+    const [setActive, setActiveState] = useState(props.isOpen ? "active" : "");
+    const ariaPressed = setActive ? "true" : "false";
+    const getHeight = (node) => {
+        if (node) {
+            return `${node.scrollHeight}px`;
+        }
+        return "auto";
+    };
+    const height = setActive ? getHeight(content.current) : "0px";
+    const rotate = setActive ? "accordion-icon rotate" : "accordion-icon";
 
-  function openAccordion() {
-    setActiveState('active');
-  }
+    function toggleAccordion() {
+        setActiveState(setActive === "" ? "active" : "");
+    }
 
-  function closeAccordion() {
-    setActiveState('');
-  }
+    function openAccordion() {
+        setActiveState("active");
+    }
 
-  useEffect(() => {
-    if (props.isOpen) {
-      openAccordion();
-    } else {
-      closeAccordion();
+    function closeAccordion() {
+        setActiveState("");
     }
-  }, [props.isOpen]);
 
-  return (
-    <div className="accordion-section" data-testid="accordion">
-      <button
-        className={`accordion ${setActive}`}
-        aria-label={props.title}
-        aria-pressed={ariaPressed}
-        aria-expanded={ariaPressed}
-        tabIndex="0"
-        onClick={toggleAccordion}
-      >
-        <div className="accordion-left-title">
-          <p className="accordion-title">{props.title}</p>
-          {props.subTitle && (
-            <p className="accordion-subtitle">{props.subTitle}</p>
-          )}
-        </div>
-        {props.centerItem && (
-          <div className="accordion-center">
-            <p>{props.centerItem}</p>
-          </div>
-        )}
-        {props.rightItem && (
-          <div className="accordion-right">
-            <p>{props.rightItem}</p>
-          </div>
-        )}
-        <div className="chevron-container">
-          <Chevron className={rotate} />
+    useEffect(() => {
+        if (props.isOpen) {
+            openAccordion();
+        } else {
+            closeAccordion();
+        }
+    }, [props.isOpen]);
+
+    return (
+        <div className="accordion-section" data-testid="accordion">
+            <button
+                className={`accordion ${setActive}`}
+                aria-label={props.title}
+                aria-pressed={ariaPressed}
+                aria-expanded={ariaPressed}
+                tabIndex="0"
+                onClick={toggleAccordion}
+            >
+                <div className="accordion-left-title">
+                    <p className="accordion-title">{props.title}</p>
+                    {props.subTitle && (
+                        <p className="accordion-subtitle">{props.subTitle}</p>
+                    )}
+                </div>
+                {props.centerItem && (
+                    <div className="accordion-center">
+                        <p>{props.centerItem}</p>
+                    </div>
+                )}
+                {props.rightItem && (
+                    <div className="accordion-right">
+                        <p>{props.rightItem}</p>
+                    </div>
+                )}
+                <div className="chevron-container">
+                    <Chevron className={rotate} />
+                </div>
+            </button>
+            <div
+                ref={content}
+                style={{ maxHeight: height }}
+                className="accordion-content"
+            >
+                <div className="accordion-text dashed-border">
+                    {props.children}
+                </div>
+            </div>
         </div>
-      </button>
-      <div
-        ref={content}
-        style={{ maxHeight: height }}
-        className="accordion-content"
-      >
-        <div className="accordion-text dashed-border">{props.children}</div>
-      </div>
-    </div>
-  );
+    );
 };
 
 Accordion.propTypes = {
-  title: PropTypes.string.isRequired,
-  subTitle: PropTypes.string,
-  children: PropTypes.any.isRequired,
-  centerItem: PropTypes.string,
-  rightItem: PropTypes.string,
-  isOpen: PropTypes.bool,
+    title: PropTypes.string.isRequired,
+    subTitle: PropTypes.string,
+    children: PropTypes.any.isRequired,
+    centerItem: PropTypes.string,
+    rightItem: PropTypes.string,
+    isOpen: PropTypes.bool,
 };
 
 Accordion.defaultProps = {
-  title: '',
-  isOpen: false,
+    title: "",
+    isOpen: false,
 };
 
 export default Accordion;

package/components/Alert/Alert.stories.js

@@ -1,61 +1,70 @@
-import React from 'react';
+import React from "react";
 
-import Alert from './index';
+import Alert from "./index";
 
 export default {
-  title: 'Alert',
-  component: Alert,
+    title: "Alert",
+    component: Alert,
 };
 
 export const Default = () => (
-  <div className="qpp-u-padding--16">
-    <h1 className="h3">Information</h1>
-    <Alert
-      title='Information Alert'
-      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida."
-    />
-    <h2 className="h3">Warning</h2>
-    <Alert
-      variant="warning"
-      title={{ headingLevel: 'h3', text: 'Warning Alert' }}
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
-      consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
-    </Alert>
-    <h2 className="h3">Error</h2>
-    <Alert variant="error" title={{ headingLevel: 'h3', text: 'Error Alert' }}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
-      consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
-    </Alert>
-    <h2 className="h3">Success</h2>
-    <Alert
-      variant="success"
-      title={{ headingLevel: 'h3', text: 'Success Alert' }}
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
-      consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
-    </Alert>
-  </div>
+    <div className="qpp-u-padding--16">
+        <h1 className="h3">Information</h1>
+        <Alert
+            title="Information Alert"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida."
+        />
+        <h2 className="h3">Warning</h2>
+        <Alert
+            variant="warning"
+            title={{ headingLevel: "h3", text: "Warning Alert" }}
+        >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
+            eleifend gravida.
+        </Alert>
+        <h2 className="h3">Error</h2>
+        <Alert
+            variant="error"
+            title={{ headingLevel: "h3", text: "Error Alert" }}
+        >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
+            eleifend gravida.
+        </Alert>
+        <h2 className="h3">Success</h2>
+        <Alert
+            variant="success"
+            title={{ headingLevel: "h3", text: "Success Alert" }}
+        >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
+            eleifend gravida.
+        </Alert>
+    </div>
 );
 
 export const WithoutHeading = () => (
-  <div className="qpp-u-padding--16">
-    <h1 className="h3">Information</h1>
-    <Alert description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida." />
-    <h1 className="h3">Warning</h1>
-    <Alert variant="warning">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
-      consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
-    </Alert>
-    <h1 className="h3">Error</h1>
-    <Alert variant="error">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
-      consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
-    </Alert>
-    <h1 className="h3">Success</h1>
-    <Alert variant="success">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
-      consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
-    </Alert>
-  </div>
+    <div className="qpp-u-padding--16">
+        <h1 className="h3">Information</h1>
+        <Alert description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida." />
+        <h1 className="h3">Warning</h1>
+        <Alert variant="warning">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
+            eleifend gravida.
+        </Alert>
+        <h1 className="h3">Error</h1>
+        <Alert variant="error">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
+            eleifend gravida.
+        </Alert>
+        <h1 className="h3">Success</h1>
+        <Alert variant="success">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
+            eleifend gravida.
+        </Alert>
+    </div>
 );

package/components/Alert/index.js

@@ -1,46 +1,55 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-const Alert = ({ title, children, description, variant, className, ...rest }) => {
-  const HeadingComponent = title?.headingLevel || 'h2';
-  return (
-    <div
-      className={`qpp-c-alert qpp-c-alert--${variant} ${className}`}
-      role="alert"
-      {...rest}
-    >
-      <div className="qpp-c-alert__body">
-        {title && (
-          <HeadingComponent className="h4 qpp-c-alert__heading">
-            {typeof title === 'object' ? title.text : title}
-          </HeadingComponent>
-        )}
-        {description && <p className="qpp-c-alert__text">{description}</p>}
-        {children}
-      </div>
-    </div>
-  );
+const Alert = ({
+    title,
+    children,
+    description,
+    variant,
+    className,
+    ...rest
+}) => {
+    const HeadingComponent = title?.headingLevel || "h2";
+    return (
+        <div
+            className={`qpp-c-alert qpp-c-alert--${variant} ${className}`}
+            role="alert"
+            {...rest}
+        >
+            <div className="qpp-c-alert__body">
+                {title && (
+                    <HeadingComponent className="h4 qpp-c-alert__heading">
+                        {typeof title === "object" ? title.text : title}
+                    </HeadingComponent>
+                )}
+                {description && (
+                    <p className="qpp-c-alert__text">{description}</p>
+                )}
+                {children}
+            </div>
+        </div>
+    );
 };
 
 Alert.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  description: PropTypes.string,
-  title: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.shape({
-      text: PropTypes.string,
-      headingLevel: PropTypes.string,
-    }),
-  ]),
-  variant: PropTypes.oneOf(['info', 'warning', 'success', 'error']),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    description: PropTypes.string,
+    title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            text: PropTypes.string,
+            headingLevel: PropTypes.string,
+        }),
+    ]),
+    variant: PropTypes.oneOf(["info", "warning", "success", "error"]),
 };
 Alert.defaultProps = {
-  children: null,
-  className: '',
-  description: null,
-  title: null,
-  variant: 'info',
+    children: null,
+    className: "",
+    description: null,
+    title: null,
+    variant: "info",
 };
 
 export default Alert;

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -1,76 +1,76 @@
-import React from 'react';
-import Breadcrumb from './index';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import React from "react";
+import Breadcrumb from "./index";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
 
 export default {
-  title: 'Breadcrumb',
-  component: Breadcrumb,
-  decorators: [withKnobs],
+    title: "Breadcrumb",
+    component: Breadcrumb,
+    decorators: [withKnobs],
 };
 
 export const ExampleLightBreadcrumb = () => (
-  <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
-    <Breadcrumb
-      newBreadcrumb={boolean('newBreadcrumb', true)}
-      crumbs={[
-        {
-          url: '/',
-          category: 'MainContent',
-          label: 'Home',
-          title: 'Home',
-        },
-        {
-          url: '/',
-          category: 'MainContent',
-          label: 'Mips Overview',
-          title: 'Mips Overview',
-        },
-      ]}
-    />
-  </div>
+    <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
+        <Breadcrumb
+            newBreadcrumb={boolean("newBreadcrumb", true)}
+            crumbs={[
+                {
+                    url: "/",
+                    category: "MainContent",
+                    label: "Home",
+                    title: "Home",
+                },
+                {
+                    url: "/",
+                    category: "MainContent",
+                    label: "Mips Overview",
+                    title: "Mips Overview",
+                },
+            ]}
+        />
+    </div>
 );
 
-ExampleLightBreadcrumb.storyName = 'Light';
+ExampleLightBreadcrumb.storyName = "Light";
 
 export const ExampleScreenreaderOnlyBreadcrumb = () => (
-  <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
-    <Breadcrumb
-      newBreadcrumb={boolean('newBreadcrumb', true)}
-      crumbs={[
-        {
-          url: '/',
-          category: 'MainContent',
-          label: 'Home',
-          title: 'Home',
-        },
-        'Mips Overview',
-      ]}
-    />
-  </div>
+    <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
+        <Breadcrumb
+            newBreadcrumb={boolean("newBreadcrumb", true)}
+            crumbs={[
+                {
+                    url: "/",
+                    category: "MainContent",
+                    label: "Home",
+                    title: "Home",
+                },
+                "Mips Overview",
+            ]}
+        />
+    </div>
 );
-ExampleScreenreaderOnlyBreadcrumb.storyName = 'SR Only Breadcrumb';
+ExampleScreenreaderOnlyBreadcrumb.storyName = "SR Only Breadcrumb";
 
 export const ExampleDarkBreadcrumb = () => (
-  <div className="qppds qpp-u-padding--16">
-    <Breadcrumb
-      newBreadcrumb={boolean('newBreadcrumb', true)}
-      dark
-      crumbs={[
-        {
-          url: '/',
-          category: 'MainContent',
-          label: 'Home',
-          title: 'Home',
-        },
-        {
-          url: '/',
-          category: 'MainContent',
-          label: 'Mips Overview',
-          title: 'Mips Overview',
-        },
-      ]}
-    />
-  </div>
+    <div className="qppds qpp-u-padding--16">
+        <Breadcrumb
+            newBreadcrumb={boolean("newBreadcrumb", true)}
+            dark
+            crumbs={[
+                {
+                    url: "/",
+                    category: "MainContent",
+                    label: "Home",
+                    title: "Home",
+                },
+                {
+                    url: "/",
+                    category: "MainContent",
+                    label: "Mips Overview",
+                    title: "Mips Overview",
+                },
+            ]}
+        />
+    </div>
 );
 
-ExampleDarkBreadcrumb.storyName = 'Dark';
+ExampleDarkBreadcrumb.storyName = "Dark";