From 69e3a7cac7e785993afec1672f59ffd2e7b2a804 Mon Sep 17 00:00:00 2001 From: HagerDakroury Date: Mon, 22 Apr 2024 15:57:04 +0200 Subject: [PATCH 1/2] feat(SLB-314): style CTA block --- .../src/fragments/PageContent/BlockCta.gql | 2 + packages/schema/src/schema.graphql | 7 ++++ .../Organisms/PageContent/BlockCta.stories.ts | 37 +++++++++++++++++++ .../Organisms/PageContent/BlockCta.tsx | 36 ++++++++++++++++-- 4 files changed, 79 insertions(+), 3 deletions(-) create mode 100644 packages/ui/src/components/Organisms/PageContent/BlockCta.stories.ts diff --git a/packages/schema/src/fragments/PageContent/BlockCta.gql b/packages/schema/src/fragments/PageContent/BlockCta.gql index 2dae0fda2..958d9e283 100644 --- a/packages/schema/src/fragments/PageContent/BlockCta.gql +++ b/packages/schema/src/fragments/PageContent/BlockCta.gql @@ -2,4 +2,6 @@ fragment BlockCta on BlockCta { url text openInNewTab + displayIcon + iconPosition } diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql index 9300972cb..62357ed6f 100644 --- a/packages/schema/src/schema.graphql +++ b/packages/schema/src/schema.graphql @@ -73,6 +73,11 @@ enum Locale @default @value(string: "en") { de } +enum VerticalPosition { + Right + Left +} + """ Inteface for anything that can appear in the content hub. """ @@ -242,6 +247,8 @@ type BlockCta @type(id: "custom/cta") { url: Url @resolveEditorBlockAttribute(key: "url") text: String @resolveEditorBlockAttribute(key: "text") openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab") + displayIcon: Boolean + iconPosition: VerticalPosition } input PaginationInput { diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.stories.ts b/packages/ui/src/components/Organisms/PageContent/BlockCta.stories.ts new file mode 100644 index 000000000..7c6dc1566 --- /dev/null +++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.stories.ts @@ -0,0 +1,37 @@ +import { Url, VerticalPosition } from '@custom/schema'; +import { Meta, StoryObj } from '@storybook/react'; + +import { BlockCta } from './BlockCta'; + +export default { + component: BlockCta, +} satisfies Meta; + +export const BlockCtaDefault = { + args: { + text: 'Support center', + url: 'https://example.com' as Url, + openInNewTab: false, + displayIcon: true, + iconPosition: VerticalPosition.Right, + }, +} satisfies StoryObj; + +export const BlockCtaStoryIconLeft = { + args: { + text: 'Support center', + url: 'https://example.com' as Url, + openInNewTab: false, + displayIcon: true, + iconPosition: VerticalPosition.Left, + }, +} satisfies StoryObj; + +export const BlockCtaStoryNoIcon = { + args: { + text: 'Support center', + url: 'https://example.com' as Url, + openInNewTab: false, + displayIcon: false, + }, +} satisfies StoryObj; diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx index a652f30b5..a0e5aa82d 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx @@ -1,7 +1,37 @@ -import { BlockCtaFragment } from '@custom/schema'; +import { BlockCtaFragment, VerticalPosition } from '@custom/schema'; +import clsx from 'clsx'; import React from 'react'; export function BlockCta(props: BlockCtaFragment) { - console.log(props); - return
; + return ( + + {props.text} + {!!props.displayIcon && } + + ); } + +const ArrowRightIcon = () => ( + + + +); From 3d740dfc29147b3bb05223efe481dc666e3af8d8 Mon Sep 17 00:00:00 2001 From: Vasile Chindris Date: Tue, 23 Apr 2024 10:08:51 +0300 Subject: [PATCH 2/2] chore(SLB-314 SLB-332): icon and icon display settings for gutenberg cta blocks --- .../gutenberg_blocks/src/blocks/cta.tsx | 39 ++++++++++++++++++- .../a397ca48-8fad-411e-8901-0eba2feb989c.yml | 5 ++- .../src/fragments/PageContent/BlockCta.gql | 2 +- packages/schema/src/schema.graphql | 20 ++++++---- .../Organisms/PageContent/BlockCta.stories.ts | 11 +++--- .../Organisms/PageContent/BlockCta.tsx | 6 +-- tests/e2e/specs/drupal/blocks.spec.ts | 5 +++ tests/schema/specs/blocks.spec.ts | 10 +++++ 8 files changed, 78 insertions(+), 20 deletions(-) diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx index c0bbaacdc..83bfd63de 100644 --- a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx +++ b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx @@ -5,7 +5,7 @@ import { RichText, } from 'wordpress__block-editor'; import { registerBlockType } from 'wordpress__blocks'; -import { PanelBody, ToggleControl } from 'wordpress__components'; +import { PanelBody, SelectControl, ToggleControl } from 'wordpress__components'; import { compose, withState } from 'wordpress__compose'; // @ts-ignore @@ -37,6 +37,14 @@ registerBlockType('custom/cta', { openInNewTab: { type: 'boolean', }, + icon: { + type: 'string', + default: 'NONE', + }, + iconPosition: { + type: 'string', + default: 'AFTER', + }, }, // @ts-ignore edit: compose(withState({}))((props) => { @@ -116,6 +124,35 @@ registerBlockType('custom/cta', { }); }} /> + { + props.setAttributes({ + icon, + }); + }} + /> + {typeof props.attributes.icon !== 'undefined' && + props.attributes.icon !== 'NONE' && ( + { + props.setAttributes({ + iconPosition, + }); + }} + /> + )}
diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml index de316ba27..ad87ab613 100644 --- a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml +++ b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml @@ -88,9 +88,10 @@ default: - + + + -

diff --git a/packages/schema/src/fragments/PageContent/BlockCta.gql b/packages/schema/src/fragments/PageContent/BlockCta.gql index 958d9e283..db56f5580 100644 --- a/packages/schema/src/fragments/PageContent/BlockCta.gql +++ b/packages/schema/src/fragments/PageContent/BlockCta.gql @@ -2,6 +2,6 @@ fragment BlockCta on BlockCta { url text openInNewTab - displayIcon + icon iconPosition } diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql index 62357ed6f..f364f7d51 100644 --- a/packages/schema/src/schema.graphql +++ b/packages/schema/src/schema.graphql @@ -73,11 +73,6 @@ enum Locale @default @value(string: "en") { de } -enum VerticalPosition { - Right - Left -} - """ Inteface for anything that can appear in the content hub. """ @@ -247,8 +242,19 @@ type BlockCta @type(id: "custom/cta") { url: Url @resolveEditorBlockAttribute(key: "url") text: String @resolveEditorBlockAttribute(key: "text") openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab") - displayIcon: Boolean - iconPosition: VerticalPosition + icon: CTAIconType @resolveEditorBlockAttribute(key: "icon") + iconPosition: CTAIconPosition + @resolveEditorBlockAttribute(key: "iconPosition") +} + +enum CTAIconType { + NONE + ARROW +} + +enum CTAIconPosition { + AFTER + BEFORE } input PaginationInput { diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.stories.ts b/packages/ui/src/components/Organisms/PageContent/BlockCta.stories.ts index 7c6dc1566..420a4a375 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockCta.stories.ts +++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.stories.ts @@ -1,4 +1,4 @@ -import { Url, VerticalPosition } from '@custom/schema'; +import { CtaIconPosition, Url } from '@custom/schema'; import { Meta, StoryObj } from '@storybook/react'; import { BlockCta } from './BlockCta'; @@ -12,8 +12,8 @@ export const BlockCtaDefault = { text: 'Support center', url: 'https://example.com' as Url, openInNewTab: false, - displayIcon: true, - iconPosition: VerticalPosition.Right, + icon: 'ARROW', + iconPosition: CtaIconPosition.After, }, } satisfies StoryObj; @@ -22,8 +22,8 @@ export const BlockCtaStoryIconLeft = { text: 'Support center', url: 'https://example.com' as Url, openInNewTab: false, - displayIcon: true, - iconPosition: VerticalPosition.Left, + icon: 'ARROW', + iconPosition: CtaIconPosition.Before, }, } satisfies StoryObj; @@ -32,6 +32,5 @@ export const BlockCtaStoryNoIcon = { text: 'Support center', url: 'https://example.com' as Url, openInNewTab: false, - displayIcon: false, }, } satisfies StoryObj; diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx index a0e5aa82d..ab5df05d0 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx @@ -1,4 +1,4 @@ -import { BlockCtaFragment, VerticalPosition } from '@custom/schema'; +import { BlockCtaFragment, CtaIconPosition, CtaIconType } from '@custom/schema'; import clsx from 'clsx'; import React from 'react'; @@ -6,7 +6,7 @@ export function BlockCta(props: BlockCtaFragment) { return ( {props.text} - {!!props.displayIcon && } + {!!props.icon && props.icon === CtaIconType.Arrow && } ); } diff --git a/tests/e2e/specs/drupal/blocks.spec.ts b/tests/e2e/specs/drupal/blocks.spec.ts index ec7dc6a1b..f11e09bda 100644 --- a/tests/e2e/specs/drupal/blocks.spec.ts +++ b/tests/e2e/specs/drupal/blocks.spec.ts @@ -55,6 +55,11 @@ test('All blocks are rendered', async ({ page }) => { 1, ); + // CTA blocks + await expect(page.locator('a:text("Internal CTA")')).toHaveCount(1); + await expect(page.locator('a:text("External CTA")')).toHaveCount(1); + await expect(page.locator('a:text("CTA with link to media")')).toHaveCount(1); + // Form await expect( page.locator('.silverback-iframe iframe').last(), diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts index 9a246e3f6..5808a38d3 100644 --- a/tests/schema/specs/blocks.spec.ts +++ b/tests/schema/specs/blocks.spec.ts @@ -52,6 +52,8 @@ test('Blocks', async () => { url text openInNewTab + icon + iconPosition } } } @@ -145,18 +147,24 @@ test('Blocks', async () => { }, { "__typename": "BlockCta", + "icon": null, + "iconPosition": null, "openInNewTab": null, "text": "Internal CTA", "url": "/en/drupal", }, { "__typename": "BlockCta", + "icon": "ARROW", + "iconPosition": null, "openInNewTab": true, "text": "External CTA", "url": "https://www.google.com", }, { "__typename": "BlockCta", + "icon": "ARROW", + "iconPosition": "BEFORE", "openInNewTab": null, "text": "CTA with link to media", "url": "/media/[numeric]", @@ -205,6 +213,8 @@ test('Blocks', async () => { }, { "__typename": "BlockCta", + "icon": null, + "iconPosition": null, "openInNewTab": null, "text": null, "url": null,