qpp-style 9.20.5 → 9.21.0

package/.storybook/main.js

@@ -59,29 +59,12 @@ module.exports = {
         },
       ],
     });
+
     config.module.rules.push({
-      test: /\.svg$/,
-      type: 'asset/source',
-      use: {
-        loader: 'svgo-loader',
-        options: {
-          plugins: [
-            {
-              removeTitle: true,
-            },
-            {
-              convertColors: {
-                shorthex: false,
-              },
-            },
-            {
-              convertPathData: false,
-            },
-          ],
-        },
-      },
-    }); // Modify default storybook SVG loader so we can use the one expected by qpp-style
-    // NOTE: When updating storybook dependency, double check this override.
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ['@svgr/webpack'],
+    });
 
     const staticAssetLoader = config.module.rules.find((rule) => {
       const regExp = rule.test;

package/components/DropdownButton/DropdownButton.stories.js

@@ -1,137 +1,127 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import DropdownButton from './index';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+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';
 
 export default {
   title: 'DropdownButton',
-  component: DropdownButton,
-  decorators: [withKnobs],
+  component: MenuButton,
 };
 
-// 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 function BasicExample() {
+  const menu = useMenuState({ gutter: 0 });
+  const basicEx = ['option 1', 'Name of Option 2'];
 
-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>
-);
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {basicEx.map((item, i) => (
+          <MenuItem key={i}>
+            <span>{item}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </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 function LinkExample() {
+  const menu = useMenuState({ gutter: 0 });
+  const basicEx = ['link 1', 'link 2'];
 
-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>
-);
+  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>
+  );
+}
 
-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 function MaxHeight() {
+  const menu = useMenuState({ gutter: 0 });
+  const maxHeightEx = [
+    'option 1',
+    'option 2',
+    'option 3',
+    'option 4',
+    'option 5',
+    'option 6',
+    'option 7',
+    'option 8',
+    'option 9',
+    'option 10',
+  ];
 
-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>
-);
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {maxHeightEx.map((item, i) => (
+          <MenuItem key={i}>
+            <span>{item}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </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>
-);
+export function MaxWidth() {
+  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',
+  ];
+
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {maxWidthtEx.map((item, i) => (
+          <MenuItem key={i}>
+            <span>{item}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export function ItemsWithIcons() {
+  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',
+  ];
+
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {maxWidthtEx.map((item, i) => (
+          <MenuItem key={i}>
+            <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>
+    </div>
+  );
+}

package/components/DropdownButton/Menu.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Menu as AriaKitMenu } from 'ariakit/menu';
+
+function Menu({ state, className, children, ...props }) {
+  return (
+    <AriaKitMenu as="ul" state={state} className={className} {...props}>
+      {children}
+    </AriaKitMenu>
+  );
+}
+
+Menu.propTypes = {
+  state: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+Menu.defaultProps = {
+  className:
+    'qpp-c-dropdown-menu qpp-c-dropdown-menu__box qpp-c-dropdown-menu__list',
+  children: null,
+};
+
+export default Menu;

package/components/DropdownButton/MenuButton.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuButton as AriaKitButton } from 'ariakit/menu';
+
+function MenuButton({ state, className, iconExist, children, ...props }) {
+  const dropDownIsOpen = state.open;
+
+  const CheveronUpIcon = 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z';
+  const CheveronDownIcon = 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z';
+
+  return (
+    <AriaKitButton state={state} className={className} {...props}>
+      {children}{' '}
+      {iconExist && (
+        <svg
+          className="qpp-icon-mat qpp-icon-inline--lg"
+          focusable="false"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path d={dropDownIsOpen ? CheveronUpIcon : CheveronDownIcon} />
+        </svg>
+      )}
+    </AriaKitButton>
+  );
+}
+
+MenuButton.propTypes = {
+  state: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  iconExist: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+MenuButton.defaultProps = {
+  className: 'qpp-c-button',
+  iconExist: true,
+  children: null,
+};
+
+export default MenuButton;

package/components/DropdownButton/MenuItem.js

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

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,