diff --git a/build-tools/utils/files.js b/build-tools/utils/files.js index 5ce4c9f9a6..403ad76984 100644 --- a/build-tools/utils/files.js +++ b/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 }; diff --git a/build-tools/utils/pluralize.js b/build-tools/utils/pluralize.js index 43d4a24493..d484d65ef4 100644 --- a/build-tools/utils/pluralize.js +++ b/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', diff --git a/src/__tests__/utils.tsx b/src/__tests__/utils.tsx index fa07609bd4..42f82f8d3a 100644 --- a/src/__tests__/utils.tsx +++ b/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') + ); } /** diff --git a/src/navigation-bar/__tests__/navigation-bar.test.tsx b/src/navigation-bar/__tests__/navigation-bar.test.tsx new file mode 100644 index 0000000000..82b04f21f8 --- /dev/null +++ b/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(Hello} />); + expect(container.querySelector('nav')).toHaveTextContent('Hello'); + }); +}); diff --git a/src/navigation-bar/index.tsx b/src/navigation-bar/index.tsx new file mode 100644 index 0000000000..4bbeced7cd --- /dev/null +++ b/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 ; +} + +applyDisplayName(NavigationBar, 'NavigationBar'); diff --git a/src/navigation-bar/interfaces.ts b/src/navigation-bar/interfaces.ts new file mode 100644 index 0000000000..cf70342c2a --- /dev/null +++ b/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; +} diff --git a/src/navigation-bar/internal.tsx b/src/navigation-bar/internal.tsx new file mode 100644 index 0000000000..2bcffe95fc --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/navigation-bar/styles.scss b/src/navigation-bar/styles.scss new file mode 100644 index 0000000000..1ee7311aea --- /dev/null +++ b/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; +}