feat: [WIP] navigation bar

build-tools/utils/pluralize.js

@@ -56,6 +56,7 @@ const pluralizationMap = {
   Modal: 'Modals',
   Multiselect: 'Multiselects',
   NavigableGroup: 'NavigableGroups',
+  NavigationBar: 'NavigationBars',
   Pagination: 'Paginations',
   AppLayoutToolbar: 'AppLayoutToolbars',
   PanelLayout: 'PanelLayouts',

package.json

@@ -172,12 +172,12 @@
     {
       "path": "lib/components/internal/plugins/index.js",
       "brotli": false,
-      "limit": "15 kB"
+      "limit": "120 kB"
     },
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1285 kB",
+      "limit": "1580 kB",
       "ignore": "react-dom"
     }
   ],

pages/navigation-bar/common.tsx

@@ -0,0 +1,123 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import ButtonDropdown from '~components/button-dropdown';
+import Link from '~components/link';
+import SpaceBetween from '~components/space-between';
+
+// Primary horizontal — app header with branding, nav links, and user menu
+export const primaryHorizontalContent = (
+  <div style={{ display: 'flex', alignItems: 'center', width: '100%', padding: '8px 20px' }}>
+    <SpaceBetween size="m" direction="horizontal" alignItems="center">
+      <Link href="#" fontSize="heading-m">
+        CloudManager
+      </Link>
+      <Link href="#">Services</Link>
+      <Link href="#">Resources</Link>
+      <Link href="#">Monitoring</Link>
+    </SpaceBetween>
+    <div style={{ marginInlineStart: 'auto' }}>
+      <SpaceBetween size="xs" direction="horizontal" alignItems="center">
+        <Button iconName="notification" variant="icon" ariaLabel="Notifications" />
+        <ButtonDropdown
+          items={[
+            { id: 'profile', text: 'Profile' },
+            { id: 'preferences', text: 'Preferences' },
+            { id: 'signout', text: 'Sign out' },
+          ]}
+        >
+          jane@example.com
+        </ButtonDropdown>
+      </SpaceBetween>
+    </div>
+  </div>
+);
+
+// Secondary horizontal — toolbar with breadcrumbs and actions
+export const secondaryHorizontalContent = (
+  <div style={{ display: 'flex', alignItems: 'center', width: '100%', padding: '4px 20px' }}>
+    <SpaceBetween size="xs" direction="horizontal" alignItems="center">
+      <Button iconName="menu" variant="icon" ariaLabel="Toggle navigation" />
+      <Box variant="span" fontSize="body-s">
+        Home / Projects / my-service
+      </Box>
+    </SpaceBetween>
+    <div style={{ marginInlineStart: 'auto' }}>
+      <SpaceBetween size="xxs" direction="horizontal">
+        <Button iconName="refresh" variant="icon" ariaLabel="Refresh" />
+        <Button iconName="settings" variant="icon" ariaLabel="Settings" />
+      </SpaceBetween>
+    </div>
+  </div>
+);
+
+// Primary vertical — branded sidebar that mirrors the horizontal header structure
+// (brand, nav items, user menu) in a compact icon-only "shrunken" form.
+export const primaryVerticalContent = (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      height: '100%',
+      padding: '12px 8px',
+      boxSizing: 'border-box',
+      gap: '8px',
+    }}
+  >
+    <Box fontWeight="bold" fontSize="heading-s" padding={{ vertical: 'xs' }}>
+      Logo
+    </Box>
+    <SpaceBetween size="xs" direction="vertical" alignItems="center">
+      <Button iconName="grid-view" variant="icon" ariaLabel="Services" />
+      <Button iconName="folder" variant="icon" ariaLabel="Resources" />
+      <Button iconName="view-horizontal" variant="icon" ariaLabel="Monitoring" />
+    </SpaceBetween>
+    <div style={{ marginBlockStart: 'auto' }}>
+      <SpaceBetween size="xs" direction="vertical" alignItems="center">
+        <Button iconName="notification" variant="icon" ariaLabel="Notifications" />
+        <ButtonDropdown
+          variant="icon"
+          ariaLabel="User menu"
+          items={[
+            { id: 'profile', text: 'Profile' },
+            { id: 'preferences', text: 'Preferences' },
+            { id: 'signout', text: 'Sign out' },
+          ]}
+        />
+      </SpaceBetween>
+    </div>
+  </div>
+);
+
+// Secondary vertical — tool rail with actions
+export const secondaryVerticalContent = (
+  <SpaceBetween size="s" direction="vertical" alignItems="center">
+    <Button iconName="edit" variant="icon" ariaLabel="Edit" />
+    <Button iconName="copy" variant="icon" ariaLabel="Duplicate" />
+    <Button iconName="download" variant="icon" ariaLabel="Export" />
+  </SpaceBetween>
+);
+
+// Legacy exports
+export const primaryContent = primaryHorizontalContent;
+export const secondaryContent = secondaryHorizontalContent;
+
+// Shared filler content for scrollable areas
+export const filler = Array.from({ length: 50 }, (_, i) => (
+  <Box key={i} padding={{ vertical: 'xxs' }}>
+    Scrollable content line {i + 1}
+  </Box>
+));
+
+// Shared layout styles for full-screen demo pages
+export const layoutStyles = {
+  fullHeight: { display: 'flex', flexDirection: 'column', height: '100vh' } as React.CSSProperties,
+  fullHeightRow: { display: 'flex', height: '100vh' } as React.CSSProperties,
+  row: { display: 'flex', flex: 1, minHeight: 0 } as React.CSSProperties,
+  column: { display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 } as React.CSSProperties,
+  scrollable: { flex: 1, overflow: 'auto', padding: '16px' } as React.CSSProperties,
+};

pages/navigation-bar/compositions/horizontal-primary.page.tsx

@@ -0,0 +1,136 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+import Toggle from '~components/toggle';
+
+import AppContext, { AppContextType } from '../../app/app-context';
+import {
+  filler,
+  layoutStyles,
+  primaryHorizontalContent,
+  secondaryHorizontalContent,
+  secondaryVerticalContent,
+} from '../common';
+
+type PageContext = React.Context<
+  AppContextType<{
+    primaryTop: boolean;
+    primaryBottom: boolean;
+    secondaryTop: boolean;
+    secondaryBottom: boolean;
+    left: boolean;
+    right: boolean;
+    darkMode: boolean;
+  }>
+>;
+
+export default function HorizontalPrimaryPage() {
+  const {
+    urlParams: { primaryTop, primaryBottom, secondaryTop, secondaryBottom, left, right, darkMode },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+
+  const showPrimaryTop = primaryTop !== false;
+  const showPrimaryBottom = primaryBottom === true;
+  const showSecondaryTop = secondaryTop !== false;
+  const showSecondaryBottom = secondaryBottom === true;
+  const showLeft = left !== false;
+  const showRight = right === true;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100dvh - var(--app-header-height, 40px))' }}>
+      {showPrimaryTop && (
+        <NavigationBar
+          placement="top"
+          variant={darkMode ? 'primary-accent' : 'primary'}
+          ariaLabel="Top navigation"
+          content={primaryHorizontalContent}
+        />
+      )}
+      {showSecondaryTop && (
+        <NavigationBar
+          placement="top"
+          variant="secondary"
+          ariaLabel="Secondary toolbar"
+          content={secondaryHorizontalContent}
+        />
+      )}
+      <div style={layoutStyles.row}>
+        {showLeft && (
+          <NavigationBar
+            placement="start"
+            variant="secondary"
+            ariaLabel="Left navigation"
+            content={secondaryVerticalContent}
+          />
+        )}
+        <div style={layoutStyles.scrollable}>
+          <Box variant="h1">NavigationBar — Horizontal primary</Box>
+          <SpaceBetween size="m">
+            <SpaceBetween size="m" direction="horizontal">
+              <Toggle checked={showPrimaryTop} onChange={({ detail }) => setUrlParams({ primaryTop: detail.checked })}>
+                Primary top
+              </Toggle>
+              <Toggle
+                checked={showPrimaryBottom}
+                onChange={({ detail }) => setUrlParams({ primaryBottom: detail.checked })}
+              >
+                Primary bottom
+              </Toggle>
+              <Toggle
+                checked={showSecondaryTop}
+                onChange={({ detail }) => setUrlParams({ secondaryTop: detail.checked })}
+              >
+                Secondary top
+              </Toggle>
+              <Toggle
+                checked={showSecondaryBottom}
+                onChange={({ detail }) => setUrlParams({ secondaryBottom: detail.checked })}
+              >
+                Secondary bottom
+              </Toggle>
+              <Toggle checked={showLeft} onChange={({ detail }) => setUrlParams({ left: detail.checked })}>
+                Left
+              </Toggle>
+              <Toggle checked={showRight} onChange={({ detail }) => setUrlParams({ right: detail.checked })}>
+                Right
+              </Toggle>
+            </SpaceBetween>
+            <Toggle checked={darkMode === true} onChange={({ detail }) => setUrlParams({ darkMode: detail.checked })}>
+              primary-accent
+            </Toggle>
+            <div>{filler}</div>
+          </SpaceBetween>
+        </div>
+        {showRight && (
+          <NavigationBar
+            placement="end"
+            variant="secondary"
+            ariaLabel="Right navigation"
+            content={secondaryVerticalContent}
+          />
+        )}
+      </div>
+      {showSecondaryBottom && (
+        <NavigationBar
+          placement="bottom"
+          variant="secondary"
+          ariaLabel="Secondary bottom toolbar"
+          content={secondaryHorizontalContent}
+        />
+      )}
+      {showPrimaryBottom && (
+        <NavigationBar
+          placement="bottom"
+          variant={darkMode ? 'primary-accent' : 'primary'}
+          ariaLabel="Bottom navigation"
+          content={primaryHorizontalContent}
+        />
+      )}
+    </div>
+  );
+}

pages/navigation-bar/compositions/horizontal.page.tsx

@@ -0,0 +1,40 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+import Toggle from '~components/toggle';
+
+import AppContext, { AppContextType } from '../../app/app-context';
+import { filler, layoutStyles, primaryHorizontalContent, secondaryHorizontalContent } from '../common';
+
+type PageContext = React.Context<AppContextType<{ darkMode: boolean }>>;
+
+export default function HorizontalCompositionPage() {
+  const {
+    urlParams: { darkMode },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100dvh - var(--app-header-height, 40px))' }}>
+      <NavigationBar
+        variant={darkMode ? 'primary-accent' : 'primary'}
+        ariaLabel="Primary navigation"
+        content={primaryHorizontalContent}
+      />
+      <NavigationBar variant="secondary" ariaLabel="Toolbar" content={secondaryHorizontalContent} />
+      <div style={layoutStyles.scrollable}>
+        <Box variant="h1">NavigationBar — Horizontal composition</Box>
+        <SpaceBetween size="s">
+          <Toggle checked={darkMode === true} onChange={({ detail }) => setUrlParams({ darkMode: detail.checked })}>
+            primary-accent variant
+          </Toggle>
+        </SpaceBetween>
+        <Box padding={{ top: 'm' }}>{filler}</Box>
+      </div>
+    </div>
+  );
+}