diff --git a/package.json b/package.json index f9a75bf7db..b9209124e5 100644 --- a/package.json +++ b/package.json @@ -164,7 +164,7 @@ { "path": "lib/components/internal/widget-exports.js", "brotli": false, - "limit": "753 kB", + "limit": "754 kB", "ignore": "react-dom" } ], diff --git a/pages/app-layout-toolbar/default.page.tsx b/pages/app-layout-toolbar/default.page.tsx index a21fc41a69..37ae8bfbc3 100644 --- a/pages/app-layout-toolbar/default.page.tsx +++ b/pages/app-layout-toolbar/default.page.tsx @@ -1,213 +1,38 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useContext, useRef, useState } from 'react'; +import React from 'react'; -import { - AppLayoutToolbar, - Button, - ContentLayout, - Header, - HelpPanel, - Link, - SpaceBetween, - SplitPanel, - Toggle, -} from '~components'; -import { AppLayoutToolbarProps } from '~components/app-layout-toolbar'; +import AppLayoutToolbar from '~components/app-layout-toolbar'; +import Header from '~components/header'; -import AppContext, { AppContextType } from '../app/app-context'; -import { Breadcrumbs, Containers, CustomDrawerContent, Navigation } from '../app-layout/utils/content-blocks'; -import { drawerLabels } from '../app-layout/utils/drawers'; -import appLayoutLabels from '../app-layout/utils/labels'; - -type DemoContext = React.Context< - AppContextType<{ - navigationTriggerHide: boolean | undefined; - drawerTriggerHide: boolean | undefined; - splitPanelTriggerHide: boolean | undefined; - breadcrumbsHide: boolean | undefined; - splitPanelPosition: AppLayoutToolbarProps.SplitPanelPreferences['position']; - }> ->; - -export default function WithDrawers() { - const [activeDrawerId, setActiveDrawerId] = useState(null); - const [helpPathSlug, setHelpPathSlug] = useState('default'); - const { urlParams, setUrlParams } = useContext(AppContext as DemoContext); - const navigationTriggerHide = urlParams.navigationTriggerHide ?? false; - const drawerTriggerHide = urlParams.drawerTriggerHide ?? false; - const splitPanelTriggerHide = urlParams.splitPanelTriggerHide ?? false; - const breadcrumbsHide = urlParams.breadcrumbsHide ?? false; - const [isToolsOpen, setIsToolsOpen] = useState(false); - const [isNavigationOpen, setIsNavigationOpen] = useState(true); - const [splitPanelOpen, setSplitPanelOpen] = useState(false); - const pageLayoutRef = useRef(null); - - const drawersProps: Pick | 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: drawerTriggerHide - ? undefined - : { - iconName: 'contact', - }, - }, - ], - onDrawerChange: event => { - setActiveDrawerId(event.detail.activeDrawerId); - }, - }; +import { Breadcrumbs, Containers, Navigation, Tools } from '../app-layout/utils/content-blocks'; +import labels from '../app-layout/utils/labels'; +import * as toolsContent from '../app-layout/utils/tools-content'; +import ScreenshotArea from '../utils/screenshot-area'; +export default function () { return ( - } - ref={pageLayoutRef} - content={ - -
{ - setHelpPathSlug('header'); - setIsToolsOpen(true); - pageLayoutRef.current?.focusToolsClose(); - }} - > - Info - - } - > - Page layout + + } + navigation={} + tools={{toolsContent.long}} + content={ + <> +
+
+ Demo page
- - - setUrlParams({ navigationTriggerHide: detail.checked })} - > - Hide navigation trigger - - setUrlParams({ drawerTriggerHide: detail.checked })} - > - Hide drawer trigger - - setUrlParams({ splitPanelTriggerHide: detail.checked })} - > - Hide split panel trigger - - setUrlParams({ breadcrumbsHide: detail.checked })} - > - Hide breadcrumbs - - - - - - - - - - } - > -
{ - setHelpPathSlug('content'); - setIsToolsOpen(true); - }} - > - Info - - } - > - Content -
- - - } - splitPanel={ - - This is the Split Panel! - - } - splitPanelOpen={splitPanelOpen} - splitPanelPreferences={{ - position: urlParams.splitPanelPosition, - }} - onSplitPanelToggle={event => setSplitPanelOpen(event.detail.open)} - onSplitPanelPreferencesChange={event => { - const { position } = event.detail; - setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined }); - }} - onToolsChange={event => { - setIsToolsOpen(event.detail.open); - }} - tools={} - toolsOpen={isToolsOpen} - navigationOpen={isNavigationOpen} - navigation={} - onNavigationChange={event => setIsNavigationOpen(event.detail.open)} - navigationTriggerHide={navigationTriggerHide} - {...drawersProps} - /> +
+ + + } + /> + ); } - -function Info({ helpPathSlug }: { helpPathSlug: string }) { - return Info}>Here is some info for you: {helpPathSlug}; -} diff --git a/pages/app-layout-toolbar/full-page-cards.page.tsx b/pages/app-layout-toolbar/full-page-cards.page.tsx new file mode 100644 index 0000000000..d636c4d5df --- /dev/null +++ b/pages/app-layout-toolbar/full-page-cards.page.tsx @@ -0,0 +1,109 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; +import range from 'lodash/range'; + +import { AppLayoutToolbar } from '~components'; +import Button from '~components/button'; +import Cards, { CardsProps } from '~components/cards'; +import Header from '~components/header'; +import Link from '~components/link'; + +import * as toolsContent from '../app-layout//utils/tools-content'; +import { Breadcrumbs, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks'; +import labels from '../app-layout/utils/labels'; +import ScreenshotArea from '../utils/screenshot-area'; + +interface Item { + number: number; + text: string; +} + +function createSimpleItems(count: number) { + const texts = ['One', 'Two', 'Three', 'Four', 'Five']; + return range(count).map(number => ({ number, text: texts[number % texts.length] })); +} + +const cardDefinition: CardsProps.CardDefinition = { + header: item => item.text, + sections: [ + { + id: 'description', + header: 'Number', + content: item => item.number, + }, + { + id: 'type', + header: 'Text', + content: item => item.text, + }, + ], +}; + +const config: CardsProps['cardsPerRow'] = [ + { + cards: 1, + }, + { + minWidth: 400, + cards: 2, + }, + { + cards: 3, + minWidth: 700, + }, + { + cards: 4, + minWidth: 1000, + }, +]; + +const items = createSimpleItems(16); + +export default function () { + const [toolsOpen, setToolsOpen] = useState(false); + const [selectedTool, setSelectedTool] = useState('long'); + + function openHelp(article: keyof typeof toolsContent) { + setToolsOpen(true); + setSelectedTool(article); + } + + return ( + + } + navigation={} + contentType="cards" + tools={{toolsContent[selectedTool]}} + toolsOpen={toolsOpen} + onToolsChange={({ detail }) => setToolsOpen(detail.open)} + notifications={} + content={ + + items={items} + cardDefinition={cardDefinition} + stickyHeader={true} + variant="full-page" + header={ +
openHelp('long')}> + Long help text + + } + actions={} + > + Sticky Scrollbar Example +
+ } + cardsPerRow={config} + /> + } + /> + + ); +} diff --git a/pages/app-layout-toolbar/full-page-table.page.tsx b/pages/app-layout-toolbar/full-page-table.page.tsx new file mode 100644 index 0000000000..c6dad58142 --- /dev/null +++ b/pages/app-layout-toolbar/full-page-table.page.tsx @@ -0,0 +1,86 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useContext, useState } from 'react'; + +import { AppLayoutToolbar, Button, Header, Link, Select, Table } from '~components'; + +import AppContext, { AppContextType } from '../app/app-context'; +import { Breadcrumbs, Navigation, Notifications, Tools } from '../app-layout/utils/content-blocks'; +import labels from '../app-layout/utils/labels'; +import * as toolsContent from '../app-layout/utils/tools-content'; +import { generateItems, Instance } from '../table/generate-data'; +import { columnsConfig } from '../table/shared-configs'; +import ScreenshotArea from '../utils/screenshot-area'; + +type PageContext = React.Context>; + +const items = generateItems(20); + +export default function () { + const [toolsOpen, setToolsOpen] = useState(false); + const [selectedTool, setSelectedTool] = useState('long'); + const { urlParams } = useContext(AppContext as PageContext); + + function openHelp(article: keyof typeof toolsContent) { + setToolsOpen(true); + setSelectedTool(article); + } + + const [selectedOption, setSelectedOption] = React.useState({ label: 'Option 1', value: '1' }); + + return ( + + } + navigation={} + contentType="table" + tools={{toolsContent[selectedTool]}} + toolsOpen={toolsOpen} + onToolsChange={({ detail }) => setToolsOpen(detail.open)} + notifications={} + stickyNotifications={urlParams.stickyNotifications} + content={ + + filter={ +