chore: fix conflicts for fast payment block

deriv-com · Dec 1, 2023 · f9159ee · f9159ee
1 parent 9fe3127
commit f9159ee
Show file tree

Hide file tree

Showing 7 changed files with 281 additions and 72 deletions.
diff --git a/libs/blocks/src/lib/fast-payment/base/base.stories.tsx b/libs/blocks/src/lib/fast-payment/base/base.stories.tsx
@@ -1,10 +1,70 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import Base from '.';
+import { cards } from './data';
+
+const content: Record<string, object | null> = {
+  two_col: {
+    cols: 'two',
+    cards: cards.slice(0, 2),
+  },
+  three_col: {
+    cols: 'three',
+    cards: cards.slice(0, 3),
+  },
+  four_col: {
+    cols: 'four',
+    cards: cards.slice(0, 4),
+  },
+  five_col: {
+    cols: 'five',
+    cards: cards.slice(0, 5),
+  },
+  carousel: {
+    cols: 'infinite',
+    cards: cards,
+  },
+};
+
+const links: Record<string, object | null> = {
+  with_link: {
+    content: 'Learn More',
+    href: '#',
+  },
+  none: null,
+};
 
 const meta = {
   title: 'Blocks/FastPayment/Default',
   component: Base,
+  tags: ['autodocs'],
+  argTypes: {
+    description: {
+      description: '`string`',
+    },
+    title: {
+      description: '`string`',
+    },
+    link: {
+      description: '`{content: ReactNode, href: string}`',
+      options: Object.keys(links),
+      mapping: links,
+      control: {
+        type: 'select',
+      },
+    },
+    disclaimer: {
+      description: '`string`',
+    },
+    content: {
+      description:
+        '`{cols: "two" | "three" | "four" | "five" | "infinite", cards: CardContent[], className: string}`',
+      options: Object.keys(content),
+      mapping: content,
+      control: {
+        type: 'select',
+      },
+    },
+  },
 } satisfies Meta<typeof Base>;
 
 export default meta;
@@ -21,29 +81,77 @@ export const Default: Story = {
     },
     disclaimer: '*Disclaimer text goes here.',
     content: {
-      cards: [
-        {
-          header: '',
-          color: 'gray',
-          align: 'center',
-          size: 'lg',
-          description: 'test',
-        },
-        {
-          header: '',
-          color: 'gray',
-          align: 'center',
-          size: 'lg',
-          description: 'test',
-        },
-        {
-          header: '',
-          color: 'gray',
-          align: 'center',
-          size: 'lg',
-          description: 'test',
-        },
-      ],
+      cards: cards.slice(0, 3),
+    },
+  },
+};
+
+export const WithoutDescription: Story = {
+  args: {
+    ...Default.args,
+    description: undefined,
+  },
+};
+
+export const WithoutLink: Story = {
+  args: {
+    ...Default.args,
+    link: undefined,
+  },
+};
+
+export const WithoutDisclaimer: Story = {
+  args: {
+    ...Default.args,
+    disclaimer: undefined,
+  },
+};
+
+export const TwoColumn: Story = {
+  args: {
+    ...Default.args,
+    content: {
+      cols: 'two',
+      cards: cards.slice(0, 2),
+    },
+  },
+};
+
+export const ThreeColumn: Story = {
+  args: {
+    ...Default.args,
+    content: {
+      cols: 'three',
+      cards: cards.slice(0, 3),
+    },
+  },
+};
+
+export const FourColumn: Story = {
+  args: {
+    ...Default.args,
+    content: {
+      cols: 'four',
+      cards: cards.slice(0, 4),
+    },
+  },
+};
+export const FiveColumn: Story = {
+  args: {
+    ...Default.args,
+    content: {
+      cols: 'five',
+      cards: cards.slice(0, 5),
+    },
+  },
+};
+
+export const Carousel: Story = {
+  args: {
+    ...Default.args,
+    content: {
+      cols: 'infinite',
+      cards: cards,
     },
   },
 };
diff --git a/libs/blocks/src/lib/fast-payment/base/data.tsx b/libs/blocks/src/lib/fast-payment/base/data.tsx
@@ -0,0 +1,68 @@
+import { CardContent } from '@deriv-com/components';
+import {
+  PaymentMethodBitcoinBrandIcon,
+  PaymentMethodSkrillBrandIcon,
+} from '@deriv/quill-icons';
+
+export const cards: CardContent[] = [
+  {
+    icon: <PaymentMethodSkrillBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+  {
+    icon: <PaymentMethodSkrillBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+  {
+    icon: <PaymentMethodSkrillBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+  {
+    icon: <PaymentMethodSkrillBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+  {
+    icon: <PaymentMethodSkrillBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+  {
+    icon: <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+  {
+    icon: <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+  {
+    icon: <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+  {
+    icon: <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+  {
+    icon: <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+  },
+];
diff --git a/libs/blocks/src/lib/fast-payment/base/index.tsx b/libs/blocks/src/lib/fast-payment/base/index.tsx
@@ -14,38 +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="md">{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 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-gap-3xl">
-            <div className="flex w-full justify-center">
-              <CardsContainer
-                cards={cards}
-                variant="ContentBottom"
-                cols={cols}
-                dense={dense}
-              />
-            </div>
-            {disclaimer && (
-              <Text size="sm" className="text-typography-subtle">
-                {disclaimer}
-              </Text>
-            )}
-          </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/components/src/lib/card/base/index.tsx b/libs/components/src/lib/card/base/index.tsx
@@ -25,18 +25,21 @@ const textColorVariantClass = {
 };
 
 const sizeVariantComponents = {
+  xs: Heading.H4,
   sm: Heading.H4,
   md: Heading.H3,
   lg: Heading.H2,
 };
 
 const sizeVariantContainerGap = {
+  xs: 'gap-gap-lg p-general-md',
   sm: 'gap-gap-lg p-general-lg',
   md: 'gap-gap-xl p-general-xl',
   lg: 'gap-gap-2xl p-general-2xl',
 };
 
 const sizeVariantTextGap = {
+  xs: 'gap-gap-md',
   sm: 'gap-gap-md',
   md: 'gap-gap-md',
   lg: 'gap-gap-lg',
@@ -99,7 +102,7 @@ export const BaseCard: React.FC<BaseCardProps> = ({
           </div>
         )}
         {link && (
-          <CustomLink href={link.href} hasIcon>
+          <CustomLink href={link.href} size="md" hasIcon>
             {link.content}
           </CustomLink>
         )}

diff --git a/libs/components/src/lib/card/types/index.ts b/libs/components/src/lib/card/types/index.ts
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 export type StatCardVariant = 'white' | 'dark' | 'coral';
 export type CardColorVariant = 'light' | 'gray';
 export type CardAlignVariant = 'start' | 'center';
-export type CardSizeVariant = 'sm' | 'md' | 'lg';
+export type CardSizeVariant = 'xs' | 'sm' | 'md' | 'lg';
 
 interface BaseCardContent {
   header?: string;