From fd9831446ff87414da772b17327368cb291192e6 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 21 Apr 2022 18:36:45 +0200
Subject: chore: add a Comment component

---
 .../organisms/layout/comment.stories.tsx           | 117 +++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 src/components/organisms/layout/comment.stories.tsx

(limited to 'src/components/organisms/layout/comment.stories.tsx')

diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
new file mode 100644
index 0000000..01d9ac6
--- /dev/null
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -0,0 +1,117 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import CommentComponent from './comment';
+
+/**
+ * Comment - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Layout',
+  component: CommentComponent,
+  argTypes: {
+    author: {
+      description: 'The author data.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    canReply: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Enable or disable the reply button.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: true },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    content: {
+      control: {
+        type: 'text',
+      },
+      description: 'The comment body.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    id: {
+      control: {
+        type: 'number',
+      },
+      description: 'The comment id.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    postId: {
+      control: {
+        type: 'number',
+      },
+      description: 'The post id.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    publication: {
+      description: 'The publication date.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    saveComment: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to save the comment form data.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof CommentComponent>;
+
+const Template: ComponentStory<typeof CommentComponent> = (args) => (
+  <CommentComponent {...args} />
+);
+
+/**
+ * Layout Stories - Comment
+ */
+export const Comment = Template.bind({});
+Comment.args = {
+  author: {
+    avatar: 'http://placeimg.com/640/480',
+    name: 'Armand',
+    url: 'https://www.armandphilippot.com/',
+  },
+  content:
+    'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.',
+  id: 2,
+  postId: 21,
+  publication: '2021-04-03 23:04:24',
+  saveComment: () => null,
+  // @ts-ignore - Needed because of the placeholder image.
+  unoptimized: true,
+};
-- 
cgit v1.2.3