diff options
| -rw-r--r-- | src/components/molecules/buttons/back-to-top.module.scss | 10 | ||||
| -rw-r--r-- | src/components/molecules/buttons/back-to-top.tsx | 7 | ||||
| -rw-r--r-- | src/components/organisms/layout/footer.module.scss | 39 | ||||
| -rw-r--r-- | src/components/organisms/layout/footer.stories.tsx | 74 | ||||
| -rw-r--r-- | src/components/organisms/layout/footer.test.tsx | 33 | ||||
| -rw-r--r-- | src/components/organisms/layout/footer.tsx | 52 |
6 files changed, 210 insertions, 5 deletions
diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss index 1abf1f6..9721bff 100644 --- a/src/components/molecules/buttons/back-to-top.module.scss +++ b/src/components/molecules/buttons/back-to-top.module.scss @@ -1,21 +1,24 @@ @use "@styles/abstracts/functions" as fun; .wrapper { - a { + .link { + width: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)}); + height: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)}); + svg { width: 100%; } :global { .arrow-head { - transform: translateY(30%) scale(1.1); + transform: translateY(30%) scale(1.2); transition: all 0.45s ease-in-out 0s; } .arrow-bar { opacity: 0; transform: translateY(30%) scaleY(0); - transition: transform 0.4s ease-in-out 0s, opacity 0.1s linear 0.4s; + transition: transform 0.45s ease-in-out 0s, opacity 0.1s linear 0.2s; } } @@ -29,7 +32,6 @@ .arrow-bar { opacity: 1; transform: translateY(0) scaleY(1); - transition: transform 0.45s ease-in-out 0s; } } diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx index 56c5247..8a52231 100644 --- a/src/components/molecules/buttons/back-to-top.tsx +++ b/src/components/molecules/buttons/back-to-top.tsx @@ -30,7 +30,12 @@ const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => { return ( <div className={`${styles.wrapper} ${className}`}> - <ButtonLink shape="square" target={`#${target}`} aria-label={linkName}> + <ButtonLink + shape="square" + target={`#${target}`} + aria-label={linkName} + className={styles.link} + > <Arrow direction="top" /> </ButtonLink> </div> diff --git a/src/components/organisms/layout/footer.module.scss b/src/components/organisms/layout/footer.module.scss new file mode 100644 index 0000000..a809d3c --- /dev/null +++ b/src/components/organisms/layout/footer.module.scss @@ -0,0 +1,39 @@ +@use "@styles/abstracts/functions" as fun; +@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") { + flex-flow: row wrap; + font-size: var(--font-size-sm); + } + } +} + +.nav { + display: flex; + flex-flow: row wrap; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + &::before { + content: "\2022"; + margin-right: var(--spacing-2xs); + } + } + } +} + +.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/footer.stories.tsx b/src/components/organisms/layout/footer.stories.tsx new file mode 100644 index 0000000..2ce7ee1 --- /dev/null +++ b/src/components/organisms/layout/footer.stories.tsx @@ -0,0 +1,74 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import FooterComponent from './footer'; + +export default { + title: 'Organisms/Layout', + component: FooterComponent, + argTypes: { + 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 FooterComponent>; + +const Template: ComponentStory<typeof FooterComponent> = (args) => ( + <IntlProvider locale="en"> + <FooterComponent {...args} /> + </IntlProvider> +); + +const copyright = { + dates: { start: '2017', end: '2022' }, + owner: 'Lorem ipsum', + icon: 'CC', +}; + +const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }]; + +export const Footer = Template.bind({}); +Footer.args = { + copyright, + navItems, + topId: 'top', +}; diff --git a/src/components/organisms/layout/footer.test.tsx b/src/components/organisms/layout/footer.test.tsx new file mode 100644 index 0000000..bc23732 --- /dev/null +++ b/src/components/organisms/layout/footer.test.tsx @@ -0,0 +1,33 @@ +import { render, screen } from '@test-utils'; +import Footer, { type FooterProps } from './footer'; + +const copyright: FooterProps['copyright'] = { + dates: { start: '2017', end: '2022' }, + owner: 'Lorem ipsum', + icon: 'CC', +}; + +const navItems: FooterProps['navItems'] = [ + { id: 'legal-notice', href: '#', label: 'Legal notice' }, +]; + +describe('Footer', () => { + it('renders the website copyright', () => { + render(<Footer copyright={copyright} topId="top" />); + expect(screen.getByText(copyright.owner)).toBeInTheDocument(); + }); + + it('renders a back to top link', () => { + render(<Footer copyright={copyright} topId="top" />); + expect( + screen.getByRole('link', { name: 'Back to top' }) + ).toBeInTheDocument(); + }); + + it('renders some nav items', () => { + render(<Footer copyright={copyright} navItems={navItems} topId="top" />); + expect( + screen.getByRole('link', { name: navItems[0].label }) + ).toBeInTheDocument(); + }); +}); diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx new file mode 100644 index 0000000..c9cb067 --- /dev/null +++ b/src/components/organisms/layout/footer.tsx @@ -0,0 +1,52 @@ +import Copyright, { CopyrightProps } from '@components/atoms/layout/copyright'; +import BackToTop from '@components/molecules/buttons/back-to-top'; +import Nav, { type NavItem } from '@components/molecules/nav/nav'; +import { VFC } from 'react'; +import styles from './footer.module.scss'; + +export type FooterProps = { + /** + * Set additional classnames to the footer element. + */ + className?: string; + /** + * Set the copyright information. + */ + copyright: CopyrightProps; + /** + * The footer nav items. + */ + navItems?: NavItem[]; + /** + * An element id (without hashtag) used as anchor for back to top button. + */ + topId: string; +}; + +/** + * Footer component + * + * Renders a footer with copyright and nav; + */ +const Footer: VFC<FooterProps> = ({ + className, + copyright, + navItems, + topId, +}) => { + return ( + <footer className={`${styles.wrapper} ${className}`}> + <Copyright + dates={copyright.dates} + owner={copyright.owner} + icon={copyright.icon} + /> + {navItems && ( + <Nav kind="footer" items={navItems} className={styles.nav} /> + )} + <BackToTop target={topId} className={styles['back-to-top']} /> + </footer> + ); +}; + +export default Footer; |