qpp-style 1.3.3 → 1.4.0-rm.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/.husky/pre-commit

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

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

@@ -1,57 +1,42 @@
-# qpp-style
-Shared style guide across the QPP program. 
+# QPP-Style React
 
-This repository houses `qpp-style`, a shared style guide/library for the QPP program. `qpp-style` was built on top of bootstrap.
+This directory contains react implementations of the components for QPP.
 
-The purpose of `qpp-style` is to provide assets such as CSS, SCSS, JS, images and fonts to design a site with the visual style of `qpp.cms.gov`. This allows multiple sites built in separate repositories and with different languages to share a global style without repeating styling code. The qpp-style library is primarily distributed on the node/npm ecosystem.
+A storybook with examples is published at [https://cmsgov.github.io/qpp-style](https://cmsgov.github.io/qpp-style)
 
-## Install and Use
-### node/npm
+## 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:
 
-The best way to install qpp-style is with the node package manager or [npm](https://www.npmjs.com/). If you haven't already cloned the `qpp-style` [repository](https://github.com/CMSgov/qpp-style), run the following command on a computer with node/npm installed to install qpp-style into your project.
+```bash
+cd qpp-style/react
+npm version --no-git-tag-version patch
 ```
-npm install --save-dev CMSgov/qpp-style
+
+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}
 ```
-Once installed, all the assets from `qpp-style` need to be consumed by your project. The simplest way to to this is by copying over the relevant assets with build commands and include them from the html with link tags. For example:
-
-1. Build all assets that came with the module:
-    ```sh
-    $ pushd .
-    $ cd ./node_modules/qpp-style
-    $ npm install
-    $ npm start
-    ```
-1. Copy assets to project directory:
-    ```sh
-    $ popd
-    $ mkdir -p public
-    $ cp -r ./node_modules/qpp-style/build/* public 
-    ```
-1. Create webpage:
-    ```sh
-    $ touch public/index.html
-    ```
-1. Link to css in html:
-    ```html
-    <html lang="en">
-        <head>
-            <link href="/css/qpp-style.css" type="text/css" rel="stylesheet" />
-        </head>
-        <body>
-            <h1>QPP Quality Payment Program</h1>
-        </body>
-    </html>
-    ```
-
-Another way to use the style is by importing the sass into your project. This can be done in the following way:
-
-1. Copy the fonts to `/fonts`:
-    ```sh
-    $ mkdir -p fonts
-    $ cp -r ./node_modules/qpp-style/fonts/* fonts
-    ```
-
-1. Create a `.scss` file and adding this line:
-```scss
-@import "../node_modules/qpp-style/styles/qpp_style";
+
+## 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/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,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/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';