Merge pull request #276 from deriv-com/Jia/stat-block-refactor

Jia/QUILL-1264/refactor stat block
deriv-com · Jan 26, 2024 · e3e596f · e3e596f
2 parents d9e03f4 + d6f9454
commit e3e596f
Show file tree

Hide file tree

Showing 16 changed files with 371 additions and 283 deletions.
diff --git a/libs/blocks/src/lib/social-proof/horizontal/horizontal.spec.tsx b/libs/blocks/src/lib/social-proof/horizontal/horizontal.spec.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SocialProofHorizontal from '.';
+import { OptimizedImage } from '@deriv-com/components';
+
+describe('SocialProofHorizontal', () => {
+  it('render social proof horizontal block correctly', () => {
+    render(
+      <SocialProofHorizontal
+        content={({ numberOfReviews, trustScore }) => [
+          'Our customers say',
+          'Excellent',
+          `TrustScore ${trustScore} out of 5 based on ${numberOfReviews} reviews`,
+        ]}
+        data={{
+          trustScore: 4.5,
+          numberOfReviews: '45454',
+          stars: 4.4,
+        }}
+        theme={{
+          color: '!text-[#ffffff]',
+          background: 'bg-solid-slate-700',
+        }}
+        logo={
+          <OptimizedImage
+            imageName="home/trustpilot/trustpilot-logo.png"
+            alt="trustpilot"
+            width={97}
+            height={24}
+          />
+        }
+      />,
+    );
+
+    expect(screen.getByText('Our customers say')).toBeInTheDocument();
+
+    expect(document.querySelector('.bg-solid-slate-700')).toBeInTheDocument();
+
+    expect(screen.getByAltText('trustpilot')).toBeInTheDocument();
+  });
+});
diff --git a/libs/blocks/src/lib/social-proof/horizontal/horizontal.stories.tsx b/libs/blocks/src/lib/social-proof/horizontal/horizontal.stories.tsx
@@ -1,10 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { SocialProof } from '..';
 import { OptimizedImage } from '@deriv-com/components';
+import { data } from '../mock-data';
 
 const meta = {
   title: 'Blocks/SocialProof/Horizontal',
   component: SocialProof.Horizontal,
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      description:
+        '`({ ...props }: TPilotDataProps) => string[] | ReactNode[]`',
+    },
+    data: {
+      table: { type: { summary: 'TPilotDataProps' } },
+      options: Object.keys(data),
+      mapping: data,
+      control: { type: 'select' },
+    },
+    logo: { description: '`ReactNode`' },
+  },
 } satisfies Meta<typeof SocialProof.Horizontal>;
 
 export default meta;
@@ -35,142 +50,45 @@ export const Default: Story = {
 
 export const CustomTheme: Story = {
   args: {
-    content: ({ numberOfReviews, trustScore }) => [
-      'Our customers say',
-      'Excellent',
-      `TrustScore ${trustScore} out of 5 based on ${numberOfReviews} reviews`,
-    ],
-    data: {
-      trustScore: 4.5,
-      numberOfReviews: '45454',
-      stars: 4.4,
-    },
+    ...Default.args,
     theme: {
       color: '!text-[#ffffff]',
       background: 'bg-solid-slate-700',
     },
-    logo: (
-      <OptimizedImage
-        imageName="home/trustpilot/trustpilot-logo-white.png"
-        alt="trustpilot"
-        width={97}
-        height={24}
-      />
-    ),
   },
 };
 
 export const BadScore: Story = {
   args: {
-    content: ({ numberOfReviews, trustScore }) => [
-      'Our customers say',
-      'Excellent',
-      `TrustScore ${trustScore} out of 5 based on ${numberOfReviews} reviews`,
-    ],
-    data: {
-      trustScore: 0.6,
-      numberOfReviews: '45454',
-      stars: 0.6,
-    },
-    logo: (
-      <OptimizedImage
-        imageName="home/trustpilot/trustpilot-logo.png"
-        alt="trustpilot"
-        width={97}
-        height={24}
-      />
-    ),
+    ...Default.args,
+    data: data.BadScore,
   },
 };
 
 export const PoorScore: Story = {
   args: {
-    content: ({ numberOfReviews, trustScore }) => [
-      'Our customers say',
-      'Excellent',
-      `TrustScore ${trustScore} out of 5 based on ${numberOfReviews} reviews`,
-    ],
-    data: {
-      trustScore: 1.6,
-      numberOfReviews: '45454',
-      stars: 1.6,
-    },
-    logo: (
-      <OptimizedImage
-        imageName="home/trustpilot/trustpilot-logo.png"
-        alt="trustpilot"
-        width={97}
-        height={24}
-      />
-    ),
+    ...Default.args,
+    data: data.PoorScore,
   },
 };
 
 export const AverageScore: Story = {
   args: {
-    content: ({ numberOfReviews, trustScore }) => [
-      'Our customers say',
-      'Excellent',
-      `TrustScore ${trustScore} out of 5 based on ${numberOfReviews} reviews`,
-    ],
-    data: {
-      trustScore: 2.5,
-      numberOfReviews: '45454',
-      stars: 2.5,
-    },
-    logo: (
-      <OptimizedImage
-        imageName="home/trustpilot/trustpilot-logo.png"
-        alt="trustpilot"
-        width={97}
-        height={24}
-      />
-    ),
+    ...Default.args,
+    data: data.AverageScore,
   },
 };
 
 export const GreatScore: Story = {
   args: {
-    content: ({ numberOfReviews, trustScore }) => [
-      'Our customers say',
-      'Excellent',
-      `TrustScore ${trustScore} out of 5 based on ${numberOfReviews} reviews`,
-    ],
-    data: {
-      trustScore: 3.8,
-      numberOfReviews: '99990',
-      stars: 3.8,
-    },
-    logo: (
-      <OptimizedImage
-        imageName="home/trustpilot/trustpilot-logo.png"
-        alt="trustpilot"
-        width={97}
-        height={24}
-      />
-    ),
+    ...Default.args,
+    data: data.GreatScore,
   },
 };
 
 export const ExcellentScore: Story = {
   args: {
-    content: ({ numberOfReviews, trustScore }) => [
-      'Our customers say',
-      'Excellent',
-      `TrustScore ${trustScore} out of 5 based on ${numberOfReviews} reviews`,
-    ],
-    data: {
-      trustScore: 4.8,
-      numberOfReviews: '45454',
-      stars: 4.8,
-    },
-    logo: (
-      <OptimizedImage
-        imageName="home/trustpilot/trustpilot-logo.png"
-        alt="trustpilot"
-        width={97}
-        height={24}
-      />
-    ),
+    ...Default.args,
+    data: data.ExcellentScore,
   },
 };
diff --git a/libs/blocks/src/lib/social-proof/mock-data.ts b/libs/blocks/src/lib/social-proof/mock-data.ts
@@ -0,0 +1,29 @@
+import { TPilotDataProps } from '@deriv-com/components';
+
+export const data: Record<string, TPilotDataProps | null> = {
+  BadScore: {
+    trustScore: 0.6,
+    numberOfReviews: '45454',
+    stars: 0.6,
+  },
+  PoorScore: {
+    trustScore: 1.6,
+    numberOfReviews: '45454',
+    stars: 1.6,
+  },
+  AverageScore: {
+    trustScore: 2.5,
+    numberOfReviews: '45454',
+    stars: 2.5,
+  },
+  GreatScore: {
+    trustScore: 3.8,
+    numberOfReviews: '99990',
+    stars: 3.8,
+  },
+  ExcellentScore: {
+    trustScore: 4.8,
+    numberOfReviews: '45454',
+    stars: 4.8,
+  },
+};
diff --git a/libs/blocks/src/lib/social-proof/vertical/index.tsx b/libs/blocks/src/lib/social-proof/vertical/index.tsx
@@ -1,4 +1,10 @@
-import { Heading, Section, Text, qtMerge } from '@deriv/quill-design';
+import {
+  FluidContainer,
+  Heading,
+  Section,
+  Text,
+  qtMerge,
+} from '@deriv/quill-design';
 import { Rating } from '@deriv-com/components';
 import { SocialProofProps } from '../types';
 import { getThemeClassNames } from '../classnames';
@@ -26,41 +32,43 @@ const SocialProofVertical = ({
         className,
       )}
     >
-      <div
-        className="flex cursor-pointer flex-col items-center gap-gap-3xl"
+      <FluidContainer
+        className="flex cursor-pointer flex-col items-center"
         onClick={redirectToTrustpilot}
       >
         {title && (
-          <Heading.H2 className={themeClassNames.color}>{title}</Heading.H2>
+          <Heading.H2
+            className={qtMerge('pb-general-2xl', themeClassNames.color)}
+          >
+            {title}
+          </Heading.H2>
         )}
 
-        <div className="flex flex-col items-center gap-gap-lg">
-          {logo}
-          {data && (
-            <>
-              <Rating rate={data.stars} />
-              <div className="flex gap-gap-lg">
-                {content && (
-                  <Text size="xl" className={themeClassNames.color}>
-                    {content(data)[0]}
-                  </Text>
+        {logo}
+        {data && (
+          <>
+            <Rating rate={data.stars} className="py-general-md" />
+            <div className="flex">
+              {content && (
+                <Text size="xl" className={themeClassNames.color}>
+                  {content(data)[0]}
+                </Text>
+              )}
+              <div
+                className={qtMerge(
+                  'mx-general-md h-1300 w-[1px] self-center max-md:h-general-md',
+                  themeClassNames.caret,
                 )}
-                <div
-                  className={qtMerge(
-                    'h-1300 w-[1px] self-center max-md:h-general-md',
-                    themeClassNames.caret,
-                  )}
-                />
-                {content && (
-                  <Text size="xl" className={themeClassNames.color}>
-                    {content(data)[1]}
-                  </Text>
-                )}
-              </div>
-            </>
-          )}
-        </div>
-      </div>
+              />
+              {content && (
+                <Text size="xl" className={themeClassNames.color}>
+                  {content(data)[1]}
+                </Text>
+              )}
+            </div>
+          </>
+        )}
+      </FluidContainer>
     </Section>
   );
 };

diff --git a/libs/blocks/src/lib/social-proof/vertical/vertical.spec.tsx b/libs/blocks/src/lib/social-proof/vertical/vertical.spec.tsx
@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { OptimizedImage } from '@deriv-com/components';
+import SocialProofVertical from '.';
+
+describe('SocialProofHorizontal', () => {
+  it('render social proof vertical block correctly', () => {
+    render(
+      <SocialProofVertical
+        title="Title goes here"
+        content={({ numberOfReviews, trustScore }) => [
+          'Our customers say',
+          'Excellent',
+          `TrustScore ${trustScore} out of 5 based on ${numberOfReviews} reviews`,
+        ]}
+        data={{
+          trustScore: 4.5,
+          numberOfReviews: '45454',
+          stars: 4.4,
+        }}
+        theme={{
+          color: '!text-[#ffffff]',
+          background: 'bg-solid-slate-700',
+        }}
+        logo={
+          <OptimizedImage
+            imageName="home/trustpilot/trustpilot-logo.png"
+            alt="trustpilot"
+            width={97}
+            height={24}
+          />
+        }
+      />,
+    );
+
+    expect(document.querySelector('.bg-solid-slate-700')).toBeInTheDocument();
+    expect(screen.getByText('Our customers say')).toBeInTheDocument();
+    expect(screen.getByAltText('trustpilot')).toBeInTheDocument();
+  });
+});