feat: Add minimal component skeleton for navigation bar

Author: amanabiy

build-tools/utils/files.js

@@ -9,22 +9,21 @@ function writeFile(filepath, content) {
 }
 
 function listPublicItems(baseDir) {
-  return fs
-    .readdirSync(baseDir)
-    .filter(
-      elem =>
-        !elem.startsWith('__') &&
-        !elem.startsWith('.') &&
-        elem !== 'internal' &&
-        elem !== 'index.tsx' &&
-        elem !== 'index.ts' &&
-        elem !== 'interfaces.ts' &&
-        elem !== 'test-utils' &&
-        elem !== 'i18n' &&
-        elem !== 'theming' &&
-        elem !== 'plugins' &&
-        elem !== 'contexts'
-    );
+  return fs.readdirSync(baseDir).filter(
+    elem =>
+      !elem.startsWith('__') &&
+      !elem.startsWith('.') &&
+      elem !== 'internal' &&
+      elem !== 'navigation-bar' && // in development, not yet public
+      elem !== 'index.tsx' &&
+      elem !== 'index.ts' &&
+      elem !== 'interfaces.ts' &&
+      elem !== 'test-utils' &&
+      elem !== 'i18n' &&
+      elem !== 'theming' &&
+      elem !== 'plugins' &&
+      elem !== 'contexts'
+  );
 }
 
 module.exports = { writeFile, listPublicItems };

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',

src/__tests__/utils.tsx

@@ -11,20 +11,19 @@ const componentsDir = path.resolve(__dirname, '../../lib/components');
 const designTokensDir = path.resolve(__dirname, '../../lib/design-tokens');
 
 export function getAllComponents(): string[] {
-  return fs
-    .readdirSync(componentsDir)
-    .filter(
-      name =>
-        name !== 'internal' &&
-        name !== 'test-utils' &&
-        name !== 'theming' &&
-        name !== 'contexts' &&
-        name !== 'plugins' &&
-        name !== 'i18n' &&
-        !name.includes('.') &&
-        !name.includes('LICENSE') &&
-        !name.includes('NOTICE')
-    );
+  return fs.readdirSync(componentsDir).filter(
+    name =>
+      name !== 'internal' &&
+      name !== 'navigation-bar' && // in development, not yet public
+      name !== 'test-utils' &&
+      name !== 'theming' &&
+      name !== 'contexts' &&
+      name !== 'plugins' &&
+      name !== 'i18n' &&
+      !name.includes('.') &&
+      !name.includes('LICENSE') &&
+      !name.includes('NOTICE')
+  );
 }
 
 /**

src/navigation-bar/__tests__/navigation-bar.test.tsx

@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import NavigationBar from '../../../lib/components/navigation-bar';
+
+describe('NavigationBar', () => {
+  test('renders content', () => {
+    const { container } = render(<NavigationBar content={<span>Hello</span>} />);
+    expect(container.querySelector('nav')).toHaveTextContent('Hello');
+  });
+});

src/navigation-bar/index.tsx

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import React from 'react';
+
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import { NavigationBarProps } from './interfaces';
+import InternalNavigationBar from './internal';
+
+export { NavigationBarProps };
+
+export default function NavigationBar(props: NavigationBarProps) {
+  const baseComponentProps = useBaseComponent('NavigationBar');
+  return <InternalNavigationBar {...getExternalProps(props)} {...baseComponentProps} />;
+}
+
+applyDisplayName(NavigationBar, 'NavigationBar');

src/navigation-bar/interfaces.ts

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ReactNode } from 'react';
+
+import { BaseComponentProps } from '../internal/base-component';
+
+export interface NavigationBarProps extends BaseComponentProps {
+  /**
+   * Content of the navigation bar.
+   */
+  content?: ReactNode;
+
+  /**
+   * Accessible label for the navigation landmark.
+   */
+  ariaLabel?: string;
+}

src/navigation-bar/internal.tsx

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+
+import { getBaseProps } from '../internal/base-component';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { NavigationBarProps } from './interfaces';
+
+import styles from './styles.css.js';
+
+type InternalNavigationBarProps = NavigationBarProps & InternalBaseComponentProps;
+
+export default function InternalNavigationBar({
+  content,
+  ariaLabel,
+  __internalRootRef,
+  ...restProps
+}: InternalNavigationBarProps) {
+  const baseProps = getBaseProps(restProps);
+
+  return (
+    <nav
+      {...baseProps}
+      ref={__internalRootRef}
+      aria-label={ariaLabel}
+      className={clsx(baseProps.className, styles.root)}
+    >
+      {content}
+    </nav>
+  );
+}

src/navigation-bar/styles.scss

@@ -0,0 +1,13 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles' as styles;
+
+.root {
+  @include styles.styles-reset;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}