@integrigo/integrigo-ui 1.6.18-d → 1.6.18-e

package/lib/src/components/atoms/Avatar/Avatar.stories.d.ts

@@ -3,11 +3,11 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<React.FC<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 }>>;
 export default _default;
 export declare const Basic: ComponentStory<React.FC<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 }>>;

package/lib/src/components/atoms/Dot/Dot.stories.d.ts

@@ -11,7 +11,7 @@ declare const _default: ComponentMeta<import("react").FCS<{
         children?: import("react").ReactNode;
     }) | undefined;
     children?: import("react").ReactNode;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
 }>>;
 export default _default;
 export declare const Icon: ComponentStory<import("react").FCS<{
@@ -25,7 +25,7 @@ export declare const Icon: ComponentStory<import("react").FCS<{
         children?: import("react").ReactNode;
     }) | undefined;
     children?: import("react").ReactNode;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
 }>>;
 export declare const Basic: ComponentStory<import("react").FCS<{
     icon?: (import("react").SVGProps<SVGSVGElement> & {
@@ -38,5 +38,5 @@ export declare const Basic: ComponentStory<import("react").FCS<{
         children?: import("react").ReactNode;
     }) | undefined;
     children?: import("react").ReactNode;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
 }>>;

package/lib/src/components/atoms/Gradient/Gradient.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 declare const _default: ComponentMeta<import("styled-components").StyledComponent<"div", any, {
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
     width?: number | undefined;
     height?: number | undefined;
     variant?: number | undefined;
@@ -8,7 +8,7 @@ declare const _default: ComponentMeta<import("styled-components").StyledComponen
 }, never>>;
 export default _default;
 export declare const Basic: ComponentStory<import("styled-components").StyledComponent<"div", any, {
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
     width?: number | undefined;
     height?: number | undefined;
     variant?: number | undefined;

package/lib/src/components/atoms/Initials/Initials.stories.d.ts

@@ -2,10 +2,10 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<import("react").FC<{
     text: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 }>>;
 export default _default;
 export declare const Basic: ComponentStory<import("react").FC<{
     text: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 }>>;

package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
-    size?: "s" | "m" | "l" | "xl" | undefined;
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    size?: "xl" | "l" | "m" | "s" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
-    size?: "s" | "m" | "l" | "xl" | undefined;
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    size?: "xl" | "l" | "m" | "s" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
-    size?: "s" | "m" | "l" | "xl" | undefined;
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    size?: "xl" | "l" | "m" | "s" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
-    size?: "s" | "m" | "l" | "xl" | undefined;
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    size?: "xl" | "l" | "m" | "s" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/IconButton/IconButton.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { IconType } from "../../atoms/Icon";
-export interface IconButtonProps {
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     size?: "m" | "l";
     icon: IconType;
 }

package/lib/src/components/molecules/Input/Input.stories.d.ts

@@ -4,7 +4,7 @@ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-circle-right" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -13,7 +13,7 @@ export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-circle-right" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -21,7 +21,7 @@ export declare const Success: ComponentStory<React.ForwardRefExoticComponent<Omi
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-circle-right" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -29,7 +29,7 @@ export declare const Error: ComponentStory<React.ForwardRefExoticComponent<Omit<
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-circle-right" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -37,7 +37,7 @@ export declare const Disabled: ComponentStory<React.ForwardRefExoticComponent<Om
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-circle-right" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -45,7 +45,7 @@ export declare const IconLTR: ComponentStory<React.ForwardRefExoticComponent<Omi
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-circle-right" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -53,7 +53,7 @@ export declare const IconRTL: ComponentStory<React.ForwardRefExoticComponent<Omi
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-circle-right" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -61,7 +61,7 @@ export declare const DisabledIcon: ComponentStory<React.ForwardRefExoticComponen
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-circle-right" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -69,7 +69,7 @@ export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<O
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-circle-right" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Profile/Profile.stories.d.ts

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<import("react").FC<Partial<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 } & {
     children?: import("react").ReactNode;
 }> & {
@@ -14,7 +14,7 @@ export default _default;
 export declare const Basic: ComponentStory<import("react").FC<Partial<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 } & {
     children?: import("react").ReactNode;
 }> & {
@@ -24,7 +24,7 @@ export declare const Basic: ComponentStory<import("react").FC<Partial<{
 export declare const WithInitials: ComponentStory<import("react").FC<Partial<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 } & {
     children?: import("react").ReactNode;
 }> & {

package/lib/src/components/molecules/Radio/Radio.stories.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Size } from './Radio';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/organisms/Comment/Comment.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface CommentProps {
+    avatar: {
+        src: string;
+        alt: string;
+    };
+    body: string;
+    author: string;
+    createdAt: Date;
+}
+export declare const Comment: React.FC<CommentProps>;

package/lib/src/components/organisms/Comment/Comment.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<import("react").FC<import("./Comment").CommentProps>>;
+export default _default;
+export declare const Basic: ComponentStory<import("react").FC<import("./Comment").CommentProps>>;

package/lib/src/components/organisms/Comment/index.d.ts

@@ -0,0 +1 @@
+export { Comment } from './Comment';

package/lib/src/components/organisms/index.d.ts

@@ -3,3 +3,4 @@ export { Setting } from './Setting';
 export { Modal } from './Modal';
 export { Select } from './Select';
 export { Table } from './Table';
+export { Comment } from './Comment';

package/lib/src/index.d.ts

@@ -1,4 +1,4 @@
 export { Alert, Avatar, Card, Divider, DateTime, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, Gradient, } from "./components/atoms";
 export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, Switch, IconButton, } from "./components/molecules";
-export { Menu, Setting, Modal, Select, Table } from "./components/organisms";
+export { Menu, Setting, Modal, Select, Table, Comment, } from "./components/organisms";
 export { GlobalStyles as IntegrigoUI, Color } from "./styles";

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.18d",
+  "version": "1.6.18e",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/molecules/IconButton/IconButton.tsx

@@ -4,7 +4,8 @@ import { Color } from "../../../styles";
 import { Icon } from "../../atoms";
 import { IconType } from "../../atoms/Icon";
 
-export interface IconButtonProps {
+export interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size?: "m" | "l";
   icon: IconType;
 }
@@ -14,12 +15,21 @@ const sizeVariant = {
   l: 48,
 };
 
-export const IconButton: React.FC<IconButtonProps> = ({ size = "m", icon }) => {
+export const IconButton: React.FC<IconButtonProps> = ({
+  size = "m",
+  icon,
+  ...props
+}) => {
   const iconSize = (5 / 9) * sizeVariant[size];
 
   return (
-    <Root size={size}>
-      <Icon type={icon} width={iconSize} height={iconSize} fill={Color.Orange}/>
+    <Root size={size} {...props}>
+      <Icon
+        type={icon}
+        width={iconSize}
+        height={iconSize}
+        fill={Color.Orange}
+      />
     </Root>
   );
 };
@@ -27,10 +37,24 @@ export const IconButton: React.FC<IconButtonProps> = ({ size = "m", icon }) => {
 const Root = styled.button<{ size: "m" | "l" }>`
   border: none;
   display: flex;
+  cursor: pointer;
   align-items: center;
   justify-content: center;
   width: ${(p) => sizeVariant[p.size]}px;
   height: ${(p) => sizeVariant[p.size]}px;
   border-radius: calc(${(p) => sizeVariant[p.size]}px / 2);
   background-color: var(--color-ecru);
+  transition: background-color var(--transition-speed);
+
+  & svg {
+    transition: fill var(--transition-speed);
+  }
+
+  &:hover {
+    background-color: var(--color-orange);
+
+    & svg {
+      fill: var(--color-ecru);
+    }
+  }
 `;

package/src/components/organisms/Comment/Comment.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Comment } from "./Comment";
+
+export default {
+  title: "Organisms/Comment",
+  component: Comment,
+  argTypes: {
+    show: {
+      control: "boolean",
+      defaultValue: true,
+    },
+  },
+} as ComponentMeta<typeof Comment>;
+
+const Template: ComponentStory<typeof Comment> = (args) => (
+  <Comment {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  avatar: {
+    src: "https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2",
+    alt: "Jane Doe",
+  },
+  body: "Comment body goes here!",
+  author: "Jane Doe",
+  createdAt: new Date(),
+};

package/src/components/organisms/Comment/Comment.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import styled from "styled-components";
+import { Avatar, DateTime, Typography } from "../../atoms";
+
+export interface CommentProps {
+  avatar: {
+    src: string;
+    alt: string;
+  };
+  body: string;
+  author: string;
+  createdAt: Date;
+}
+
+export const Comment: React.FC<CommentProps> = ({
+  avatar,
+  body,
+  author,
+  createdAt,
+}) => {
+  return (
+    <Root>
+      <Avatar {...avatar} />
+
+      <NameAndDate>
+        <Typography.Hero size="s">{author}</Typography.Hero>
+        <DateTime date={createdAt} />
+      </NameAndDate>
+
+      <div />
+
+      <Typography.Body>{body}</Typography.Body>
+    </Root>
+  );
+};
+
+const Root = styled.div`
+  display: grid;
+  grid-template-columns: 32px auto;
+  grid-template-rows: 32px auto;
+  column-gap: var(--padding-m);
+  row-gap: var(--padding-m);
+
+  & > p {
+    margin: 0;
+  }
+`;
+
+const NameAndDate = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  & > h5 {
+    margin: 0;
+    color: var(--color-orange);
+  }
+`;

package/src/components/organisms/Comment/index.ts

@@ -0,0 +1 @@
+export { Comment } from './Comment'

package/src/components/organisms/index.ts

@@ -2,4 +2,5 @@ export { Menu } from './Menu';
 export { Setting } from './Setting';
 export { Modal } from './Modal';
 export { Select } from './Select';
-export { Table } from './Table';
+export { Table } from './Table';
+export { Comment } from './Comment'

package/src/index.ts

@@ -28,6 +28,13 @@ export {
   IconButton,
 } from "./components/molecules";
 
-export { Menu, Setting, Modal, Select, Table } from "./components/organisms";
+export {
+  Menu,
+  Setting,
+  Modal,
+  Select,
+  Table,
+  Comment,
+} from "./components/organisms";
 
 export { GlobalStyles as IntegrigoUI, Color } from "./styles";