CORE-783 Help menu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.14.2",
+  "version": "1.15.0",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",

src/components/HelpMenu.spec.tsx

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import { BodyPortalSlotsContext } from './BodyPortalSlotsContext';
+import { useHelpMenu } from './HelpMenu';
+import { NavBar } from './NavBar';
+
+describe('useHelpMenu', () => {
+  let root: HTMLElement;
+
+  beforeEach(() => {
+    root = document.createElement('main');
+    root.id = 'root';
+    document.body.append(root);
+  });
+
+  it('matches snapshot', () => {
+    const NavBarWithHelpMenu = () => {
+      const [HelpMenu, ContactFormIframe] = useHelpMenu(
+        [{ label: 'Test Callback', callback: () => window.alert('Ran HelpMenu callback function') }]
+      );
+
+      return <BodyPortalSlotsContext.Provider value={['nav', 'root']}>
+        <NavBar logo><HelpMenu contactFormParams={[{key: 'userId', value: 'test'}]} /></NavBar>
+        <ContactFormIframe />
+      </BodyPortalSlotsContext.Provider>;
+    };
+
+    render(<NavBarWithHelpMenu />);
+
+    expect(document.body).toMatchSnapshot();
+  });
+});

src/components/HelpMenu.stories.tsx

@@ -0,0 +1,24 @@
+import { createGlobalStyle } from 'styled-components';
+import { BodyPortalSlotsContext } from './BodyPortalSlotsContext';
+import { useHelpMenu } from './HelpMenu';
+import { NavBar } from './NavBar';
+
+const BodyPortalGlobalStyle = createGlobalStyle`
+  [data-portal-slot="nav"] {
+    position: fixed;
+    top: 0;
+    width: 100%;
+  }
+`;
+
+export const Default = () => {
+  const [HelpMenu, ContactFormIframe] = useHelpMenu(
+    [{ label: 'Test Callback', callback: () => window.alert('Ran HelpMenu callback function') }]
+  );
+
+  return <BodyPortalSlotsContext.Provider value={['nav', 'root']}>
+    <BodyPortalGlobalStyle />
+    <NavBar logo><HelpMenu contactFormParams={[{key: 'userId', value: 'test'}]} /></NavBar>
+    <ContactFormIframe />
+  </BodyPortalSlotsContext.Provider>;
+};

src/components/HelpMenu.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { NavBarMenuButton, NavBarMenuItem } from './NavBarMenuButtons';
+import { colors } from '../theme';
+import styled from 'styled-components';
+
+export const styledMenu = {
+  Button: styled(NavBarMenuButton)`
+    color: ${colors.palette.gray};
+    font-size: 1.4rem;
+  `,
+  Item: styled(NavBarMenuItem)`
+    color: ${colors.palette.neutralDarker};
+    text-decoration: none;
+
+    :focus-visible {
+      outline: 0;
+      background: ${colors.palette.neutralLighter};
+    }
+    :hover {
+      color: ${colors.palette.neutralDarker};
+      text-decoration: none;
+    }
+  `,
+};
+
+const IframeWrapper = styled.div`
+  background-color: ${colors.palette.neutralBright};
+  position: absolute;
+  width: 100%;
+  top: 4rem;
+  left: 0;
+  bottom: 0;
+  z-index: 20;
+`;
+
+const Iframe = styled.iframe`
+  border: 0;
+  width: 100%;
+  height: calc(100% - 5rem);
+`;
+
+function PutAway({onClick, className}: {onClick: () => void; className?: string}) {
+  return (
+    <div className={className}>
+      <button type='button' onClick={onClick} aria-label='close form'>
+          Back
+      </button>
+    </div>
+  );
+}
+
+const StyledPutAway = styled(PutAway)`
+  border-top: 0.1rem solid ${colors.palette.pale};
+  width: 100%;
+  height: 5.6rem;
+  display: flex;
+  align-items: center;
+  background-color: ${colors.palette.neutralBright};
+  padding-left: 1.5rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+
+  @media(min-width: 56em) {
+    padding: 0 calc(50vw - 43rem);
+  }
+
+  button {
+    height: 3rem;
+    background-color: ${colors.palette.white};
+    border: 1px solid ${colors.palette.pale};
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+    width: 9rem;
+    border-radius: 0.5rem;
+  }
+`;
+
+const newTabIcon = <svg
+  role='img'
+  width='12'
+  height='11'
+  viewBox='0 0 12 11'
+  fill='none'
+  xmlns='http://www.w3.org/2000/svg'
+  >
+  <title>new tab</title>
+  <path
+    d='M12 0.832214V3.49855C12 3.94565 11.4592 4.1648 11.1464 3.85211L10.4025 3.10817L5.32915 8.18157C5.13387 8.37684 4.81731 8.37684 4.62204 8.18157L4.15065 7.71017C3.95538 7.5149 3.95538 7.19832 4.15065 7.00307L9.22408 1.92963L8.48027 1.18578C8.16629 0.871798 8.38867 0.332214 8.83383 0.332214H11.5C11.7761 0.332214 12 0.556069 12 0.832214ZM8.47977 5.97376L8.14644 6.30709C8.10001 6.35352 8.06318 6.40864 8.03805 6.46931C8.01293 6.52997 8 6.59499 8 6.66065V9.66555H1.33333V2.99888H6.83333C6.96594 2.99887 7.0931 2.9462 7.18688 2.85244L7.52021 2.51911C7.83519 2.20411 7.6121 1.66555 7.16667 1.66555H1C0.447708 1.66555 0 2.11326 0 2.66555V9.99888C0 10.5512 0.447708 10.9989 1 10.9989H8.33333C8.88562 10.9989 9.33333 10.5512 9.33333 9.99888V6.3273C9.33333 5.88184 8.79475 5.65876 8.47977 5.97376Z'
+    fill='#6F6F6F'
+  />
+</svg>;
+
+export const useHelpMenu = (actions: {label: string; callback: () => void}[] = []) => {
+  const [showIframe, setShowIframe] = React.useState<string | undefined>();
+
+  function HelpMenu({contactFormParams}: {contactFormParams: { key: string; value: string }[]}) {
+    const contactFormUrl = React.useMemo(() => {
+      const formUrl = 'https://openstax.org/embedded/contact';
+      const params = contactFormParams
+        .map(({key, value}) => encodeURIComponent(`${key}=${value}`))
+        .map((p) => `body=${p}`)
+        .join('&');
+
+      return `${formUrl}?${params}`;
+    }, [contactFormParams]);
+
+    return (
+      <>
+        <styledMenu.Button label='Help' aria-label='Help menu'>
+          {actions.map((action, i) => <styledMenu.Item key={i} onAction={action.callback}>
+            {action.label}
+          </styledMenu.Item>
+          )}
+          <styledMenu.Item
+            onAction={() => setShowIframe(contactFormUrl)}
+          >
+            Report an issue
+          </styledMenu.Item>
+          <styledMenu.Item
+            href='https://help.openstax.org/s/global-search/assignable'
+            target='_blank'
+          >
+            Support center&nbsp;
+            {newTabIcon}
+          </styledMenu.Item>
+          <styledMenu.Item
+            href='https://openstax.org/accessibility-statement'
+            target='_blank'
+          >
+            Accessibility statement&nbsp;
+            {newTabIcon}
+          </styledMenu.Item>
+          <styledMenu.Item
+            onAction={() => {
+              window.parent.postMessage({type: 'TriggerConsentModalMessage'}, '*');
+            }}
+          >
+            Cookie settings
+          </styledMenu.Item>
+        </styledMenu.Button>
+      </>
+    );
+  }
+
+  function ContactFormIframe() {
+    React.useEffect(
+      () => {
+        const closeIt = ({data}: MessageEvent) => {
+          if (data === 'CONTACT_FORM_SUBMITTED') {
+            setShowIframe(undefined);
+          }
+        };
+
+        window.addEventListener('message', closeIt, false);
+
+        return () => window.removeEventListener('message', closeIt, false);
+      },
+      []
+    );
+
+    if (!showIframe) {
+      return null;
+    }
+
+    return (
+      <IframeWrapper>
+        <Iframe title='Contact form' src={showIframe} />
+        <StyledPutAway onClick={() => setShowIframe(undefined)} />
+      </IframeWrapper>
+    );
+  }
+
+  return [HelpMenu, ContactFormIframe] as const;
+};

src/components/SidebarNav.stories.tsx

@@ -53,8 +53,9 @@ const BodyPortalGlobalStyle = createGlobalStyle`
     }
   }
 
-  .ladle-background, #ladle-root {
-    display: none;
+  #ladle-root {
+    position: absolute;
+    right: 0;
   }
 `;
 

src/components/__snapshots__/HelpMenu.spec.tsx.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useHelpMenu matches snapshot 1`] = `
+<body>
+  <nav
+    class="sc-jqUVSM cCVOTe"
+    data-portal-slot="nav"
+  >
+    <div
+      class="sc-kDDrLX bsNXsf"
+    >
+      <svg
+        class="sc-papXJ iUtXIA"
+        height="80.97"
+        role="img"
+        viewBox="0 0 353.76001 80.973335"
+        width="353.76"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          OpenStax Logo
+        </title>
+        <path
+          d="M159.99 52.176c5.13 0 8.31-3.86 8.31-8.583 0-4.722-3.18-8.583-8.31-8.583-5.13 0-8.31 3.86-8.31 8.583 0 4.724 3.18 8.583 8.31 8.583zm0-19.616c6.45 0 11.034 4.632 11.034 11.033 0 6.404-4.585 11.036-11.035 11.036s-11.04-4.64-11.04-11.04c0-6.4 4.58-11.04 11.03-11.04m27.75 19.62c5.13 0 8.31-3.86 8.31-8.59 0-4.72-3.18-8.586-8.31-8.586-4.95 0-8.77 3.86-8.77 8.583 0 4.726 3.81 8.585 8.76 8.585zM176.51 33.1h2.723v3.678h.09c1.68-2.907 5.27-4.223 8.4-4.223 6.446 0 11.032 4.632 11.032 11.033 0 6.406-4.588 11.038-11.035 11.038-3.135 0-6.72-1.32-8.4-4.226h-.09v14.033h-2.73v-31.33m44.777 8.717c0-3.725-3.224-6.813-7.264-6.813-5.95 0-7.63 5.72-7.63 6.81zm2.09 8.31c-2.135 3.178-5.36 4.496-9.08 4.496-6.4 0-10.628-4.588-10.628-11.083 0-6.267 4.36-10.988 10.49-10.988 6.45 0 9.85 4.95 9.85 9.81v1.904h-17.6c0 2.27 1.59 7.9 7.944 7.9 2.77 0 5.676-1.45 7.04-3.73l1.998 1.68M230.105 39c0-1.545-.23-4.813-.23-5.9h2.726c.05 1.54.1 3.267.18 3.676h.14c1.09-2.32 3.77-4.226 7.18-4.226 6.54 0 7.99 4.45 7.99 9.037v12.49h-2.72V41.73c0-3.407-.95-6.724-5.26-6.724-4.04 0-7.262 2.817-7.262 8.583v10.49h-2.722V39m36.328-.68c-1.043-1.454-2.404-2.227-4.27-2.227-1.45 0-3.176.684-3.176 2.32 0 3.903 11.76.726 11.76 9.216 0 5.17-4.95 6.99-9.4 6.99-3.36 0-6.265-.87-8.49-3.36l3.63-3.41c1.41 1.54 2.864 2.68 5.18 2.68 1.59 0 3.633-.774 3.633-2.5 0-4.496-11.76-.95-11.76-9.264 0-4.86 4.36-7.04 8.76-7.04 2.91 0 5.998.91 7.768 3.316l-3.636 3.27m5.994-1.41v-4.63h4.496v-6.31h5.45v6.31h5.99v4.632h-5.995v9.533c0 2.18.636 3.543 3.043 3.543.95 0 2.27-.18 2.95-.68v4.59c-1.137.548-3.04.73-4.317.73-5.763 0-7.124-2.59-7.124-7.72v-10h-4.497m33.51 7.407h-1.136c-3 0-8.174.226-8.174 3.36 0 1.997 2.042 2.86 3.814 2.86 3.72 0 5.49-1.954 5.49-4.996zm.32 6.765h-.14c-1.543 2.45-4.084 3.54-6.99 3.54-4.04 0-7.95-2.23-7.95-6.54 0-7.085 8.266-7.587 13.716-7.587h1.364v-.59c0-2.68-2.09-4.085-4.992-4.085-2.27 0-4.36.91-5.815 2.27l-2.86-2.86c2.406-2.45 5.81-3.493 9.26-3.493 9.31 0 9.31 6.723 9.31 9.81v12.54h-4.9v-2.99m16.394-8.718-7.536-10.086h6.63l4.36 6.542 4.72-6.542h6.22L329.6 42.37l8.763 11.713h-6.63l-5.678-7.81-5.722 7.81h-6.448l8.766-11.714"
+          fill="#585a58"
+        />
+        <path
+          d="M129.033 17.833a4.214 4.214 0 0 1-4.414 4.01l-98.45-4.67a4.224 4.224 0 0 1-4.01-4.416l.41-8.737A4.215 4.215 0 0 1 26.99.006l98.445 4.676a4.222 4.222 0 0 1 4.013 4.414l-.415 8.737"
+          fill="#72a648"
+        />
+        <path
+          d="M96.677 49.807a2.528 2.528 0 0 1-2.53 2.53H14.08c-1.4 0-2.53-1.13-2.53-2.53v-12.51a2.53 2.53 0 0 1 2.53-2.53h80.068a2.53 2.53 0 0 1 2.53 2.53v12.51"
+          fill="#585a58"
+        />
+        <path
+          d="M121.304 63.337c.042 1.398-1.015 2.565-2.37 2.61L28.6 68.763c-1.353.04-2.485-1.06-2.528-2.455l-.233-7.434c-.05-1.395 1.01-2.565 2.37-2.605l90.33-2.82c1.35-.05 2.48 1.05 2.52 2.45l.23 7.43"
+          fill="#eecb3f"
+        />
+        <path
+          d="M109.17 78.445c0 1.396-1.065 2.528-2.38 2.528H20.565c-1.316 0-2.38-1.132-2.38-2.528V73.48c0-1.395 1.064-2.53 2.38-2.53h86.225c1.315 0 2.38 1.135 2.38 2.53v4.965"
+          fill="#222b4f"
+        />
+        <path
+          d="M111.387 28.742c0 1.03-1.528 1.867-3.41 1.867H3.41c-1.882 0-3.41-.84-3.41-1.87v-4.05c0-1.03 1.527-1.87 3.41-1.87h104.566c1.883 0 3.41.84 3.41 1.87v4.05"
+          fill="#e36f4a"
+        />
+        <path
+          d="M347.008 32.285h1.568l1.833 4.67 1.83-4.67h1.52v6.147h-.99V33.27h-.03l-2.03 5.162h-.68l-2.025-5.162h-.03v5.162H347zm-4.16.985h-1.94v-.985h4.864v.985h-1.94v5.162h-.985V33.27"
+          fill="#585a58"
+        />
+      </svg>
+      <button
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-label="Help menu"
+        class="sc-bczRLJ dKgZvy sc-eCYdqJ jbRqSg"
+        data-rac=""
+        id="react-aria-1"
+        type="button"
+      >
+        <span>
+          Help
+        </span>
+      </button>
+    </div>
+  </nav>
+  <main
+    id="root"
+  />
+  <div />
+</body>
+`;