Merge pull request #55 from deriv-com/aizad/inline-message

Aizad/FEQ-1660/Added Inline Message
deriv-com · Feb 2, 2024 · 36eab84 · 36eab84
2 parents 053cca5 + 49504af
commit 36eab84
Show file tree

Hide file tree

Showing 5 changed files with 314 additions and 0 deletions.
diff --git a/lib/components/InlineMessage/InlineMessage.scss b/lib/components/InlineMessage/InlineMessage.scss
@@ -0,0 +1,73 @@
+$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: 8px;
+
+  &__icon {
+    width: 16px;
+    height: 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
@@ -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
@@ -0,0 +1,66 @@
+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) => (
+  <div
+    className={clsx(
+      "deriv-inline-message",
+      variant !== "general"
+        ? VariantClasses[variant][type]
+        : VariantClasses[variant],
+      className
+    )}
+  >
+    {(variant !== "general" || icon) && (
+      <div className="deriv-inline-message__icon">
+        {variant !== "general" ? VariantIcons[variant] : icon ?? null}
+      </div>
+    )}
+    {children}
+  </div>
+);
diff --git 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";
diff --git a/src/stories/InlineMessage.stories.ts 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",
+  },
+};