diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-11-10 12:16:59 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:15:27 +0100 |
| commit | d7bcd93efcd4f1ae20678d0efa6777cfadc09a4e (patch) | |
| tree | 714edfa84a8f3c53262c407ac9a2a79c9d2479b8 /src/components/organisms/layout | |
| parent | f699802b837d7d9fcf150ff2bf00cd3c5475c87a (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.ts | 1 | ||||
| -rw-r--r-- | src/components/organisms/layout/overview.module.scss | 37 | ||||
| -rw-r--r-- | src/components/organisms/layout/overview.stories.tsx | 78 | ||||
| -rw-r--r-- | src/components/organisms/layout/overview.test.tsx | 33 | ||||
| -rw-r--r-- | src/components/organisms/layout/overview.tsx | 44 |
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> - ); -}; |
