qpp-style 9.6.11 → 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: (