aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/project-overview/project-overview.stories.tsx
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/project-overview/project-overview.stories.tsx
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/project-overview/project-overview.stories.tsx')
-rw-r--r--src/components/organisms/project-overview/project-overview.stories.tsx78
1 files changed, 78 insertions, 0 deletions
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<typeof ProjectOverview>;
+
+const Template: ComponentStory<typeof ProjectOverview> = (args) => (
+ <ProjectOverview {...args} />
+);
+
+const meta = {
+ creationDate: '2015-09-02',
+ lastUpdateDate: '2023-11-10',
+ license: 'MIT',
+} satisfies Partial<ProjectMeta>;
+
+/**
+ * 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: (
+ <NextImage
+ alt=""
+ height={480}
+ src="https://picsum.photos/640/480"
+ width={640}
+ />
+ ),
+ meta,
+ name: 'Your project',
+};