Skip to content

Commit ab0738d

Browse files
johannes-weberJohannes Weber
johannes-weber
and
Johannes Weber
authored
revert: Revert "chore: VR improvements #3374" and "chore: Fix bugs VR improvements #3439" (#3442)
Co-authored-by: Johannes Weber <[email protected]>
1 parent 4bbf4fe commit ab0738d

File tree

46 files changed

+494
-3460
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+494
-3460
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164
{
165165
"path": "lib/components/internal/widget-exports.js",
166166
"brotli": false,
167-
"limit": "755 kB",
167+
"limit": "753 kB",
168168
"ignore": "react-dom"
169169
}
170170
],

‎pages/app-layout-toolbar/default.page.tsx

+204-29
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,213 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3-
import React from 'react';
3+
import React, { useContext, useRef, useState } from 'react';
44

5-
import AppLayoutToolbar from '~components/app-layout-toolbar';
6-
import Header from '~components/header';
5+
import {
6+
AppLayoutToolbar,
7+
Button,
8+
ContentLayout,
9+
Header,
10+
HelpPanel,
11+
Link,
12+
SpaceBetween,
13+
SplitPanel,
14+
Toggle,
15+
} from '~components';
16+
import { AppLayoutToolbarProps } from '~components/app-layout-toolbar';
717

8-
import { Breadcrumbs, Containers, Navigation, Tools } from '../app-layout/utils/content-blocks';
9-
import labels from '../app-layout/utils/labels';
10-
import * as toolsContent from '../app-layout/utils/tools-content';
11-
import ScreenshotArea from '../utils/screenshot-area';
18+
import AppContext, { AppContextType } from '../app/app-context';
19+
import { Breadcrumbs, Containers, CustomDrawerContent, Navigation } from '../app-layout/utils/content-blocks';
20+
import { drawerLabels } from '../app-layout/utils/drawers';
21+
import appLayoutLabels from '../app-layout/utils/labels';
22+
23+
type DemoContext = React.Context<
24+
AppContextType<{
25+
navigationTriggerHide: boolean | undefined;
26+
drawerTriggerHide: boolean | undefined;
27+
splitPanelTriggerHide: boolean | undefined;
28+
breadcrumbsHide: boolean | undefined;
29+
splitPanelPosition: AppLayoutToolbarProps.SplitPanelPreferences['position'];
30+
}>
31+
>;
32+
33+
export default function WithDrawers() {
34+
const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
35+
const [helpPathSlug, setHelpPathSlug] = useState<string>('default');
36+
const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
37+
const navigationTriggerHide = urlParams.navigationTriggerHide ?? false;
38+
const drawerTriggerHide = urlParams.drawerTriggerHide ?? false;
39+
const splitPanelTriggerHide = urlParams.splitPanelTriggerHide ?? false;
40+
const breadcrumbsHide = urlParams.breadcrumbsHide ?? false;
41+
const [isToolsOpen, setIsToolsOpen] = useState(false);
42+
const [isNavigationOpen, setIsNavigationOpen] = useState(true);
43+
const [splitPanelOpen, setSplitPanelOpen] = useState(false);
44+
const pageLayoutRef = useRef<AppLayoutToolbarProps.Ref>(null);
45+
46+
const drawersProps: Pick<AppLayoutToolbarProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> | null = {
47+
activeDrawerId: activeDrawerId,
48+
drawers: [
49+
{
50+
ariaLabels: {
51+
closeButton: 'ProHelp close button',
52+
drawerName: 'ProHelp drawer content',
53+
triggerButton: 'ProHelp trigger button',
54+
resizeHandle: 'ProHelp resize handle',
55+
},
56+
content: <CustomDrawerContent />,
57+
id: 'pro-help',
58+
trigger: drawerTriggerHide
59+
? undefined
60+
: {
61+
iconName: 'contact',
62+
},
63+
},
64+
],
65+
onDrawerChange: event => {
66+
setActiveDrawerId(event.detail.activeDrawerId);
67+
},
68+
};
1269

13-
export default function () {
1470
return (
15-
<ScreenshotArea gutters={false}>
16-
<AppLayoutToolbar
17-
ariaLabels={labels}
18-
analyticsMetadata={{
19-
flowType: 'home',
20-
instanceIdentifier: 'demo-page',
21-
}}
22-
breadcrumbs={<Breadcrumbs />}
23-
navigation={<Navigation />}
24-
tools={<Tools>{toolsContent.long}</Tools>}
25-
content={
26-
<>
27-
<div style={{ marginBlockEnd: '1rem' }}>
28-
<Header variant="h1" description="Basic demo">
29-
Demo page
71+
<AppLayoutToolbar
72+
ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
73+
breadcrumbs={breadcrumbsHide ? undefined : <Breadcrumbs />}
74+
ref={pageLayoutRef}
75+
content={
76+
<ContentLayout
77+
disableOverlap={true}
78+
header={
79+
<SpaceBetween size="m">
80+
<Header
81+
variant="h1"
82+
description="Sometimes you need custom triggers for drawers and navigation to get the job done."
83+
info={
84+
<Link
85+
data-testid="info-link-header"
86+
variant="info"
87+
onFollow={() => {
88+
setHelpPathSlug('header');
89+
setIsToolsOpen(true);
90+
pageLayoutRef.current?.focusToolsClose();
91+
}}
92+
>
93+
Info
94+
</Link>
95+
}
96+
>
97+
Page layout
3098
</Header>
31-
</div>
32-
<Containers />
33-
</>
34-
}
35-
/>
36-
</ScreenshotArea>
99+
100+
<SpaceBetween size="xs">
101+
<Toggle
102+
checked={navigationTriggerHide}
103+
onChange={({ detail }) => setUrlParams({ navigationTriggerHide: detail.checked })}
104+
>
105+
Hide navigation trigger
106+
</Toggle>
107+
<Toggle
108+
checked={drawerTriggerHide}
109+
onChange={({ detail }) => setUrlParams({ drawerTriggerHide: detail.checked })}
110+
>
111+
Hide drawer trigger
112+
</Toggle>
113+
<Toggle
114+
checked={splitPanelTriggerHide}
115+
onChange={({ detail }) => setUrlParams({ splitPanelTriggerHide: detail.checked })}
116+
>
117+
Hide split panel trigger
118+
</Toggle>
119+
<Toggle
120+
checked={breadcrumbsHide}
121+
onChange={({ detail }) => setUrlParams({ breadcrumbsHide: detail.checked })}
122+
>
123+
Hide breadcrumbs
124+
</Toggle>
125+
126+
<Button
127+
onClick={() => {
128+
setIsNavigationOpen(current => !current);
129+
pageLayoutRef.current?.focusNavigation();
130+
}}
131+
>
132+
Toggle navigation
133+
</Button>
134+
135+
<Button
136+
onClick={() => {
137+
setActiveDrawerId('pro-help');
138+
pageLayoutRef.current?.focusActiveDrawer();
139+
}}
140+
>
141+
Open a drawer without trigger
142+
</Button>
143+
<Button onClick={() => setActiveDrawerId(null)}>Close a drawer without trigger</Button>
144+
<Button onClick={() => setSplitPanelOpen(true)}>Open split panel</Button>
145+
</SpaceBetween>
146+
</SpaceBetween>
147+
}
148+
>
149+
<Header
150+
info={
151+
<Link
152+
data-testid="info-link-content"
153+
variant="info"
154+
onFollow={() => {
155+
setHelpPathSlug('content');
156+
setIsToolsOpen(true);
157+
}}
158+
>
159+
Info
160+
</Link>
161+
}
162+
>
163+
Content
164+
</Header>
165+
<Containers />
166+
</ContentLayout>
167+
}
168+
splitPanel={
169+
<SplitPanel
170+
closeBehavior={splitPanelTriggerHide ? 'hide' : undefined}
171+
header="Split panel header"
172+
i18nStrings={{
173+
preferencesTitle: 'Preferences',
174+
preferencesPositionLabel: 'Split panel position',
175+
preferencesPositionDescription: 'Choose the default split panel position for the service.',
176+
preferencesPositionSide: 'Side',
177+
preferencesPositionBottom: 'Bottom',
178+
preferencesConfirm: 'Confirm',
179+
preferencesCancel: 'Cancel',
180+
closeButtonAriaLabel: 'Close panel',
181+
openButtonAriaLabel: 'Open panel',
182+
resizeHandleAriaLabel: 'Slider',
183+
}}
184+
>
185+
This is the Split Panel!
186+
</SplitPanel>
187+
}
188+
splitPanelOpen={splitPanelOpen}
189+
splitPanelPreferences={{
190+
position: urlParams.splitPanelPosition,
191+
}}
192+
onSplitPanelToggle={event => setSplitPanelOpen(event.detail.open)}
193+
onSplitPanelPreferencesChange={event => {
194+
const { position } = event.detail;
195+
setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined });
196+
}}
197+
onToolsChange={event => {
198+
setIsToolsOpen(event.detail.open);
199+
}}
200+
tools={<Info helpPathSlug={helpPathSlug} />}
201+
toolsOpen={isToolsOpen}
202+
navigationOpen={isNavigationOpen}
203+
navigation={<Navigation />}
204+
onNavigationChange={event => setIsNavigationOpen(event.detail.open)}
205+
navigationTriggerHide={navigationTriggerHide}
206+
{...drawersProps}
207+
/>
37208
);
38209
}
210+
211+
function Info({ helpPathSlug }: { helpPathSlug: string }) {
212+
return <HelpPanel header={<h2>Info</h2>}>Here is some info for you: {helpPathSlug}</HelpPanel>;
213+
}

‎pages/app-layout-toolbar/full-page-cards.page.tsx

-109
This file was deleted.

0 commit comments

Comments
 (0)