qpp-style 9.6.8 → 9.6.12

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: `

package/components/SideNav/UI/SideNavUI.jsx

@@ -171,6 +171,7 @@ const SideNavUI = ({
               listOfLinks={item.items}
               url={item.url}
               sidebarExpand={expand}
+              isHighlighted={item.isHighlighted}
             />
           ),
           custom: (

package/components/Tabs/Tab.js

@@ -1,66 +1,26 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import MuiTab from '@material-ui/core/Tab';
 
-const Tab = ({
-  children,
-  disabled,
-  id,
-  href,
-  onClick,
-  onKeyDown,
-  panelId,
-  selected,
-  className,
-}) => {
-  const defaultClassName = 'qpp-c-tabs__item';
-  const tabRef = useRef(panelId || null);
-  const tabHref = href || `#${panelId}`;
-
-  const handleClick = (e) => {
-    if (onClick) {
-      onClick(e, panelId, id, tabHref);
-    }
-  };
-
-  const sharedProps = {
-    className: className
-      ? defaultClassName.concat(` ${className}`)
-      : defaultClassName,
-    ref: tabRef,
-    role: 'tab',
-    id,
-  };
-
-  if (!disabled) {
-    return (
-      <a
-        aria-selected={String(selected)}
-        aria-controls={panelId}
-        href={tabHref}
-        onClick={handleClick}
-        {...sharedProps}
-      >
-        {children}
-      </a>
-    );
-  } else {
-    return (
-      <span aria-disabled="true" {...sharedProps}>
-        {children}
-      </span>
-    );
-  }
+const Tab = ({ href, ...rest }) => {
+  return (
+    <MuiTab
+      component="a"
+      disableRipple
+      onClick={(e) => {
+        e.preventDefault();
+        if (window.history && href) {
+          window.history.replaceState({}, document.title, href);
+        }
+      }}
+      className="qpp-c-tabs__item"
+      {...rest}
+    />
+  );
 };
 
 Tab.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  disabled: PropTypes.bool,
   href: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  panelId: PropTypes.string.isRequired,
-  selected: PropTypes.bool,
 };
 
-export default Tab;
+export default Tab

package/components/Tabs/TabPanel.js

@@ -1,20 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const TabPanel = ({ children, selected, tabId, disabled, id, className }) => {
-  const defaultClassName = 'qpp-c-tabs__panel';
+export const TabPanel = ({ children, value, id, index, className, disabled }) => {
+  const classes = ['qpp-c-tabs__panel', className].filter(Boolean).join(' ');
   return (
     <div
-      className={
-        className ? defaultClassName.concat(` ${className}`) : defaultClassName
-      }
-      aria-labelledby={tabId}
-      aria-hidden={String(!selected)}
-      aria-disabled={String(!!disabled)}
-      id={id}
       role="tabpanel"
+      id={id}
+      aria-hidden={value !== index}
+      aria-labelledby={`qpp-c-tabs__item--${id}`}
+      aria-disabled={disabled}
+      className={classes}
     >
-      {children}
+      {value === index && children}
     </div>
   );
 };
@@ -22,19 +20,15 @@ const TabPanel = ({ children, selected, tabId, disabled, id, className }) => {
 TabPanel.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
+  index: PropTypes.number.isRequired,
   id: PropTypes.string,
-  selected: PropTypes.bool,
-  tabId: PropTypes.string,
+  value: PropTypes.number.isRequired,
+  disabled: PropTypes.bool,
 };
 
 TabPanel.defaultProps = {
-  children: null,
-  className: null,
-  disabled: false,
-  id: null,
-  selected: false,
-  tabId: null,
+  index: 0,
+  value: 0,
 };
 
 export default TabPanel;

package/components/Tabs/Tabs.stories.js

@@ -89,7 +89,7 @@ export const ControlledTabs = () => {
   const [selectedId, setSelectedId] = useState('preamble');
   return (
     <div className="qpp-u-padding--12">
-      <Tabs selected={selectedId} onClick={(id) => setSelectedId(id)}>
+      <Tabs selected={selectedId} onChange={(id) => setSelectedId(id)}>
         <TabPanel id="summary" tab="Summary" className="my-summary-class">
           The Bill of Rights is the first ten amendments to the United States
           Constitution.

package/components/Tabs/index.js

@@ -1,114 +1,73 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import MuiTabs from '@material-ui/core/Tabs';
 
-import TabPanel from './TabPanel';
-import Tab from './Tab';
+import TabPanel from './TabPanel'
+import LinkTab from './Tab'
 
-function isTabPanel(child) {
-  return child && child.type === TabPanel;
-}
+const isTabPanel = (child) => child?.type === TabPanel
 
-function getDefaultSelectedId(children) {
-  let selectedId;
-  React.Children.forEach(children, function (child) {
-    if (isTabPanel(child) && !selectedId) {
-      selectedId = child.props.id;
-    }
-  });
-  return selectedId;
-}
+const getPanelChildren = (children) => {
+  return React.Children.toArray(children).filter(isTabPanel);
+};
 
-const Tabs = ({
-  children,
-  defaultSelectedId,
-  onChange,
-  onClick,
-  onTabKeyDown,
-  selected,
-}) => {
-  const [selectedId, setSelectedId] = useState(
-    defaultSelectedId || getDefaultSelectedId(children)
-  );
+const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) => {
+  const [tabList, setTabList] = useState([]);
+  const [value, setValue] = useState(defaultSelectedId || selected);
 
-  const handleTabClick = (evt, panelId) => {
-    evt.preventDefault();
-    if (!selected) {
-      setSelectedId(panelId);
-    } else {
-      onClick(panelId);
+  const handleChange = (event, newValue) => {
+    if (onChange) {
+      onChange(tabList[newValue]?.id, event);
+    }
+    if (setValue) {
+      setValue(tabList[newValue]?.id);
     }
-  };
-
-  const panelTabId = (panel) => {
-    return panel.props.tabId || `qpp-c-tabs__item--${panel.props.id}`;
-  };
-
-  const getPanelChildren = () => {
-    return React.Children.toArray(children).filter(isTabPanel);
   };
 
   const renderChildren = () => {
-    return React.Children.map(children, (child) => {
+    return React.Children.map(children, (child, index) => {
       if (isTabPanel(child)) {
-        return React.cloneElement(child, {
-          selected: selected
-            ? selected === child.props.id
-            : selectedId === child.props.id,
-          tab: undefined,
-          tabHref: undefined,
-          tabId: panelTabId(child),
-        });
+        return React.cloneElement(child, { index, value: tabIndex })
       }
-
       return child;
     });
   };
 
-  const panels = getPanelChildren();
-
   useEffect(() => {
-    if (!selected) {
-      onChange(selectedId);
-    } else {
-      onChange(selected);
-    }
-    const targetPanel = panels.find((tabPanel) =>
-      selected
-        ? selected === tabPanel.props.id
-        : selectedId === tabPanel.props.id
+    const panels = getPanelChildren(children);
+    const tabs = panels.map(
+      (panel) => {
+        const { id, tab, tabHref, disabled } = panel?.props || {};
+        return { tab, tabHref, disabled, id };
+      },
     );
-    if (targetPanel && window.history) {
-      window.history.replaceState(
-        {},
-        document.title,
-        targetPanel.props.tabHref
-      );
+    setTabList(tabs);
+  }, []);
+
+  useEffect(() => {
+    if (selected) {
+      setValue(selected);
     }
-  }, [selected, selectedId]);
+  }, [selected]);
+
+  const foundIndex = tabList.findIndex(({ id }) => id === value);
+  const tabIndex = foundIndex >= 0 ? foundIndex : 0
 
   return (
     <>
-      <div className="qpp-c-tabs" role="tablist" aria-label="Tab list">
-        {panels.map((panel) => {
-          return (
-            <Tab
-              href={panel.props.tabHref}
-              disabled={panel.props.disabled}
-              id={panelTabId(panel)}
-              key={panel.key}
-              onClick={handleTabClick}
-              panelId={panel.props.id}
-              selected={
-                selected
-                  ? selected === panel.props.id
-                  : selectedId === panel.props.id
-              }
-              className={panel.props.className}
-            >
-              {panel.props.tab}
-            </Tab>
-          );
-        })}
+      <div className="qpp-c-tabs qpp-c-tabs--mui">
+        <MuiTabs value={tabIndex} onChange={handleChange} aria-label={ariaLabel}>
+          {tabList.map(({ tab, tabHref, disabled, id }, index) => (
+            <LinkTab
+              index={index}
+              key={`link-tab-${tab}`}
+              label={tab}
+              href={tabHref}
+              disabled={disabled}
+              id={`qpp-c-tabs__item--${id}`}
+            />
+          ))}
+        </MuiTabs>
       </div>
       {renderChildren()}
     </>
@@ -116,20 +75,19 @@ const Tabs = ({
 };
 
 Tabs.propTypes = {
-  children: PropTypes.node.isRequired,
+  ariaLabel: PropTypes.string,
+  selected: PropTypes.string,
   defaultSelectedId: PropTypes.string,
   onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  onTabKeyDown: PropTypes.func,
-  selected: PropTypes.string,
+  children: PropTypes.node,
 };
 
 Tabs.defaultProps = {
-  defaultSelectedId: null,
-  onChange: () => null,
-  onClick: () => null,
-  onTabKeyDown: () => null,
+  ariaLabel: 'qpp tabs',
   selected: null,
+  defaultSelectedId: null,
+  onChange: null,
+  children: null,
 };
 
 export default Tabs;