diff options
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> ); |
