diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-20 17:01:37 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:14:41 +0100 |
| commit | 9492414d4ae94045eff4e06f636529bc0e71cb06 (patch) | |
| tree | 7f268e6b62ee89128abd0581301265dc64f147d5 /src/components/atoms/layout | |
| parent | c6f6f8f895e68f2d85ca681997ef613d982bac14 (diff) | |
refactor(components): rewrite Copyright component
* remove `icon` prop (it is confusing because a copyright should have
the copyright symbol, the license is not part of the copyright)
* reorganize copyright informations
I also updated the CC BY SA icon because the elements was in the wrong
order.
Diffstat (limited to 'src/components/atoms/layout')
| -rw-r--r-- | src/components/atoms/layout/copyright.module.scss | 32 | ||||
| -rw-r--r-- | src/components/atoms/layout/copyright.stories.tsx | 58 | ||||
| -rw-r--r-- | src/components/atoms/layout/copyright.test.tsx | 34 | ||||
| -rw-r--r-- | src/components/atoms/layout/copyright.tsx | 50 | ||||
| -rw-r--r-- | src/components/atoms/layout/index.ts | 1 |
5 files changed, 0 insertions, 175 deletions
diff --git a/src/components/atoms/layout/copyright.module.scss b/src/components/atoms/layout/copyright.module.scss deleted file mode 100644 index 5d5435c..0000000 --- a/src/components/atoms/layout/copyright.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/mixins" as mix; - -.wrapper { - --icon-size: #{fun.convert-px(70)}; - - display: flex; - flex-flow: row wrap; - align-items: center; - place-content: center; - gap: var(--spacing-2xs); - margin: 0; - font-family: var(--font-family-secondary); - font-size: var(--font-size-md); - text-align: center; - - @include mix.media("screen") { - @include mix.dimensions("sm") { - text-align: left; - } - } -} - -.owner { - flex: 1 0 100%; - - @include mix.media("screen") { - @include mix.dimensions("sm") { - flex: initial; - } - } -} diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx deleted file mode 100644 index 58d1b1e..0000000 --- a/src/components/atoms/layout/copyright.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Icon } from '../images/icons'; -import { Copyright as CopyrightComponent } from './copyright'; - -/** - * Copyright - Storybook Meta - */ -export default { - title: 'Atoms/Layout', - component: CopyrightComponent, - argTypes: { - dates: { - description: 'The copyright dates.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - icon: { - control: { - type: null, - }, - description: 'The copyright icon.', - type: { - name: 'string', - required: true, - }, - }, - owner: { - control: { - type: 'text', - }, - description: 'The copyright owner', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof CopyrightComponent>; - -const Template: ComponentStory<typeof CopyrightComponent> = (args) => ( - <CopyrightComponent {...args} /> -); - -/** - * Layout Stories - Copyright - */ -export const Copyright = Template.bind({}); -Copyright.args = { - dates: { - start: '2012', - end: '2022', - }, - icon: <Icon shape="cc-by-sa" />, - owner: 'Your name', -}; diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx deleted file mode 100644 index cdff292..0000000 --- a/src/components/atoms/layout/copyright.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { Icon } from '../images/icons'; -import { Copyright } from './copyright'; - -const dates = { - start: '2012', - end: '2022', -}; -const iconHeading = 'CC BY SA'; -const icon = <Icon heading={iconHeading} shape="cc-by-sa" />; -const owner = 'Your name'; - -describe('Copyright', () => { - it('renders the copyright owner', () => { - render(<Copyright dates={dates} icon={icon} owner={owner} />); - expect(rtlScreen.getByText(owner)).toBeInTheDocument(); - }); - - it('renders the copyright start date', () => { - render(<Copyright dates={dates} icon={icon} owner={owner} />); - expect(rtlScreen.getByText(dates.start)).toBeInTheDocument(); - }); - - it('renders the copyright end date', () => { - render(<Copyright dates={dates} icon={icon} owner={owner} />); - expect(rtlScreen.getByText(dates.end)).toBeInTheDocument(); - }); - - it('renders the copyright icon', () => { - render(<Copyright dates={dates} icon={icon} owner={owner} />); - expect(rtlScreen.getByTitle('CC BY SA')).toBeInTheDocument(); - }); -}); diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx deleted file mode 100644 index 3d56059..0000000 --- a/src/components/atoms/layout/copyright.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import type { FC, ReactNode } from 'react'; -import styles from './copyright.module.scss'; -import { Time } from './time'; - -export type CopyrightDates = { - /** - * The copyright start year. - */ - start: string; - /** - * The copyright end year. - */ - end?: string; -}; - -export type CopyrightProps = { - /** - * The copyright owner. - */ - owner: string; - /** - * The copyright dates. - */ - dates: CopyrightDates; - /** - * The copyright icon. - */ - icon: ReactNode; -}; - -/** - * Copyright component - * - * Renders a copyright information (owner, dates, license icon). - */ -export const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => ( - <div className={styles.wrapper}> - <span className={styles.owner}>{owner}</span> - {icon} - <Time date={dates.start} hideDay hideMonth /> - {dates.end ? ( - <> - <span>-</span> - <Time date={dates.end} hideDay hideMonth /> - </> - ) : ( - '' - )} - </div> -); diff --git a/src/components/atoms/layout/index.ts b/src/components/atoms/layout/index.ts index c37ff02..b8a7e6f 100644 --- a/src/components/atoms/layout/index.ts +++ b/src/components/atoms/layout/index.ts @@ -1,6 +1,5 @@ export * from './article'; export * from './aside'; -export * from './copyright'; export * from './footer'; export * from './header'; export * from './main'; |
