diff options
Diffstat (limited to 'src/components/molecules/nav')
| -rw-r--r-- | src/components/molecules/nav/breadcrumb.stories.tsx | 2 | ||||
| -rw-r--r-- | src/components/molecules/nav/breadcrumb.test.tsx | 2 | ||||
| -rw-r--r-- | src/components/molecules/nav/breadcrumb.tsx | 8 | ||||
| -rw-r--r-- | src/components/molecules/nav/index.ts | 3 | ||||
| -rw-r--r-- | src/components/molecules/nav/nav.stories.tsx | 13 | ||||
| -rw-r--r-- | src/components/molecules/nav/nav.test.tsx | 5 | ||||
| -rw-r--r-- | src/components/molecules/nav/nav.tsx | 9 | ||||
| -rw-r--r-- | src/components/molecules/nav/pagination.stories.tsx | 10 | ||||
| -rw-r--r-- | src/components/molecules/nav/pagination.test.tsx | 2 | ||||
| -rw-r--r-- | src/components/molecules/nav/pagination.tsx | 8 |
10 files changed, 27 insertions, 35 deletions
diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx index cf67e60..b6dd619 100644 --- a/src/components/molecules/nav/breadcrumb.stories.tsx +++ b/src/components/molecules/nav/breadcrumb.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import Breadcrumb from './breadcrumb'; +import { Breadcrumb } from './breadcrumb'; /** * Breadcrumb - Storybook Meta diff --git a/src/components/molecules/nav/breadcrumb.test.tsx b/src/components/molecules/nav/breadcrumb.test.tsx index f3a23b5..1838a1d 100644 --- a/src/components/molecules/nav/breadcrumb.test.tsx +++ b/src/components/molecules/nav/breadcrumb.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Breadcrumb, { type BreadcrumbItem } from './breadcrumb'; +import { Breadcrumb, type BreadcrumbItem } from './breadcrumb'; const items: BreadcrumbItem[] = [ { id: 'home', url: '#', name: 'Home' }, diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx index bc50f55..247bc2b 100644 --- a/src/components/molecules/nav/breadcrumb.tsx +++ b/src/components/molecules/nav/breadcrumb.tsx @@ -3,7 +3,7 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; import { BreadcrumbList, ListItem, WithContext } from 'schema-dts'; import { settings } from '../../../utils/config'; -import Link from '../../atoms/links/link'; +import { Link } from '../../atoms'; import styles from './breadcrumb.module.scss'; export type BreadcrumbItem = { @@ -41,7 +41,7 @@ export type BreadcrumbProps = { * * Render a breadcrumb navigation. */ -const Breadcrumb: FC<BreadcrumbProps> = ({ +export const Breadcrumb: FC<BreadcrumbProps> = ({ itemClassName = '', items, ...props @@ -106,9 +106,9 @@ const Breadcrumb: FC<BreadcrumbProps> = ({ return ( <> <Script + dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} id="schema-breadcrumb" type="application/ld+json" - dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} /> <nav aria-label={ariaLabel} {...props}> <span className="screen-reader-text"> @@ -123,5 +123,3 @@ const Breadcrumb: FC<BreadcrumbProps> = ({ </> ); }; - -export default Breadcrumb; diff --git a/src/components/molecules/nav/index.ts b/src/components/molecules/nav/index.ts new file mode 100644 index 0000000..68efe4e --- /dev/null +++ b/src/components/molecules/nav/index.ts @@ -0,0 +1,3 @@ +export * from './breadcrumb'; +export * from './nav'; +export * from './pagination'; diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx index abf6882..d343528 100644 --- a/src/components/molecules/nav/nav.stories.tsx +++ b/src/components/molecules/nav/nav.stories.tsx @@ -1,14 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import Envelop from '../../atoms/icons/envelop'; -import Home from '../../atoms/icons/home'; -import NavComponent, { type NavItem } from './nav'; +import { Envelop, Home } from '../../atoms'; +import { Nav, type NavItem } from './nav'; /** * Nav - Storybook Meta */ export default { title: 'Molecules/Navigation/Nav', - component: NavComponent, + component: Nav, argTypes: { 'aria-label': { control: { @@ -72,11 +71,9 @@ export default { }, }, }, -} as ComponentMeta<typeof NavComponent>; +} as ComponentMeta<typeof Nav>; -const Template: ComponentStory<typeof NavComponent> = (args) => ( - <NavComponent {...args} /> -); +const Template: ComponentStory<typeof Nav> = (args) => <Nav {...args} />; const MainNavItems: NavItem[] = [ { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> }, diff --git a/src/components/molecules/nav/nav.test.tsx b/src/components/molecules/nav/nav.test.tsx index b0920c8..37b2f41 100644 --- a/src/components/molecules/nav/nav.test.tsx +++ b/src/components/molecules/nav/nav.test.tsx @@ -1,7 +1,6 @@ import { render, screen } from '../../../../tests/utils'; -import Envelop from '../../atoms/icons/envelop'; -import Home from '../../atoms/icons/home'; -import Nav, { type NavItem } from './nav'; +import { Envelop, Home } from '../../atoms'; +import { Nav, type NavItem } from './nav'; const navItems: NavItem[] = [ { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> }, diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx index 71d459a..8214d94 100644 --- a/src/components/molecules/nav/nav.tsx +++ b/src/components/molecules/nav/nav.tsx @@ -1,6 +1,5 @@ import { FC, ReactNode } from 'react'; -import Link from '../../atoms/links/link'; -import NavLink from '../../atoms/links/nav-link'; +import { Link, NavLink } from '../../atoms'; import styles from './nav.module.scss'; export type NavItem = { @@ -50,7 +49,7 @@ export type NavProps = { * * Render the nav links. */ -const Nav: FC<NavProps> = ({ +export const Nav: FC<NavProps> = ({ className = '', items, kind, @@ -76,10 +75,8 @@ const Nav: FC<NavProps> = ({ }; return ( - <nav className={`${styles[kindClass]} ${className}`} {...props}> + <nav {...props} className={`${styles[kindClass]} ${className}`}> <ul className={`${styles.nav__list} ${listClassName}`}>{getItems()}</ul> </nav> ); }; - -export default Nav; diff --git a/src/components/molecules/nav/pagination.stories.tsx b/src/components/molecules/nav/pagination.stories.tsx index 2e86db4..678c574 100644 --- a/src/components/molecules/nav/pagination.stories.tsx +++ b/src/components/molecules/nav/pagination.stories.tsx @@ -1,12 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import PaginationComponent from './pagination'; +import { Pagination } from './pagination'; /** * Pagination - Storybook Meta */ export default { title: 'Molecules/Navigation/Pagination', - component: PaginationComponent, + component: Pagination, args: { baseUrl: '/page/', siblings: 1, @@ -98,10 +98,10 @@ export default { }, }, }, -} as ComponentMeta<typeof PaginationComponent>; +} as ComponentMeta<typeof Pagination>; -const Template: ComponentStory<typeof PaginationComponent> = (args) => ( - <PaginationComponent {...args} /> +const Template: ComponentStory<typeof Pagination> = (args) => ( + <Pagination {...args} /> ); /** diff --git a/src/components/molecules/nav/pagination.test.tsx b/src/components/molecules/nav/pagination.test.tsx index bf0e6c1..86ba719 100644 --- a/src/components/molecules/nav/pagination.test.tsx +++ b/src/components/molecules/nav/pagination.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Pagination from './pagination'; +import { Pagination } from './pagination'; const total = 50; const perPage = 10; diff --git a/src/components/molecules/nav/pagination.tsx b/src/components/molecules/nav/pagination.tsx index e832e1d..6fa69f0 100644 --- a/src/components/molecules/nav/pagination.tsx +++ b/src/components/molecules/nav/pagination.tsx @@ -1,6 +1,6 @@ import { FC, Fragment, ReactNode } from 'react'; import { useIntl } from 'react-intl'; -import ButtonLink from '../../atoms/buttons/button-link'; +import { ButtonLink } from '../../atoms'; import styles from './pagination.module.scss'; export type PaginationProps = { @@ -39,7 +39,7 @@ export type PaginationProps = { * * Render a page-based navigation. */ -const Pagination: FC<PaginationProps> = ({ +export const Pagination: FC<PaginationProps> = ({ baseUrl = '/page/', className = '', current, @@ -204,7 +204,7 @@ const Pagination: FC<PaginationProps> = ({ }; return ( - <nav className={`${styles.wrapper} ${className}`} {...props}> + <nav {...props} className={`${styles.wrapper} ${className}`}> <ul className={`${styles.list} ${styles['list--pages']}`}> {getPages(current, totalPages)} </ul> @@ -216,5 +216,3 @@ const Pagination: FC<PaginationProps> = ({ </nav> ); }; - -export default Pagination; |
