feat: added action button to side note component

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>
+);

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;
-}
+
+    &: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;
+    }
+}

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>
 );

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>
+  ),
 };