diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-02 18:57:29 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-03 15:22:24 +0200 |
| commit | 732d0943f8041d76262222a092b014f2557085ef (patch) | |
| tree | 16f6f76648b479a9591400ab15bb3e9c914f2226 /src/components/molecules/nav | |
| parent | ca921d7536cfe950b5a7d442977bbf900b48faf4 (diff) | |
chore: add homepage
Diffstat (limited to 'src/components/molecules/nav')
| -rw-r--r-- | src/components/molecules/nav/nav.stories.tsx | 26 | ||||
| -rw-r--r-- | src/components/molecules/nav/nav.tsx | 7 |
2 files changed, 32 insertions, 1 deletions
diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx index 25455fd..5cef5f0 100644 --- a/src/components/molecules/nav/nav.stories.tsx +++ b/src/components/molecules/nav/nav.stories.tsx @@ -11,6 +11,19 @@ export default { title: 'Molecules/Navigation/Nav', component: NavComponent, argTypes: { + 'aria-label': { + control: { + type: 'text', + }, + description: 'An accessible name for the navigation.', + table: { + category: 'Accessibility', + }, + type: { + name: 'string', + required: false, + }, + }, className: { control: { type: 'text', @@ -46,6 +59,19 @@ export default { required: true, }, }, + listClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the navigation list.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, }, decorators: [ (Story) => ( diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx index 2666ea2..581f813 100644 --- a/src/components/molecules/nav/nav.tsx +++ b/src/components/molecules/nav/nav.tsx @@ -24,6 +24,10 @@ export type NavItem = { export type NavProps = { /** + * An accessible name. + */ + 'aria-label'?: string; + /** * Set additional classnames to the navigation wrapper. */ className?: string; @@ -51,6 +55,7 @@ const Nav: FC<NavProps> = ({ items, kind, listClassName = '', + ...props }) => { const kindClass = `nav--${kind}`; @@ -71,7 +76,7 @@ const Nav: FC<NavProps> = ({ }; return ( - <nav className={`${styles[kindClass]} ${className}`}> + <nav className={`${styles[kindClass]} ${className}`} {...props}> <ul className={`${styles.nav__list} ${listClassName}`}>{getItems()}</ul> </nav> ); |
