aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/layout
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-02 17:39:16 +0200
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:14:41 +0100
commit6221fa82e41915702d8139cade5c25e9d61e619f (patch)
tree9c725b7f7b1e002747712de456c73f28839f0ebd /src/components/atoms/layout
parent36890cfafeba6e30782df1260d7f9e678c7da4bf (diff)
refactor(components): remove Column and NoScript from atoms
* Column is a simple div meant to be used inside Columns component so they should live together. * NoScript is only used in Layout component and its name does not make sense since it needs to be used inside a `noscript` element.
Diffstat (limited to 'src/components/atoms/layout')
-rw-r--r--src/components/atoms/layout/column.stories.tsx29
-rw-r--r--src/components/atoms/layout/column.test.tsx13
-rw-r--r--src/components/atoms/layout/column.tsx14
-rw-r--r--src/components/atoms/layout/copyright.module.scss2
-rw-r--r--src/components/atoms/layout/copyright.stories.tsx2
-rw-r--r--src/components/atoms/layout/copyright.test.tsx4
-rw-r--r--src/components/atoms/layout/copyright.tsx2
-rw-r--r--src/components/atoms/layout/index.ts2
-rw-r--r--src/components/atoms/layout/no-script.module.scss19
-rw-r--r--src/components/atoms/layout/no-script.stories.tsx62
-rw-r--r--src/components/atoms/layout/no-script.test.tsx12
-rw-r--r--src/components/atoms/layout/no-script.tsx22
12 files changed, 6 insertions, 177 deletions
diff --git a/src/components/atoms/layout/column.stories.tsx b/src/components/atoms/layout/column.stories.tsx
deleted file mode 100644
index a8d43bf..0000000
--- a/src/components/atoms/layout/column.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Column as ColumnComponent } from './column';
-
-export default {
- title: 'Atoms/Layout/Column',
- component: ColumnComponent,
- argTypes: {
- children: {
- description: 'The column body.',
- type: {
- name: 'array',
- required: true,
- value: {},
- },
- },
- },
-} as ComponentMeta<typeof ColumnComponent>;
-
-const Template: ComponentStory<typeof ColumnComponent> = (args) => (
- <ColumnComponent {...args} />
-);
-
-const body =
- 'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
-
-export const Column = Template.bind({});
-Column.args = {
- children: body,
-};
diff --git a/src/components/atoms/layout/column.test.tsx b/src/components/atoms/layout/column.test.tsx
deleted file mode 100644
index 7e747c6..0000000
--- a/src/components/atoms/layout/column.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Column } from './column';
-
-const body =
- 'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
-
-describe('Column', () => {
- it('renders the column body', () => {
- render(<Column>{body}</Column>);
- expect(screen.getByText(body)).toBeInTheDocument();
- });
-});
diff --git a/src/components/atoms/layout/column.tsx b/src/components/atoms/layout/column.tsx
deleted file mode 100644
index 632799c..0000000
--- a/src/components/atoms/layout/column.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
-
-export type ColumnProps = HTMLAttributes<HTMLDivElement> & {
- children: ReactNode;
-};
-
-/**
- * Column component.
- *
- * Render the body as a column.
- */
-export const Column: FC<ColumnProps> = ({ children, ...props }) => {
- return <div {...props}>{children}</div>;
-};
diff --git a/src/components/atoms/layout/copyright.module.scss b/src/components/atoms/layout/copyright.module.scss
index ffde516..5d5435c 100644
--- a/src/components/atoms/layout/copyright.module.scss
+++ b/src/components/atoms/layout/copyright.module.scss
@@ -2,6 +2,8 @@
@use "../../../styles/abstracts/mixins" as mix;
.wrapper {
+ --icon-size: #{fun.convert-px(70)};
+
display: flex;
flex-flow: row wrap;
align-items: center;
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index a21fdfb..58d1b1e 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,5 +1,5 @@
import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Icon } from '../images';
+import { Icon } from '../images/icons';
import { Copyright as CopyrightComponent } from './copyright';
/**
diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx
index 3aa04d0..cdff292 100644
--- a/src/components/atoms/layout/copyright.test.tsx
+++ b/src/components/atoms/layout/copyright.test.tsx
@@ -1,6 +1,6 @@
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '../../../../tests/utils';
-import { Icon } from '../images';
+import { Icon } from '../images/icons';
import { Copyright } from './copyright';
const dates = {
@@ -29,6 +29,6 @@ describe('Copyright', () => {
it('renders the copyright icon', () => {
render(<Copyright dates={dates} icon={icon} owner={owner} />);
- expect(rtlScreen.getByTitle(iconHeading)).toBeInTheDocument();
+ expect(rtlScreen.getByTitle('CC BY SA')).toBeInTheDocument();
});
});
diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx
index 1e4af5e..c60ff8b 100644
--- a/src/components/atoms/layout/copyright.tsx
+++ b/src/components/atoms/layout/copyright.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
import styles from './copyright.module.scss';
export type CopyrightDates = {
diff --git a/src/components/atoms/layout/index.ts b/src/components/atoms/layout/index.ts
index c53671a..9f467dc 100644
--- a/src/components/atoms/layout/index.ts
+++ b/src/components/atoms/layout/index.ts
@@ -1,11 +1,9 @@
export * from './article';
export * from './aside';
-export * from './column';
export * from './copyright';
export * from './footer';
export * from './header';
export * from './main';
export * from './nav';
-export * from './no-script';
export * from './notice';
export * from './section';
diff --git a/src/components/atoms/layout/no-script.module.scss b/src/components/atoms/layout/no-script.module.scss
deleted file mode 100644
index b64edb9..0000000
--- a/src/components/atoms/layout/no-script.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.noscript {
- color: var(--color-primary-darker);
-
- &--top {
- padding: var(--spacing-xs) var(--spacing-sm);
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 10;
- background: var(--color-bg);
- border-bottom: fun.convert-px(3) solid var(--color-border);
- font-size: var(--font-size-sm);
- font-weight: 600;
- text-align: center;
- }
-}
diff --git a/src/components/atoms/layout/no-script.stories.tsx b/src/components/atoms/layout/no-script.stories.tsx
deleted file mode 100644
index 79548a1..0000000
--- a/src/components/atoms/layout/no-script.stories.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { NoScript } from './no-script';
-
-/**
- * NoScript - Storybook Meta
- */
-export default {
- title: 'Atoms/Layout/NoScript',
- component: NoScript,
- args: {
- position: 'initial',
- },
- argTypes: {
- message: {
- control: {
- type: 'text',
- },
- description: 'A message to display when Javascript is disabled.',
- type: {
- name: 'string',
- required: true,
- },
- },
- position: {
- control: {
- type: 'select',
- },
- description: 'The message position.',
- options: ['initial', 'top'],
- table: {
- category: 'Options',
- defaultValue: 'initial',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- },
-} as ComponentMeta<typeof NoScript>;
-
-const Template: ComponentStory<typeof NoScript> = (args) => (
- <NoScript {...args} />
-);
-
-/**
- * NoScript Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
- message: 'A noscript only message.',
- position: 'initial',
-};
-
-/**
- * NoScript Stories - Top
- */
-export const Top = Template.bind({});
-Top.args = {
- message: 'A noscript only message.',
- position: 'top',
-};
diff --git a/src/components/atoms/layout/no-script.test.tsx b/src/components/atoms/layout/no-script.test.tsx
deleted file mode 100644
index b737d7e..0000000
--- a/src/components/atoms/layout/no-script.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { NoScript } from './no-script';
-
-const message = 'A noscript message.';
-
-describe('NoScript', () => {
- it('renders a message', () => {
- render(<NoScript message={message} />);
- expect(screen.getByText(message)).toBeInTheDocument();
- });
-});
diff --git a/src/components/atoms/layout/no-script.tsx b/src/components/atoms/layout/no-script.tsx
deleted file mode 100644
index a79feaf..0000000
--- a/src/components/atoms/layout/no-script.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { FC } from 'react';
-import styles from './no-script.module.scss';
-
-export type NoScriptProps = {
- /**
- * The noscript message.
- */
- message: string;
- /**
- * The message position. Default: initial.
- */
- position?: 'initial' | 'top';
-};
-
-export const NoScript: FC<NoScriptProps> = ({
- message,
- position = 'initial',
-}) => {
- const positionClass = styles[`noscript--${position}`];
-
- return <div className={`${styles.noscript} ${positionClass}`}>{message}</div>;
-};