aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/layout
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-20 17:01:37 +0200
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:14:41 +0100
commit9492414d4ae94045eff4e06f636529bc0e71cb06 (patch)
tree7f268e6b62ee89128abd0581301265dc64f147d5 /src/components/atoms/layout
parentc6f6f8f895e68f2d85ca681997ef613d982bac14 (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.scss32
-rw-r--r--src/components/atoms/layout/copyright.stories.tsx58
-rw-r--r--src/components/atoms/layout/copyright.test.tsx34
-rw-r--r--src/components/atoms/layout/copyright.tsx50
-rw-r--r--src/components/atoms/layout/index.ts1
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';