@madie/madie-design-system 1.0.0

package/components/Header/HeaderMenuItem.jsx

@@ -0,0 +1,232 @@
+import React, { Fragment, useRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { useWindowWidth, useHeaderState } from './hooks';
+import HeaderMenuLink from './HeaderMenuLink';
+import HeaderMenuButton from './HeaderMenuButton';
+import HeaderMenuSignOutButton from './HeaderMenuSignOutButton';
+import Accordion from '../Accordion';
+import { Chevron } from '../../lib/Chevron.jsx';
+
+const menuSizes = {
+  1: 315,
+  2: 650,
+  3: 890,
+  4: 1200,
+};
+
+const excludedClickOutClasses = [
+  'menu-dropdown-toggle',
+  'nav-link',
+  'nav-link-li',
+  'dropdown-description',
+  'dropdown-title',
+  'dropdown-title-chevron-container',
+  'signout-button',
+  'submenu-section',
+  'accordion',
+  'accordion-title',
+  'accordion-left-title',
+  'header-menu-btn',
+  'btn-navigation-icon',
+];
+
+const HeaderMenuItem = ({
+  handleClick,
+  isMobileMenuExpanded,
+  columns,
+  menuName,
+  rows,
+  name,
+  subtitle,
+  className,
+}) => {
+  const [isSubMenuFullWidth, setSubMenuFullWidth] = useState(false);
+  const [openMobileSubMenu, setOpenMobileSubMenu] = useState('');
+
+  const windowWidth = useWindowWidth();
+  const menuButtonRef = useRef(null);
+  const menuRef = useRef(null);
+  const { RouterLink, handleToggleMenu, currentOpenMenu, closeMenus } =
+    useHeaderState();
+  const numColumns = (columns || []).length;
+
+  const menuIdentifier = menuName || name;
+  const isOpen = menuIdentifier === currentOpenMenu;
+
+  useEffect(() => {
+    const isMobile = windowWidth < 768;
+    if (isOpen) {
+      const shouldSetFullWidth =
+        isMobile ||
+        menuSizes[numColumns] >
+          menuButtonRef.current.getBoundingClientRect().right;
+      setSubMenuFullWidth(shouldSetFullWidth);
+    }
+  }, [windowWidth, isOpen]);
+
+  useEffect(() => {
+    const listener = (event) => {
+      if (
+        !menuRef ||
+        !menuRef.current ||
+        menuRef.current.contains(event.target) ||
+        excludedClickOutClasses.some((className) =>
+          event?.target?.classList.contains(className)
+        )
+      ) {
+        return;
+      }
+      setOpenMobileSubMenu('')
+      closeMenus();
+    };
+    document.addEventListener('mousedown', listener);
+    return () => document.removeEventListener('mousedown', listener);
+  }, [menuRef]);
+
+  useEffect(() => {
+    if (!isMobileMenuExpanded || !isOpen){
+      setOpenMobileSubMenu('')
+    }
+  }, [isMobileMenuExpanded, isOpen])
+
+  return (
+    <li
+      key={`header-item-${menuIdentifier}`}
+      className={`header-item-${menuIdentifier}${
+        isSubMenuFullWidth ? ' full-width-menu' : ''
+      }${className ? ` ${className}` : ''}`}
+      ref={menuRef}
+    >
+      <button
+        ref={menuButtonRef}
+        className="menu-dropdown-toggle"
+        aria-label={`${name} navigation dropdown`}
+        aria-expanded={isOpen}
+        aria-controls={`nav-section-${menuIdentifier}`}
+        data-toggle="dropdown"
+        onClick={() => handleToggleMenu(menuIdentifier)}
+      >
+        <div className="dropdown-title-chevron-container">
+          <span className="dropdown-title">{name}</span>
+          <div className="chevron-container">
+            <Chevron focusable="false" />
+          </div>
+        </div>
+
+        <span className={`dropdown-description ${isOpen ? 'active' : ''}`}>
+          {subtitle}
+        </span>
+      </button>
+      <div
+        className={`nav-section${isOpen ? ' open' : ''}`}
+        id={`nav-section-${menuIdentifier}`}
+        hidden={!isOpen}
+        data-columns={numColumns}
+      >
+        {rows.map((columnContent, index) => {
+          return (
+            <ul key={`${menuIdentifier}-${index}`} className="nav-column">
+              {columnContent.map((c, cIndex) => {
+                return (
+                  <Fragment key={`${menuIdentifier}-${index}-${cIndex}`}>
+                    <li className="submenu-section">
+                      {c.heading && (
+                        <h3 className="submenu-heading">{c.heading}</h3>
+                      )}
+                      <ul>
+                        {c.items.map((item) => {
+                          const isSubLink = item.type === 'sublink';
+                          const componentsByType = {
+                            button: HeaderMenuButton,
+                            signout: HeaderMenuSignOutButton,
+                            link: HeaderMenuLink,
+                            sublink: HeaderMenuLink,
+                          };
+                          const SubMenuComponent = componentsByType[item.type];
+                          return (
+                            <li
+                              onClick={handleClick}
+                              key={`item-link-${item.name}`}
+                              className={isSubLink ? 'nav-link-li sublink' : 'nav-link-li'}
+                            >
+                              <SubMenuComponent
+                                href={item.href}
+                                name={item.name}
+                                RouterLink={RouterLink}
+                              />
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    </li>
+                    {name === 'MIPS' && (
+                      <li
+                        key={`${menuIdentifier}-mobile-${index}-${cIndex}`}
+                        className="submenu-section-mips-mobile"
+                        onClick={() => {
+                          setOpenMobileSubMenu(c.heading);
+                        }}
+                      >
+                        <Accordion
+                          title={c.heading}
+                          isOpen={isMobileMenuExpanded && openMobileSubMenu === c.heading}
+                        >
+                          <ul>
+                            {c.items.map((item) => {
+                              const isSubLink = item.type === 'sublink';
+                              const componentsByType = {
+                                button: HeaderMenuButton,
+                                signout: HeaderMenuSignOutButton,
+                                link: HeaderMenuLink,
+                                sublink: HeaderMenuLink,
+                              };
+                              const SubMenuComponent =
+                                componentsByType[item.type];
+                              return (
+                                <li
+                                  onClick={handleClick}
+                                  key={`item-link-${item.name}`}
+                                  className={isSubLink ? 'sublink' : ''}
+                                >
+                                  <SubMenuComponent
+                                    href={item.href}
+                                    name={item.name}
+                                    RouterLink={RouterLink}
+                                  />
+                                </li>
+                              );
+                            })}
+                          </ul>
+                        </Accordion>
+                      </li>
+                    )}
+                  </Fragment>
+                );
+              })}
+            </ul>
+          );
+        })}
+      </div>
+    </li>
+  );
+};
+
+HeaderMenuItem.propTypes = {
+  columns: PropTypes.array,
+  menuName: PropTypes.string,
+  rows: PropTypes.array,
+  name: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  handleClick: PropTypes.func.isRequired,
+  isMobileMenuExpanded: PropTypes.bool.isRequired,
+};
+HeaderMenuItem.defaultProps = {
+  menuName: '',
+  columns: [],
+  rows: [],
+  className: null,
+};
+
+export default HeaderMenuItem;

package/components/Header/HeaderMenuLink.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { submissionsUrl } from '../SideNav/helpers';
+import { useHeaderState } from './hooks';
+import { setUtagLink } from './utag-helpers';
+
+// exclude submissions urls
+const isNotExcluded = (href) => !href.includes(submissionsUrl);
+
+const HeaderMenuLink = ({ href, name }) => {
+  const { RouterLink, closeMenus } = useHeaderState();
+  if (RouterLink && isNotExcluded(href)) {
+    return (
+      <RouterLink
+        to={href}
+        onClick={() => {
+          closeMenus();
+          setUtagLink('main navbar', 'click', href);
+        }}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+        className="nav-link"
+      >
+        {name}
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      href={href}
+      className="nav-link"
+      data-track-category="TopNav"
+      data-track-action="click"
+      data-track-label={name}
+      onClick={() => {
+        setUtagLink('main navbar', 'click', href);
+      }}
+    >
+      {name}
+    </a>
+  );
+};
+
+HeaderMenuLink.propTypes = {
+  href: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default HeaderMenuLink;

package/components/Header/HeaderMenuSignOutButton.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { LogoutSession } from '../../session';
+import { setUtagLink } from './utag-helpers';
+import Modal from '../Modal/index';
+
+const useModal = () => {
+  const [open, setOpen] = useState(false);
+  const openModal = () => setOpen(true);
+  const closeModal = () => setOpen(false);
+  return [open, openModal, closeModal];
+};
+
+const HeaderMenuSignOutButton = ({ name }) => {
+  const [open, openModal, closeModal] = useModal();
+  const showLogoutWarning = () => {
+    LogoutSession(window);
+  };
+  return (
+    <>
+      <button
+        className="signout-button"
+        aria-label="Sign out"
+        onClick={openModal}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+      >
+        {name}
+      </button>
+      <Modal
+        useDesignSystem
+        isOpen={open}
+        title="Sign out"
+        onRequestClose={closeModal}
+        primary={{
+          title: 'Sign me out now',
+          onClick: () => {
+            showLogoutWarning();
+            setUtagLink('button', 'click', 'Sign me out now');
+          },
+        }}
+        secondary={{
+          title: 'Keep me signed in',
+          onClick: () => {
+            closeModal();
+            setUtagLink('button', 'click', 'Keep me signed in');
+          },
+        }}
+      >
+        <p>Are you sure you want to sign out?</p>
+      </Modal>
+    </>
+  );
+};
+
+HeaderMenuSignOutButton.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default HeaderMenuSignOutButton;

package/components/Header/HeaderMobileButton.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CloseXIcon } from '../../lib/SvgComponents.jsx';
+
+const HeaderMobileButton = ({ isMobileMenuExpanded, handleClick }) => (
+  <button
+    className="mobile-menu-btn-new"
+    type="button"
+    data-toggle="collapse"
+    data-target="#nav-mobile"
+    aria-label="Navigation menu"
+    aria-expanded={isMobileMenuExpanded ? 'true' : 'false'}
+    aria-controls="nav-mobile"
+    onClick={handleClick}
+  >
+    {!isMobileMenuExpanded && (
+      <div className="icon">
+        <span className="icon-bar" />
+        <span className="icon-bar" />
+        <span className="icon-bar" />
+      </div>
+    )}
+    {isMobileMenuExpanded && (
+      <svg className="close-icon" aria-hidden="true">
+        <CloseXIcon />
+      </svg>
+    )}
+    <div className="toggle-text">Menu</div>
+  </button>
+);
+
+HeaderMobileButton.propTypes = {
+  isMobileMenuExpanded: PropTypes.bool.isRequired,
+  handleClick: PropTypes.func.isRequired,
+};
+
+export default HeaderMobileButton;

package/components/Header/HeaderUI.jsx

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import HeaderAccountMenu from './HeaderAccountMenu.jsx';
+import HeaderCancel from './HeaderCancel.jsx';
+import HeaderContainer from './HeaderContainer';
+import HeaderMenuItem from './HeaderMenuItem';
+import HeaderMobileButton from './HeaderMobileButton';
+import ImpersonatorBanner from './ImpersonatorBanner';
+import HelpIcon from './HelpIcon';
+import defaultHeaderContent from './default-content.json';
+import { HeaderStateProvider } from './hooks';
+import useGetConfig from '../hooks/useGetConfig';
+
+const HeaderUI = ({
+  fbpPerformanceYear,
+  feedbackPerformanceYear,
+  handleCancel,
+  includeSkipToSidebar,
+  isDevPre,
+  isLoginEnabled,
+  performanceYear,
+  showCancelButton,
+  showPhysicianCompareLink,
+  showFacilityBasedPreviewLink,
+  skipToContentId,
+  RouterLink,
+  isIESupportPage,
+}) => {
+  const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
+
+  const mapContentToRows = (config) => {
+    // Append transposed array to content
+    return config?.map((section) => {
+      // Only header items with multiple columns need to be transposed
+      // Single column menus' tab order will remain the same
+      if (section.columns?.length > 1) {
+        const { columns } = section;
+        return {
+          ...section,
+          rows: columns[0].map((_, colIndex) =>
+            columns.map((row) => row[colIndex])
+          ),
+        };
+      }
+      return { ...section, rows: section.columns };
+    });
+  };
+
+  const result = useGetConfig({
+    localStorageName: 'qpp_top_nav_content',
+    url: '/config/header',
+    timeout: 30,
+    defaultContent: defaultHeaderContent,
+  });
+
+  const content = mapContentToRows(result?.content);
+
+  if (showCancelButton) {
+    return (
+      <HeaderStateProvider RouterLink={RouterLink}>
+        <HeaderContainer
+          showCancelButton
+          skipToContentId={skipToContentId}
+          includeSkipToSidebar={includeSkipToSidebar}
+        >
+          <HeaderCancel handleCancel={handleCancel} />
+        </HeaderContainer>
+      </HeaderStateProvider>
+    );
+  }
+
+  if (isDevPre) {
+    return (
+      <HeaderStateProvider RouterLink={RouterLink}>
+        <HeaderContainer
+          isIESupportPage={isIESupportPage}
+          skipToContentId={skipToContentId}
+          includeSkipToSidebar={includeSkipToSidebar}
+        >
+          <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
+            <ul className="navigation-menu">
+              <HeaderAccountMenu isDevPre isLoginEnabled={isLoginEnabled} />
+            </ul>
+          </nav>
+        </HeaderContainer>
+      </HeaderStateProvider>
+    );
+  }
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <HeaderStateProvider RouterLink={RouterLink}>
+      <HeaderContainer
+        isIESupportPage={isIESupportPage}
+        skipToContentId={skipToContentId}
+        includeSkipToSidebar={includeSkipToSidebar}
+      >
+        <HelpIcon />
+        <HeaderMobileButton
+          handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
+          isMobileMenuExpanded={isMobileMenuExpanded}
+        />
+        <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
+          <ul className="navigation-menu navigation-new-style">
+            {content.map((header) => (
+              <HeaderMenuItem
+                handleClick={() => {
+                  setIsMobileMenuExpanded(!isMobileMenuExpanded);
+                }}
+                isMobileMenuExpanded={isMobileMenuExpanded}
+                key={header.name}
+                {...header}
+              />
+            ))}
+            <HeaderAccountMenu
+              handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
+              fbpPerformanceYear={fbpPerformanceYear}
+              feedbackPerformanceYear={feedbackPerformanceYear}
+              isLoginEnabled={isLoginEnabled}
+              performanceYear={performanceYear}
+              showPhysicianCompareLink={showPhysicianCompareLink}
+              showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
+            />
+          </ul>
+        </nav>
+      </HeaderContainer>
+      <ImpersonatorBanner />
+    </HeaderStateProvider>
+  );
+};
+
+HeaderUI.propTypes = {
+  fbpPerformanceYear: PropTypes.string,
+  feedbackPerformanceYear: PropTypes.string,
+  handleCancel: PropTypes.func,
+  includeSkipToSidebar: PropTypes.bool,
+  isDevPre: PropTypes.bool,
+  isLoginEnabled: PropTypes.bool,
+  performanceYear: PropTypes.number,
+  showCancelButton: PropTypes.bool,
+  showPhysicianCompareLink: PropTypes.bool,
+  showFacilityBasedPreviewLink: PropTypes.bool,
+  skipToContentId: PropTypes.string,
+  RouterLink: PropTypes.func,
+  isIESupportPage: PropTypes.bool,
+};
+HeaderUI.defaultProps = {
+  fbpPerformanceYear: null,
+  feedbackPerformanceYear: null,
+  handleCancel: Function.prototype,
+  includeSkipToSidebar: false,
+  isDevPre: false,
+  isLoginEnabled: true,
+  performanceYear: 2017,
+  showCancelButton: false,
+  showPhysicianCompareLink: false,
+  showFacilityBasedPreviewLink: false,
+  skipToContentId: null,
+  RouterLink: null,
+  isIESupportPage: false,
+};
+
+export default HeaderUI;

package/components/Header/HelpIcon.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const HelpIcon = () => (
+  <a
+    className="header-help"
+    href="tel:1-866-288-8292"
+    data-track-category="MainContent"
+    data-track-action="CallQPPServiceCenter"
+    data-track-label="QPP Service Center Phone"
+  >
+    <svg viewBox="0 0 28 28" className="header-help-icon">
+      <path
+        d="M23.9,5.9c0-0.6-0.2-1.1-0.6-1.5c-2.5-2.5-5.7-3.8-9.2-3.8S7.2,1.9,4.8,4.4c-0.4,0.4-0.6,1-0.6,1.5
+        c0,0.4,0.1,0.8,0.3,1.1c-1.3,1.9-2,4.1-2,6.6v2.9c0,2.1,1.1,4,2.9,5.1c0,1.2,1,2.1,2.2,2.1c1.2,0,2.2-1,2.2-2.2v-6.5
+        c0-1.2-1-2.2-2.2-2.2c-1.1,0-2,0.8-2.1,1.8H3.8v-1.1c0-2.1,0.6-4,1.7-5.6C5.8,8.1,6,8.1,6.3,8.1c0.6,0,1.1-0.2,1.5-0.6
+        c1.6-1.6,3.8-2.5,6.2-2.5s4.5,0.9,6.2,2.5c0.4,0.4,1,0.6,1.5,0.6c0.3,0,0.5,0,0.7-0.1c1.1,1.6,1.7,3.6,1.7,5.6v1.1h-1.5
+        c-0.2-1-1.1-1.8-2.1-1.8c-1.2,0-2.2,1-2.2,2.2v6.5c0,1.2,1,2.2,2.2,2.2c1.2,0,2.1-0.9,2.2-2.1c0.5-0.3,1-0.7,1.4-1.1
+        c-0.1,1.2-0.4,2.4-0.9,3.5c-0.1,0.3-0.4,0.4-0.7,0.4h-4.3c-0.3-0.8-1.1-1.5-2-1.5h-1.5c-1.2,0-2.2,1-2.2,2.2s1,2.2,2.2,2.2h1.5
+        c0.9,0,1.7-0.6,2-1.5h4.3c0.9,0,1.7-0.5,2-1.3c0.7-1.8,1.1-3.6,1.1-5.5v-5.5c0-2.4-0.8-4.7-2-6.6C23.8,6.7,23.9,6.3,23.9,5.9z
+        M8.2,15.1v6.5c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7v-6.5c0-0.4,0.3-0.7,0.7-0.7C7.9,14.4,8.2,14.7,8.2,15.1z M5.3,19.9
+        c-0.9-0.8-1.5-2-1.5-3.3v-0.4h1.5V19.9z M16.9,25.2c0,0.4-0.3,0.7-0.7,0.7h-1.5c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h1.5
+        C16.6,24.5,16.9,24.8,16.9,25.2z M19.8,21.6v-6.5c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7v6.5c0,0.4-0.3,0.7-0.7,0.7
+        S19.8,22,19.8,21.6z M22.7,16.2h1.5v0.4c0,1.3-0.5,2.5-1.5,3.3V16.2z M21.2,6.5c-1.9-1.9-4.5-3-7.2-3s-5.3,1.1-7.2,3
+        c-0.3,0.3-0.8,0.3-1,0C5.7,6.3,5.6,6.1,5.6,5.9s0.1-0.4,0.2-0.5C8,3.2,10.9,2,14,2s6,1.2,8.2,3.4l0,0c0.1,0.1,0.2,0.3,0.2,0.5
+        s-0.1,0.4-0.2,0.5C21.9,6.7,21.5,6.7,21.2,6.5z"
+      />
+    </svg>
+    <span>Help</span>
+  </a>
+);
+
+export default HelpIcon;

package/components/Header/ImpersonatorBanner.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import cookie from 'cookie';
+import axios from 'axios';
+import CloseIcon from '@material-ui/icons/Close';
+
+import { TextButton } from '../Button';
+import { deleteImpersonatedUser, revertQppHasAuthsCookie } from '../../session/logout';
+
+const ImpersonatorBanner = () => {
+  const { qpp_auth_token: token = null, qpp_impersonated_user: user = null } =
+    cookie.parse(document.cookie);
+
+  const className = [
+    'qpp-u-display--flex',
+    'qpp-u-justify-content--between',
+    'qpp-u-fill--gold-20',
+    'qpp-u-padding-x--40',
+    'qpp-u-padding-y--24',
+    'qpp-u-font-size--14',
+    'qpp-u-color--gray-80',
+  ].join(' ');
+
+  const onClick = () => {
+    const fn = () => {      
+      deleteImpersonatedUser({ qpp_impersonated_user: user });
+      // Set qpp_has_authorizations cookie back to impersonator's value
+      revertQppHasAuthsCookie();
+      window.location.reload();
+    };
+    return axios
+      .delete('/api/auth/users/impersonate', {
+        headers: {
+          Accept: 'application/vnd.qpp.cms.gov.v1+json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then(fn, fn);
+  };
+
+  return (
+    token &&
+    user && (
+      <div className={className}>
+        <div>
+          VIEW ONLY | You are currently impersonating HARP user:{' '}
+          <strong>{user}</strong>
+        </div>
+        <TextButton onClick={onClick} className="qpp-u-color--gray-80">
+          Exit Impersonation Mode
+          <CloseIcon />
+        </TextButton>
+      </div>
+    )
+  );
+};
+
+export default ImpersonatorBanner;

package/components/Header/NavigationButtonIcon.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const NavigationButtonIcon = () => (
+  <svg
+    className="btn-navigation-icon"
+    width="15px"
+    height="24px"
+    viewBox="0 0 15 24"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        className="chevron-icon"
+        transform="translate(-20.000000, -114.000000)"
+        fillRule="nonzero"
+      >
+        <g
+          className="chevron-right"
+          transform="translate(20.000000, 114.000000)"
+        >
+          <path d="M14.6682692,12.2740385 L3.96634615,22.9759615 C3.78365385,23.1586538 3.56730769,23.25 3.31730769,23.25 C3.06730769,23.25 2.85096154,23.1586538 2.66826923,22.9759615 L0.274038462,20.5817308 C0.0913461538,20.3990385 0,20.1826923 0,19.9326923 C0,19.6826923 0.0913461538,19.4663462 0.274038462,19.2836538 L7.93269231,11.625 L0.274038462,3.96634615 C0.0913461538,3.78365385 0,3.56730769 0,3.31730769 C0,3.06730769 0.0913461538,2.85096154 0.274038462,2.66826923 L2.66826923,0.274038462 C2.85096154,0.0913461538 3.06730769,0 3.31730769,0 C3.56730769,0 3.78365385,0.0913461538 3.96634615,0.274038462 L14.6682692,10.9759615 C14.8509615,11.1586538 14.9423077,11.375 14.9423077,11.625 C14.9423077,11.875 14.8509615,12.0913462 14.6682692,12.2740385 Z"></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default NavigationButtonIcon;