aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms')
-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>;
-};