From a23f260528b4675c83d084acfd4fb3fd43c10951 Mon Sep 17 00:00:00 2001 From: Muhammad Fasih Ali Naqvi Date: Mon, 11 Mar 2024 14:48:07 +0800 Subject: [PATCH 1/5] chore: added heading option and removed content --- libs/blocks/src/lib/hero/content-less/index.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/libs/blocks/src/lib/hero/content-less/index.tsx b/libs/blocks/src/lib/hero/content-less/index.tsx index 94a36c443..e8753fd92 100644 --- a/libs/blocks/src/lib/hero/content-less/index.tsx +++ b/libs/blocks/src/lib/hero/content-less/index.tsx @@ -1,4 +1,3 @@ -import Content from '../content'; import BlockWrapper from '../../block-wrapper'; import { HeroBlockProps } from '..'; @@ -9,10 +8,14 @@ const ContentLess = ({ children, }: HeroBlockProps) => { return ( - - - {children} - + + {children} ); }; From a472c2c16cd487d37ada9343649b7ef78342486f Mon Sep 17 00:00:00 2001 From: Muhammad Fasih Ali Naqvi Date: Tue, 12 Mar 2024 11:36:21 +0800 Subject: [PATCH 2/5] feat: added new cta block varient --- libs/blocks/src/index.ts | 2 +- .../src/lib/cta/cta-left/cta-left.stories.tsx | 35 +++++++++ libs/blocks/src/lib/cta/cta-left/index.tsx | 62 ++++++++++++++++ .../cta-right.stories.tsx} | 24 +------ libs/blocks/src/lib/cta/cta-right/index.tsx | 10 +++ .../src/lib/cta/cta-v5/cta-v5.stories.tsx | 29 ++++++++ libs/blocks/src/lib/cta/cta-v5/index.tsx | 19 +++++ libs/blocks/src/lib/cta/index.tsx | 71 ++++--------------- .../footer-cta-block/footer-cta.stories.tsx | 2 +- 9 files changed, 172 insertions(+), 82 deletions(-) create mode 100644 libs/blocks/src/lib/cta/cta-left/cta-left.stories.tsx create mode 100644 libs/blocks/src/lib/cta/cta-left/index.tsx rename libs/blocks/src/lib/cta/{cta.stories.tsx => cta-right/cta-right.stories.tsx} (58%) create mode 100644 libs/blocks/src/lib/cta/cta-right/index.tsx create mode 100644 libs/blocks/src/lib/cta/cta-v5/cta-v5.stories.tsx create mode 100644 libs/blocks/src/lib/cta/cta-v5/index.tsx diff --git a/libs/blocks/src/index.ts b/libs/blocks/src/index.ts index a6b55b2cc..cbbfda8ef 100644 --- a/libs/blocks/src/index.ts +++ b/libs/blocks/src/index.ts @@ -16,4 +16,4 @@ export * from './lib/search'; export * from './lib/social-proof'; export * from './lib/platform'; export * from './lib/block-wrapper'; -export * from './lib/cta'; +export * from './lib/cta/cta-left'; diff --git a/libs/blocks/src/lib/cta/cta-left/cta-left.stories.tsx b/libs/blocks/src/lib/cta/cta-left/cta-left.stories.tsx new file mode 100644 index 000000000..330027460 --- /dev/null +++ b/libs/blocks/src/lib/cta/cta-left/cta-left.stories.tsx @@ -0,0 +1,35 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import CTALeft from '.'; +import { Text } from '@deriv/quill-design'; + +const meta = { + title: 'Blocks/CTA/CTABlockLeft', + component: CTALeft, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const CTAContentLeft: Story = { + args: { + title: 'Join over 2.5 million online traders worldwide', + description: + 'Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here', + children: This is the children, + content: ( + <> + Placeholder + Placeholder + + ), + }, +}; diff --git a/libs/blocks/src/lib/cta/cta-left/index.tsx b/libs/blocks/src/lib/cta/cta-left/index.tsx new file mode 100644 index 000000000..bd8300e05 --- /dev/null +++ b/libs/blocks/src/lib/cta/cta-left/index.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { Heading, Section, Text, qtMerge } from '@deriv/quill-design'; + +export type CTABlockProps = { + content?: React.ReactNode; + children?: React.ReactNode; + title: React.ReactNode | string; + description?: React.ReactNode | string; + className?: string; + variant?: 'content-left' | 'content-right'; +}; +export const CTALeft = ({ + content, + children, + title, + description, + variant = 'content-left', +}: CTABlockProps) => { + return ( +
+
+ {content && ( + <> +
+
+ {content} +
+ + )} +
+
+ {title && ( + <> + {title} + + {title} + + + )} + + {description && {description}} +
+ {children && children} +
+
+
+ ); +}; + +export default CTALeft; diff --git a/libs/blocks/src/lib/cta/cta.stories.tsx b/libs/blocks/src/lib/cta/cta-right/cta-right.stories.tsx similarity index 58% rename from libs/blocks/src/lib/cta/cta.stories.tsx rename to libs/blocks/src/lib/cta/cta-right/cta-right.stories.tsx index c9183ce93..23b9b661e 100644 --- a/libs/blocks/src/lib/cta/cta.stories.tsx +++ b/libs/blocks/src/lib/cta/cta-right/cta-right.stories.tsx @@ -3,7 +3,7 @@ import CTABlock from '.'; import { Text } from '@deriv/quill-design'; const meta = { - title: 'Blocks/CTABlock', + title: 'Blocks/CTA/CTABlockRight', component: CTABlock, tags: ['autodocs'], } satisfies Meta; @@ -11,28 +11,6 @@ const meta = { export default meta; type Story = StoryObj; -export const CTAContentLeft: Story = { - args: { - title: 'Join over 2.5 million online traders worldwide', - description: - 'Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here', - children: This is the children, - content: ( - <> - Placeholder - Placeholder - - ), - }, -}; export const CTAContentRight: Story = { args: { variant: 'content-right', diff --git a/libs/blocks/src/lib/cta/cta-right/index.tsx b/libs/blocks/src/lib/cta/cta-right/index.tsx new file mode 100644 index 000000000..e0bf69fae --- /dev/null +++ b/libs/blocks/src/lib/cta/cta-right/index.tsx @@ -0,0 +1,10 @@ +import CTALeft, { CTABlockProps } from '../cta-left'; + +export const CTARight = ({ + variant = 'content-right', + ...rest +}: CTABlockProps) => { + return ; +}; + +export default CTARight; diff --git a/libs/blocks/src/lib/cta/cta-v5/cta-v5.stories.tsx b/libs/blocks/src/lib/cta/cta-v5/cta-v5.stories.tsx new file mode 100644 index 000000000..2d0b91eb0 --- /dev/null +++ b/libs/blocks/src/lib/cta/cta-v5/cta-v5.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import BlockWrapper, { CTAV5 } from '.'; +import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone'; +import { Button } from '@deriv/quill-design'; + +const meta = { + title: 'Blocks/CTA/CTAV5', + component: CTAV5, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'Title goes here', + description: 'Description goes here', + }, +}; + +export const CTAV5CenterContent: Story = { + args: { + title: 'Title goes here', + description: 'Description goes here', + background: 'gray', + children: , + }, +}; diff --git a/libs/blocks/src/lib/cta/cta-v5/index.tsx b/libs/blocks/src/lib/cta/cta-v5/index.tsx new file mode 100644 index 000000000..7da026784 --- /dev/null +++ b/libs/blocks/src/lib/cta/cta-v5/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import BlockWrapper, { BlockWrapperProps } from '../../block-wrapper'; +import { qtMerge } from '@deriv/quill-design'; + +export const CTAV5 = ({ + heading = 'H2', + className, + ...rest +}: BlockWrapperProps) => { + return ( + + ); +}; + +export default CTAV5; diff --git a/libs/blocks/src/lib/cta/index.tsx b/libs/blocks/src/lib/cta/index.tsx index 8f120852e..0315fd703 100644 --- a/libs/blocks/src/lib/cta/index.tsx +++ b/libs/blocks/src/lib/cta/index.tsx @@ -1,62 +1,19 @@ -import React from 'react'; -import { Heading, Section, Text, qtMerge } from '@deriv/quill-design'; +import { ReactNode } from 'react'; +import { CTALeft } from './cta-left'; +import { CTARight } from './cta-right'; +import { CTAV5 } from './cta-v5'; -export type CTABlockProps = { - content?: React.ReactNode; - children?: React.ReactNode; - title: React.ReactNode | string; - description?: React.ReactNode | string; - className?: string; - variant?: 'content-left' | 'content-right'; +type CTAVariants = { + Left: typeof CTALeft; + Right: typeof CTARight; + V5: typeof CTAV5; }; -export const CTABlock = ({ - content, - children, - title, - description, - variant = 'content-left', -}: CTABlockProps) => { - return ( -
-
- {content && ( - <> -
-
- {content} -
- - )} -
-
- {title && ( - <> - {title} - - {title} - - - )} - {description && {description}} -
- {children && children} -
-
-
- ); +export const CTA: CTAVariants = ({ children }: { children: ReactNode }) => { + return children; }; +CTA.Left = CTALeft; +CTA.Right = CTARight; +CTA.V5 = CTAV5; -export default CTABlock; +export default CTA; 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 index cc03bf208..f494c95af 100644 --- 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/CTA', + title: 'Blocks/CTA/FooterCTABlock', component: FooterCTABlock, tags: ['autodocs'], argTypes: { From f0f8cbc665028d67985cd60dd6aa5e2c676e5f5e Mon Sep 17 00:00:00 2001 From: Muhammad Fasih Ali Naqvi Date: Tue, 12 Mar 2024 13:04:30 +0800 Subject: [PATCH 3/5] feat: removed harcoded bg and updated code --- libs/blocks/src/lib/cta/cta-right/index.tsx | 2 +- libs/blocks/src/lib/hero/content-less/index.tsx | 3 ++- libs/blocks/src/lib/hero/index.tsx | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/libs/blocks/src/lib/cta/cta-right/index.tsx b/libs/blocks/src/lib/cta/cta-right/index.tsx index e0bf69fae..249ebc6c2 100644 --- a/libs/blocks/src/lib/cta/cta-right/index.tsx +++ b/libs/blocks/src/lib/cta/cta-right/index.tsx @@ -4,7 +4,7 @@ export const CTARight = ({ variant = 'content-right', ...rest }: CTABlockProps) => { - return ; + return ; }; export default CTARight; diff --git a/libs/blocks/src/lib/hero/content-less/index.tsx b/libs/blocks/src/lib/hero/content-less/index.tsx index e8753fd92..4610803a7 100644 --- a/libs/blocks/src/lib/hero/content-less/index.tsx +++ b/libs/blocks/src/lib/hero/content-less/index.tsx @@ -6,6 +6,7 @@ const ContentLess = ({ title, description, children, + background, }: HeroBlockProps) => { return ( {children} diff --git a/libs/blocks/src/lib/hero/index.tsx b/libs/blocks/src/lib/hero/index.tsx index 7dba89272..e885feb92 100644 --- a/libs/blocks/src/lib/hero/index.tsx +++ b/libs/blocks/src/lib/hero/index.tsx @@ -13,6 +13,7 @@ export type HeroBlockProps = { content?: ReactNode; children?: ReactNode; className?: string; + background?: 'gray' | 'light'; }; export interface HomeHeroProps { From e383450de09dd5ae45a7eec2068dd43d2ac71438 Mon Sep 17 00:00:00 2001 From: Muhammad Fasih Ali Naqvi Date: Tue, 12 Mar 2024 14:22:06 +0800 Subject: [PATCH 4/5] feat: addressed hasans comment --- libs/blocks/src/lib/cta/cta-left/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/src/lib/cta/cta-left/index.tsx b/libs/blocks/src/lib/cta/cta-left/index.tsx index bd8300e05..39408765b 100644 --- a/libs/blocks/src/lib/cta/cta-left/index.tsx +++ b/libs/blocks/src/lib/cta/cta-left/index.tsx @@ -44,7 +44,7 @@ export const CTALeft = ({ {title && ( <> {title} - + {title} From 4ed090dd92d7ffa7ed0e0079e7c2d2055248ef58 Mon Sep 17 00:00:00 2001 From: Muhammad Fasih Ali Naqvi Date: Tue, 12 Mar 2024 14:47:06 +0800 Subject: [PATCH 5/5] feat: removed max lg --- libs/blocks/src/lib/cta/cta-left/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/src/lib/cta/cta-left/index.tsx b/libs/blocks/src/lib/cta/cta-left/index.tsx index 39408765b..6c5479d31 100644 --- a/libs/blocks/src/lib/cta/cta-left/index.tsx +++ b/libs/blocks/src/lib/cta/cta-left/index.tsx @@ -27,7 +27,7 @@ export const CTALeft = ({ {content && ( <>
-
+
{content}