qpp-style 1.2.0-rm.1 → 1.3.0-rm.1

package/README.md

@@ -3,3 +3,40 @@
 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)
+
+## 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/Breadcrumb/Breadcrumb.stories.js

@@ -32,6 +32,24 @@ export const ExampleLightBreadcrumb = () => (
 
 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

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/Dropdown/Dropdown.stories.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import Dropdown from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Dropdown',
+  component: Dropdown,
+  decorators: [withKnobs],
+};
+
+export const DropdownField = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    options={[
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+      { name: 'Name 3', value: 'Value 3' },
+    ]}
+  />
+);
+
+export const DropdownFieldAutoWidth = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    className="qpp-u-width--auto"
+    options={[
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+      { name: 'Name 3', value: 'Value 3' },
+    ]}
+  />
+);
+
+export const DisabledDropdown = () => (
+  <Dropdown
+    disabled
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    options={[
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+      { name: 'Name 3', value: 'Value 3' },
+    ]}
+  />
+);
+
+export const DropdownBigVariant = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    size="big"
+    options={[
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+      { name: 'Name 3', value: 'Value 3' },
+    ]}
+  />
+);
+
+export const DropdownWithDisabledOption = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    options={[
+      { disabled: true, name: 'Select Category', value: 'default' },
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+    ]}
+  />
+);
+
+export const DropdownUsingChildrenProp = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+  >
+    <option value="Value 1">Name 1</option>
+    <option value="Value 2">Name 2</option>
+  </Dropdown>
+);

package/components/Dropdown/index.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Dropdown = ({
+  className,
+  id,
+  ariaLabelledBy,
+  ariaLabel,
+  onChange,
+  dataTestId,
+  name,
+  dataType,
+  disabled,
+  size,
+  options,
+  children,
+  parentElement,
+  ...rest
+}) => {
+  const dropdownClass = [
+    'qpp-c-dropdown',
+    size === 'big' && 'qpp-c-dropdown--big',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <select
+      id={id}
+      aria-labelledby={ariaLabelledBy}
+      aria-label={ariaLabel}
+      className={dropdownClass || ''}
+      onChange={onChange}
+      data-testid={dataTestId}
+      name={name}
+      disabled={disabled}
+      data-type={dataType}
+      {...rest}
+    >
+      {children}
+      {options.map(({ disabled, name, value }) => (
+        <option disabled={disabled} key={value} value={value}>
+          {name}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+Dropdown.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  ariaLabelledBy: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  dataTestId: PropTypes.string,
+  name: PropTypes.string,
+  dataType: PropTypes.string,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['big']),
+  options: PropTypes.array,
+  parentElement: PropTypes.string,
+};
+
+Dropdown.defaultProps = {
+  children: false,
+  className: 'qpp-u-width--100',
+  id: null,
+  ariaLabelledBy: null,
+  ariaLabel: null,
+  onChange: () => null,
+  dataTestId: null,
+  name: null,
+  dataType: null,
+  disabled: false,
+  size: null,
+  options: [],
+  parentElement: 'span',
+};
+
+export default Dropdown;

package/components/DropdownButton/DropdownButton.stories.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import DropdownButton from './index';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'DropdownButton',
+  component: DropdownButton,
+  decorators: [withKnobs],
+};
+
+// mat-ui v4 doesn't include this "FileDownload" icon, but mat-ui v5 does
+// whenever we update to v5, we could replace this svg with the one from npm
+const DownloadIcon = (...props) => (
+  <SvgIcon {...props}>
+    <path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z" />
+  </SvgIcon>
+);
+
+export const BasicExample = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-1"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        {
+          value: 'option 1',
+        },
+        { value: 'option 2', name: 'Name of Option 2' },
+      ]}
+      loading={boolean('loading', false)}
+    />
+  </div>
+);
+
+/*
+Dropdown menu headers were removed from designs for now.  We may revisit this
+in the future so we're leaving this here until we decide on design.
+*/
+// export const WithHeader = () => (
+//   <div className="qpp-u-padding--48">
+//     <DropdownButton
+//       menuId="example-menu-2"
+//       ariaLabel="aria label example"
+//       buttonLabel="Test"
+//       options={[
+//         {
+//           value: 'option 1',
+//         },
+//         { value: 'option 2', name: 'Name of Option 2' },
+//       ]}
+//       header="Header"
+//     />
+//   </div>
+// );
+
+export const Loading = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-3"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        {
+          value: 'option 1',
+        },
+        { value: 'option 2', name: 'Name of Option 2' },
+      ]}
+      loading
+    />
+  </div>
+);
+
+export const MaxHeight = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-3"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        { value: 'option 1' },
+        { value: 'option 2' },
+        { value: 'option 3' },
+        { value: 'option 4' },
+        { value: 'option 5' },
+        { value: 'option 6' },
+        { value: 'option 7' },
+        { value: 'option 8' },
+        { value: 'option 9' },
+      ]}
+      loading={boolean('loading', false)}
+    />
+  </div>
+);
+
+export const MaxWidth = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-1"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        { value: 'option 1' },
+        {
+          value: 'option 2',
+          name: 'very long item text 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24',
+        },
+      ]}
+      loading={boolean('loading', false)}
+    />
+  </div>
+);
+
+export const ItemsWithIcons = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-1"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        {
+          value: 'option 1',
+          Icon: DownloadIcon,
+          'aria-roledescription': 'Download file',
+        },
+        {
+          value: 'option 2',
+          name: 'very long item text 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24',
+          Icon: DownloadIcon,
+          'aria-roledescription': 'Download file',
+        },
+      ]}
+      loading={boolean('loading', false)}
+    />
+  </div>
+);

package/components/DropdownButton/index.js

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import MuiMenu from '@material-ui/core/Menu';
+import MuiMenuItem from '@material-ui/core/MenuItem';
+import MuiProgressCircle from '@material-ui/core/CircularProgress';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import Button, { TextButton } from '../Button';
+
+const ITEM_HEIGHT = 48;
+
+const DropdownButton = ({
+  text = false,
+  loading = false,
+  options = [],
+  menuId,
+  buttonLabel,
+  header,
+  children,
+  ...buttonProps
+}) => {
+  const Btn = text ? TextButton : Button;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Btn
+        aria-haspopup="true"
+        aria-controls={menuId}
+        onClick={handleClick}
+        {...buttonProps}
+      >
+        {buttonLabel}{' '}
+        {!anchorEl && (
+          <ExpandMore classes={{ root: 'qpp-icon-mat qpp-icon-inline--lg' }} />
+        )}
+        {anchorEl && (
+          <ExpandLess classes={{ root: 'qpp-icon-mat qpp-icon-inline--lg' }} />
+        )}
+      </Btn>
+      <MuiMenu
+        id={menuId}
+        keepMounted
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        getContentAnchorEl={null}
+        anchorOrigin={{
+          vertical: 'bottom',
+        }}
+        className="qpp-c-dropdown-menu"
+        classes={{
+          paper: 'qpp-c-dropdown-menu__box',
+          list: 'qpp-c-dropdown-menu__list',
+        }}
+        MenuListProps={{
+          ['aria-labelledby']: header ? `${menuId}-header` : null,
+        }}
+        PaperProps={{
+          style: {
+            maxHeight: ITEM_HEIGHT * 5.5,
+            maxWidth: '400px',
+          },
+        }}
+      >
+        {header && (
+          <MuiMenuItem
+            id={`${menuId}-header`}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            classes={{
+              root: 'qpp-c-dropdown-menu__item qpp-c-dropdown-menu__item--header',
+            }}
+            disabled
+            aria-hidden
+            role="presentation"
+            disableRipple
+          >
+            {header}
+          </MuiMenuItem>
+        )}
+        {loading && (
+          <MuiMenuItem
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            classes={{
+              root: 'qpp-c-dropdown-menu__item qpp-c-dropdown-menu__item--loading',
+            }}
+            disableRipple
+            disabled
+          >
+            <MuiProgressCircle
+              size="1em"
+              color="inherit"
+              classes={{ root: 'qpp-c-dropdown-menu__spinner' }}
+            />{' '}
+            <span role="status">Loading...</span>
+          </MuiMenuItem>
+        )}
+        {!loading &&
+          options.map(({ disabled, name, value, Icon, ...itemProps }) => (
+            <MuiMenuItem
+              disabled={disabled}
+              key={value}
+              value={value}
+              onClick={handleClose}
+              classes={{ root: 'qpp-c-dropdown-menu__item' }}
+              disableRipple
+              {...itemProps}
+            >
+              {Icon && (
+                <div className="qpp-c-dropdown-menu__icon">
+                  <Icon classes={{ root: 'qpp-icon-mat' }} />
+                </div>
+              )}
+              <span>{name || value}</span>
+            </MuiMenuItem>
+          ))}
+      </MuiMenu>
+    </>
+  );
+};
+
+DropdownButton.propTypes = {
+  menuId: PropTypes.string.isRequired,
+  text: PropTypes.bool,
+  buttonLabel: PropTypes.string,
+  loading: PropTypes.bool,
+  options: PropTypes.arrayOf(PropTypes.object),
+  header: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
+};
+
+export default DropdownButton;

package/components/Footer/Footer.stories.js

@@ -12,8 +12,8 @@ export const ExampleFooter = () => (
   <Footer
     isFullWidth={boolean('isFullWidth', false)}
     buildVersion={text('buildVersion', 'BUILD VERSION')}
-    isNewFooter={boolean('isNewFooter', false)}
-    showHcdResearch={boolean('showHcdResearch', false)}
+    isNewFooter={boolean('isNewFooter', true)}
+    showHcdResearch={boolean('showHcdResearch', true)}
   />
 );