From 79557bc2ab389bcd3f270967ec0407293f967145 Mon Sep 17 00:00:00 2001
From: Dante Soares <dante.m.soares@rice.edu>
Date: Thu, 20 Mar 2025 18:06:35 -0500
Subject: [PATCH 1/5] Added HelpMenu and HelpMenu stories, fixed ladle menu for
 SidebarNav stories

---
 src/components/HelpMenu.stories.tsx   |  23 ++++
 src/components/HelpMenu.tsx           | 175 ++++++++++++++++++++++++++
 src/components/SidebarNav.stories.tsx |   5 +-
 3 files changed, 201 insertions(+), 2 deletions(-)
 create mode 100644 src/components/HelpMenu.stories.tsx
 create mode 100644 src/components/HelpMenu.tsx

diff --git a/src/components/HelpMenu.stories.tsx b/src/components/HelpMenu.stories.tsx
new file mode 100644
index 000000000..4507e79c8
--- /dev/null
+++ b/src/components/HelpMenu.stories.tsx
@@ -0,0 +1,23 @@
+import { createGlobalStyle } from 'styled-components';
+import { BodyPortalSlotsContext } from './BodyPortalSlotsContext';
+import { useHelpMenu } from './HelpMenu';
+import { NavBar } from './NavBar';
+
+const BodyPortalGlobalStyle = createGlobalStyle`
+  #ladle-root {
+    position: absolute;
+    right: 0;
+  }
+`;
+
+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>;
+};
diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx
new file mode 100644
index 000000000..eaf236e1d
--- /dev/null
+++ b/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: #F5F5F5;
+  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 #D5D5D5;
+  width: 100%;
+  height: 5.6rem;
+  display: flex;
+  align-items: center;
+  background-color: #F5F5F5;
+  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: white;
+    border: 1px solid #D5D5D5;
+    box-shadow: 0px 2px 4px 0px #00000033;
+    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;
+};
diff --git a/src/components/SidebarNav.stories.tsx b/src/components/SidebarNav.stories.tsx
index ae2b3a74d..ce4a367b4 100644
--- a/src/components/SidebarNav.stories.tsx
+++ b/src/components/SidebarNav.stories.tsx
@@ -53,8 +53,9 @@ const BodyPortalGlobalStyle = createGlobalStyle`
     }
   }
 
-  .ladle-background, #ladle-root {
-    display: none;
+  #ladle-root {
+    position: absolute;
+    right: 0;
   }
 `;
 

From 709c96de020981e3d35cf7616255819df6d83a79 Mon Sep 17 00:00:00 2001
From: Dante Soares <dante.m.soares@rice.edu>
Date: Thu, 20 Mar 2025 18:15:04 -0500
Subject: [PATCH 2/5] Added HelpMenu spec

---
 src/components/HelpMenu.spec.tsx              | 31 ++++++++
 .../__snapshots__/HelpMenu.spec.tsx.snap      | 72 +++++++++++++++++++
 2 files changed, 103 insertions(+)
 create mode 100644 src/components/HelpMenu.spec.tsx
 create mode 100644 src/components/__snapshots__/HelpMenu.spec.tsx.snap

diff --git a/src/components/HelpMenu.spec.tsx b/src/components/HelpMenu.spec.tsx
new file mode 100644
index 000000000..46878cc31
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/components/__snapshots__/HelpMenu.spec.tsx.snap b/src/components/__snapshots__/HelpMenu.spec.tsx.snap
new file mode 100644
index 000000000..6ed363de4
--- /dev/null
+++ b/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>
+`;

From b253f4ac44be14bd2d769c327b91af06fae98d79 Mon Sep 17 00:00:00 2001
From: Dante Soares <dante.m.soares@rice.edu>
Date: Mon, 24 Mar 2025 18:55:33 -0500
Subject: [PATCH 3/5] Use color palette

---
 src/components/HelpMenu.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx
index eaf236e1d..be2382527 100644
--- a/src/components/HelpMenu.tsx
+++ b/src/components/HelpMenu.tsx
@@ -24,7 +24,7 @@ export const styledMenu = {
 };
 
 const IframeWrapper = styled.div`
-  background-color: #F5F5F5;
+  background-color: ${colors.palette.neutralBright};
   position: absolute;
   width: 100%;
   top: 4rem;
@@ -50,12 +50,12 @@ function PutAway({onClick, className}: {onClick: () => void; className?: string}
 }
 
 const StyledPutAway = styled(PutAway)`
-  border-top: 0.1rem solid #D5D5D5;
+  border-top: 0.1rem solid ${colors.palette.pale};
   width: 100%;
   height: 5.6rem;
   display: flex;
   align-items: center;
-  background-color: #F5F5F5;
+  background-color: ${colors.palette.neutralBright};
   padding-left: 1.5rem;
   position: fixed;
   bottom: 0;
@@ -68,9 +68,9 @@ const StyledPutAway = styled(PutAway)`
 
   button {
     height: 3rem;
-    background-color: white;
-    border: 1px solid #D5D5D5;
-    box-shadow: 0px 2px 4px 0px #00000033;
+    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;
   }

From a2507caf030a0cb59fb008e2bf03286cf01edb69 Mon Sep 17 00:00:00 2001
From: Dante Soares <dante.m.soares@rice.edu>
Date: Mon, 24 Mar 2025 19:05:19 -0500
Subject: [PATCH 4/5] Float the NavBar instead of the main content in the ladle
 story

---
 src/components/HelpMenu.stories.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/HelpMenu.stories.tsx b/src/components/HelpMenu.stories.tsx
index 4507e79c8..a53667832 100644
--- a/src/components/HelpMenu.stories.tsx
+++ b/src/components/HelpMenu.stories.tsx
@@ -4,9 +4,10 @@ import { useHelpMenu } from './HelpMenu';
 import { NavBar } from './NavBar';
 
 const BodyPortalGlobalStyle = createGlobalStyle`
-  #ladle-root {
-    position: absolute;
-    right: 0;
+  [data-portal-slot="nav"] {
+    position: fixed;
+    top: 0;
+    width: 100%;
   }
 `;
 

From f1f875890a21edf744ad2824945d49dc05bf490d Mon Sep 17 00:00:00 2001
From: Dante Soares <dante.m.soares@rice.edu>
Date: Tue, 25 Mar 2025 10:29:22 -0500
Subject: [PATCH 5/5] Version bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 36eda832a..a2427b8d5 100644
--- a/package.json
+++ b/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",