From dec83939c0e9c470839937f702eb3737c79e3a88 Mon Sep 17 00:00:00 2001
From: Niloofar <niloofar.sadeghi@regentmarkets.com>
Date: Fri, 16 Feb 2024 12:13:23 +0800
Subject: [PATCH] feat: added action button to side note component

---
 lib/components/SideNote/ChevronRightIcon.tsx | 19 +++++++
 lib/components/SideNote/SideNote.scss        | 17 ++++++-
 lib/components/SideNote/index.tsx            | 52 +++++++++++++++-----
 src/stories/SideNote.stories.tsx             | 40 +++++++++++----
 4 files changed, 104 insertions(+), 24 deletions(-)
 create mode 100644 lib/components/SideNote/ChevronRightIcon.tsx

diff --git a/lib/components/SideNote/ChevronRightIcon.tsx b/lib/components/SideNote/ChevronRightIcon.tsx
new file mode 100644
index 00000000..eb1e3bb3
--- /dev/null
+++ b/lib/components/SideNote/ChevronRightIcon.tsx
@@ -0,0 +1,19 @@
+export const ChevronRightIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+  >
+    <g id="icon">
+      <path
+        id="icon_2"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3.85983 1.60983C4.00628 1.46339 4.24372 1.46339 4.39017 1.60983L8.51516 5.73484C8.66161 5.88128 8.66161 6.11872 8.51516 6.26516L4.39017 10.3902C4.24372 10.5366 4.00628 10.5366 3.85983 10.3902C3.71339 10.2437 3.71339 10.0063 3.85983 9.85983L7.71967 6L3.85983 2.14017C3.71339 1.99372 3.71339 1.75628 3.85983 1.60983Z"
+        fill="#FF444F"
+      />
+    </g>
+  </svg>
+);
diff --git a/lib/components/SideNote/SideNote.scss b/lib/components/SideNote/SideNote.scss
index bb839de2..b29556fc 100644
--- a/lib/components/SideNote/SideNote.scss
+++ b/lib/components/SideNote/SideNote.scss
@@ -1,6 +1,19 @@
 .deriv-side-note {
     background-color: #f2f3f4;
-    padding: 1rem 1.5rem;
     color: #333333;
+    padding: 1rem 1.5rem;
     border-radius: 0.5rem;
-}
\ No newline at end of file
+
+    &:hover > &__action {
+        text-decoration: underline;
+        text-decoration-color: red;
+    }
+    &__action {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+    }
+}
diff --git a/lib/components/SideNote/index.tsx b/lib/components/SideNote/index.tsx
index 2fb13ede..14cfcb8e 100644
--- a/lib/components/SideNote/index.tsx
+++ b/lib/components/SideNote/index.tsx
@@ -1,34 +1,62 @@
-import { ComponentProps, PropsWithChildren } from "react";
+import {
+  ComponentProps,
+  MouseEventHandler,
+  PropsWithChildren,
+  ReactElement,
+} from "react";
+import { ChevronRightIcon } from "./ChevronRightIcon";
 import { Text } from "../Text";
 import "./SideNote.scss";
+import clsx from "clsx";
 
-interface SideNoteProps extends ComponentProps<"div"> {
-  title?: string;
+type SideNoteProps = Omit<ComponentProps<"div">, "className"> & {
+  title?: string | ReactElement;
   titleSize?: ComponentProps<typeof Text>["size"];
-  sideNoteFooter?: JSX.Element;
-}
+  className?: HTMLDivElement["className"];
+  actionClick?: MouseEventHandler<HTMLButtonElement>;
+  actionClassName?: HTMLDivElement["className"];
+  actionLabel?: string | ReactElement;
+};
 
 /**
  * This component is a design feature that displays extra information next to the main text, providing additional details or comments.
- * @param {SideNoteProps.title} title - Title content to be displayed.
- * @param {SideNoteProps.titleSize} titleSize - Defining title Font-size.
- * @param {SideNoteProps.sideNoteFooter} sideNoteFooter - Action buttons or links like learn more...
- * @returns {React.JSX.Element} - returns the SideNote component
+ * @param {SideNoteProps.title} title - Display the title content.
+ * @param {SideNoteProps.titleSize} titleSize - Set the font-size for the title.
+ * @param {SideNoteProps.className} className - Add an extra className to the container.
+ * @param {SideNoteProps.actionClick} actionClick - An onclick handler for the action button.
+ * @param {SideNoteProps.actionClassName} actionClassName - Add an extra className to the action button.
+ * @param {SideNoteProps.actionLabel} actionLabel - Display the label of the action.
+ * @returns {React.JSX.Element} - Returns the SideNote component.
  */
 export const SideNote = ({
   children,
   title,
   titleSize = "sm",
-  sideNoteFooter,
+  className,
+  actionClick,
+  actionClassName,
+  actionLabel,
   ...props
 }: PropsWithChildren<SideNoteProps>): React.JSX.Element => (
-  <div className="deriv-side-note" {...props}>
+  <div className={clsx("deriv-side-note", className)} {...props}>
     {title && (
       <Text size={titleSize} align="center" weight="bold">
         {title}
       </Text>
     )}
+
     <div>{children}</div>
-    {sideNoteFooter}
+
+    {actionClick && (
+      <button
+        className={clsx("deriv-side-note__action", actionClassName)}
+        onClick={actionClick}
+      >
+        <Text color="red" size="xs">
+          {actionLabel}
+        </Text>
+        <ChevronRightIcon />
+      </button>
+    )}
   </div>
 );
diff --git a/src/stories/SideNote.stories.tsx b/src/stories/SideNote.stories.tsx
index c67ac5bc..b8cfa1f6 100644
--- a/src/stories/SideNote.stories.tsx
+++ b/src/stories/SideNote.stories.tsx
@@ -1,26 +1,35 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { SideNote, Text } from "../../lib/main";
+import { SideNote } from "../../lib/main";
 
 const meta = {
   title: "Components/SideNote",
   component: SideNote,
   args: {
     title: "This is a test title",
-    titleSize: "md",
-    sideNoteFooter: <a href="/">Learn more</a>,
-    children: <Text>This is test note!</Text>,
+    titleSize: "sm",
+    className: "",
+    actionLabel: "Learn more",
+    actionClick: () => console.log("Test action"),
+    actionClassName: "",
   },
   argTypes: {
-    title: {
+    title: { control: false, description: "Display the title content." },
+    titleSize: { description: "Set the font-size for the title." },
+    className: {
       control: false,
-      description: "Contains the title to be shown.",
+      description: "Add an extra className to the container.",
     },
-    titleSize: {
-      description: "Sets the title text size.",
+    actionLabel: {
+      control: false,
+      description: "Display the label of the action.",
+    },
+    actionClick: {
+      control: false,
+      description: "An onclick handler for the action button.",
     },
-    sideNoteFooter: {
+    actionClassName: {
       control: false,
-      description: "A prop which can be passed with a single HTML Element",
+      description: "Add an extra className to the action button.",
     },
   },
   parameters: { layout: "centered" },
@@ -32,4 +41,15 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   name: "SideNote",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <SideNote
+        title="Test title"
+        actionLabel="Learn more"
+        actionClick={() => console.log("test click!")}
+      >
+        <p style={{ margin: "10px 0" }}>This is a test note</p>
+      </SideNote>
+    </div>
+  ),
 };