From d06fc202ab462b6ab6d957701009647521120f6b Mon Sep 17 00:00:00 2001 From: at-susie Date: Sat, 3 May 2025 07:26:26 +0200 Subject: [PATCH 01/23] Add basic change --- pages/app-layout/sidecar-demo.page.tsx | 121 ++++++++++++++++++ .../drawer/global-drawer.tsx | 5 +- .../visual-refresh-toolbar/drawer/styles.scss | 4 + .../skeleton/styles.scss | 27 ++-- 4 files changed, 144 insertions(+), 13 deletions(-) create mode 100644 pages/app-layout/sidecar-demo.page.tsx diff --git a/pages/app-layout/sidecar-demo.page.tsx b/pages/app-layout/sidecar-demo.page.tsx new file mode 100644 index 0000000000..829016a519 --- /dev/null +++ b/pages/app-layout/sidecar-demo.page.tsx @@ -0,0 +1,121 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useContext, useRef, useState } from 'react'; + +import { AppLayout, Button, Header, HelpPanel, Link, SplitPanel, Table } from '~components'; +import { AppLayoutProps } from '~components/app-layout'; + +import './utils/external-widget'; +import AppContext, { AppContextType } from '../app/app-context'; +import { generateItems, Instance } from '../table/generate-data'; +import { columnsConfig } from '../table/shared-configs'; +import { Breadcrumbs, CustomDrawerContent } from './utils/content-blocks'; +import { drawerLabels } from './utils/drawers'; +import appLayoutLabels from './utils/labels'; + +type DemoContext = React.Context< + AppContextType<{ + hasTools: boolean | undefined; + hasDrawers: boolean | undefined; + splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position']; + }> +>; + +export default function WithDrawers() { + const [activeDrawerId, setActiveDrawerId] = useState(null); + const [helpPathSlug] = useState('default'); + const { urlParams, setUrlParams } = useContext(AppContext as DemoContext); + const hasTools = urlParams.hasTools ?? false; + const hasDrawers = urlParams.hasDrawers ?? true; + const [isToolsOpen, setIsToolsOpen] = useState(false); + const appLayoutRef = useRef(null); + + const items = generateItems(20); + + const drawersProps: Pick | null = !hasDrawers + ? null + : { + activeDrawerId: activeDrawerId, + drawers: [ + { + ariaLabels: { + closeButton: 'ProHelp close button', + drawerName: 'ProHelp drawer content', + triggerButton: 'ProHelp trigger button', + resizeHandle: 'ProHelp resize handle', + }, + content: , + id: 'pro-help', + trigger: { + iconName: 'contact', + }, + }, + ], + onDrawerChange: event => { + setActiveDrawerId(event.detail.activeDrawerId); + }, + }; + + return ( + } + ref={appLayoutRef} + content={ + + header={ +
Long help text} + actions={} + > + Sticky Scrollbar Example +
+ } + stickyHeader={true} + variant="full-page" + columnDefinitions={columnsConfig} + items={items} + /> + } + splitPanel={ + + This is the Split Panel! + + } + splitPanelPreferences={{ + position: urlParams.splitPanelPosition, + }} + onSplitPanelPreferencesChange={event => { + const { position } = event.detail; + setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined }); + }} + onToolsChange={event => { + setIsToolsOpen(event.detail.open); + }} + tools={} + toolsOpen={isToolsOpen} + toolsHide={!hasTools} + {...drawersProps} + /> + ); +} + +function Info({ helpPathSlug }: { helpPathSlug: string }) { + return Info}>Here is some info for you: {helpPathSlug}; +} diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx index 0aaeb22b0d..a2b3e914bb 100644 --- a/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx +++ b/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx @@ -70,7 +70,7 @@ function AppLayoutGlobalDrawerImplementation({ const isExpanded = activeGlobalDrawer?.isExpandable && expandedDrawerId === activeDrawerId; return ( - + {state => { return (