qpp-style 9.6.10 → 9.7.0

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/SideNav/Content/LevelTwoContent.jsx

@@ -47,6 +47,7 @@ const LevelTwoContent = ({
     isApmPaymentDetailsPage,
     useTooltips,
     cpcPlusId,
+    pcfId,
   } = {},
 }) => {
   const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
@@ -173,6 +174,7 @@ const LevelTwoContent = ({
           {...(!apmEntityId ? {} : { apmEntityId })}
           {...(!vgId ? {} : { vgId })}
           {...(!cpcPlusId ? {} : { cpcPlusId })}
+          {...(!pcfId ? {} : { pcfId })}
         />
         <hr />
       </AnimationGroup>

package/components/SideNav/Details/PracticeDetails.jsx

@@ -7,10 +7,13 @@ const PracticeDetails = ({
   apmEntityId,
   vgId,
   cpcPlusId,
+  pcfId
 }) => {
   function renderId() {
     if (cpcPlusId) {
       return <p className="practice-tin">CPC+ ID: {cpcPlusId}</p>;
+    } else if (pcfId) {
+      return <p className="practice-tin">PCF ID: {pcfId}</p>;
     } else if (apmEntityId) {
       return <p className="practice-tin">APM Entity ID: {apmEntityId}</p>;
     } else if (vgId) {
@@ -36,6 +39,7 @@ PracticeDetails.propTypes = {
   apmEntityId: PropTypes.string,
   vgId: PropTypes.string,
   cpcPlusId: PropTypes.string,
+  pcfId: PropTypes.string,
 };
 
 export default PracticeDetails;

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -20,6 +20,7 @@ const NavLinkDrawer = ({
   sidebarExpand,
   staticDrawer,
   url,
+  isHighlighted
 }) => {
   const [isOpen, setIsOpen] = useState(openByDefault);
 
@@ -60,6 +61,22 @@ const NavLinkDrawer = ({
   );
   const expandedClass = currentPage ? 'expanded' : '';
 
+  const renderLeftIcon = (leftIcon) => {
+    if (leftIcon) {
+      return (<svg
+        className={`left-icon${isAlwaysOpen ? ' always-open' : ''}`}
+        aria-hidden="true"
+        focusable="false"
+        >
+        {leftIcon}
+        </svg>)
+    }
+  }
+
+  const highlightTitle = (isHighlighted) => {
+    return isHighlighted ? 'highlight' : '';
+  }
+
   useEffect(() => {
     if (disabled) {
       setIsOpen(false);
@@ -130,18 +147,12 @@ const NavLinkDrawer = ({
         {...(isAlwaysOpen || disabled
           ? { disabled: isAlwaysOpen || disabled }
           : {})}
-        className={`${className} ${expandedClass} ${
+        className={`${className} ${expandedClass} ${highlightTitle(isHighlighted)} ${
           currentPage ? 'currentPage' : ''
         }`}
       >
         <div className={isExpanded ? 'link-body' : 'link-body collapsed'}>
-          <svg
-            className={`left-icon${isAlwaysOpen ? ' always-open' : ''}`}
-            aria-hidden="true"
-            focusable="false"
-          >
-            {leftIcon}
-          </svg>
+          {renderLeftIcon(leftIcon)}
           <AnimationGroup display={isExpanded}>
             <span>{label}</span>
           </AnimationGroup>
@@ -188,6 +199,7 @@ NavLinkDrawer.propTypes = {
   staticDrawer: PropTypes.bool,
   items: PropTypes.object,
   url: PropTypes.string,
+  isHighlighted: PropTypes.bool
 };
 
 export default NavLinkDrawer;

package/components/SideNav/SideNav.stories.js

@@ -237,6 +237,35 @@ const demoItems = [
   {
     type: 'divider',
   },
+  {
+    type: 'linkDrawer',
+    isAlwaysOpen: false,
+    label: 'Highlighted Link Drawer No Icon',
+    isHighlighted: true,
+    items: [
+      {
+        type: 'link',
+        className: 'foo',
+        label: 'Link 1',
+        url: 'https://qpp.cms.gov',
+      },
+      {
+        type: 'link',
+        className: 'bar',
+        label: 'Link 2',
+        url: 'https://qpp.cms.gov',
+      },
+      {
+        type: 'link',
+        className: 'baz',
+        label: 'Link 3',
+        url: 'https://qpp.cms.gov',
+      },
+    ],
+  },
+  {
+    type: 'divider',
+  },
   {
     type: 'custom',
     content: `
@@ -318,6 +347,7 @@ export const LevelTwoUsage = () => (
         practiceTin: text('practiceTin', 'PRACTICE_TIN', CONFIG_GROUP_ID),
         apmEntityId: text('apmEntityId', 'APM_ENTITY_ID', CONFIG_GROUP_ID),
         cpcPlusId: text('cpcPlusId', 'CPC_PLUS_ID', CONFIG_GROUP_ID),
+        pcfId: text('pcfId', 'PCF_ID', CONFIG_GROUP_ID),
         vgId: text('vgId', 'VG ID', CONFIG_GROUP_ID),
         roleAbbr: text('roleAbbr', 'ROLE-ABBR', CONFIG_GROUP_ID),
         performanceYear: text(

package/components/SideNav/UI/SideNavUI.jsx

@@ -145,6 +145,7 @@ const SideNavUI = ({
                   : { apmEntityId: item.apmEntityId })}
                 {...(!item.vgId ? {} : { vgId: item.vgId })}
                 {...(!item.cpcPlusId ? {} : { cpcPlusId: item.cpcPlusId })}
+                {...(!item.pcfId ? {} : { pcfId: item.pcfId })}
               />
             </AnimationGroup>
           ),
@@ -171,6 +172,7 @@ const SideNavUI = ({
               listOfLinks={item.items}
               url={item.url}
               sidebarExpand={expand}
+              isHighlighted={item.isHighlighted}
             />
           ),
           custom: (

package/components/index.js

@@ -16,6 +16,7 @@ import Tooltip from './Tooltip';
 import Infotip from './Infotip';
 import Search from './Search';
 import TextInput from './TextInput';
+import Dropdown from './Dropdown';
 import {
   MyApplicationsIcon,
   UserSignInIcon,
@@ -118,5 +119,6 @@ export {
   Tabs,
   TextButton,
   TextInput,
+  Dropdown,
   Tooltip,
 };