chore: account comparison block

libs/blocks/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/account-comparison';
 export * from './lib/stat';
 export * from './lib/navigation';
 export * from './lib/navigation/mobile/mobile.nav-toggle';

libs/blocks/src/lib/account-comparison/account-comparison.spec.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import AccountComparison from '.';
+import { Heading } from '@deriv/quill-design';
+
+const Content = () => <Heading.H2>This is a heading content</Heading.H2>;
+
+describe('AccountComparison', () => {
+  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(
+      <AccountComparison
+        title={title}
+        description={description}
+        content={Content}
+      />,
+    );
+    const titleElement = getByText(title);
+
+    //renders with correct classname
+    expect(titleElement).toHaveClass(className);
+
+    //renders with the correct title
+    expect(getByText(title)).toBeInTheDocument();
+
+    //renders with the correct description
+    expect(getByText(description)).toBeInTheDocument();
+  });
+});

libs/blocks/src/lib/account-comparison/account-comparison.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import AccountComparison from '.';
+
+const meta = {
+  title: 'Blocks/AccountComparison',
+  component: AccountComparison,
+} satisfies Meta<typeof AccountComparison>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    className: '',
+    title: 'Title here',
+    description:
+      'Description goes here description goes here description goes here description goes here',
+    content: () => (
+      <img
+        className="flex w-full flex-1"
+        src="https://placehold.co/712x200"
+        alt="Placeholder"
+      />
+    ),
+  },
+};

libs/blocks/src/lib/account-comparison/index.tsx

@@ -0,0 +1,38 @@
+import { FluidContainer, Heading, Text, Section } from '@deriv/quill-design';
+import clsx from 'clsx';
+
+export interface AccountComparisonProps {
+  className?: string;
+  title?: string;
+  description?: string;
+  content: React.FC;
+}
+
+const AccountComparison = ({
+  className,
+  title,
+  description,
+  content: Content,
+}: AccountComparisonProps) => {
+  return (
+    <Section
+      className={clsx(
+        'py-general-4xl',
+        'bg-background-primary-container',
+        className,
+      )}
+    >
+      <FluidContainer className="flex flex-col items-center gap-gap-xl lg:gap-gap-2xl">
+        {(title || description) && (
+          <div className="flex flex-col items-center gap-gap-lg lg:gap-gap-xl">
+            {title && <Heading.H2>{title}</Heading.H2>}
+            {description && <Text>{description}</Text>}
+          </div>
+        )}
+        {Content && <Content />}
+      </FluidContainer>
+    </Section>
+  );
+};
+
+export default AccountComparison;

libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx

@@ -55,7 +55,7 @@ describe('CardContent', () => {
       <CardContentBlock
         title={'this is a title'}
         description={'this is a description'}
-        cardsVariant="ContentBottom"
+        variant="ContentBottom"
         cards={cards}
       />,
     );