@madie/madie-design-system 1.0.0

package/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "transform-es2015-modules-umd",
+    "transform-class-properties"
+  ]
+}

package/.editorconfig

@@ -0,0 +1,22 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.scss]
+indent_style = tab
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{pug, yml, yaml, rb, py}]
+indent_size = 2

package/.eslintignore

@@ -0,0 +1,5 @@
+_*
+css
+dist
+node_modules
+test

package/.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+    extends: ['eslint:recommended', 'plugin:react/recommended'],
+    parser: 'babel-eslint',
+    parserOptions: {
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true
+        }
+    },
+    env: {
+        es6: true,
+        node: true,
+        browser: true,
+        jquery: true,
+        mocha: true
+    },
+    rules: {
+        'no-unused-vars': [
+            'error',
+            {
+                args: 'none'
+            }
+        ],
+        'linebreak-style': ['error', 'unix'],
+        'no-console': 0,
+        'no-prototype-builtins': [0]
+    },
+    settings: {
+        react: { version: 'detect' }
+    }
+};

package/.storybook/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-react", "@babel/preset-env"],
+    "plugins": ["transform-class-properties"]
+}

package/.storybook/main.js

@@ -0,0 +1,89 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  stories: [
+    '../components/**/*.stories.@(js|jsx|mdx)',
+    '../lib/**/*.stories.@(js|jsx|mdx)',
+  ],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-storysource',
+    '@storybook/addon-knobs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-viewport',
+    '@storybook/addon-postcss',
+  ],
+  webpackFinal: async (config) => {
+    // do mutation to the config
+
+    config.plugins.push(
+      new CopyWebpackPlugin([
+        {
+          from: path.join(__dirname, '..', '..', 'shared', 'fonts/'),
+          to: 'fonts/',
+        },
+        {
+          from: path.join(__dirname, '..', '..', 'shared', 'images/'),
+          to: 'images/',
+          force: true,
+        },
+      ])
+    );
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      resolve: {
+        extensions: ['.scss', '.sass'],
+      },
+      use: [
+        { loader: 'style-loader' },
+        {
+          loader: 'css-loader',
+          options: { sourceMap: true, importLoaders: 1 },
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            sourceMap: true,
+          },
+        },
+      ],
+    });
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        'raw-loader',
+        {
+          loader: 'svgo-loader',
+          options: {
+            plugins: [
+              { removeTitle: true },
+              { convertColors: { shorthex: false } },
+              { convertPathData: false },
+            ],
+          },
+        },
+      ],
+    });
+
+    // Modify default storybook SVG loader so we can use the one expected by qpp-style
+    // NOTE: When updating storybook dependency, double check this override.
+    const staticAssetLoader = config.module.rules.find((rule) => {
+      const regExp = rule.test;
+      const isRegExp = regExp && typeof regExp.test === 'function';
+      return isRegExp && regExp.test('.svg');
+    });
+
+    if (staticAssetLoader) {
+      // remove svg matching from storybook's default static asset loader
+      staticAssetLoader.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
+    }
+
+    return config;
+  },
+};

package/.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<!--
+  Boottrap navbar and dropdowns used by <Header> component require jQuery
+  TODO: <Header> should be refactored to no longer rely on bootstrap.
+-->
+<script
+  src="https://code.jquery.com/jquery-3.5.1.min.js"
+  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+  crossorigin="anonymous"
+></script>

package/.storybook/preview.js

@@ -0,0 +1,5 @@
+import '../../shared/styles/_main.scss';
+
+export const parameters = {
+  layout: 'fullscreen',
+};

package/README.md

@@ -0,0 +1,5 @@
+# QPP-Style React
+
+This directory contains react implementations of the components for QPP.
+
+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

@@ -0,0 +1,20 @@
+import React from 'react';
+import Accordion from '.';
+
+export default {
+  title: 'Accordion',
+  component: Accordion,
+};
+
+export const Example = () => (
+  <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>
+);

package/components/Accordion/index.jsx

@@ -0,0 +1,93 @@
+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' : '');
+  }
+
+  function openAccordion() {
+    setActiveState('active');
+  }
+
+  function closeAccordion() {
+    setActiveState('');
+  }
+
+  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>
+  );
+};
+
+Accordion.propTypes = {
+  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,
+};
+
+export default Accordion;

package/components/Alert/Alert.stories.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import Alert from './index';
+
+export default {
+  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>
+);
+
+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>
+);

package/components/Alert/index.js

@@ -0,0 +1,46 @@
+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>
+  );
+};
+
+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']),
+};
+Alert.defaultProps = {
+  children: null,
+  className: '',
+  description: null,
+  title: null,
+  variant: 'info',
+};
+
+export default Alert;

package/components/Breadcrumb/Breadcrumb.md

@@ -0,0 +1,28 @@
+# Breadcrumb Component
+
+The Breadcrumb component is a secondary navigation scheme that reveals the user's location.
+
+### Props
+
+| Property name         | Type       | Required | Default Value | Description                                |
+| --------------------- | ---------- | -------- | ------------- | ------------------------------------------ |
+| `breadcrumbClass`     | `String`   | `false`  | ''            | class to append to Breadcrumb nav element  |
+| `crumbs`              | `Array`    | `true`   |               | array of breadcrumbs                       |
+| `dark`                | `Boolean`  | `false`  | `false`       | Use dark mode theme                        |
+| `RouterLink`          | `Function` | `false`  | `null`        | Link component to use instead of `<a>`     |
+| `routerExcludedLinks` | `Array`    | `false`  | `[]`          | Array of paths to exclude from using Link  |
+
+### Crumbs
+
+Each crumb can be a string or an object with the following properties.
+
+| Property name | Type     | Required | Description                |
+| ------------- | -------- | -------- | -------------------------- |
+| `url`         | `String` | `true`   | url                        |
+| `title`       | `String` | `true`   | Menu item string displayed |
+| `category`    | `String` | `true`   | Data tracking category     |
+| `label`       | `String` | `true`   | Data tracking label        |
+
+### RouterLink
+
+The `RouterLink` is only used by the Frontend to enable using push state for navigation. The `routerExcludedLinks` provides a way to opt certain links out of using the RouterLink.

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import Breadcrumb from './index';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+export default {
+  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>
+);
+
+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>
+);
+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>
+);
+
+ExampleDarkBreadcrumb.storyName = 'Dark';

package/components/Breadcrumb/index.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Breadcrumb = ({
+  breadcrumbClass,
+  crumbs,
+  dark,
+  RouterLink,
+  routerExcludedLinks,
+}) => {
+  return (
+    <nav
+      className={`qpp-c-breadcrumbs ${
+        !dark ? 'qpp-c-breadcrumbs--light' : ''
+      } ${breadcrumbClass}`}
+      aria-label="Breadcrumbs"
+    >
+      <ol className="qpp-c-breadcrumbs__list">
+        {crumbs.map((crumb, i) => {
+          if (crumb.url) {
+            if (RouterLink && !routerExcludedLinks.includes(crumb.url)) {
+              return (
+                <li className="qpp-c-breadcrumbs__list-item" key={crumb.title}>
+                  <RouterLink
+                    className="qpp-c-breadcrumbs__link"
+                    to={crumb.url}
+                    data-track-category={crumb.category}
+                    data-track-action="Click"
+                    data-track-label={crumb.label}
+                  >
+                    <span>{crumb.title}</span>
+                  </RouterLink>
+                </li>
+              );
+            }
+            return (
+              <li className="qpp-c-breadcrumbs__list-item" key={crumb.title}>
+                <a
+                  className="qpp-c-breadcrumbs__link"
+                  href={crumb.url}
+                  data-track-category={crumb.category}
+                  data-track-action="Click"
+                  data-track-label={crumb.label}
+                >
+                  <span>{crumb.title}</span>
+                </a>
+              </li>
+            );
+          } else {
+            return (
+              <li
+                key={crumb}
+                className={`${
+                  i === crumbs.length - 1 ? 'sr-only' : ''
+                } qpp-c-breadcrumbs__list-itemqpp-c-breadcrumbs__list-item--current`}
+                aria-current="page"
+              >
+                <span>{crumb}</span>
+              </li>
+            );
+          }
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+Breadcrumb.propTypes = {
+  breadcrumbClass: PropTypes.string,
+  crumbs: PropTypes.array.isRequired,
+  dark: PropTypes.bool,
+  RouterLink: PropTypes.func,
+  routerExcludedLinks: PropTypes.array,
+};
+
+Breadcrumb.defaultProps = {
+  breadcrumbClass: '',
+  dark: false,
+  RouterLink: null,
+  routerExcludedLinks: [],
+};
+
+export default Breadcrumb;