qpp-style 0.0.9 → 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/index.js

@@ -50,12 +50,12 @@ const Breadcrumb = ({
             return (
               <li
                 key={crumb}
-                className="qpp-c-breadcrumbs__list-item qpp-c-breadcrumbs__list-item--current"
+                className={`${
+                  i === crumbs.length - 1 ? 'sr-only' : ''
+                } qpp-c-breadcrumbs__list-itemqpp-c-breadcrumbs__list-item--current`}
                 aria-current="page"
               >
-                <span className={i === crumbs.length - 1 ? 'sr-only' : ''}>
-                  {crumb}
-                </span>
+                <span>{crumb}</span>
               </li>
             );
           }

package/components/Button/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const VARIANTS = ['secondary', 'outline', 'danger', 'white']
-const SIZES = ['big']
+const VARIANTS = ['secondary', 'outline', 'danger', 'white'];
+const SIZES = ['big'];
 
 const Button = ({
   children,
@@ -12,6 +12,8 @@ const Button = ({
   onClick,
   size,
   variant,
+  type,
+  ...rest
 }) => {
   let btnClass = 'qpp-c-button';
 
@@ -27,7 +29,12 @@ const Button = ({
 
   if (href) {
     return (
-      <a href={href} data-testid="ds-btn" className={btnClass || ''}>
+      <a
+        href={href}
+        data-testid="ds-btn"
+        className={btnClass || ''}
+        onClick={onClick}
+      >
         {children}
       </a>
     );
@@ -38,6 +45,8 @@ const Button = ({
       className={btnClass || ''}
       onClick={onClick}
       disabled={loading}
+      type={type}
+      {...rest}
     >
       {children}
     </button>
@@ -51,6 +60,7 @@ Button.propTypes = {
   loading: PropTypes.bool,
   onClick: PropTypes.func,
   size: PropTypes.oneOf(SIZES),
+  type: PropTypes.string,
   variant: PropTypes.oneOf(VARIANTS),
 };
 
@@ -61,19 +71,20 @@ Button.defaultProps = {
   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;

package/components/Card/index.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FeatherIcon from 'feather-icons-react';
+
+const Card = ({
+  children,
+  className,
+  cta,
+  description,
+  eyebrow,
+  img,
+  parentTag,
+  responsive,
+  routerComponent,
+  size,
+  title,
+  variant,
+}) => {
+  const classes = [
+    'qppds',
+    'qpp-c-card',
+    size && `qpp-c-card--${size}`,
+    img && 'qpp-c-card--image',
+    variant === 'flag' && responsive && 'qpp-c-xs-card--flag',
+    variant === 'flag' && !responsive && 'qpp-c-card--flag',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const Container = parentTag || 'div';
+  const HeadingComponent = title?.headingLevel || 'h3';
+  const LinkComponent = routerComponent || 'a';
+
+  return (
+    <Container className={classes}>
+      <div className="qpp-c-card__content">
+        <div className="qpp-c-card__header">
+          {title && (
+            <HeadingComponent className="h3 qpp-c-card__title">
+              {typeof title === 'object' ? title.text : title}
+            </HeadingComponent>
+          )}
+          {eyebrow && <span className="l2 qpp-c-card__eyebrow">{eyebrow}</span>}
+        </div>
+        {description && (
+          <div className="qpp-c-card__body">
+            <p className="p1">{description}</p>
+          </div>
+        )}
+        {children && <div className="qpp-c-card__body">{children}</div>}
+        {cta && (
+          <div className="qpp-c-card__cta">
+            {React.isValidElement(cta) ? (
+              cta
+            ) : (
+              <LinkComponent
+                href={cta.href}
+                className="qpp-c-button qpp-c-button--text qpp-c-button--icon-after"
+                {...cta}
+              >
+                {cta.text} <FeatherIcon icon={cta.icon || 'chevron-right'} />
+              </LinkComponent>
+            )}
+          </div>
+        )}
+      </div>
+      {img &&
+        (() => {
+          const { useBgImage, url, alt, ...restImg } = img;
+          return (
+            <div className="qpp-c-card__media">
+              {useBgImage ? (
+                <div
+                  role="img"
+                  style={{ backgroundImage: `url(${url})` }}
+                  aria-label={alt}
+                  {...restImg}
+                />
+              ) : (
+                <img src={url} alt={alt} {...restImg} />
+              )}
+            </div>
+          );
+        })()}
+    </Container>
+  );
+};
+
+Card.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  cta: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.shape({
+      href: PropTypes.string,
+      text: PropTypes.string,
+      icon: PropTypes.string,
+    }),
+  ]),
+  description: PropTypes.string,
+  eyebrow: PropTypes.string,
+  img: PropTypes.shape({
+    url: PropTypes.string,
+    alt: PropTypes.string,
+    useBgImage: PropTypes.bool,
+  }),
+  parentTag: PropTypes.string,
+  responsive: PropTypes.bool,
+  routerComponent: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  title: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      text: PropTypes.string,
+      headingLevel: PropTypes.string,
+    }),
+  ]),
+  variant: PropTypes.oneOf(['default', 'flag']),
+};
+
+Card.defaultProps = {
+  children: null,
+  className: null,
+  cta: null,
+  description: null,
+  eyebrow: null,
+  img: null,
+  parentTag: null,
+  responsive: false,
+  routerComponent: null,
+  size: null,
+  title: null,
+  variant: 'default',
+};
+
+export default Card;

package/components/Details/DetailsIcons.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Add = ({ iconText }) => (
+  <>
+    <svg
+      className="qpp-c-details--icon-closed qpp-icon-mat qpp-icon-inline--md"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      focusable="false"
+    >
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+    </svg>{' '}
+    {iconText}
+  </>
+);
+
+Add.propTypes = {
+  iconText: PropTypes.string,
+};
+
+Add.defaultProps = {
+  iconText: null,
+};
+
+export const Remove = ({ iconText }) => (
+  <>
+    <svg
+      className="qpp-c-details--icon-open qpp-icon-mat qpp-icon-inline--md"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      focusable="false"
+    >
+      <path d="M19 13H5v-2h14v2z" />
+    </svg>
+    {iconText}
+  </>
+);
+
+Remove.propTypes = {
+  iconText: PropTypes.string,
+};
+
+Remove.defaultProps = {
+  iconText: null,
+};