feat: Public layout component

build-tools/utils/pluralize.js

@@ -50,6 +50,7 @@ const pluralizationMap = {
   Modal: 'Modals',
   Multiselect: 'Multiselects',
   Pagination: 'Paginations',
+  PageLayout: 'PageLayouts',
   PieChart: 'PieCharts',
   Popover: 'Popovers',
   ProgressBar: 'ProgressBars',

pages/app/index.tsx

@@ -34,6 +34,7 @@ declare const window: ExtendedWindow;
 function isAppLayoutPage(pageId?: string) {
   const appLayoutPages = [
     'app-layout',
+    'page-layout',
     'content-layout',
     'grid-navigation-custom',
     'expandable-rows-test',

pages/page-layout/default.page.tsx

@@ -0,0 +1,188 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useRef, useState } from 'react';
+
+import {
+  Button,
+  ContentLayout,
+  Header,
+  HelpPanel,
+  Link,
+  PageLayout,
+  SpaceBetween,
+  SplitPanel,
+  Toggle,
+} from '~components';
+import awsuiPlugins from '~components/internal/plugins';
+import { PageLayoutProps } from '~components/page-layout';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { Breadcrumbs, Containers, 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: PageLayoutProps.SplitPanelPreferences['position'];
+  }>
+>;
+
+export default function WithDrawers() {
+  const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
+  const [helpPathSlug, setHelpPathSlug] = useState<string>('default');
+  const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
+  const hasTools = urlParams.hasTools ?? false;
+  const hasDrawers = urlParams.hasDrawers ?? true;
+  const [isToolsOpen, setIsToolsOpen] = useState(false);
+  const [isNavigationOpen, setIsNavigationOpen] = useState(true);
+  const appLayoutRef = useRef<PageLayoutProps.Ref>(null);
+
+  const drawersProps: Pick<PageLayoutProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> | null = !hasDrawers
+    ? null
+    : {
+        activeDrawerId: activeDrawerId,
+        drawers: [
+          {
+            ariaLabels: {
+              closeButton: 'ProHelp close button',
+              drawerName: 'ProHelp drawer content',
+              triggerButton: 'ProHelp trigger button',
+              resizeHandle: 'ProHelp resize handle',
+            },
+            content: <CustomDrawerContent />,
+            id: 'pro-help',
+          },
+        ],
+        onDrawerChange: event => {
+          setActiveDrawerId(event.detail.activeDrawerId);
+        },
+      };
+
+  return (
+    <PageLayout
+      ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
+      breadcrumbs={<Breadcrumbs />}
+      ref={appLayoutRef}
+      content={
+        <ContentLayout
+          disableOverlap={true}
+          header={
+            <SpaceBetween size="m">
+              <Header
+                variant="h1"
+                description="Sometimes you need custom drawers to get the job done."
+                info={
+                  <Link
+                    data-testid="info-link-header"
+                    variant="info"
+                    onFollow={() => {
+                      setHelpPathSlug('header');
+                      setIsToolsOpen(true);
+                      appLayoutRef.current?.focusToolsClose();
+                    }}
+                  >
+                    Info
+                  </Link>
+                }
+              >
+                Testing Custom Drawers!
+              </Header>
+
+              <SpaceBetween size="xs">
+                <Toggle checked={hasTools} onChange={({ detail }) => setUrlParams({ hasTools: detail.checked })}>
+                  Use Tools
+                </Toggle>
+
+                <Toggle checked={hasDrawers} onChange={({ detail }) => setUrlParams({ hasDrawers: detail.checked })}>
+                  Use Drawers
+                </Toggle>
+
+                <Button onClick={() => setIsNavigationOpen(current => !current)}>Toggle navigation</Button>
+
+                <Button
+                  onClick={() => {
+                    setActiveDrawerId('pro-help');
+                    appLayoutRef.current?.focusActiveDrawer();
+                  }}
+                >
+                  Open a local drawer without a trigger
+                </Button>
+                <Button onClick={() => setActiveDrawerId(null)}>Close a local drawer without a trigger</Button>
+
+                <Button
+                  onClick={() => awsuiPlugins.appLayout.openDrawer('circle4-global')}
+                  data-testid="open-drawer-button"
+                >
+                  Open a drawer without a trigger
+                </Button>
+                <Button onClick={() => awsuiPlugins.appLayout.closeDrawer('circle4-global')}>
+                  Close a drawer without a trigger
+                </Button>
+              </SpaceBetween>
+            </SpaceBetween>
+          }
+        >
+          <Header
+            info={
+              <Link
+                data-testid="info-link-content"
+                variant="info"
+                onFollow={() => {
+                  setHelpPathSlug('content');
+                  setIsToolsOpen(true);
+                }}
+              >
+                Info
+              </Link>
+            }
+          >
+            Content
+          </Header>
+          <Containers />
+        </ContentLayout>
+      }
+      splitPanel={
+        <SplitPanel
+          header="Split panel header"
+          i18nStrings={{
+            preferencesTitle: 'Preferences',
+            preferencesPositionLabel: 'Split panel position',
+            preferencesPositionDescription: 'Choose the default split panel position for the service.',
+            preferencesPositionSide: 'Side',
+            preferencesPositionBottom: 'Bottom',
+            preferencesConfirm: 'Confirm',
+            preferencesCancel: 'Cancel',
+            closeButtonAriaLabel: 'Close panel',
+            openButtonAriaLabel: 'Open panel',
+            resizeHandleAriaLabel: 'Slider',
+          }}
+        >
+          This is the Split Panel!
+        </SplitPanel>
+      }
+      splitPanelPreferences={{
+        position: urlParams.splitPanelPosition,
+      }}
+      onSplitPanelPreferencesChange={event => {
+        const { position } = event.detail;
+        setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined });
+      }}
+      onToolsChange={event => {
+        setIsToolsOpen(event.detail.open);
+      }}
+      tools={<Info helpPathSlug={helpPathSlug} />}
+      toolsOpen={isToolsOpen}
+      toolsHide={!hasTools}
+      navigationTriggerHide={true}
+      navigationOpen={isNavigationOpen}
+      onNavigationChange={event => setIsNavigationOpen(event.detail.open)}
+      {...drawersProps}
+    />
+  );
+}
+
+function Info({ helpPathSlug }: { helpPathSlug: string }) {
+  return <HelpPanel header={<h2>Info</h2>}>Here is some info for you: {helpPathSlug}</HelpPanel>;
+}

pages/page-layout/styles.scss

@@ -0,0 +1,107 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '~design-tokens' as awsui;
+
+.contentPlaceholder::before {
+  content: 'X';
+  display: block;
+  background-color: awsui.$color-background-input-disabled;
+  color: awsui.$color-background-container-content;
+  text-align: center;
+  font-size: 400px;
+  line-height: 400px;
+}
+
+.footer {
+  inset-block-end: 0;
+  inline-size: 100%;
+  color: #eee;
+  background: #232f3e;
+  box-sizing: border-box;
+  padding-block: 0;
+  padding-inline: 1rem;
+  line-height: 30px;
+  z-index: 1000;
+  &:not(.legacyNav) {
+    position: sticky;
+  }
+}
+
+.highlightBorder {
+  border-block: 1px solid red;
+  border-inline: 1px solid red;
+}
+
+.longContent {
+  block-size: 200vh;
+}
+
+.floatingBlock {
+  position: relative;
+  z-index: 1;
+  background: awsui.$color-background-container-content;
+}
+
+.wizard {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.wizard-steps {
+  inline-size: 16rem;
+  block-size: 40rem;
+  margin-inline-end: 4rem;
+}
+
+.wizard-form {
+  min-inline-size: 30rem;
+  max-inline-size: 80rem;
+  block-size: 150rem;
+}
+
+@media (max-width: 703px) {
+  .wizard {
+    display: block;
+  }
+
+  .wizard-steps {
+    margin-inline-end: 0;
+  }
+
+  .wizard-form {
+    margin-block-start: 4rem;
+  }
+}
+
+.custom-drawer-wrapper {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  overflow-y: hidden;
+}
+
+.drawer-sticky-header,
+.drawer-scrollable-content,
+.drawer-sticky-footer {
+  padding-inline: 24px;
+}
+
+.drawer-sticky-header {
+  background-color: peachpuff;
+  border-block-end: 2px solid grey;
+  padding-block: awsui.$space-scaled-l;
+}
+.drawer-scrollable-content {
+  flex: 1;
+  overflow-y: auto;
+  padding-block: awsui.$space-scaled-s;
+}
+.drawer-sticky-footer {
+  background-color: lightpink;
+  border-block-start: 2px solid grey;
+  padding-block: awsui.$space-scaled-s;
+}