diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-02 17:39:16 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:14:41 +0100 |
| commit | 6221fa82e41915702d8139cade5c25e9d61e619f (patch) | |
| tree | 9c725b7f7b1e002747712de456c73f28839f0ebd /src/components/atoms/layout | |
| parent | 36890cfafeba6e30782df1260d7f9e678c7da4bf (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.tsx | 29 | ||||
| -rw-r--r-- | src/components/atoms/layout/column.test.tsx | 13 | ||||
| -rw-r--r-- | src/components/atoms/layout/column.tsx | 14 | ||||
| -rw-r--r-- | src/components/atoms/layout/copyright.module.scss | 2 | ||||
| -rw-r--r-- | src/components/atoms/layout/copyright.stories.tsx | 2 | ||||
| -rw-r--r-- | src/components/atoms/layout/copyright.test.tsx | 4 | ||||
| -rw-r--r-- | src/components/atoms/layout/copyright.tsx | 2 | ||||
| -rw-r--r-- | src/components/atoms/layout/index.ts | 2 | ||||
| -rw-r--r-- | src/components/atoms/layout/no-script.module.scss | 19 | ||||
| -rw-r--r-- | src/components/atoms/layout/no-script.stories.tsx | 62 | ||||
| -rw-r--r-- | src/components/atoms/layout/no-script.test.tsx | 12 | ||||
| -rw-r--r-- | src/components/atoms/layout/no-script.tsx | 22 |
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>; -}; |
