qpp-style 9.20.5 → 9.20.6

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,98 @@
 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 { 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: 8 });
+  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}>{item}</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 MaxHeight() {
+  const menu = useMenuState({ gutter: 8 });
+  const maxHeightEx = [
+    'option 1',
+    'option 2',
+    'option 3',
+    'option 4',
+    'option 5',
+    'option 6',
+    'option 7',
+    'option 8',
+    'option 9',
+    'option 10',
+  ];
 
-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}>
+        {maxHeightEx.map((item, i) => (
+          <MenuItem key={i}>{item}</MenuItem>
+        ))}
+      </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 MaxWidth() {
+  const menu = useMenuState({ gutter: 8 });
+  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;
 
-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}>
+        {maxWidthtEx.map((item, i) => (
+          <MenuItem key={i}>{`${item.slice(0, maxContentLength)}...`}</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 ItemsWithIcons() {
+  const menu = useMenuState({ gutter: 8 });
+  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)}...`}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}

package/components/DropdownButton/Menu.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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>
+  );
+}
+
+Menu.propTypes = {
+  state: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+Menu.defaultProps = {
+  className: 'qpp-c-dropdown-menu',
+  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;