qpp-style 9.20.6 → 9.21.0

package/components/DropdownButton/DropdownButton.stories.js

@@ -2,6 +2,7 @@ import React from 'react';
 import MenuButton from './MenuButton';
 import Menu from './Menu';
 import MenuItem from './MenuItem';
+import MenuItemLink from './MenuItemLink';
 import { useMenuState } from 'ariakit/menu';
 import Download from '@material-design-icons/svg/outlined/file_download.svg';
 
@@ -11,7 +12,7 @@ export default {
 };
 
 export function BasicExample() {
-  const menu = useMenuState({ gutter: 8 });
+  const menu = useMenuState({ gutter: 0 });
   const basicEx = ['option 1', 'Name of Option 2'];
 
   return (
@@ -19,7 +20,28 @@ export function BasicExample() {
       <MenuButton state={menu}>Test</MenuButton>
       <Menu state={menu}>
         {basicEx.map((item, i) => (
-          <MenuItem key={i}>{item}</MenuItem>
+          <MenuItem key={i}>
+            <span>{item}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export function LinkExample() {
+  const menu = useMenuState({ gutter: 0 });
+  const basicEx = ['link 1', 'link 2'];
+
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {basicEx.map((item, i) => (
+          <MenuItemLink key={i} href="#">
+            {/* if using react-router, you can use `<MenuItemLink as={Link} to={path} ...>`  insead} */}
+            <span>{item}</span>
+          </MenuItemLink>
         ))}
       </Menu>
     </div>
@@ -27,7 +49,7 @@ export function BasicExample() {
 }
 
 export function MaxHeight() {
-  const menu = useMenuState({ gutter: 8 });
+  const menu = useMenuState({ gutter: 0 });
   const maxHeightEx = [
     'option 1',
     'option 2',
@@ -46,7 +68,9 @@ export function MaxHeight() {
       <MenuButton state={menu}>Test</MenuButton>
       <Menu state={menu}>
         {maxHeightEx.map((item, i) => (
-          <MenuItem key={i}>{item}</MenuItem>
+          <MenuItem key={i}>
+            <span>{item}</span>
+          </MenuItem>
         ))}
       </Menu>
     </div>
@@ -54,19 +78,20 @@ export function MaxHeight() {
 }
 
 export function MaxWidth() {
-  const menu = useMenuState({ gutter: 8 });
+  const menu = useMenuState({ gutter: 0 });
   const maxWidthtEx = [
     'option 1',
     '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',
   ];
-  const maxContentLength = 57;
 
   return (
     <div className="qpp-u-padding--48">
       <MenuButton state={menu}>Test</MenuButton>
       <Menu state={menu}>
         {maxWidthtEx.map((item, i) => (
-          <MenuItem key={i}>{`${item.slice(0, maxContentLength)}...`}</MenuItem>
+          <MenuItem key={i}>
+            <span>{item}</span>
+          </MenuItem>
         ))}
       </Menu>
     </div>
@@ -74,22 +99,26 @@ export function MaxWidth() {
 }
 
 export function ItemsWithIcons() {
-  const menu = useMenuState({ gutter: 8 });
+  const menu = useMenuState({ gutter: 0 });
   const maxWidthtEx = [
     'option 1',
     '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',
   ];
 
-  const maxContentLengthWithIcon = 53;
-
   return (
     <div className="qpp-u-padding--48">
       <MenuButton state={menu}>Test</MenuButton>
       <Menu state={menu}>
         {maxWidthtEx.map((item, i) => (
           <MenuItem key={i}>
-            <Download />
-            {`${item.slice(0, maxContentLengthWithIcon)}...`}
+            <div className="qpp-c-dropdown-menu__icon">
+              <Download
+                className="qpp-icon-mat qpp-icon-inline--lg"
+                focusable="false"
+                aria-hidden="true"
+              />
+            </div>
+            <span>{item}</span>
           </MenuItem>
         ))}
       </Menu>

package/components/DropdownButton/Menu.js

@@ -4,15 +4,8 @@ import { Menu as AriaKitMenu } from 'ariakit/menu';
 
 function Menu({ state, className, children, ...props }) {
   return (
-    <AriaKitMenu state={state} className={className} {...props}>
-      <div className="qpp-c-dropdown-menu__box">
-        <ul
-          className="qpp-c-dropdown-menu__list"
-          style={{ maxHeight: '264px', maxWidth: '400px' }} // temp. => to Sass
-        >
-          {children}
-        </ul>
-      </div>
+    <AriaKitMenu as="ul" state={state} className={className} {...props}>
+      {children}
     </AriaKitMenu>
   );
 }
@@ -24,7 +17,8 @@ Menu.propTypes = {
 };
 
 Menu.defaultProps = {
-  className: 'qpp-c-dropdown-menu',
+  className:
+    'qpp-c-dropdown-menu qpp-c-dropdown-menu__box qpp-c-dropdown-menu__list',
   children: null,
 };
 

package/components/DropdownButton/MenuItemLink.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuItem as AriaKitMenuItem } from 'ariakit/menu';
+
+function MenuItemLink({ as, className, children, ...props }) {
+  return (
+    <li role="none">
+      <AriaKitMenuItem as={as} className={className} {...props}>
+        {children}
+      </AriaKitMenuItem>
+    </li>
+  );
+}
+
+MenuItemLink.propTypes = {
+  as: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+MenuItemLink.defaultProps = {
+  as: 'a',
+  className: 'qpp-c-dropdown-menu__item',
+  children: null,
+};
+
+export default MenuItemLink;

package/components/SideNav/helpers.js

@@ -83,7 +83,7 @@ const getIcon = (url, linkLabel) => {
     '/reviewer/exception': HardshipIcon,
     '/reviewer/targeted-review': TargetIcon,
     '/self-nomination': IndividualReporting,
-    '/cases/needs-review': FacilityBasedPreviewIcon,
+    '/case-management': FacilityBasedPreviewIcon,
     [contentMgrDashboardUrl]: AccountHomeIcon,
     'Manage Documents': ManageDocumentsIcon,
     'Author Content': AuthorContentIcon,