From d7bcd93efcd4f1ae20678d0efa6777cfadc09a4e Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 10 Nov 2023 12:16:59 +0100
Subject: 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
---
 src/components/organisms/layout/index.ts           |  1 -
 .../organisms/layout/overview.module.scss          | 37 ----------
 .../organisms/layout/overview.stories.tsx          | 78 ----------------------
 src/components/organisms/layout/overview.test.tsx  | 33 ---------
 src/components/organisms/layout/overview.tsx       | 44 ------------
 5 files changed, 193 deletions(-)
 delete mode 100644 src/components/organisms/layout/overview.module.scss
 delete mode 100644 src/components/organisms/layout/overview.stories.tsx
 delete mode 100644 src/components/organisms/layout/overview.test.tsx
 delete mode 100644 src/components/organisms/layout/overview.tsx

(limited to 'src/components/organisms/layout')

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>
-  );
-};
-- 
cgit v1.2.3