qpp-style 0.0.8 → 0.0.10

package/.eslintrc.js

@@ -1,31 +1,31 @@
 module.exports = {
-    extends: ['eslint:recommended', 'plugin:react/recommended'],
-    parser: 'babel-eslint',
-    parserOptions: {
-        sourceType: 'module',
-        ecmaFeatures: {
-            jsx: true
-        }
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parser: '@babel/eslint-parser',
+  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' }
-    }
+  },
+  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/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd react
+npm run precommit

package/README.md

@@ -0,0 +1,45 @@
+# QPP-Style React
+
+This directory contains react implementations of the components for QPP.
+
+## Github Branch and Pull Request process
+
+1. Create branch off main and create a Pull Request into main for the feature.
+   > Example Branch Name: feature/QPPXX-XXXX_make_icon_better
+2. Once merged into main, create release branch from main.
+3. Name the new branch release/x.xx.x
+4. Run the version bump:
+
+```bash
+cd qpp-style/react
+npm version --no-git-tag-version patch
+```
+
+Example Commit Message:
+
+> x.xx.x release
+
+5. Create a pull request against main with the PR Title: x.xx.x release [Example PR](https://github.com/CMSgov/qpp-style/pull/1065)
+6. Enter the change in the description of the pull request i.e.:
+   > Added new svg for Icon Name
+
+## Generate an NPM token with Publish permissions
+
+1. If you do not already have an access token, sign in to npmjs.com and navigate to access tokens.
+2. Click generate new token.
+3. Select publish under type.
+4. Copy the npm token and set its value as the environment variable: NPM_TOKEN
+
+```bash
+export NPM_TOKEN={npm_token}
+```
+
+## Publish the react qpp-style npm package (used by both react and angular)
+
+```bash
+cd qpp-style/react
+npm i
+npm publish
+```
+
+7. Once published successfully, merge into main.

package/components/Accordion/index.jsx

@@ -1,57 +1,47 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-
-const Chevron = (props) => {
-  return (
-    <svg
-      className={props.className}
-      height="14"
-      width="14"
-      viewBox="0 0 200 450"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m258.476 235.971-194.344 194.343c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901l154.021-154.746-154.021-154.745c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0l194.343 194.343c9.373 9.372 9.373 24.568.001 33.941z"
-        fill="#242424"
-      />
-    </svg>
-  );
-};
-
-Chevron.propTypes = {
-  className: PropTypes.string,
-};
-
-Chevron.defaultProps = {
-  className: 'accordion-icon',
-};
+import { Chevron } from '../../lib/Chevron.jsx';
 
 const Accordion = (props) => {
-  const [setActive, setActiveState] = useState('');
-  const [setAriaPressed, setAriaPressedState] = useState(false);
-  const [setHeight, setHeightState] = useState('0px');
-  const [setRotate, setRotateState] = useState('accordion-icon');
-
   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' : '');
-    setAriaPressedState(setActive === '' ? 'true' : 'false');
-    setHeightState(
-      setActive === 'active' ? '0px' : `${content.current.scrollHeight}px`
-    );
-    setRotateState(
-      setActive === 'active' ? 'accordion-icon' : 'accordion-icon rotate'
-    );
   }
 
+  function openAccordion() {
+    setActiveState('active');
+  }
+
+  function closeAccordion() {
+    setActiveState('');
+  }
+
+  useEffect(() => {
+    if (props.isOpen) {
+      openAccordion();
+    } else {
+      closeAccordion();
+    }
+  }, [props.isOpen]);
+
   return (
-    <div className="accordion-section">
+    <div className="accordion-section" data-testid="accordion">
       <button
         className={`accordion ${setActive}`}
         aria-label={props.title}
-        aria-pressed={setAriaPressed}
-        aria-expanded={setAriaPressed}
+        aria-pressed={ariaPressed}
+        aria-expanded={ariaPressed}
         tabIndex="0"
         onClick={toggleAccordion}
       >
@@ -72,12 +62,12 @@ const Accordion = (props) => {
           </div>
         )}
         <div className="chevron-container">
-          <Chevron className={`${setRotate}`} />
+          <Chevron className={rotate} />
         </div>
       </button>
       <div
         ref={content}
-        style={{ maxHeight: `${setHeight}` }}
+        style={{ maxHeight: height }}
         className="accordion-content"
       >
         <div className="accordion-text dashed-border">{props.children}</div>
@@ -92,10 +82,12 @@ Accordion.propTypes = {
   children: PropTypes.any.isRequired,
   centerItem: PropTypes.string,
   rightItem: PropTypes.string,
+  isOpen: PropTypes.bool,
 };
 
 Accordion.defaultProps = {
   title: '',
+  isOpen: false,
 };
 
 export default Accordion;

package/components/Alert/index.js

@@ -0,0 +1,53 @@
+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/index.js

@@ -1,25 +1,83 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import DsBreadcrumb from './Breadcrumb';
-import LegacyBreadcrumb from './LegacyBreadcrumb';
-
-const Breadcrumb = (props) => {
-  if (props.newBreadcrumb) {
-    return <DsBreadcrumb {...props} />;
-  }
-  return <LegacyBreadcrumb {...props} />;
+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 = {
-  crumbs: PropTypes.array.isRequired,
   breadcrumbClass: PropTypes.string,
-  newBreadcrumb: PropTypes.bool,
+  crumbs: PropTypes.array.isRequired,
+  dark: PropTypes.bool,
+  RouterLink: PropTypes.func,
+  routerExcludedLinks: PropTypes.array,
 };
 
 Breadcrumb.defaultProps = {
   breadcrumbClass: '',
-  newBreadcrumb: false,
+  dark: false,
+  RouterLink: null,
+  routerExcludedLinks: [],
 };
 
 export default Breadcrumb;

package/components/Button/index.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const VARIANTS = ['secondary', 'outline', 'danger', 'white'];
+const SIZES = ['big'];
+
+const Button = ({
+  children,
+  className,
+  href,
+  loading,
+  onClick,
+  size,
+  variant,
+  type,
+  ...rest
+}) => {
+  let btnClass = 'qpp-c-button';
+
+  if (VARIANTS.includes(variant)) {
+    btnClass = btnClass.concat(' ', `qpp-c-button--${variant}`);
+  }
+  if (SIZES.includes(size)) {
+    btnClass = btnClass.concat(' ', `qpp-c-button--${size}`);
+  }
+  if (className) {
+    btnClass = btnClass.concat(' ', className);
+  }
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        data-testid="ds-btn"
+        className={btnClass || ''}
+        onClick={onClick}
+      >
+        {children}
+      </a>
+    );
+  }
+  return (
+    <button
+      data-testid="ds-btn"
+      className={btnClass || ''}
+      onClick={onClick}
+      disabled={loading}
+      type={type}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  loading: PropTypes.bool,
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf(SIZES),
+  type: PropTypes.string,
+  variant: PropTypes.oneOf(VARIANTS),
+};
+
+Button.defaultProps = {
+  children: false,
+  className: '',
+  href: '',
+  loading: false,
+  onClick: () => null,
+  size: null,
+  type: 'button',
+  variant: null,
+};
+
+export const TextButton = ({ className = '', ...props }) => (
+  <Button className={`qpp-c-button--text ${className}`} {...props} />
+);
+
+TextButton.propTypes = {
+  className: PropTypes.string,
+};
+
+TextButton.defaultProps = {
+  className: '',
+};
+
+export default Button;

package/components/CalloutBox/index.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FeatherIcon from 'feather-icons-react';
+
+import Button from '../Button';
+
+const getCtaButton = (button) => {
+  if (button) {
+    if (React.isValidElement(button)) {
+      return button;
+    }
+    if (button.href) {
+      const { href, text, ...restLink } = button;
+      return (
+        <a
+          className="qpp-c-button qpp-c-button--secondary qpp-c-button--icon-after"
+          href={href}
+          {...restLink}
+        >
+          {text}
+          <FeatherIcon icon="chevron-right" />
+        </a>
+      );
+    }
+    const { onClick, text, ...restButton } = button;
+    return (
+      <Button
+        variant="secondary"
+        className="qpp-c-button--icon-after"
+        onClick={onClick}
+        {...restButton}
+      >
+        {text}
+        <FeatherIcon icon="chevron-right" />
+      </Button>
+    );
+  }
+  return null;
+};
+
+const CalloutBox = ({
+  title,
+  description,
+  button,
+  input,
+  children,
+  headerLevel,
+}) => {
+  const Header = `h${headerLevel}`;
+  return (
+    <aside className="qppds qpp-u-sm-padding--32 qpp-u-padding--24 qpp-u-fill--blue-70">
+      {title && (
+        <Header className="qpp-u-font-size--24 qpp-u-color--white qpp-u-margin-bottom--16 qpp-u-margin-top--0 qpp-u-font-weight--regular">
+          {title}
+        </Header>
+      )}
+      {description && (
+        <p className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
+          {description}
+        </p>
+      )}
+      {children && (
+        <div className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
+          {children}
+        </div>
+      )}
+      {(input || button) && (
+        <div className="qpp-u-display--flex qpp-u-align-items--center qpp-u-flex-wrap--wrap qpp-u-margin-top--24">
+          {input && (
+            <input
+              className="qpp-c-text-input qpp-u-sm-margin-right--16 qpp-u-margin-bottom--16 qpp-u-sm-margin-bottom--0 qpp-u-sm-width--auto qpp-u-width--100"
+              type="text"
+              {...input}
+            />
+          )}
+          {getCtaButton(button)}
+        </div>
+      )}
+    </aside>
+  );
+};
+
+CalloutBox.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  button: PropTypes.shape({
+    text: PropTypes.string,
+    onClick: PropTypes.func,
+    href: PropTypes.string,
+  }),
+  input: PropTypes.shape({
+    value: PropTypes.string,
+    name: PropTypes.string,
+    id: PropTypes.string,
+  }),
+  children: PropTypes.node,
+  headerLevel: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+CalloutBox.defaultProps = {
+  title: null,
+  description: null,
+  button: null,
+  input: null,
+  children: null,
+  headerLevel: 2,
+};
+
+export default CalloutBox;