From 9492414d4ae94045eff4e06f636529bc0e71cb06 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 20 Oct 2023 17:01:37 +0200 Subject: 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. --- .../svg-paths/icons-paths/cc-by-sa-icon-paths.tsx | 19 ++++--- src/components/atoms/layout/copyright.module.scss | 32 ------------ src/components/atoms/layout/copyright.stories.tsx | 58 ---------------------- src/components/atoms/layout/copyright.test.tsx | 34 ------------- src/components/atoms/layout/copyright.tsx | 50 ------------------- src/components/atoms/layout/index.ts | 1 - 6 files changed, 11 insertions(+), 183 deletions(-) delete mode 100644 src/components/atoms/layout/copyright.module.scss delete mode 100644 src/components/atoms/layout/copyright.stories.tsx delete mode 100644 src/components/atoms/layout/copyright.test.tsx delete mode 100644 src/components/atoms/layout/copyright.tsx (limited to 'src/components/atoms') diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx index 5961d92..a21b94d 100644 --- a/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx @@ -8,13 +8,16 @@ import type { FC } from 'react'; */ export const CCBySAIconPaths: FC = () => ( <> - - - - - - - - + + + + + + + + ); 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; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Layout Stories - Copyright - */ -export const Copyright = Template.bind({}); -Copyright.args = { - dates: { - start: '2012', - end: '2022', - }, - icon: , - 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 = ; -const owner = 'Your name'; - -describe('Copyright', () => { - it('renders the copyright owner', () => { - render(); - expect(rtlScreen.getByText(owner)).toBeInTheDocument(); - }); - - it('renders the copyright start date', () => { - render(); - expect(rtlScreen.getByText(dates.start)).toBeInTheDocument(); - }); - - it('renders the copyright end date', () => { - render(); - expect(rtlScreen.getByText(dates.end)).toBeInTheDocument(); - }); - - it('renders the copyright icon', () => { - render(); - 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 = ({ owner, dates, icon }) => ( -
- {owner} - {icon} -
-); 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'; -- cgit v1.2.3