feat: side note component

lib/components/SideNote/SideNote.scss

@@ -0,0 +1,6 @@
+.deriv-side-note {
+    background-color: #f2f3f4;
+    padding: 1rem 1.5rem;
+    color: #333333;
+    border-radius: 0.5rem;
+}

lib/components/SideNote/index.tsx

@@ -0,0 +1,34 @@
+import { ComponentProps, PropsWithChildren } from "react";
+import { Text } from "../Text";
+import "./SideNote.scss";
+
+interface SideNoteProps extends ComponentProps<"div"> {
+  title?: string;
+  titleSize?: ComponentProps<typeof Text>["size"];
+  sideNoteFooter?: JSX.Element;
+}
+
+/**
+ * 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
+ */
+export const SideNote = ({
+  children,
+  title,
+  titleSize = "sm",
+  sideNoteFooter,
+  ...props
+}: PropsWithChildren<SideNoteProps>): React.JSX.Element => (
+  <div className="deriv-side-note" {...props}>
+    {title && (
+      <Text size={titleSize} align="center" weight="bold">
+        {title}
+      </Text>
+    )}
+    <div>{children}</div>
+    {sideNoteFooter}
+  </div>
+);

lib/main.ts

@@ -15,3 +15,4 @@ export { Tooltip } from "./components/Tooltip";
 export { useDevice } from "./hooks/useDevice";
 export { useOnClickOutside } from "./hooks/useOnClickOutside";
 export { VerticalTab, VerticalTabItems } from "./components/VerticalTab";
+export { SideNote } from "./components/SideNote";

src/stories/SideNote.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SideNote, Text } 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>,
+  },
+  argTypes: {
+    title: {
+      control: false,
+      description: "Contains the title to be shown.",
+    },
+    titleSize: {
+      description: "Sets the title text size.",
+    },
+    sideNoteFooter: {
+      control: false,
+      description: "A prop which can be passed with a single HTML Element",
+    },
+  },
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SideNote>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "SideNote",
+};