feat: added content left and right to match v2 and v3

libs/blocks/src/lib/features/content-left/content-left.spec.tsx

@@ -1,38 +1,52 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import ContentLeft from '.';
 import { Button, Heading } from '@deriv/quill-design';
 
-const ContentLeftContent = () => (
-  <Heading.H2>This is a heading content</Heading.H2>
-);
+const className = 'text-heading-h2';
+const title = 'This is the title';
+const description = 'Description here';
+const content = 'This is a heading content';
+const child = 'This is a button';
 
-describe('ContentLeft', () => {
-  it('renders with correct class names and content', () => {
-    const className = 'text-heading-h2';
-    const title = 'This is the title';
-    const description = 'Description here';
+const ContentLeftContent = () => <Heading.H3>{content}</Heading.H3>;
 
-    const { getByText } = render(
+describe('ContentLeft', () => {
+  beforeEach(() => {
+    render(
       <ContentLeft
         className={className}
         title={title}
         description={description}
         content={ContentLeftContent}
       >
-        <Button>This is a button</Button>
+        <Button>{child}</Button>
       </ContentLeft>,
     );
-    const titleElement = getByText(title);
+  });
 
-    //renders with correct classname
-    expect(titleElement).toHaveClass(className);
+  it('renders with correct class names passing in', () => {
+    expect(document.querySelector(`.${className}`)).toBeInTheDocument();
+  });
 
-    //renders with the correct title
-    expect(getByText(title)).toBeInTheDocument();
+  it(`renders with correct title '${title}'`, () => {
+    expect(
+      screen.getByRole('heading', { name: title, level: 2 }),
+    ).toBeInTheDocument();
+  });
+
+  it(`renders with correct description '${description}'`, () => {
+    expect(screen.getByText(description)).toBeInTheDocument();
+  });
+
+  it(`renders with correct content`, () => {
+    expect(
+      screen.getByRole('heading', { name: content, level: 3 }),
+    ).toBeInTheDocument();
+  });
 
-    //renders with the correct description
-    expect(getByText(description)).toBeInTheDocument();
+  it(`renders with correct children`, () => {
+    expect(screen.getByRole('button', { name: child })).toBeInTheDocument();
   });
 });

libs/blocks/src/lib/features/content-left/content-left.stories.tsx

@@ -13,8 +13,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    className:
-      'my-1000 bg-background-primary-container max-sm:px-800 max-lg:px-1200',
+    className: 'bg-background-primary-container',
     title: 'Title here',
     description:
       'Description goes here description goes here description goes here description goes here',
@@ -23,6 +22,8 @@ export const Default: Story = {
         <Text>Any Content here</Text>
       </div>
     ),
+    contentTop: false,
+    contentPadding: true,
     content: () => (
       <img
         className="flex w-full flex-1"

libs/blocks/src/lib/features/content-left/index.tsx

@@ -1,4 +1,10 @@
-import { FluidContainer, Heading, Section, Text } from '@deriv/quill-design';
+import {
+  FluidContainer,
+  Heading,
+  Section,
+  Text,
+  qtJoin,
+} from '@deriv/quill-design';
 import clsx from 'clsx';
 import { ContentLeftProps } from '../types';
 
@@ -10,6 +16,8 @@ const ContentLeft = ({
   children,
   content: Content,
   variant = 'content-left',
+  contentTop = false,
+  contentPadding = true,
 }: ContentLeftProps) => {
   return (
     <Section
@@ -22,12 +30,13 @@ const ContentLeft = ({
       <FluidContainer
         className={clsx(
           variant === 'content-left' ? 'lg:flex-row-reverse' : 'lg:flex-row',
-          'flex flex-col gap-gap-xl lg:gap-gap-lg',
+          'flex flex-col gap-gap-3xl px-general-none lg:gap-gap-lg',
+          contentTop ? 'flex-col-reverse' : 'flex-col',
         )}
       >
         <div
           className={clsx(
-            'flex flex-1 basis-1/2 flex-col gap-general-2xl lg:justify-center lg:gap-gap-3xl',
+            'flex flex-1 basis-1/2 flex-col gap-general-2xl px-general-md lg:justify-center lg:gap-gap-3xl',
             variant === 'content-left'
               ? 'lg:pl-general-xl'
               : 'lg:pr-general-2xl',
@@ -40,7 +49,12 @@ const ContentLeft = ({
           {children && children}
         </div>
         {Content && (
-          <div className="flex flex-1 basis-1/2 justify-center">
+          <div
+            className={qtJoin(
+              'flex flex-1 basis-1/2 justify-center',
+              contentPadding && 'px-general-md',
+            )}
+          >
             <Content />
           </div>
         )}

libs/blocks/src/lib/features/content-right/content-right.spec.tsx

@@ -1,38 +1,52 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import ContentRight from '.';
 import { Button, Heading } from '@deriv/quill-design';
 
-const ContentRightContent = () => (
-  <Heading.H2>This is a heading content</Heading.H2>
-);
+const className = 'text-heading-h2';
+const title = 'This is the title';
+const description = 'Description here';
+const content = 'This is a heading content';
+const child = 'This is a button';
 
-describe('ContentLeft', () => {
-  it('renders with correct class names and content', () => {
-    const className = 'text-heading-h2';
-    const title = 'This is the title';
-    const description = 'Description here';
+const ContentRightContent = () => <Heading.H3>{content}</Heading.H3>;
 
-    const { getByText } = render(
+describe('ContentRight', () => {
+  beforeEach(() => {
+    render(
       <ContentRight
         className={className}
         title={title}
-        content={ContentRightContent}
         description={description}
+        content={ContentRightContent}
       >
-        <Button>This is a button</Button>
+        <Button>{child}</Button>
       </ContentRight>,
     );
-    const titleElement = getByText(title);
+  });
 
-    //renders with correct classname
-    expect(titleElement).toHaveClass(className);
+  it('renders with correct class names passing in', () => {
+    expect(document.querySelector(`.${className}`)).toBeInTheDocument();
+  });
 
-    //renders with the correct title
-    expect(getByText(title)).toBeInTheDocument();
+  it(`renders with correct title '${title}'`, () => {
+    expect(
+      screen.getByRole('heading', { name: title, level: 2 }),
+    ).toBeInTheDocument();
+  });
+
+  it(`renders with correct description '${description}'`, () => {
+    expect(screen.getByText(description)).toBeInTheDocument();
+  });
+
+  it(`renders with correct content`, () => {
+    expect(
+      screen.getByRole('heading', { name: content, level: 3 }),
+    ).toBeInTheDocument();
+  });
 
-    //renders with the correct description
-    expect(getByText(description)).toBeInTheDocument();
+  it(`renders with correct children`, () => {
+    expect(screen.getByRole('button', { name: child })).toBeInTheDocument();
   });
 });

libs/blocks/src/lib/features/content-right/content-right.stories.tsx

@@ -13,8 +13,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    className:
-      'my-1000 bg-background-primary-container max-sm:px-800 max-lg:px-1200',
+    className: 'bg-background-primary-container',
     title: 'Title here',
     description:
       'Description goes here description goes here description goes here description goes here',

libs/blocks/src/lib/features/content-slider/content-slider.spec.tsx

@@ -1,30 +1,59 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import ContentSlider from '.';
+import { Button } from '@deriv/quill-design';
+import { cards } from './mock-data';
 
-describe('CardSlider', () => {
-  it('renders with correct class names and content', () => {
-    const className = 'text-heading-h2';
-    const title = 'This is the title';
-    const description = 'Description here';
+const className = 'text-heading-h2';
+const title = 'This is the title';
+const description = 'Description here';
+const cta = 'CTA';
 
-    const { getByText } = render(
+describe('CardSlider', () => {
+  beforeEach(() => {
+    render(
       <ContentSlider
         className={className}
         title={title}
         description={description}
+        cardSliderProps={{
+          slideClasses: 'max-w-xs',
+          variant: 'ContentBottom',
+          cards: cards,
+        }}
+        cta={() => <Button>{cta}</Button>}
       />,
     );
-    const titleElement = getByText(title);
+  });
+
+  it(`should render the correct class name '${className}' passing in`, () => {
+    expect(document.querySelector(`.${className}`)).toBeInTheDocument();
+  });
 
-    //renders with correct classname
-    expect(titleElement).toHaveClass(className);
+  it(`should render the correct title '${title}'`, () => {
+    expect(
+      screen.getByRole('heading', { name: title, level: 2 }),
+    ).toBeInTheDocument();
+  });
+
+  it(`should render the correct description '${description}'`, () => {
+    expect(screen.getByText(description)).toBeInTheDocument();
+  });
+
+  it('should render the correct cta', () => {
+    expect(screen.getByRole('button', { name: cta })).toBeInTheDocument();
+  });
 
-    //renders with the correct title
-    expect(getByText(title)).toBeInTheDocument();
+  cards.forEach((_, i) => {
+    it(`should render the correct title '${title}'`, () => {
+      expect(
+        screen.getByRole('heading', { name: `Card ${i + 1}`, level: 4 }),
+      ).toBeInTheDocument();
+    });
 
-    //renders with the correct description
-    expect(getByText(description)).toBeInTheDocument();
+    it(`should render the correct description '${description}'`, () => {
+      expect(screen.getByText(`Description here ${i + 1}`)).toBeInTheDocument();
+    });
   });
 });

libs/blocks/src/lib/features/content-slider/mock-data.tsx

@@ -0,0 +1,14 @@
+import { CardVariantProps } from '@deriv-com/components';
+import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons';
+
+export const cards: CardVariantProps<'ContentBottom'>[] = Array.from({
+  length: 6,
+}).map((_, i) => ({
+  id: i,
+  header: `Card ${i + 1}`,
+  description: `Description here ${i + 1}`,
+  icon: <IllustrativeProtectedAndSecureIcon />,
+  color: 'gray',
+  align: 'start',
+  size: 'sm',
+}));

libs/blocks/src/lib/features/features-v4/features-v4.spec.tsx

@@ -1,38 +1,42 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import FeaturesV4 from '.';
 import { Button, Heading } from '@deriv/quill-design';
 
-const ContentLeftContent = () => (
-  <Heading.H2>This is a heading content</Heading.H2>
-);
+const content = <Heading.H3>content</Heading.H3>;
+const title = 'this is title';
+const description = 'this is description';
 
-describe('ContentLeft', () => {
-  it('renders with correct class names and content', () => {
-    const className = 'text-heading-h2';
-    const title = 'This is the title';
-    const description = 'Description here';
-
-    const { getByText } = render(
-      <FeaturesV4
-        className={className}
-        title={title}
-        description={description}
-        content={ContentLeftContent}
-      >
-        <Button>This is a button</Button>
+describe('FeaturesV4', () => {
+  beforeEach(() => {
+    render(
+      <FeaturesV4 title={title} description={description} content={content}>
+        <Button>Click me</Button>
       </FeaturesV4>,
     );
-    const titleElement = getByText(title);
+  });
+
+  it('should rebder heading correctly', () => {
+    const heading = screen.getByRole('heading', {
+      name: title,
+      level: 2,
+    });
+    expect(heading).toBeInTheDocument();
+  });
 
-    //renders with correct classname
-    expect(titleElement).toHaveClass(className);
+  it('should render description correctly', () => {
+    const desc = screen.getByText(description);
+    expect(desc).toBeInTheDocument();
+  });
 
-    //renders with the correct title
-    expect(getByText(title)).toBeInTheDocument();
+  it('should render children passed to it', () => {
+    const button = screen.getByRole('button', { name: 'Click me' });
+    expect(button).toBeInTheDocument();
+  });
 
-    //renders with the correct description
-    expect(getByText(description)).toBeInTheDocument();
+  it('should render content passed to it', () => {
+    const data = screen.getByRole('heading', { name: 'content', level: 3 });
+    expect(data).toBeInTheDocument();
   });
 });

libs/blocks/src/lib/features/features-v4/features-v4.stories.tsx

@@ -17,6 +17,7 @@ export const Default: Story = {
     description:
       'Description goes here description goes here description goes here description goes here',
     children: <Text>Any Content here</Text>,
+    contentBottom: false,
     content: (
       <img
         className="flex w-full flex-1"