Merge branch 'main' into nuzhy/language-switcher

deriv-com · Dec 1, 2023 · e099051 · e099051
2 parents 06ed9e0 + e395796
commit e099051
Show file tree

Hide file tree

Showing 14 changed files with 126 additions and 50 deletions.
diff --git a/libs/blocks/CHANGELOG.md b/libs/blocks/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.22.0](https://github.com/deriv-com/deriv-com-v2/compare/blocks-0.21.0...blocks-0.22.0) (2023-12-01)
+
+
+### Bug Fixes
+
+* carousel full width and auto scroll speed ([2dd83fe](https://github.com/deriv-com/deriv-com-v2/commit/2dd83fe71bb96029070ac5f03a7f71689a4a6372))
+
+## [0.21.0](https://github.com/deriv-com/deriv-com-v2/compare/blocks-0.20.0...blocks-0.21.0) (2023-12-01)
+
+## [0.20.0](https://github.com/deriv-com/deriv-com-v2/compare/blocks-0.19.0...blocks-0.20.0) (2023-12-01)
+
+
+### Bug Fixes
+
+* build issues ([e3b8f55](https://github.com/deriv-com/deriv-com-v2/commit/e3b8f55153a85db73c6b77ac4f7a692cc30fe292))
+
 ## [0.19.0](https://github.com/deriv-com/deriv-com-v2/compare/blocks-0.18.0...blocks-0.19.0) (2023-11-30)
 
 

diff --git a/libs/blocks/package.json b/libs/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deriv-com/blocks",
-  "version": "0.19.0",
+  "version": "0.22.0",
   "main": "./index.js",
   "exports": {
     ".": {

diff --git a/libs/blocks/src/lib/account-comparison/account-comparison.spec.tsx b/libs/blocks/src/lib/account-comparison/account-comparison.spec.tsx
@@ -4,14 +4,13 @@ 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>;
+const Content = () => <Heading.H5>This is a heading content</Heading.H5>;
+const className = 'text-heading-h2';
+const title = 'This is the title';
+const description = 'Description here';
 
 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}
@@ -25,9 +24,34 @@ describe('AccountComparison', () => {
     expect(titleElement).toHaveClass(className);
 
     //renders with the correct title
-    expect(getByText(title)).toBeInTheDocument();
+    expect(titleElement).toBeInTheDocument();
 
     //renders with the correct description
     expect(getByText(description)).toBeInTheDocument();
   });
+
+  it('render without descriptions', () => {
+    const { container } = render(
+      <AccountComparison content={Content} title={title} />,
+    );
+
+    expect(container.querySelector('h2')).toBeInTheDocument();
+    expect(container.querySelector('p')).toBeNull();
+  });
+
+  it('render without title', () => {
+    const { container } = render(
+      <AccountComparison content={Content} description={description} />,
+    );
+
+    expect(container.querySelector('h2')).toBeNull();
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+
+  it('render without title and decription', () => {
+    const { container } = render(<AccountComparison content={Content} />);
+
+    expect(container.querySelector('h2')).toBeNull();
+    expect(container.querySelector('p')).toBeNull();
+  });
 });
diff --git a/libs/blocks/src/lib/account-comparison/account-comparison.stories.tsx b/libs/blocks/src/lib/account-comparison/account-comparison.stories.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import AccountComparison from '.';
 
-const meta = {
+const meta: Meta = {
   title: 'Blocks/AccountComparison',
   component: AccountComparison,
+  tags: ['autodocs'],
+  argTypes: {
+    className: { table: { disable: true } },
+    content: {
+      control: { type: 'function' },
+    },
+  },
 } satisfies Meta<typeof AccountComparison>;
 
 export default meta;
@@ -25,3 +32,24 @@ export const Default: Story = {
     ),
   },
 };
+
+export const WithoutDescription: Story = {
+  args: {
+    title: 'Title here',
+    content: () => (
+      <img
+        className="flex w-full flex-1"
+        src="https://placehold.co/712x200"
+        alt="Placeholder"
+      />
+    ),
+  },
+};
+
+export const WithoutContent: Story = {
+  args: {
+    title: 'Title here',
+    description:
+      'Description goes here description goes here description goes here description goes here',
+  },
+};
diff --git a/libs/blocks/src/lib/fast-payment/base/index.tsx b/libs/blocks/src/lib/fast-payment/base/index.tsx
@@ -14,41 +14,29 @@ const Base: React.FC<FastPaymentProps> = ({
 }) => {
   return (
     <FluidContainer className="bg-background-primary-container py-general-4xl">
-      <div className="flex flex-col items-center">
-        <div className="flex w-full flex-col gap-gap-3xl">
-          <div className="flex flex-col gap-gap-2xl">
-            <div className="flex flex-col items-center justify-center gap-general-lg text-center max-sm:gap-general-md">
-              <Heading.H2>{title}</Heading.H2>
-              {description && <Text size="xl">{description}</Text>}
-            </div>
+      <div className="flex flex-col items-center text-center">
+        <Heading.H2>{title}</Heading.H2>
+        {description && <Text className="pt-general-lg">{description}</Text>}
 
-            {link && (
-              <div className="flex justify-center">
-                <CustomLink
-                  size="lg"
-                  href={link.href}
-                  className="w-fit"
-                  hasIcon
-                >
-                  {link.content}
-                </CustomLink>
-              </div>
-            )}
+        {link && (
+          <div className="flex justify-center pt-general-xl">
+            <CustomLink href={link.href} className="w-fit" hasIcon>
+              {link.content}
+            </CustomLink>
           </div>
-          <div className="flex flex-col items-center justify-center gap-general-lg">
-            <div className="flex w-full justify-center">
-              <CardsContainer
-                cards={cards}
-                variant="ContentBottom"
-                cols={cols}
-                dense={dense}
-              />
-            </div>
-            {disclaimer && (
-              <p className="text-100 text-typography-subtle">{disclaimer}</p>
-            )}
-          </div>
-        </div>
+        )}
+        <CardsContainer
+          cards={cards}
+          variant="ContentBottom"
+          cols={cols}
+          dense={dense}
+          className="pt-general-2xl"
+        />
+        {disclaimer && (
+          <Text size="sm" className="pt-general-2xl text-typography-subtle">
+            {disclaimer}
+          </Text>
+        )}
       </div>
     </FluidContainer>
   );

diff --git a/libs/blocks/src/lib/footer/footer-cta-block/footer-cta.stories.tsx b/libs/blocks/src/lib/footer/footer-cta-block/footer-cta.stories.tsx
@@ -3,7 +3,7 @@ import FooterCTABlock from '.';
 import { Heading, Button } from '@deriv/quill-design';
 
 const meta = {
-  title: 'Blocks/Footer/FooterCTA',
+  title: 'Blocks/CTA',
   component: FooterCTABlock,
   tags: ['autodocs'],
   argTypes: {

diff --git a/libs/blocks/src/lib/social-proof/types.ts b/libs/blocks/src/lib/social-proof/types.ts
@@ -11,7 +11,7 @@ export interface SocialProofCustomThemeProps {
 
 export interface SocialProofProps {
   theme?: SocialProofCustomThemeProps;
-  content?: ({ ...props }: TPilotDataProps) => string[];
+  content?: ({ ...props }: TPilotDataProps) => string[] | ReactNode[];
   className?: string;
   logo: ReactNode;
   staticData?: TPilotDataProps | null;

diff --git a/libs/components/CHANGELOG.md b/libs/components/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.17.0](https://github.com/deriv-com/deriv-com-v2/compare/components-0.16.0...components-0.17.0) (2023-12-01)
+
+
+### Bug Fixes
+
+* carousel full width and auto scroll speed ([2dd83fe](https://github.com/deriv-com/deriv-com-v2/commit/2dd83fe71bb96029070ac5f03a7f71689a4a6372))
+
+## [0.16.0](https://github.com/deriv-com/deriv-com-v2/compare/components-0.15.0...components-0.16.0) (2023-12-01)
+
 ## [0.15.0](https://github.com/deriv-com/deriv-com-v2/compare/components-0.14.0...components-0.15.0) (2023-11-30)
 
 ## [0.14.0](https://github.com/deriv-com/deriv-com-v2/compare/components-0.13.0...components-0.14.0) (2023-11-30)

diff --git a/libs/components/package.json b/libs/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deriv-com/components",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "main": "./index.js",
   "exports": {
     ".": {

diff --git a/libs/components/src/lib/cards-container/index.tsx b/libs/components/src/lib/cards-container/index.tsx
@@ -1,4 +1,4 @@
-import { qtMerge } from '@deriv/quill-design';
+import { qtJoin, qtMerge } from '@deriv/quill-design';
 import Card, { CardVariants } from '../card';
 
 export type CardVariantType = keyof CardVariants;
@@ -34,7 +34,14 @@ export const CardsContainer = <T extends CardVariantType>({
   const CardComponent = Card[variant];
 
   return (
-    <div className="flex w-full overflow-hidden" id="cards-container">
+    <div
+      className={qtJoin(
+        'flex overflow-hidden',
+        cols === 'infinite' ? 'w-screen' : 'w-full',
+        className,
+      )}
+      id="cards-container"
+    >
       {cols === 'infinite' ? (
         <>
           {Array.from(Array(3).keys()).map((index) => (
@@ -44,7 +51,6 @@ export const CardsContainer = <T extends CardVariantType>({
                 'gap-gap-lg', // TODO: Add sm/md/lg/xl variants if needed
                 cardColsVariant[cols],
                 'pr-general-md',
-                className,
               )}
               id="infinite-carousel"
             >
@@ -62,7 +68,6 @@ export const CardsContainer = <T extends CardVariantType>({
             'gap-gap-lg', // TODO: we might need to add sm/md/lg/xl variants
             dense ? 'w-full lg:max-w-max' : 'w-full',
             cardColsVariant[cols],
-            className,
           )}
         >
           {cards.map((card) => (

diff --git a/libs/components/src/lib/live-market/container/index.tsx b/libs/components/src/lib/live-market/container/index.tsx
@@ -12,7 +12,7 @@ import clsx from 'clsx';
 
 export interface ContainerProps {
   header?: string;
-  description?: string;
+  description?: ReactNode;
   className?: string;
   disclaimer?: string;
   link: {

diff --git a/libs/storybook-host/.storybook/main.ts b/libs/storybook-host/.storybook/main.ts
@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@nx/react/plugins/storybook',
     '@storybook/addon-links',
+    '@storybook/addon-docs',
     {
       name: '@storybook/addon-styling',
       options: {

diff --git a/libs/templates/src/lib/home/index.tsx b/libs/templates/src/lib/home/index.tsx
@@ -12,6 +12,11 @@ import FastPaymentSection from './sections/fast-payments';
 import ReviewSection from './sections/review';
 import AccountSection from './sections/account-section';
 import CTASection from './sections/cta';
+import { FastPayment } from '@deriv-com/blocks';
+import {
+  PaymentMethodBitcoinBrandIcon,
+  PaymentMethodSkrillBrandIcon,
+} from '@deriv/quill-icons';
 
 export function HomeTemplate() {
   return (

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
         },
       },
       animation: {
-        slide: '10s slide infinite linear',
+        slide: '20s slide infinite linear',
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ module.exports = { @@
             },
           },
           animation: {
-            slide: '10s slide infinite linear',
+            slide: '20s slide infinite linear',
           },
         },
       },
@@ Expand Down @@