aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/layout
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-11-10 12:16:59 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:15:27 +0100
commitd7bcd93efcd4f1ae20678d0efa6777cfadc09a4e (patch)
tree714edfa84a8f3c53262c407ac9a2a79c9d2479b8 /src/components/organisms/layout
parentf699802b837d7d9fcf150ff2bf00cd3c5475c87a (diff)
refactor(components): replace Overview with ProjectOverview component
* `cover` prop is now expecting a ReactElement (NextImage) * `meta` prop is now limited to a specific set of meta items * add a `name` prop to add an accessible name to the figure element
Diffstat (limited to 'src/components/organisms/layout')
-rw-r--r--src/components/organisms/layout/index.ts1
-rw-r--r--src/components/organisms/layout/overview.module.scss37
-rw-r--r--src/components/organisms/layout/overview.stories.tsx78
-rw-r--r--src/components/organisms/layout/overview.test.tsx33
-rw-r--r--src/components/organisms/layout/overview.tsx44
5 files changed, 0 insertions, 193 deletions
diff --git a/src/components/organisms/layout/index.ts b/src/components/organisms/layout/index.ts
index ebe48e7..03fba32 100644
--- a/src/components/organisms/layout/index.ts
+++ b/src/components/organisms/layout/index.ts
@@ -1,3 +1,2 @@
export * from './no-results';
-export * from './overview';
export * from './posts-list';
diff --git a/src/components/organisms/layout/overview.module.scss b/src/components/organisms/layout/overview.module.scss
deleted file mode 100644
index c1d9463..0000000
--- a/src/components/organisms/layout/overview.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-.wrapper {
- padding: var(--spacing-sm) var(--spacing-md);
- border: fun.convert-px(1) solid var(--color-border);
-
- .meta {
- display: grid;
- grid-template-columns: repeat(
- auto-fit,
- min(calc(100vw - (var(--spacing-md) * 2)), 23ch)
- );
- row-gap: var(--spacing-sm);
-
- @include mix.media("screen") {
- @include mix.dimensions("md") {
- grid-template-columns: repeat(
- auto-fit,
- min(calc(100vw - (var(--spacing-md) * 2)), 20ch)
- );
- }
- }
- }
-
- .cover {
- width: fit-content;
- height: fun.convert-px(175);
- margin-bottom: var(--spacing-sm);
- padding: var(--spacing-2xs);
- border: fun.convert-px(1) solid var(--color-border);
-
- img {
- object-fit: contain;
- }
- }
-}
diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx
deleted file mode 100644
index 562d7c4..0000000
--- a/src/components/organisms/layout/overview.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { MetaItemData } from '../../molecules';
-import { Overview } from './overview';
-
-/**
- * Overview - Storybook Meta
- */
-export default {
- title: 'Organisms/Layout/Overview',
- component: Overview,
- argTypes: {
- className: {
- control: {
- type: 'text',
- },
- description: 'Set additional classnames to the overview wrapper.',
- table: {
- category: 'Styles',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- cover: {
- description: 'The overview cover',
- table: {
- category: 'Options',
- },
- type: {
- name: 'object',
- required: false,
- value: {},
- },
- },
- meta: {
- description: 'The overview meta.',
- type: {
- name: 'object',
- required: true,
- value: {},
- },
- },
- },
-} as ComponentMeta<typeof Overview>;
-
-const Template: ComponentStory<typeof Overview> = (args) => (
- <Overview {...args} />
-);
-
-const cover = {
- alt: 'picture',
- height: 480,
- src: 'https://picsum.photos/640/480',
- width: 640,
-};
-
-const meta = [
- { id: 'creation-date', label: 'Creation date', value: '2022-05-09' },
- { id: 'license', label: 'License', value: 'Dignissimos ratione veritatis' },
-] satisfies MetaItemData[];
-
-/**
- * Overview Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
- meta,
-};
-
-/**
- * Overview Stories - With cover
- */
-export const WithCover = Template.bind({});
-WithCover.args = {
- cover,
- meta,
-};
diff --git a/src/components/organisms/layout/overview.test.tsx b/src/components/organisms/layout/overview.test.tsx
deleted file mode 100644
index b98bd6f..0000000
--- a/src/components/organisms/layout/overview.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen as rtlScreen } from '../../../../tests/utils';
-import type { MetaItemData } from '../../molecules';
-import { Overview } from './overview';
-
-const cover = {
- alt: 'Incidunt unde quam',
- height: 480,
- src: 'https://picsum.photos/640/480',
- width: 640,
-};
-
-const meta = [
- { id: 'creation-date', label: 'Creation date', value: '2022-05-09' },
- { id: 'license', label: 'License', value: 'Dignissimos ratione veritatis' },
-] satisfies MetaItemData[];
-
-describe('Overview', () => {
- it('renders some meta', () => {
- render(<Overview meta={meta} />);
-
- const metaLabels = meta.map((item) => item.label);
-
- for (const label of metaLabels) {
- expect(rtlScreen.getByText(label)).toBeInTheDocument();
- }
- });
-
- it('renders a cover', () => {
- render(<Overview cover={cover} meta={meta} />);
- expect(rtlScreen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
- });
-});
diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx
deleted file mode 100644
index ede2627..0000000
--- a/src/components/organisms/layout/overview.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import NextImage, { type ImageProps as NextImageProps } from 'next/image';
-import type { FC } from 'react';
-import { Figure } from '../../atoms';
-import { MetaList, type MetaItemData } from '../../molecules';
-import styles from './overview.module.scss';
-
-export type OverviewProps = {
- /**
- * Set additional classnames to the overview wrapper.
- */
- className?: string;
- /**
- * The overview cover.
- */
- cover?: Pick<NextImageProps, 'alt' | 'src' | 'width' | 'height'>;
- /**
- * The overview meta.
- */
- meta: MetaItemData[];
-};
-
-/**
- * Overview component
- *
- * Render an overview.
- */
-export const Overview: FC<OverviewProps> = ({
- className = '',
- cover,
- meta,
-}) => {
- const wrapperClass = `${styles.wrapper} ${className}`;
-
- return (
- <div className={wrapperClass}>
- {cover ? (
- <Figure>
- <NextImage {...cover} className={styles.cover} />
- </Figure>
- ) : null}
- <MetaList className={styles.meta} hasInlinedValues items={meta} />
- </div>
- );
-};