@integrigo/integrigo-ui 1.6.16 → 1.6.17-b

package/src/components/atoms/Chip/Chip.test.tsx

@@ -1,18 +1,20 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Chip, ChipVariant } from './Chip';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Chip } from "./Chip";
 
-describe('<Chip />', () => {
-  it('should match snapshot - basic', () => {
+describe("<Chip />", () => {
+  it("should match snapshot - basic", () => {
     const { container } = render(<Chip label="Accept" />);
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot - icon', () => {
-    const { container } = render(<Chip label="Accept" variant={ChipVariant.primary} iconLeft="close" />);
+  it("should match snapshot - icon", () => {
+    const { container } = render(
+      <Chip label="Accept" variant="primary" iconLeft="close" />
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should call onclick function', async () => {
+  it("should call onclick function", async () => {
     const user = userEvent.setup();
     const handleClick = jest.fn();
     render(<Chip label="Accept" onClick={handleClick} />);

package/src/components/atoms/Chip/Chip.tsx

@@ -1,101 +1,95 @@
-import React, { MouseEvent, FC } from 'react';
-import styled from 'styled-components';
-import { Icon, IconType } from '../Icon';
+import { MouseEvent, FC } from "react";
+import styled from "styled-components";
+import { Icon, IconType } from "../Icon";
 
 type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
 
 export interface ChipProps {
-  iconLeft?: IconType,
-  iconRight?: IconType,
-  size?: ChipSize,
-  label: string;
-  variant?: ChipVariant;
+  iconLeft?: IconType;
+  iconRight?: IconType;
+  size?: 's' | 'm' | 'l' | 'xl';
+  label: React.ReactNode;
+  variant?: 'transparent' | 'white' | 'primary' | 'secondary' | 'grey';
   onClick?: OnClickFunctionType;
 }
 
-export enum ChipVariant {
-  transparent = 'transparent',
-  white = 'white',
-  primary = 'primary',
-  secondary = 'secondary',
-}
-
-export enum ChipSize {
-  xl = 'xl',
-  l = 'l',
-  m = 'm',
-  s = 's',
-}
-
 const sizeVariant = {
   xl: {
     iconSize: {
       width: 25,
       height: 25,
     },
-    gap: '12.5px',
-    paddingY: '12.5px',
-    paddingX: '17.5px',
-    border: '2px',
-    fontSize: '20px',
-    lineHeight: '30px',
+    gap: "12.5px",
+    paddingY: "12.5px",
+    paddingX: "17.5px",
+    border: "2px",
+    fontSize: "20px",
+    lineHeight: "30px",
   },
   l: {
     iconSize: {
       width: 20,
       height: 20,
     },
-    gap: '10px',
-    paddingY: '10px',
-    paddingX: '14px',
-    border: '2px',
-    fontSize: '16px',
-    lineHeight: '24px',
+    gap: "10px",
+    paddingY: "10px",
+    paddingX: "14px",
+    border: "2px",
+    fontSize: "16px",
+    lineHeight: "24px",
   },
   m: {
     iconSize: {
       width: 15,
       height: 15,
     },
-    gap: '7.5px',
-    paddingY: '7.5px',
-    paddingX: '10.5px',
-    border: '2px',
-    fontSize: '12px',
-    lineHeight: '18px',
+    gap: "7.5px",
+    paddingY: "7.5px",
+    paddingX: "10.5px",
+    border: "2px",
+    fontSize: "12px",
+    lineHeight: "18px",
   },
   s: {
     iconSize: {
       width: 10,
       height: 10,
     },
-    gap: '5px',
-    paddingY: '5px',
-    paddingX: '7px',
-    border: '1.5px',
-    fontSize: '8px',
-    lineHeight: '12px',
+    gap: "5px",
+    paddingY: "5px",
+    paddingX: "7px",
+    border: "1.5px",
+    fontSize: "8px",
+    lineHeight: "12px",
   },
 };
 
 const colorVariant = {
   primary: {
-    fontColor: 'var(--shades-of-grey-0)',
+    fontColor: "var(--shades-of-grey-0)",
   },
   secondary: {
-    fontColor: 'var(--color-orange)',
+    fontColor: "var(--color-orange)",
   },
   transparent: {
-    fontColor: 'var(--shades-of-grey-100)',
+    fontColor: "var(--shades-of-grey-100)",
   },
   white: {
-    fontColor: 'var(--shades-of-grey-100);',
+    fontColor: "var(--shades-of-grey-100);",
+  },
+  grey: {
+    fontColor: "var(--shades-of-grey-100)",
   },
 };
 
 export const Chip: FC<ChipProps> = (props: ChipProps) => {
   const {
-    iconLeft, iconRight, label, size = ChipSize.m, variant = ChipVariant.primary, onClick,
+    iconLeft,
+    iconRight,
+    label,
+    size = 'm',
+    variant = 'primary',
+    onClick,
   } = props;
 
   return (
@@ -123,16 +117,18 @@ export const Chip: FC<ChipProps> = (props: ChipProps) => {
   );
 };
 
-const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
+const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): string => {
   switch (variant) {
-    case ChipVariant.secondary:
+    case 'secondary':
       return `
         background-color: var(--color-white);
         opacity: 0.9;
         border-color: var(--color-orange);
         border-style: solid;
         
-        ${clickable && `
+        ${
+          clickable &&
+          `
           cursor: pointer;
           
           &:hover {
@@ -142,11 +138,14 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
           &:active {
             opacity: 0.65;
           }
-        `}
+        `
+        }
       `;
-    case ChipVariant.transparent:
+    case 'transparent':
       return `        
-        ${clickable && `
+        ${
+          clickable &&
+          `
           &:hover {
             background-color: var(--shades-of-grey-40);
           }
@@ -154,15 +153,35 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
           &:active {
             background-color: var(--shades-of-grey-60);
           }
-        `}
+        `
+        }
+      `;
+    case 'grey':
+      return `
+        background-color: var(--shades-of-grey-20);
+        
+        ${
+          clickable &&
+          `
+          &:hover {
+            background-color: var(--shades-of-grey-40);
+          }
+          
+          &:active {
+            background-color: var(--shades-of-grey-40);
+          }
+        `
+        }
       `;
-    case ChipVariant.white:
+    case 'white':
       return `
         background-color: var(--color-white);
         border-color: var(--shades-of-grey-40);
         border-style: solid;
         
-        ${clickable && `
+        ${
+          clickable &&
+          `
           &:hover {
             background-color: var(--shades-of-grey-20);
           }
@@ -170,16 +189,19 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
           &:active {
            border-color: var(--shades-of-grey-100);
           }
-        `}
+        `
+        }
       `;
-    case ChipVariant.primary:
+    case 'primary':
     default:
       return `
         background-color: var(--color-orange);
         border-color: var(--color-orange);
         border-style: solid;
 
-        ${clickable && `
+        ${
+          clickable &&
+          `
           &:hover {
             opacity: 0.8;
           }
@@ -187,27 +209,35 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
           &:active {
             opacity: 0.65;
           }
-        `}
+        `
+        }
       `;
   }
 };
 
-Chip.displayName = 'Chip';
+Chip.displayName = "Chip";
 
-const ChipWrapper = styled.div<{ size: ChipSize, variant: ChipVariant, onClick?: OnClickFunctionType }>`
+const ChipWrapper = styled.div<{
+  size: Exclude<ChipProps['size'], undefined>;
+  variant: Exclude<ChipProps['variant'], undefined>;
+  onClick?: OnClickFunctionType;
+}>`
   border-radius: 100px;
   display: flex;
   justify-content: center;
   width: min-content;
-  
+
   ${(p) => `
     border-width: ${sizeVariant[p.size].border};
     padding: ${sizeVariant[p.size].paddingY} ${sizeVariant[p.size].paddingX};
     color: ${colorVariant[p.variant].fontColor};
-    ${getVariantStyles(p.variant, typeof p.onClick === 'function')}
-    ${typeof p.onClick === 'function' && `
+    ${getVariantStyles(p.variant, typeof p.onClick === "function")}
+    ${
+      typeof p.onClick === "function" &&
+      `
       cursor: pointer;
-    `}
+    `
+    }
   `}
 `;
 
@@ -216,10 +246,10 @@ const IconWrapper = styled.span`
   align-items: center;
 `;
 
-IconWrapper.displayName = 'IconWrapper';
+IconWrapper.displayName = "IconWrapper";
 
 const Text = styled.span<{
-  size: ChipSize
+  size: Exclude<ChipProps['size'], undefined>;
 }>`
   color: inherit;
   font-weight: bold;
@@ -230,4 +260,4 @@ const Text = styled.span<{
   `}
 `;
 
-Text.displayName = 'Text';
+Text.displayName = "Text";

package/src/components/atoms/DateTime/DateTime.stories.tsx

@@ -0,0 +1,22 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { DateTime } from './DateTime';
+
+export default {
+  title: 'Atoms/DateTime',
+  component: DateTime,
+  argTypes: {
+    format: {
+      name: 'format',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof DateTime>;
+
+const Template: ComponentStory<typeof DateTime> = (args) => <DateTime {...args} />;
+
+export const Basic = Template.bind({
+  date: new Date('2022-10-10 11:23')
+});

package/src/components/atoms/DateTime/DateTime.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import dayjs from "dayjs";
+
+import "dayjs/locale/pl";
+import "dayjs/locale/en";
+
+const DEFAULT_FORMAT = "DD-MM-YYYY | HH:mm";
+
+export interface DateTimeProps {
+  date: Date;
+  format?: string;
+  locale?: "en" | "pl";
+  size?: "xl" | "l" | "m" | "s";
+}
+
+const sizeVariant = {
+  xl: 20,
+  l: 16,
+  m: 12,
+  s: 8,
+};
+
+export const DateTime: React.FC<DateTimeProps> = ({
+  date,
+  format = DEFAULT_FORMAT,
+  locale = "en",
+  size = "m",
+}) => {
+  const dateTime = dayjs(date).locale(locale).format(format);
+
+  return <DateTimeString size={size}>{dateTime}</DateTimeString>;
+};
+
+const DateTimeString = styled.span<{
+  size: Exclude<DateTimeProps["size"], undefined>;
+}>`
+  font-size: ${(p) => sizeVariant[p.size]}px;
+`;

package/src/components/atoms/DateTime/index.ts

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

package/src/components/atoms/Icon/Icon.tsx

@@ -6,12 +6,15 @@ import ArrowLeft from "./icons/ArrowLeft";
 import ArrowRight from "./icons/ArrowRight";
 import Bars from "./icons/Bars";
 import Bell from "./icons/Bell";
+import CalendarSlash from "./icons/CalendarSlash";
 import CheckCircle from "./icons/CheckCircle";
 import CheckSquare from "./icons/CheckSquare";
 import ClipboardNotes from "./icons/ClipboardNotes";
 import Close from "./icons/Close";
+import CommentDots from "./icons/CommentDots";
 import CreateDashboard from "./icons/CreateDashboard";
 import DiceFive from "./icons/DiceFive";
+import DiceOne from "./icons/DiceOne";
 import Edit from "./icons/Edit";
 import EllipsisVertical from "./icons/EllipsisVertical";
 import EllipsisHorizontal from "./icons/EllipsisHorizontal";
@@ -20,6 +23,8 @@ import ExclamationCircle from "./icons/ExclamationCircle";
 import ExclamationTriangle from "./icons/ExclamationTriangle";
 import Exit from "./icons/Exit";
 import Facebook from "./icons/Facebook";
+import Heart from "./icons/Heart";
+import HeartAlt from "./icons/HeartAlt";
 import Home from "./icons/Home";
 import ImageEdit from "./icons/ImageEdit";
 import Instagram from "./icons/Instagram";
@@ -30,7 +35,9 @@ import Phone from "./icons/Phone";
 import Plus from "./icons/Plus";
 import PointsCircle from "./icons/PointsCircle";
 import Process from "./icons/Process";
+import QuestionCircle from "./icons/QuestionCircle";
 import Redo from "./icons/Redo";
+import Rocket from "./icons/Rocket";
 import Setting from "./icons/Setting";
 import User from "./icons/User";
 import UserCircle from "./icons/UserCircle";
@@ -43,12 +50,15 @@ export const iconHashMap = {
   "arrow-right": ArrowRight,
   bars: Bars,
   bell: Bell,
+  "calendar-slash": CalendarSlash,
   "check-circle": CheckCircle,
   "check-square": CheckSquare,
   "clipboad-notes": ClipboardNotes,
   close: Close,
+  "comment-dots": CommentDots,
   "create-dashboard": CreateDashboard,
   "dice-five": DiceFive,
+  "dice-one": DiceOne,
   edit: Edit,
   "ellipsis-horizontal": EllipsisHorizontal,
   "ellipsis-vertical": EllipsisVertical,
@@ -57,6 +67,8 @@ export const iconHashMap = {
   "exclamation-triangle": ExclamationTriangle,
   exit: Exit,
   facebook: Facebook,
+  heart: Heart,
+  "heart-alt": HeartAlt,
   home: Home,
   "image-edit": ImageEdit,
   instagram: Instagram,
@@ -65,9 +77,11 @@ export const iconHashMap = {
   minus: Minus,
   phone: Phone,
   plus: Plus,
-  process: Process,
   "points-circle": PointsCircle,
+  process: Process,
+  "question-circle": QuestionCircle,
   redo: Redo,
+  rocket: Rocket,
   setting: Setting,
   user: User,
   "user-circle": UserCircle,

package/src/components/atoms/Icon/icons/CalendarSlash.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const CalendarSlash: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11.6599 7H14.9999V8C14.9999 8.26522 15.1053 8.51957 15.2928 8.70711C15.4804 8.89465 15.7347 9 15.9999 9C16.2652 9 16.5195 8.89465 16.707 8.70711C16.8946 8.51957 16.9999 8.26522 16.9999 8V7H17.9999C18.2652 7 18.5195 7.10536 18.707 7.2929C18.8946 7.48043 18.9999 7.73479 18.9999 8V11H17.6599C17.3947 11 17.1404 11.1054 16.9528 11.2929C16.7653 11.4804 16.6599 11.7348 16.6599 12C16.6599 12.2652 16.7653 12.5196 16.9528 12.7071C17.1404 12.8946 17.3947 13 17.6599 13H18.9999V14.34C18.9999 14.6052 19.1053 14.8596 19.2928 15.0471C19.4804 15.2346 19.7347 15.34 19.9999 15.34C20.2652 15.34 20.5195 15.2346 20.707 15.0471C20.8946 14.8596 20.9999 14.6052 20.9999 14.34V8C20.9999 7.20435 20.6839 6.44129 20.1213 5.87868C19.5587 5.31607 18.7956 5 17.9999 5H16.9999V4C16.9999 3.73479 16.8946 3.48043 16.707 3.2929C16.5195 3.10536 16.2652 3 15.9999 3C15.7347 3 15.4804 3.10536 15.2928 3.2929C15.1053 3.48043 14.9999 3.73479 14.9999 4V5H11.6599C11.3947 5 11.1404 5.10536 10.9528 5.2929C10.7653 5.48043 10.6599 5.73479 10.6599 6C10.6599 6.26522 10.7653 6.51957 10.9528 6.70711C11.1404 6.89465 11.3947 7 11.6599 7ZM21.7099 20.29L20.1099 18.69L3.70994 2.29C3.6167 2.19676 3.50601 2.1228 3.38419 2.07234C3.26237 2.02188 3.1318 1.99591 2.99994 1.99591C2.86808 1.99591 2.73751 2.02188 2.61569 2.07234C2.49387 2.1228 2.38318 2.19676 2.28994 2.29C2.10164 2.47831 1.99585 2.7337 1.99585 3C1.99585 3.2663 2.10164 3.5217 2.28994 3.71L4.19994 5.61C3.8287 5.88843 3.52711 6.24918 3.31889 6.66389C3.11067 7.0786 3.00149 7.53596 2.99994 8V18C2.99994 18.7957 3.31601 19.5587 3.87862 20.1213C4.44123 20.6839 5.20429 21 5.99994 21H17.9999C18.4469 20.9974 18.8877 20.8949 19.2899 20.7L20.2899 21.7C20.3829 21.7937 20.4935 21.8681 20.6154 21.9189C20.7372 21.9697 20.8679 21.9958 20.9999 21.9958C21.132 21.9958 21.2627 21.9697 21.3845 21.9189C21.5064 21.8681 21.617 21.7937 21.7099 21.7C21.8962 21.5126 22.0007 21.2592 22.0007 20.995C22.0007 20.7308 21.8962 20.4774 21.7099 20.29ZM4.99994 8C5.00207 7.7962 5.06642 7.59791 5.18438 7.4317C5.30234 7.26549 5.46827 7.13929 5.65994 7.07L9.58994 11H4.99994V8ZM5.99994 19C5.73472 19 5.48037 18.8946 5.29283 18.7071C5.1053 18.5196 4.99994 18.2652 4.99994 18V13H11.5899L17.5899 19H5.99994Z" />
+  </svg>
+);
+
+export default CalendarSlash;

package/src/components/atoms/Icon/icons/CommentDots.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const CommentDots: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M7.99999 11C7.80221 11 7.60887 11.0586 7.44442 11.1685C7.27997 11.2784 7.1518 11.4346 7.07611 11.6173C7.00042 11.8 6.98062 12.0011 7.0192 12.1951C7.05779 12.3891 7.15303 12.5673 7.29288 12.7071C7.43273 12.847 7.61092 12.9422 7.8049 12.9808C7.99888 13.0194 8.19995 12.9996 8.38267 12.9239C8.5654 12.8482 8.72158 12.72 8.83146 12.5556C8.94134 12.3911 8.99999 12.1978 8.99999 12C8.99999 11.7348 8.89463 11.4804 8.70709 11.2929C8.51956 11.1054 8.2652 11 7.99999 11ZM12 11C11.8022 11 11.6089 11.0586 11.4444 11.1685C11.28 11.2784 11.1518 11.4346 11.0761 11.6173C11.0004 11.8 10.9806 12.0011 11.0192 12.1951C11.0578 12.3891 11.153 12.5673 11.2929 12.7071C11.4327 12.847 11.6109 12.9422 11.8049 12.9808C11.9989 13.0194 12.1999 12.9996 12.3827 12.9239C12.5654 12.8482 12.7216 12.72 12.8315 12.5556C12.9413 12.3911 13 12.1978 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11ZM16 11C15.8022 11 15.6089 11.0586 15.4444 11.1685C15.28 11.2784 15.1518 11.4346 15.0761 11.6173C15.0004 11.8 14.9806 12.0011 15.0192 12.1951C15.0578 12.3891 15.153 12.5673 15.2929 12.7071C15.4327 12.847 15.6109 12.9422 15.8049 12.9808C15.9989 13.0194 16.1999 12.9996 16.3827 12.9239C16.5654 12.8482 16.7216 12.72 16.8315 12.5556C16.9413 12.3911 17 12.1978 17 12C17 11.7348 16.8946 11.4804 16.7071 11.2929C16.5196 11.1054 16.2652 11 16 11ZM12 2C10.6868 2 9.38641 2.25866 8.17315 2.7612C6.9599 3.26375 5.85751 4.00035 4.92892 4.92893C3.05356 6.8043 1.99999 9.34784 1.99999 12C1.99125 14.3091 2.79078 16.5485 4.25999 18.33L2.25999 20.33C2.12123 20.4706 2.02723 20.6492 1.98986 20.8432C1.95249 21.0372 1.97341 21.2379 2.04999 21.42C2.13305 21.5999 2.26769 21.7511 2.43683 21.8544C2.60598 21.9577 2.80199 22.0083 2.99999 22H12C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 20H5.40999L6.33999 19.07C6.43448 18.9774 6.50965 18.8669 6.56114 18.7451C6.61264 18.6232 6.63944 18.4923 6.63999 18.36C6.63623 18.0962 6.5284 17.8446 6.33999 17.66C5.03057 16.352 4.21516 14.6305 4.03268 12.7888C3.8502 10.947 4.31193 9.09901 5.33922 7.55952C6.3665 6.02004 7.89578 4.88436 9.6665 4.34597C11.4372 3.80759 13.3398 3.8998 15.0502 4.60691C16.7606 5.31402 18.1728 6.59227 19.0464 8.22389C19.92 9.85551 20.2009 11.7395 19.8411 13.555C19.4814 15.3705 18.5033 17.005 17.0735 18.1802C15.6438 19.3554 13.8508 19.9985 12 20Z" />
+  </svg>
+);
+
+export default CommentDots;

package/src/components/atoms/Icon/icons/DiceOne.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const DiceOne: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M17 2H7C5.67392 2 4.40215 2.52678 3.46447 3.46447C2.52678 4.40215 2 5.67392 2 7V17C2 18.3261 2.52678 19.5979 3.46447 20.5355C4.40215 21.4732 5.67392 22 7 22H17C18.3261 22 19.5979 21.4732 20.5355 20.5355C21.4732 19.5979 22 18.3261 22 17V7C22 5.67392 21.4732 4.40215 20.5355 3.46447C19.5979 2.52678 18.3261 2 17 2ZM20 17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H7C6.20435 20 5.44129 19.6839 4.87868 19.1213C4.31607 18.5587 4 17.7956 4 17V7C4 6.20435 4.31607 5.44129 4.87868 4.87868C5.44129 4.31607 6.20435 4 7 4H17C17.7956 4 18.5587 4.31607 19.1213 4.87868C19.6839 5.44129 20 6.20435 20 7V17ZM12 11C11.8022 11 11.6089 11.0586 11.4444 11.1685C11.28 11.2784 11.1518 11.4346 11.0761 11.6173C11.0004 11.8 10.9806 12.0011 11.0192 12.1951C11.0578 12.3891 11.153 12.5673 11.2929 12.7071C11.4327 12.847 11.6109 12.9422 11.8049 12.9808C11.9989 13.0194 12.2 12.9996 12.3827 12.9239C12.5654 12.8482 12.7216 12.72 12.8315 12.5556C12.9414 12.3911 13 12.1978 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11Z" />
+  </svg>
+);
+
+export default DiceOne;

package/src/components/atoms/Icon/icons/Heart.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Heart: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M19.4964 10.1042C19.4864 10.7242 19.3564 11.3342 19.1164 11.9042C18.8764 12.4742 18.5164 12.9842 18.0764 13.4242L13.5764 17.9642C13.1564 18.3842 12.5864 18.6142 11.9864 18.6142C11.3864 18.6142 10.8164 18.3842 10.3964 17.9642L5.8964 13.4242C5.0564 12.5842 4.5564 11.4542 4.5064 10.2642C4.4664 9.08418 4.8664 7.91418 5.6464 7.01418C6.4264 6.11418 7.50639 5.54418 8.69639 5.41418C9.87639 5.28418 11.0664 5.60418 12.0164 6.31418C12.9264 5.64418 14.0364 5.32418 15.1564 5.40418C16.2764 5.48418 17.3364 5.96418 18.1364 6.75418C18.5764 7.19418 18.9164 7.71418 19.1464 8.29418C19.3764 8.86418 19.4964 9.48418 19.4964 10.1042Z" />
+  </svg>
+);
+
+export default Heart;

package/src/components/atoms/Icon/icons/HeartAlt.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const HeartAlt: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M20.16 4.61C19.0983 3.548 17.6908 2.90232 16.1933 2.79038C14.6958 2.67843 13.2078 3.10766 12 4C10.7277 3.05363 9.14402 2.62451 7.56795 2.79903C5.99188 2.97356 4.54047 3.73877 3.506 4.94058C2.47154 6.14239 1.93085 7.69152 1.99283 9.27601C2.05481 10.8605 2.71485 12.3627 3.84003 13.48L11.29 20.93C11.383 21.0237 11.4936 21.0981 11.6155 21.1489C11.7373 21.1997 11.868 21.2258 12 21.2258C12.132 21.2258 12.2627 21.1997 12.3846 21.1489C12.5065 21.0981 12.6171 21.0237 12.71 20.93L20.16 13.48C20.7427 12.8977 21.2049 12.2063 21.5202 11.4454C21.8356 10.6844 21.9979 9.86873 21.9979 9.045C21.9979 8.22127 21.8356 7.40561 21.5202 6.64463C21.2049 5.88365 20.7427 5.19227 20.16 4.61ZM18.75 12.07L12 18.81L5.25003 12.07C4.65521 11.4727 4.25001 10.713 4.08526 9.88634C3.92052 9.05963 4.00356 8.20268 4.32398 7.42299C4.6444 6.6433 5.18793 5.97559 5.88638 5.50362C6.58483 5.03165 7.40709 4.77644 8.25003 4.77C9.37614 4.77276 10.4551 5.22233 11.25 6.02C11.343 6.11373 11.4536 6.18812 11.5755 6.23889C11.6973 6.28966 11.828 6.3158 11.96 6.3158C12.092 6.3158 12.2227 6.28966 12.3446 6.23889C12.4665 6.18812 12.5771 6.11373 12.67 6.02C13.4884 5.31088 14.5455 4.93914 15.6276 4.98002C16.7096 5.0209 17.7357 5.47134 18.4982 6.24019C19.2607 7.00903 19.7026 8.03884 19.7345 9.12119C19.7664 10.2035 19.3859 11.2576 18.67 12.07H18.75Z" />
+  </svg>
+);
+
+export default HeartAlt;

package/src/components/atoms/Icon/icons/QuestionCircle.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const QuestionCircle: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11.29 15.29C11.247 15.3375 11.2069 15.3876 11.17 15.44C11.1322 15.4957 11.1019 15.5563 11.08 15.62C11.0512 15.6767 11.031 15.7374 11.02 15.8C11.0151 15.8666 11.0151 15.9334 11.02 16C11.0166 16.1312 11.044 16.2613 11.1 16.38C11.1449 16.5041 11.2166 16.6168 11.3099 16.7101C11.4032 16.8034 11.5159 16.8751 11.64 16.92C11.7597 16.9729 11.8891 17.0002 12.02 17.0002C12.1509 17.0002 12.2803 16.9729 12.4 16.92C12.5241 16.8751 12.6368 16.8034 12.7301 16.7101C12.8234 16.6168 12.8951 16.5041 12.94 16.38C12.9844 16.2584 13.0048 16.1294 13 16C13.0008 15.8684 12.9755 15.7379 12.9258 15.6161C12.876 15.4943 12.8027 15.3834 12.71 15.29C12.617 15.1963 12.5064 15.1219 12.3846 15.0711C12.2627 15.0203 12.132 14.9942 12 14.9942C11.868 14.9942 11.7373 15.0203 11.6154 15.0711C11.4936 15.1219 11.383 15.1963 11.29 15.29ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20ZM12 7C11.4731 6.99966 10.9553 7.13812 10.4989 7.40144C10.0425 7.66476 9.66347 8.04366 9.4 8.5C9.32765 8.61382 9.27907 8.7411 9.25718 8.87418C9.23529 9.00726 9.24055 9.14339 9.27263 9.27439C9.30472 9.40538 9.36297 9.52854 9.44389 9.63643C9.52481 9.74433 9.62671 9.83475 9.74348 9.90224C9.86024 9.96974 9.98945 10.0129 10.1233 10.0292C10.2572 10.0454 10.393 10.0345 10.5225 9.99688C10.6521 9.9593 10.7727 9.89591 10.8771 9.81052C10.9814 9.72513 11.0675 9.6195 11.13 9.5C11.2181 9.3474 11.345 9.22078 11.4978 9.13298C11.6505 9.04518 11.8238 8.9993 12 9C12.2652 9 12.5196 9.10536 12.7071 9.29289C12.8946 9.48043 13 9.73478 13 10C13 10.2652 12.8946 10.5196 12.7071 10.7071C12.5196 10.8946 12.2652 11 12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V13C11 13.2652 11.1054 13.5196 11.2929 13.7071C11.4804 13.8946 11.7348 14 12 14C12.2652 14 12.5196 13.8946 12.7071 13.7071C12.8946 13.5196 13 13.2652 13 13V12.82C13.6614 12.58 14.2174 12.1152 14.5708 11.5069C14.9242 10.8985 15.0525 10.1853 14.9334 9.49189C14.8143 8.79849 14.4552 8.16902 13.919 7.71352C13.3828 7.25801 12.7035 7.00546 12 7Z" />
+  </svg>
+);
+
+export default QuestionCircle;

package/src/components/atoms/Icon/icons/Rocket.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Rocket: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M22.601 2.06205C22.5559 1.89077 22.4661 1.73453 22.3409 1.60929C22.2156 1.48404 22.0594 1.39428 21.8881 1.34916C19.8368 0.816345 17.6766 0.873732 15.6564 1.51471C13.6362 2.15569 11.8381 3.35419 10.4692 4.97222L9.35426 6.29605L6.74946 5.66757C6.1162 5.4468 5.42444 5.46262 4.80194 5.71212C4.17943 5.96161 3.66823 6.42793 3.36274 7.02495L1.16255 10.9248C1.08546 11.0614 1.04158 11.2143 1.03447 11.371C1.02737 11.5277 1.05722 11.6838 1.12163 11.8268C1.18603 11.9699 1.28318 12.0957 1.40523 12.1943C1.52727 12.2928 1.67078 12.3612 1.82417 12.394L4.89692 13.0527C4.63663 13.8451 4.45077 14.66 4.34175 15.4868C4.32198 15.6387 4.33737 15.7931 4.38673 15.9382C4.43608 16.0832 4.51808 16.2149 4.62641 16.3232L7.72651 19.4233C7.81933 19.5162 7.92954 19.5899 8.05085 19.6402C8.17216 19.6905 8.30219 19.7163 8.43351 19.7163C8.46232 19.7163 8.49113 19.7149 8.52043 19.7124C9.36577 19.6364 10.2008 19.4722 11.012 19.2224L11.6557 22.2256C11.6886 22.379 11.7571 22.5224 11.8556 22.6444C11.9542 22.7664 12.08 22.8635 12.223 22.9279C12.366 22.9923 12.5221 23.0222 12.6788 23.0151C12.8355 23.0081 12.9883 22.9642 13.1249 22.8872L17.0302 20.6846C17.5798 20.3506 18.0092 19.8507 18.2563 19.2569C18.5034 18.6631 18.5556 18.0062 18.4052 17.3809L17.7365 14.6219L18.9735 13.4844C20.5976 12.1193 21.8007 10.3211 22.4429 8.299C23.0851 6.27692 23.1399 4.11407 22.601 2.06205ZM3.57222 10.7232L5.12837 7.96343C5.22502 7.77607 5.3897 7.63279 5.58862 7.56297C5.78754 7.49315 6.00564 7.50208 6.19819 7.58794L7.9156 8.00414L7.2656 8.77593C6.64936 9.5145 6.11637 10.3187 5.67628 11.174L3.57222 10.7232ZM16.0424 18.9454L13.3266 20.477L12.8971 18.4724C13.7677 18.0382 14.5789 17.4938 15.3105 16.8525L16.054 16.1689L16.4575 17.8335C16.5098 18.039 16.4981 18.2557 16.4239 18.4544C16.3497 18.6531 16.2166 18.8244 16.0424 18.9454ZM17.6567 11.98L13.9721 15.3663C12.5137 16.6276 10.7147 17.4293 8.80171 17.6705L6.39741 15.2662C6.72033 13.3482 7.54912 11.551 8.79829 10.0602L10.4766 8.0675C10.5046 8.03824 10.5307 8.00726 10.5548 7.97473L11.9897 6.27105C13.0507 5.01794 14.4252 4.06885 15.9729 3.52069C17.5206 2.97253 19.1861 2.84493 20.7993 3.15093C21.1127 4.76915 20.9864 6.44179 20.4337 7.99465C19.881 9.5475 18.922 10.9238 17.6567 11.98ZM16.7337 5.81629C16.437 5.81629 16.147 5.90426 15.9003 6.06908C15.6537 6.2339 15.4614 6.46817 15.3479 6.74226C15.2343 7.01635 15.2046 7.31795 15.2625 7.60892C15.3204 7.89989 15.4632 8.16717 15.673 8.37695C15.8828 8.58672 16.1501 8.72959 16.4411 8.78746C16.732 8.84534 17.0336 8.81564 17.3077 8.70211C17.5818 8.58857 17.8161 8.39632 17.9809 8.14964C18.1457 7.90297 18.2337 7.61296 18.2337 7.31629C18.2337 7.1193 18.1949 6.92423 18.1195 6.74223C18.0442 6.56024 17.9337 6.39487 17.7944 6.25558C17.6551 6.11628 17.4897 6.00579 17.3077 5.93042C17.1257 5.85504 16.9306 5.81625 16.7336 5.81627L16.7337 5.81629Z" />
+  </svg>
+);
+
+export default Rocket;

package/src/components/atoms/Initials/Initials.tsx

@@ -27,6 +27,7 @@ const Root = styled.div<{ size: number, color: string }>`
   background-color: ${p => p.color};
   color: var(--color-white);
   display: flex;
+  font-size: ${p => `calc(${p.size}px / 2)`};
   align-items: center;
   justify-content: center;
   text-transform: uppercase;

package/src/components/atoms/index.ts

@@ -2,6 +2,7 @@ export { Alert } from "./Alert";
 export { Avatar } from "./Avatar";
 export { Card } from "./Card";
 export { Divider } from "./Divider";
+export { DateTime } from "./DateTime";
 export { Icon } from "./Icon";
 export { Pill } from "./Pill";
 export { Typography } from "./Typography";

package/src/components/molecules/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { getValidationTypeProps } from '../../../helpers/validation';
 import { ValidationType } from '../../../types/validation';
@@ -13,12 +13,12 @@ export interface DropdwonStaticProps {
 
 export interface DropdownProps
   extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-  validationType: ValidationType;
+  validationType?: ValidationType;
   label?: string;
-  size: 'xl' | 'l' | 'm' | 's';
+  size?: 'xl' | 'l' | 'm' | 's';
 }
 
-const Dropdown = React.forwardRef<HTMLSelectElement, DropdownProps>(
+const Dropdown = React.forwardRef<HTMLSelectElement, PropsWithChildren<DropdownProps>>(
   ({ children, label, size = 'm', ...props }, ref) => {
     return (
       <FieldWrapper withLabel={Boolean(label)} sizeVariant={size}>

package/src/components/molecules/Dropdown/Option.tsx

@@ -1,5 +1,12 @@
-import React from 'react';
+import React, { PropsWithChildren } from "react";
 
-export const Option: React.FC = ({ children }) => {
-  return <option>{children}</option>;
+export interface OptionProps {
+  value?: string | number;
+}
+
+export const Option: React.FC<PropsWithChildren<OptionProps>> = ({
+  value,
+  children,
+}) => {
+  return <option value={value}>{children}</option>;
 };