From b539658fbf830d97628a9015ec9ad5e52e71f456 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 2 Feb 2024 14:52:12 +0800
Subject: [PATCH 1/4] fix: added Inline Message Component

---
 .../InlineMessage/InlineMessage.scss          | 68 +++++++++++++++++++
 lib/components/InlineMessage/VariantIcons.tsx | 58 ++++++++++++++++
 lib/components/InlineMessage/index.tsx        | 64 +++++++++++++++++
 lib/main.ts                                   |  1 +
 4 files changed, 191 insertions(+)
 create mode 100644 lib/components/InlineMessage/InlineMessage.scss
 create mode 100644 lib/components/InlineMessage/VariantIcons.tsx
 create mode 100644 lib/components/InlineMessage/index.tsx

diff --git a/lib/components/InlineMessage/InlineMessage.scss b/lib/components/InlineMessage/InlineMessage.scss
new file mode 100644
index 00000000..a70ab384
--- /dev/null
+++ b/lib/components/InlineMessage/InlineMessage.scss
@@ -0,0 +1,68 @@
+$error-borderColor: #ec3f3f;
+$warning-borderColor: #ffad3a;
+$success-borderColor: #4bb4b3;
+$info-borderColor: #377cfc;
+$error-bgColor: rgba(236, 63, 63, 0.16);
+$warning-bgColor: rgba(255, 173, 58, 0.16);
+$success-bgColor: rgba(75, 180, 179, 0.16);
+$info-bgColor: rgba(55, 124, 252, 0.16);
+$general-color: #f2f3f4;
+$border: 1px solid;
+
+.deriv-inline-message {
+  width: 100%;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  padding: 16px;
+
+  &__info {
+    &--filled {
+      border: none;
+      background-color: $info-bgColor;
+    }
+    &--outlined {
+      border: $border $info-borderColor;
+      background-color: transparent;
+    }
+  }
+
+  &__success {
+    &--filled {
+      border: none;
+      background-color: $success-bgColor;
+    }
+    &--outlined {
+      border: $border $success-borderColor;
+      background-color: transparent;
+    }
+  }
+
+  &__warning {
+    &--filled {
+      border: none;
+      background-color: $warning-bgColor;
+    }
+    &--outlined {
+      border: $border $warning-borderColor;
+      background-color: transparent;
+    }
+  }
+
+  &__error {
+    &--filled {
+      border: none;
+      background-color: $error-bgColor;
+    }
+    &--outlined {
+      border: $border $error-borderColor;
+      background-color: transparent;
+    }
+  }
+
+  &__general {
+    background-color: $general-color;
+  }
+}
diff --git a/lib/components/InlineMessage/VariantIcons.tsx b/lib/components/InlineMessage/VariantIcons.tsx
new file mode 100644
index 00000000..ba747768
--- /dev/null
+++ b/lib/components/InlineMessage/VariantIcons.tsx
@@ -0,0 +1,58 @@
+export const ErrorIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 16 16"
+  >
+    <g clipPath="url(#clip0_40941_3479)">
+      <path
+        fill="#EC3F3F"
+        d="M7.031.6a1.082 1.082 0 011.937 0l3.366 6.73 3.55 7.102c.36.72-.164 1.568-.969 1.568H1.085a1.083 1.083 0 01-.969-1.568l3.55-7.102L7.031.6zM8 11c.375 0 .687-.29.712-.665l.28-4.095C9.066 5.582 8.602 5 8 5s-1.066.582-.992 1.24l.28 4.095A.714.714 0 008 11zm1 2.012v-.024C9 12.43 8.576 12 8 12c-.575 0-1 .43-1 .989v.023c0 .557.425.988 1 .988.576 0 1-.432 1-.988z"
+      ></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_40941_3479">
+        <path fill="#fff" d="M0 0H16V16H0z"></path>
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const InfoIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <g fill="none">
+      <circle cx="8" cy="8" r="8" fill="#2196F3"></circle>
+      <g fill="#FFF" transform="translate(6.5 4)">
+        <circle cx="1.5" cy="1" r="1"></circle>
+        <rect width="2" height="5" x="0.5" y="3" rx="1"></rect>
+      </g>
+    </g>
+  </svg>
+);
+
+export const SuccessIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="8" cy="8" r="8" fill="#4BB4B3" />
+    <path
+      d="M4.78033 7.84467C4.48744 7.55178 4.01256 7.55178 3.71967 7.84467C3.42678 8.13756 3.42678 8.61244 3.71967 8.90533L5.96967 11.1553C6.26256 11.4482 6.73744 11.4482 7.03033 11.1553L12.2803 5.90533C12.5732 5.61244 12.5732 5.13756 12.2803 4.84467C11.9874 4.55178 11.5126 4.55178 11.2197 4.84467L6.5 9.56434L4.78033 7.84467Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const WarningIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path
+      fill="#FFAD3A"
+      d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 10.7c-.4 0-.7.1-1 .4-.2.2-.3.5-.3.9s.1.7.4 1c.2.2.5.3.9.3s.7-.1 1-.4c.2-.2.3-.5.3-.9s-.1-.7-.4-1c-.2-.2-.5-.3-.9-.3zm1.2-7.4c-.3-.5-.9-.7-1.5-.6-.6.2-1 .7-1 1.3v1L7 9.3c0 .5.5.8 1 .8.6 0 1-.4 1-.8v-.9l.2-2.6.1-1.8v-.6z"
+    ></path>
+  </svg>
+);
diff --git a/lib/components/InlineMessage/index.tsx b/lib/components/InlineMessage/index.tsx
new file mode 100644
index 00000000..f3663a60
--- /dev/null
+++ b/lib/components/InlineMessage/index.tsx
@@ -0,0 +1,64 @@
+import React, { ReactNode } from "react";
+import clsx from "clsx";
+import { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./VariantIcons";
+import "./InlineMessage.scss";
+
+type TVariant = "warning" | "info" | "success" | "error" | "general";
+
+type InlineMessageProps = {
+  children: ReactNode;
+  className?: string;
+  icon?: JSX.Element;
+  variant?: TVariant;
+  type?: "outlined" | "filled";
+};
+
+const VariantIcons: Record<Exclude<TVariant, "general">, JSX.Element> = {
+  error: <ErrorIcon />,
+  info: <InfoIcon />,
+  success: <SuccessIcon />,
+  warning: <WarningIcon />,
+};
+
+const VariantClasses = {
+  error: {
+    filled: "deriv-inline-message__error--filled",
+    outlined: "deriv-inline-message__error--outlined",
+  },
+  general: "deriv-inline-message__general",
+  info: {
+    filled: "deriv-inline-message__info--filled",
+    outlined: "deriv-inline-message__info--outlined",
+  },
+  success: {
+    filled: "deriv-inline-message__success--filled",
+    outlined: "deriv-inline-message__success--outlined",
+  },
+  warning: {
+    filled: "deriv-inline-message__warning--filled",
+    outlined: "deriv-inline-message__warning--outlined",
+  },
+};
+
+export const InlineMessage = ({
+  icon,
+  children,
+  className,
+  variant = "general",
+  type = "filled",
+}: InlineMessageProps) => {
+  return (
+    <div
+      className={clsx(
+        "deriv-inline-message",
+        variant !== "general"
+          ? VariantClasses[variant][type]
+          : VariantClasses[variant],
+        className
+      )}
+    >
+      {variant !== "general" ? VariantIcons[variant] : icon ?? null}
+      {children}
+    </div>
+  );
+};
diff --git a/lib/main.ts b/lib/main.ts
index 7818aaff..676ea882 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -10,3 +10,4 @@ export { Tooltip } from "./components/Tooltip";
 export { useDevice } from "./hooks/useDevice";
 export { useOnClickOutside } from "./hooks/useOnClickOutside";
 export { PasswordInput } from "./components/PasswordInput";
+export { InlineMessage } from "./components/InlineMessage";

From 8dd77a270bc42fbe03d5ad82abc7dc58eb3a8bb1 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 2 Feb 2024 15:17:53 +0800
Subject: [PATCH 2/4] fix: added storybook for Inline Message

---
 lib/components/InlineMessage/index.tsx |  30 +++----
 src/stories/InlineMessage.stories.ts   | 116 +++++++++++++++++++++++++
 2 files changed, 130 insertions(+), 16 deletions(-)
 create mode 100644 src/stories/InlineMessage.stories.ts

diff --git a/lib/components/InlineMessage/index.tsx b/lib/components/InlineMessage/index.tsx
index f3663a60..229f39a3 100644
--- a/lib/components/InlineMessage/index.tsx
+++ b/lib/components/InlineMessage/index.tsx
@@ -46,19 +46,17 @@ export const InlineMessage = ({
   className,
   variant = "general",
   type = "filled",
-}: InlineMessageProps) => {
-  return (
-    <div
-      className={clsx(
-        "deriv-inline-message",
-        variant !== "general"
-          ? VariantClasses[variant][type]
-          : VariantClasses[variant],
-        className
-      )}
-    >
-      {variant !== "general" ? VariantIcons[variant] : icon ?? null}
-      {children}
-    </div>
-  );
-};
+}: InlineMessageProps) => (
+  <div
+    className={clsx(
+      "deriv-inline-message",
+      variant !== "general"
+        ? VariantClasses[variant][type]
+        : VariantClasses[variant],
+      className
+    )}
+  >
+    {variant !== "general" ? VariantIcons[variant] : icon ?? null}
+    {children}
+  </div>
+);
diff --git a/src/stories/InlineMessage.stories.ts b/src/stories/InlineMessage.stories.ts
new file mode 100644
index 00000000..bc7c9117
--- /dev/null
+++ b/src/stories/InlineMessage.stories.ts
@@ -0,0 +1,116 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { InlineMessage } from "../../lib/main";
+
+const meta = {
+  title: "Components/InlineMessage",
+  component: InlineMessage,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text",
+      },
+    },
+    icon: {
+      disable: true,
+    },
+    className: {
+      disable: true,
+    },
+    variant: {
+      control: {
+        type: "select",
+      },
+      defaultValue: "general",
+      options: ["warning", "info", "success", "error", "general"],
+    },
+    type: {
+      control: {
+        type: "select",
+      },
+      defaultValue: "filled",
+      options: ["outlined", "filled"],
+    },
+  },
+} satisfies Meta<typeof InlineMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Default Inline Message",
+  args: {
+    variant: "general",
+    type: "outlined",
+    children: "This is a default inline message",
+  },
+};
+
+export const WarningFilled: Story = {
+  name: "Warning filled Inline Message",
+  args: {
+    variant: "warning",
+    children: "This is a default inline message",
+  },
+};
+
+export const WarningOutlined: Story = {
+  name: "Warning outlined Inline Message",
+  args: {
+    variant: "warning",
+    type: "outlined",
+    children: "This is a default inline message",
+  },
+};
+
+export const InfoFilled: Story = {
+  name: "Info filled Inline Message",
+  args: {
+    variant: "info",
+    children: "This is a default inline message",
+  },
+};
+
+export const InfoOutlined: Story = {
+  name: "Info outlined Inline Message",
+  args: {
+    variant: "info",
+    type: "outlined",
+    children: "This is a default inline message",
+  },
+};
+
+export const SuccessFilled: Story = {
+  name: "Success filled Inline Message",
+  args: {
+    variant: "success",
+    children: "This is a default inline message",
+  },
+};
+
+export const SuccessOutlined: Story = {
+  name: "Success outlined Inline Message",
+  args: {
+    variant: "success",
+    type: "outlined",
+    children: "This is a default inline message",
+  },
+};
+
+export const ErrorFilled: Story = {
+  name: "Error filled Inline Message",
+  args: {
+    variant: "error",
+    children: "This is a default inline message",
+  },
+};
+
+export const ErrorOutlined: Story = {
+  name: "Error outlined Inline Message",
+  args: {
+    variant: "error",
+    type: "outlined",
+    children: "This is a default inline message",
+  },
+};

From fce70abdb4132b4caeabe5787d69ef1ff5b65bde Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 2 Feb 2024 15:41:49 +0800
Subject: [PATCH 3/4] chore added classname for icon

---
 lib/components/InlineMessage/InlineMessage.scss | 5 +++++
 lib/components/InlineMessage/index.tsx          | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/lib/components/InlineMessage/InlineMessage.scss b/lib/components/InlineMessage/InlineMessage.scss
index a70ab384..2457b074 100644
--- a/lib/components/InlineMessage/InlineMessage.scss
+++ b/lib/components/InlineMessage/InlineMessage.scss
@@ -18,6 +18,11 @@ $border: 1px solid;
   border-radius: 4px;
   padding: 16px;
 
+  &__icon {
+    width: 16px;
+    height: 16px;
+  }
+
   &__info {
     &--filled {
       border: none;
diff --git a/lib/components/InlineMessage/index.tsx b/lib/components/InlineMessage/index.tsx
index 229f39a3..96006ca5 100644
--- a/lib/components/InlineMessage/index.tsx
+++ b/lib/components/InlineMessage/index.tsx
@@ -56,7 +56,11 @@ export const InlineMessage = ({
       className
     )}
   >
-    {variant !== "general" ? VariantIcons[variant] : icon ?? null}
+    {(variant !== "general" || icon) && (
+      <div className="deriv-inline-message__icon">
+        {variant !== "general" ? VariantIcons[variant] : icon ?? null}
+      </div>
+    )}
     {children}
   </div>
 );

From 49504af1cf64e80d510a9680daba880323031339 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 2 Feb 2024 16:22:11 +0800
Subject: [PATCH 4/4] fix: padding inside of inline message

---
 lib/components/InlineMessage/InlineMessage.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/InlineMessage/InlineMessage.scss b/lib/components/InlineMessage/InlineMessage.scss
index 2457b074..1e7c387d 100644
--- a/lib/components/InlineMessage/InlineMessage.scss
+++ b/lib/components/InlineMessage/InlineMessage.scss
@@ -16,7 +16,7 @@ $border: 1px solid;
   align-items: center;
   gap: 8px;
   border-radius: 4px;
-  padding: 16px;
+  padding: 8px;
 
   &__icon {
     width: 16px;