From d7bcd93efcd4f1ae20678d0efa6777cfadc09a4e Mon Sep 17 00:00:00 2001 From: Armand Philippot 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 --- .../project-overview/project-overview.stories.tsx | 78 ++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 src/components/organisms/project-overview/project-overview.stories.tsx (limited to 'src/components/organisms/project-overview/project-overview.stories.tsx') diff --git a/src/components/organisms/project-overview/project-overview.stories.tsx b/src/components/organisms/project-overview/project-overview.stories.tsx new file mode 100644 index 0000000..655dc3c --- /dev/null +++ b/src/components/organisms/project-overview/project-overview.stories.tsx @@ -0,0 +1,78 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import NextImage from 'next/image'; +import { type ProjectMeta, ProjectOverview } from './project-overview'; + +/** + * ProjectOverview - Storybook Meta + */ +export default { + title: 'Organisms/ProjectOverview', + component: ProjectOverview, + argTypes: { + cover: { + description: 'The project cover', + table: { + category: 'Options', + }, + type: { + name: 'object', + required: false, + value: {}, + }, + }, + meta: { + description: 'The overview meta.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + name: { + control: { + type: 'text', + }, + description: 'The project name.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +const meta = { + creationDate: '2015-09-02', + lastUpdateDate: '2023-11-10', + license: 'MIT', +} satisfies Partial; + +/** + * ProjectOverview Stories - Meta + */ +export const Meta = Template.bind({}); +Meta.args = { + meta, + name: 'Your project', +}; + +/** + * ProjectOverview Stories - With cover + */ +export const WithCover = Template.bind({}); +WithCover.args = { + cover: ( + + ), + meta, + name: 'Your project', +}; -- cgit v1.2.3