-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into tooltip-align
- Loading branch information
Showing
15 changed files
with
202 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
packages/react/src/components/UIShell/next/HeaderNavigation.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2018 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import cx from 'classnames'; | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { AriaLabelPropType } from '../../../prop-types/AriaPropTypes'; | ||
| import { usePrefix } from '../../../internal/usePrefix'; | ||
|
|
||
| function HeaderNavigation(props) { | ||
| const { | ||
| 'aria-label': ariaLabel, | ||
| 'aria-labelledby': ariaLabelledBy, | ||
| children, | ||
| className: customClassName, | ||
| ...rest | ||
| } = props; | ||
| const prefix = usePrefix(); | ||
| const className = cx(`${prefix}--header__nav`, customClassName); | ||
| // Assign both label strategies in this option, only one should be defined | ||
| // so when we spread that should be the one that is applied to the node | ||
| const accessibilityLabel = { | ||
| 'aria-label': ariaLabel, | ||
| 'aria-labelledby': ariaLabelledBy, | ||
| }; | ||
|
|
||
| return ( | ||
| <nav {...rest} {...accessibilityLabel} className={className}> | ||
| <ul className={`${prefix}--header__menu-bar`}>{children}</ul> | ||
| </nav> | ||
| ); | ||
| } | ||
|
|
||
| HeaderNavigation.propTypes = { | ||
| /** | ||
| * Required props for accessibility label on the underlying menu | ||
| */ | ||
| ...AriaLabelPropType, | ||
|
|
||
| /** | ||
| * Provide valid children of HeaderNavigation, for example `HeaderMenuItem` | ||
| * or `HeaderMenu` | ||
| */ | ||
| children: PropTypes.node, | ||
|
|
||
| /** | ||
| * Optionally provide a custom class to apply to the underlying <nav> node | ||
| */ | ||
| className: PropTypes.string, | ||
| }; | ||
|
|
||
| export { HeaderNavigation }; |
63 changes: 63 additions & 0 deletions
63
packages/react/src/components/UIShell/next/__tests__/HeaderNavigation-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2018 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { cleanup, render, screen } from '@testing-library/react'; | ||
| import React from 'react'; | ||
| import { HeaderNavigation } from '../HeaderNavigation'; | ||
|
|
||
| describe('HeaderNavigation', () => { | ||
| it('should render children that are passed to the component', () => { | ||
| render( | ||
| <HeaderNavigation aria-label="navigation"> | ||
| <li data-testid="child" /> | ||
| </HeaderNavigation> | ||
| ); | ||
| expect(screen.getByTestId('child')).toBeVisible(); | ||
| }); | ||
|
|
||
| it('should add an accessibility label to the <nav>', () => { | ||
| render( | ||
| <HeaderNavigation aria-label="navigation"> | ||
| <li data-testid="child" /> | ||
| </HeaderNavigation> | ||
| ); | ||
|
|
||
| expect(screen.getByLabelText('navigation')).toBeVisible(); | ||
|
|
||
| cleanup(); | ||
| render( | ||
| <> | ||
| <span id="label">navigation</span> | ||
| <HeaderNavigation aria-labelledby="label"> | ||
| <li data-testid="child" /> | ||
| </HeaderNavigation> | ||
| </> | ||
| ); | ||
|
|
||
| expect(screen.getByLabelText('navigation')).toBeVisible(); | ||
| }); | ||
|
|
||
| it('should support a custom className', () => { | ||
| const { container } = render( | ||
| <HeaderNavigation aria-label="navigation" className="test"> | ||
| <li data-testid="child" /> | ||
| </HeaderNavigation> | ||
| ); | ||
|
|
||
| expect(container.firstChild).toHaveClass('test'); | ||
| }); | ||
|
|
||
| it('should pass additional props to the outermost element', () => { | ||
| const { container } = render( | ||
| <HeaderNavigation aria-label="navigation" data-testid="test"> | ||
| <li data-testid="child" /> | ||
| </HeaderNavigation> | ||
| ); | ||
|
|
||
| expect(container.firstChild).toHaveAttribute('data-testid', 'test'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters