chore: VR improvements

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

@@ -0,0 +1,110 @@
+// 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, Footer, 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<Item> = {
+  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<keyof typeof toolsContent>('long');
+
+  function openHelp(article: keyof typeof toolsContent) {
+    setToolsOpen(true);
+    setSelectedTool(article);
+  }
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        breadcrumbs={<Breadcrumbs />}
+        navigation={<Navigation />}
+        contentType="cards"
+        tools={<Tools>{toolsContent[selectedTool]}</Tools>}
+        toolsOpen={toolsOpen}
+        onToolsChange={({ detail }) => setToolsOpen(detail.open)}
+        notifications={<Notifications />}
+        content={
+          <Cards<Item>
+            items={items}
+            cardDefinition={cardDefinition}
+            stickyHeader={true}
+            variant="full-page"
+            header={
+              <Header
+                variant="awsui-h1-sticky"
+                description="Demo page with footer"
+                info={
+                  <Link variant="info" onFollow={() => openHelp('long')}>
+                    Long help text
+                  </Link>
+                }
+                actions={<Button variant="primary">Create</Button>}
+              >
+                Sticky Scrollbar Example
+              </Header>
+            }
+            cardsPerRow={config}
+          />
+        }
+      />
+      <Footer legacyConsoleNav={false} />
+    </ScreenshotArea>
+  );
+}

pages/app-layout-toolbar/full-page-table.page.tsx

@@ -0,0 +1,68 @@
+// 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, Table } from '~components';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { Breadcrumbs, Footer, 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<AppContextType<{ stickyNotifications: boolean }>>;
+
+const items = generateItems(20);
+
+export default function () {
+  const [toolsOpen, setToolsOpen] = useState(false);
+  const [selectedTool, setSelectedTool] = useState<keyof typeof toolsContent>('long');
+  const { urlParams } = useContext(AppContext as PageContext);
+
+  function openHelp(article: keyof typeof toolsContent) {
+    setToolsOpen(true);
+    setSelectedTool(article);
+  }
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        breadcrumbs={<Breadcrumbs />}
+        navigation={<Navigation />}
+        contentType="table"
+        tools={<Tools>{toolsContent[selectedTool]}</Tools>}
+        toolsOpen={toolsOpen}
+        onToolsChange={({ detail }) => setToolsOpen(detail.open)}
+        notifications={<Notifications />}
+        stickyNotifications={urlParams.stickyNotifications}
+        content={
+          <Table<Instance>
+            header={
+              <Header
+                variant="awsui-h1-sticky"
+                description="Demo page with footer"
+                info={
+                  <Link variant="info" onFollow={() => openHelp('long')}>
+                    Long help text
+                  </Link>
+                }
+                actions={<Button variant="primary">Create</Button>}
+              >
+                Sticky Scrollbar Example
+              </Header>
+            }
+            stickyHeader={true}
+            variant="full-page"
+            columnDefinitions={columnsConfig}
+            items={items}
+            stripedRows={true}
+          />
+        }
+      />
+      <Footer legacyConsoleNav={false} />
+    </ScreenshotArea>
+  );
+}

pages/app-layout-toolbar/with-wizard.page.tsx

@@ -0,0 +1,107 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useState } from 'react';
+
+import {
+  AppLayoutToolbar,
+  Box,
+  Button,
+  ColumnLayout,
+  Container,
+  Header,
+  SpaceBetween,
+  Table,
+  Wizard,
+} from '~components';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { Breadcrumbs } from '../app-layout/utils/content-blocks';
+import labels from '../app-layout/utils/labels';
+import { generateItems, Instance } from '../table/generate-data';
+import { columnsConfig } from '../table/shared-configs';
+import ScreenshotArea from '../utils/screenshot-area';
+
+type DemoContext = React.Context<
+  AppContextType<{ hasBreadcrumbs: boolean; hasNotifications: boolean; disableOverlap: boolean }>
+>;
+
+const items = generateItems(20);
+
+export default function () {
+  const { urlParams } = useContext(AppContext as DemoContext);
+  const [activeStepIndex, setActiveStepIndex] = useState(0);
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayoutToolbar
+        ariaLabels={labels}
+        navigationHide={false}
+        breadcrumbs={urlParams.hasBreadcrumbs && <Breadcrumbs />}
+        content={
+          <Wizard
+            i18nStrings={{
+              stepNumberLabel: stepNumber => `Step ${stepNumber}`,
+              collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`,
+              skipToButtonLabel: step => `Skip to ${step.title}`,
+              navigationAriaLabel: 'Steps',
+              cancelButton: 'Cancel',
+              previousButton: 'Previous',
+              nextButton: 'Next',
+              submitButton: 'Launch instance',
+              optional: 'optional',
+            }}
+            onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)}
+            activeStepIndex={activeStepIndex}
+            allowSkipTo={true}
+            steps={[
+              {
+                title: 'Add storage',
+                content: (
+                  <Box>
+                    <Table<Instance>
+                      header={
+                        <Header
+                          variant="awsui-h1-sticky"
+                          description="Demo page with footer"
+                          actions={<Button variant="primary">Create</Button>}
+                        >
+                          Sticky Scrollbar Example
+                        </Header>
+                      }
+                      columnDefinitions={columnsConfig}
+                      items={items}
+                    />
+                  </Box>
+                ),
+                isOptional: true,
+              },
+              {
+                title: 'Review and launch',
+                content: (
+                  <SpaceBetween size="xs">
+                    <Header variant="h3" actions={<Button onClick={() => setActiveStepIndex(0)}>Edit</Button>}>
+                      Step 1: Instance type
+                    </Header>
+                    <Container header={<Header variant="h2">Container title</Header>}>
+                      <ColumnLayout columns={2} variant="text-grid">
+                        <div>
+                          <Box variant="awsui-key-label">First field</Box>
+                          <div>Value</div>
+                        </div>
+                        <div>
+                          <Box variant="awsui-key-label">Second Field</Box>
+                          <div>Value</div>
+                        </div>
+                      </ColumnLayout>
+                    </Container>
+                  </SpaceBetween>
+                ),
+              },
+            ]}
+          />
+        }
+        contentType="wizard"
+      />
+    </ScreenshotArea>
+  );
+}