diff options
Diffstat (limited to 'src/components/organisms/layout')
| -rw-r--r-- | src/components/organisms/layout/index.ts | 2 | ||||
| -rw-r--r-- | src/components/organisms/layout/site-footer.module.scss | 26 | ||||
| -rw-r--r-- | src/components/organisms/layout/site-footer.stories.tsx | 92 | ||||
| -rw-r--r-- | src/components/organisms/layout/site-footer.test.tsx | 38 | ||||
| -rw-r--r-- | src/components/organisms/layout/site-footer.tsx | 78 | ||||
| -rw-r--r-- | src/components/organisms/layout/site-header.module.scss | 50 | ||||
| -rw-r--r-- | src/components/organisms/layout/site-header.stories.tsx | 162 | ||||
| -rw-r--r-- | src/components/organisms/layout/site-header.test.tsx | 59 | ||||
| -rw-r--r-- | src/components/organisms/layout/site-header.tsx | 47 |
9 files changed, 0 insertions, 554 deletions
diff --git a/src/components/organisms/layout/index.ts b/src/components/organisms/layout/index.ts index 4593ccc..86670e3 100644 --- a/src/components/organisms/layout/index.ts +++ b/src/components/organisms/layout/index.ts @@ -3,6 +3,4 @@ export * from './comments-list'; export * from './no-results'; export * from './overview'; export * from './posts-list'; -export * from './site-footer'; -export * from './site-header'; export * from './summary'; diff --git a/src/components/organisms/layout/site-footer.module.scss b/src/components/organisms/layout/site-footer.module.scss deleted file mode 100644 index 158c419..0000000 --- a/src/components/organisms/layout/site-footer.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use "../../../styles/abstracts/mixins" as mix; - -.wrapper { - display: flex; - flex-flow: column wrap; - gap: var(--spacing-xs); - place-items: center; - place-content: center; - padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md)); - - @include mix.media("screen") { - @include mix.dimensions("sm") { - --toolbar-size: 0px; - - flex-flow: row wrap; - font-size: var(--font-size-sm); - } - } -} - -.back-to-top { - position: fixed; - bottom: calc(var(--toolbar-size, 0px) + var(--spacing-md)); - right: var(--spacing-md); - transition: all 0.4s ease-in 0s; -} diff --git a/src/components/organisms/layout/site-footer.stories.tsx b/src/components/organisms/layout/site-footer.stories.tsx deleted file mode 100644 index 3f244b0..0000000 --- a/src/components/organisms/layout/site-footer.stories.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Icon } from '../../atoms'; -import { SiteFooter as SiteFooterComponent } from './site-footer'; - -/** - * SiteFooter - Storybook Meta - */ -export default { - title: 'Organisms/Layout', - component: SiteFooterComponent, - argTypes: { - backToTopClassName: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the back to top button.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the footer element.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - copyright: { - description: 'The copyright information.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - navItems: { - description: 'The footer nav items.', - table: { - category: 'Options', - }, - type: { - name: 'object', - required: false, - value: {}, - }, - }, - topId: { - control: { - type: 'text', - }, - description: - 'An element id (without hashtag) used as target by back to top button.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof SiteFooterComponent>; - -const Template: ComponentStory<typeof SiteFooterComponent> = (args) => ( - <SiteFooterComponent {...args} /> -); - -const copyright = { - from: '2017', - owner: 'Lorem ipsum', - to: '2022', -}; - -const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }]; - -/** - * Layout Stories - SiteFooter - */ -export const SiteFooter = Template.bind({}); -SiteFooter.args = { - copyright, - license: <Icon shape="cc-by-sa" />, - navItems, - topId: 'top', -}; diff --git a/src/components/organisms/layout/site-footer.test.tsx b/src/components/organisms/layout/site-footer.test.tsx deleted file mode 100644 index 3ad4022..0000000 --- a/src/components/organisms/layout/site-footer.test.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { SiteFooter, type SiteFooterProps } from './site-footer'; - -const copyright: SiteFooterProps['copyright'] = { - from: '2017', - owner: 'Lorem ipsum', -}; - -const navItems = [ - { id: 'legal-notice', href: '#', label: 'Legal notice' }, -] satisfies SiteFooterProps['navItems']; - -describe('SiteFooter', () => { - it('renders the website copyright', () => { - render(<SiteFooter copyright={copyright} topId="top" />); - expect( - rtlScreen.getByText(new RegExp(copyright.owner)) - ).toBeInTheDocument(); - expect(rtlScreen.getByText(new RegExp(copyright.from))).toBeInTheDocument(); - }); - - it('renders a back to top link', () => { - render(<SiteFooter copyright={copyright} topId="top" />); - expect( - rtlScreen.getByRole('link', { name: 'Back to top' }) - ).toBeInTheDocument(); - }); - - it('renders some nav items', () => { - render( - <SiteFooter copyright={copyright} navItems={navItems} topId="top" /> - ); - expect( - rtlScreen.getByRole('link', { name: navItems[0].label }) - ).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/layout/site-footer.tsx b/src/components/organisms/layout/site-footer.tsx deleted file mode 100644 index ccab051..0000000 --- a/src/components/organisms/layout/site-footer.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import type { FC, ReactNode } from 'react'; -import { useIntl } from 'react-intl'; -import { Footer } from '../../atoms'; -import { - BackToTop, - type BackToTopProps, - Colophon, - type ColophonLink, - type CopyrightProps, - Copyright, -} from '../../molecules'; -import styles from './site-footer.module.scss'; - -export type SiteFooterProps = { - /** - * Set additional classnames to the back to top button. - */ - backToTopClassName?: BackToTopProps['className']; - /** - * Set additional classnames to the footer element. - */ - className?: string; - /** - * Set the copyright information. - */ - copyright: CopyrightProps; - /** - * The website license. - */ - license?: ReactNode; - /** - * The footer nav items. - */ - navItems?: ColophonLink[]; - /** - * An element id (without hashtag) used as anchor for back to top button. - */ - topId: string; -}; - -/** - * SiteFooter component - * - * Renders a footer with copyright and nav; - */ -export const SiteFooter: FC<SiteFooterProps> = ({ - backToTopClassName, - className = '', - copyright, - license, - navItems, - topId, -}) => { - const intl = useIntl(); - const backToTop = intl.formatMessage({ - defaultMessage: 'Back to top', - description: 'SiteFooter: an accessible name for the back to top button', - id: 'OHvb01', - }); - const backToTopAnchor = `#${topId}`; - const footerClass = `${styles.wrapper} ${className}`; - const btnClass = `${styles['back-to-top']} ${backToTopClassName}`; - - return ( - <Footer className={footerClass}> - <Colophon - copyright={<Copyright {...copyright} />} - license={license} - links={navItems} - /> - <BackToTop - anchor={backToTopAnchor} - className={btnClass} - label={backToTop} - /> - </Footer> - ); -}; diff --git a/src/components/organisms/layout/site-header.module.scss b/src/components/organisms/layout/site-header.module.scss deleted file mode 100644 index 573d455..0000000 --- a/src/components/organisms/layout/site-header.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/mixins" as mix; - -.wrapper { - display: grid; - grid-template-columns: - minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 100ch) - minmax(0, 1fr); - align-items: center; - padding: var(--spacing-md) 0 var(--spacing-lg); - - .toolbar { - justify-content: space-around; - position: fixed; - bottom: 0; - left: 0; - z-index: 5; - background: var(--color-bg); - border-top: fun.convert-px(4) solid; - border-image: radial-gradient( - ellipse at top, - var(--color-primary-lighter) 20%, - var(--color-primary) 100% - ) - 1; - box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1) - var(--color-shadow-dark); - - @include mix.media("screen") { - @include mix.dimensions("sm") { - justify-content: flex-end; - width: auto; - position: relative; - left: unset; - background: inherit; - border: none; - box-shadow: none; - } - } - } -} - -.body { - grid-column: 2; - display: flex; - flex-flow: row wrap; - align-items: center; - justify-content: space-between; - gap: var(--spacing-md); -} diff --git a/src/components/organisms/layout/site-header.stories.tsx b/src/components/organisms/layout/site-header.stories.tsx deleted file mode 100644 index e69ebfd..0000000 --- a/src/components/organisms/layout/site-header.stories.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import NextImage from 'next/image'; -import { Heading } from '../../atoms'; -import { SiteHeader as SiteHeaderComponent } from './site-header'; - -/** - * SiteHeader - Storybook Meta - */ -export default { - title: 'Organisms/Layout', - component: SiteHeaderComponent, - args: { - ackeeStorageKey: 'ackee-tracking', - isHome: false, - motionStorageKey: 'reduced-motion', - searchPage: '#', - withLink: false, - }, - argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'Set Ackee settings local storage key.', - type: { - name: 'string', - required: true, - }, - }, - baseline: { - control: { - type: 'text', - }, - description: 'The branding baseline.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the header wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - isHome: { - control: { - type: 'boolean', - }, - description: 'Determine if the current page is homepage or not.', - table: { - category: 'Options', - }, - type: { - name: 'boolean', - required: false, - }, - }, - motionStorageKey: { - control: { - type: 'text', - }, - description: 'Set Reduced motion settings local storage key.', - type: { - name: 'string', - required: true, - }, - }, - nav: { - description: 'The main navigation items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - photo: { - control: { - type: 'text', - }, - description: 'The branding photo.', - type: { - name: 'string', - required: true, - }, - }, - searchPage: { - control: { - type: 'text', - }, - description: 'The search results page url.', - type: { - name: 'string', - required: true, - }, - }, - title: { - control: { - type: 'text', - }, - description: 'The website title.', - type: { - name: 'string', - required: true, - }, - }, - withLink: { - control: { - type: 'boolean', - }, - description: 'Wrap the website title with a link to homepage.', - table: { - category: 'Options', - }, - type: { - name: 'boolean', - required: false, - }, - }, - }, - parameters: { - layout: 'fullscreen', - }, -} as ComponentMeta<typeof SiteHeaderComponent>; - -const Template: ComponentStory<typeof SiteHeaderComponent> = (args) => ( - <SiteHeaderComponent {...args} /> -); - -const nav = [ - { id: 'home-link', href: '#', label: 'Home' }, - { id: 'blog-link', href: '#', label: 'Blog' }, - { id: 'cv-link', href: '#', label: 'CV' }, - { id: 'contact-link', href: '#', label: 'Contact' }, -]; - -/** - * Layout Stories - SiteHeader - */ -export const SiteHeader = Template.bind({}); -SiteHeader.args = { - nav, - logo: ( - <NextImage - alt="A logo" - height={100} - src="https://picsum.photos/100" - width={100} - /> - ), - name: <Heading level={1}>Website title</Heading>, -}; diff --git a/src/components/organisms/layout/site-header.test.tsx b/src/components/organisms/layout/site-header.test.tsx deleted file mode 100644 index fa1b7be..0000000 --- a/src/components/organisms/layout/site-header.test.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import NextImage from 'next/image'; -import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { SiteHeader } from './site-header'; - -const nav = [ - { id: 'home-link', href: '#', label: 'Home' }, - { id: 'blog-link', href: '#', label: 'Blog' }, - { id: 'cv-link', href: '#', label: 'CV' }, - { id: 'contact-link', href: '#', label: 'Contact' }, -]; - -const title = 'Assumenda quis quod'; - -describe('SiteHeader', () => { - it('renders the website title', () => { - render( - <SiteHeader - ackeeStorageKey="ackee-tracking" - logo={ - <NextImage - alt="A logo" - height={200} - src="https://picsum.photos/200" - width={200} - /> - } - motionStorageKey="reduced-motion" - name={<h1>{title}</h1>} - nav={nav} - searchPage="#" - /> - ); - expect( - rtlScreen.getByRole('heading', { level: 1, name: title }) - ).toBeInTheDocument(); - }); - - it('renders the main nav', () => { - render( - <SiteHeader - ackeeStorageKey="ackee-tracking" - logo={ - <NextImage - alt="A photo" - height={200} - src="https://picsum.photos/200" - width={200} - /> - } - motionStorageKey="reduced-motion" - name={<div>{title}</div>} - nav={nav} - searchPage="#" - /> - ); - expect(rtlScreen.getByRole('navigation')).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/layout/site-header.tsx b/src/components/organisms/layout/site-header.tsx deleted file mode 100644 index e8953c0..0000000 --- a/src/components/organisms/layout/site-header.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { FC } from 'react'; -import { Header } from '../../atoms'; -import { Branding, type BrandingProps } from '../../molecules'; -import { Toolbar, type ToolbarProps } from '../toolbar'; -import styles from './site-header.module.scss'; - -export type SiteHeaderProps = BrandingProps & - Pick< - ToolbarProps, - 'ackeeStorageKey' | 'motionStorageKey' | 'nav' | 'searchPage' - > & { - /** - * Set additional classnames to the header element. - */ - className?: string; - }; - -/** - * SiteHeader component - * - * Render the website header. - */ -export const SiteHeader: FC<SiteHeaderProps> = ({ - ackeeStorageKey, - className, - motionStorageKey, - nav, - searchPage, - ...props -}) => { - const headerClass = `${styles.wrapper} ${className}`; - - return ( - <Header className={headerClass}> - <div className={styles.body}> - <Branding {...props} /> - <Toolbar - ackeeStorageKey={ackeeStorageKey} - className={styles.toolbar} - motionStorageKey={motionStorageKey} - nav={nav} - searchPage={searchPage} - /> - </div> - </Header> - ); -}; |