Merge pull request #143 from deriv-com/shayan/feq-1987/fix-side-note-component-style-issue

style: added gap between sideNote sections

Author: shayan-deriv

src/components/SideNote/SideNote.scss

@@ -3,6 +3,12 @@
     color: #333333;
     padding: 16px 24px;
     border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+
+    &__title {
+        margin-bottom: 8px;
+    }
 
     &:hover > &__action {
         text-decoration: underline;
@@ -14,5 +20,6 @@
         align-items: center;
         gap: 8px;
         cursor: pointer;
+        margin-top: 16px;
     }
 }

src/components/SideNote/index.tsx

@@ -15,6 +15,7 @@ type SideNoteProps = Omit<ComponentProps<"div">, "className"> & {
     className?: HTMLDivElement["className"];
     actionClick?: MouseEventHandler<HTMLButtonElement>;
     actionClassName?: HTMLDivElement["className"];
+    titleClassName?: HTMLDivElement["className"];
     actionLabel?: ReactNode;
 };
 
@@ -25,6 +26,7 @@ type SideNoteProps = Omit<ComponentProps<"div">, "className"> & {
  * @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.titleClassName} titleClassName - Add an extra className to the title.
  * @param {SideNoteProps.actionLabel} actionLabel - Display the label of the action. (default: "Learn more")
  * @returns {React.JSX.Element} - Returns the SideNote component.
  */
@@ -35,17 +37,18 @@ export const SideNote = ({
     className,
     actionClick,
     actionClassName,
+    titleClassName,
     actionLabel = "Learn more",
     ...props
 }: PropsWithChildren<SideNoteProps>) => (
     <div className={clsx("deriv-side-note", className)} {...props}>
         {title && (
-            <Text data-testid="dt_deriv-side-note-title" size={titleSize} align="left" weight="bold">
+            <Text data-testid="dt_deriv-side-note-title" className={clsx("deriv-side-note__title", titleClassName)} size={titleSize} align="left" weight="bold">
                 {title}
             </Text>
         )}
 
-        <div>{children}</div>
+        {children}
 
         {actionClick && (
             <button

stories/SideNote.stories.tsx

@@ -11,6 +11,7 @@ const meta = {
         actionLabel: "Learn more",
         actionClick: () => console.log("Test action"),
         actionClassName: "",
+        titleClassName: "",
     },
     argTypes: {
         title: { control: false, description: "Display the title content." },
@@ -31,6 +32,10 @@ const meta = {
             control: false,
             description: "Add an extra className to the action button.",
         },
+        titleClassName: {
+            control: false,
+            description: "Add an extra className to the title wrapper.",
+        },
     },
     parameters: { layout: "centered" },
     tags: ["autodocs"],
@@ -48,7 +53,7 @@ export const Default: Story = {
                 actionLabel="Learn more"
                 actionClick={() => console.log("test click!")}
             >
-                <p style={{ margin: "10px 0" }}>This is a test note</p>
+                This is a test note
             </SideNote>
         </div>
     ),