Skip to content

Commit 80cba97

Browse files
TylerZeroMasterTylerZeroMaster
authored
Core 954 window help menu (#103)
* Add pre-chat fields * Update snapshot for embed service event listeners * Set hidden pre-caht fields immediately if ready These might change after rendering, in which case they should be set immediately if we were ready once before. * More complete handling of prechat fields * Add 10 second grace period for business hours * Fetch business hours on become visible too * Make grace period adjustable * Pre-fill school field if possible; minor refactor * Avoid extra renders * Use external business hours and embed * Use less nesting in chat configuration * Remove unused constants * Timezones in tests ... * Cleanup some lingering comments * Typo - strict comparison * Minor version
1 parent f755136 commit 80cba97

File tree

10 files changed

+1103
-68
lines changed

10 files changed

+1103
-68
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@openstax/ui-components",
3-
"version": "1.18.7",
3+
"version": "1.19.0",
44
"license": "MIT",
55
"source": "./src/index.ts",
66
"types": "./dist/index.d.ts",
@@ -40,6 +40,7 @@
4040
"@types/dompurify": "^3.0.0",
4141
"@testing-library/jest-dom": "^6.4.8",
4242
"@testing-library/react": "^12.0.0",
43+
"@testing-library/react-hooks": "^8.0.1",
4344
"@testing-library/user-event": "^14.5.2",
4445
"@types/jest": "^28.1.4",
4546
"@types/node": "^18.7.5",

‎src/components/HelpMenu.spec.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/components/HelpMenu.stories.tsx‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/components/HelpMenu/HelpMenu.stories.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { createGlobalStyle } from 'styled-components';
2+
import { BodyPortalSlotsContext } from '../BodyPortalSlotsContext';
3+
import { HelpMenu, HelpMenuItem, HelpMenuProps } from '.';
4+
import { NavBar } from '../NavBar';
5+
import { ChatConfiguration } from './hooks';
6+
7+
const BodyPortalGlobalStyle = createGlobalStyle`
8+
[data-portal-slot="nav"] {
9+
position: fixed;
10+
top: 0;
11+
width: 100%;
12+
}
13+
`;
14+
15+
const happyHoursResponse: ChatConfiguration['businessHours'] = {
16+
businessHoursInfo: {
17+
businessHours: [
18+
{ startTime: Date.now() - 60_000, endTime: Date.now() + 1_440_000 }
19+
]
20+
},
21+
timestamp: Date.now(),
22+
};
23+
24+
const contactParams: HelpMenuProps['contactFormParams'] = [
25+
{ key: 'userId', value: 'test' },
26+
{ key: 'userFirstName', value: 'test' },
27+
{ key: 'organizationName', value: 'org' },
28+
];
29+
30+
const chatEmbedPath = 'https://localhost/assignable-chat';
31+
const chatEmbedParams: HelpMenuProps['chatConfig'] = {chatEmbedPath, businessHours: happyHoursResponse};
32+
33+
export const Default = () => {
34+
return (
35+
<BodyPortalSlotsContext.Provider value={['nav', 'root']}>
36+
<BodyPortalGlobalStyle />
37+
<NavBar logo>
38+
<HelpMenu contactFormParams={contactParams} chatConfig={chatEmbedParams}>
39+
<HelpMenuItem onAction={() => window.alert('Ran HelpMenu callback function')}>
40+
Test Callback
41+
</HelpMenuItem>
42+
</HelpMenu>
43+
</NavBar>
44+
</BodyPortalSlotsContext.Provider>
45+
);
46+
};

‎src/components/__snapshots__/HelpMenu.spec.tsx.snap‎ renamed to ‎src/components/HelpMenu/__snapshots__/index.spec.tsx.snap‎

Lines changed: 108 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`HelpMenu matches snapshot 1`] = `
44
<body>
55
<nav
6+
aria-hidden="true"
67
class="sc-jqUVSM cCVOTe"
78
data-portal-slot="nav"
89
>
@@ -50,10 +51,14 @@ exports[`HelpMenu matches snapshot 1`] = `
5051
/>
5152
</svg>
5253
<button
53-
aria-expanded="false"
54+
aria-controls="react-aria-2"
55+
aria-expanded="true"
5456
aria-haspopup="true"
5557
aria-label="Help menu"
5658
class="sc-bczRLJ dKgZvy sc-eCYdqJ henMfs"
59+
data-focus-visible="true"
60+
data-focused="true"
61+
data-pressed="true"
5762
data-rac=""
5863
data-react-aria-pressable="true"
5964
id="react-aria-1"
@@ -67,8 +72,109 @@ exports[`HelpMenu matches snapshot 1`] = `
6772
</div>
6873
</nav>
6974
<main
75+
aria-hidden="true"
7076
id="root"
7177
/>
72-
<div />
78+
<div
79+
aria-hidden="true"
80+
/>
81+
<span
82+
aria-hidden="true"
83+
data-focus-scope-start="true"
84+
hidden=""
85+
/>
86+
<div
87+
aria-hidden="true"
88+
data-testid="underlay"
89+
style="position: fixed; inset: 0;"
90+
/>
91+
<div
92+
style="display: contents;"
93+
>
94+
<div
95+
aria-labelledby="react-aria-1"
96+
class="sc-hKMtZM gqPqDX"
97+
data-placement="bottom"
98+
data-rac=""
99+
data-trigger="MenuTrigger"
100+
dir="ltr"
101+
role="dialog"
102+
style="position: absolute; z-index: 100000; max-height: -24px; left: 12px; top: 8px;"
103+
tabindex="-1"
104+
>
105+
<div
106+
style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
107+
>
108+
<button
109+
aria-label="Dismiss"
110+
id="react-aria-4"
111+
style="width: 1px; height: 1px;"
112+
tabindex="-1"
113+
/>
114+
</div>
115+
<template
116+
data-react-aria-hidden="true"
117+
/>
118+
<span
119+
data-focus-scope-start="true"
120+
hidden=""
121+
/>
122+
<div
123+
aria-labelledby="react-aria-1"
124+
class="react-aria-Menu"
125+
data-collection="react-aria-5"
126+
data-rac=""
127+
id="react-aria-2"
128+
role="menu"
129+
tabindex="-1"
130+
>
131+
<div
132+
class="sc-gsnTZi sc-jSMfEi bPmhIj"
133+
data-collection="react-aria-5"
134+
data-focus-visible="true"
135+
data-focused="true"
136+
data-key="react-aria-1"
137+
data-rac=""
138+
data-react-aria-pressable="true"
139+
id="react-aria-10"
140+
role="menuitem"
141+
tabindex="0"
142+
>
143+
Report an issue
144+
</div>
145+
<div
146+
class="sc-gsnTZi sc-jSMfEi bPmhIj"
147+
data-collection="react-aria-5"
148+
data-key="react-aria-2"
149+
data-rac=""
150+
data-react-aria-pressable="true"
151+
id="react-aria-14"
152+
role="menuitem"
153+
tabindex="-1"
154+
>
155+
Test Callback
156+
</div>
157+
</div>
158+
<span
159+
data-focus-scope-end="true"
160+
hidden=""
161+
/>
162+
<div
163+
style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
164+
>
165+
<button
166+
aria-label="Dismiss"
167+
id="react-aria-6"
168+
style="width: 1px; height: 1px;"
169+
tabindex="-1"
170+
/>
171+
</div>
172+
</div>
173+
</div>
174+
<span
175+
aria-hidden="true"
176+
data-focus-scope-end="true"
177+
hidden=""
178+
/>
73179
</body>
74180
`;

0 commit comments

Comments
 (0)