chore(SLB-332): added the icon and icon placement properties on CTA

AmazeeLabs · Apr 22, 2024 · 3bb8443 · 3bb8443
1 parent d332581
commit 3bb8443
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 3 deletions.
diff --git 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',
+    },
+    iconPlacement: {
+      type: 'string',
+      default: 'AFTER',
+    },
   },
   // @ts-ignore
   edit: compose(withState({}))((props) => {
@@ -116,6 +124,35 @@ registerBlockType('custom/cta', {
                 });
               }}
             />
+            <SelectControl
+              label={__('Icon')}
+              value={props.attributes.icon}
+              options={[
+                { label: __('- None -'), value: 'NONE' },
+                { label: __('Arrow'), value: 'ARROW' },
+              ]}
+              onChange={(icon) => {
+                props.setAttributes({
+                  icon,
+                });
+              }}
+            />
+            {typeof props.attributes.icon !== 'undefined' &&
+              props.attributes.icon !== 'NONE' && (
+                <SelectControl
+                  label={__('Icon placement')}
+                  value={props.attributes.iconPlacement}
+                  options={[
+                    { label: __('After button text'), value: 'AFTER' },
+                    { label: __('Before button text'), value: 'BEFORE' },
+                  ]}
+                  onChange={(iconPlacement) => {
+                    props.setAttributes({
+                      iconPlacement,
+                    });
+                  }}
+                />
+              )}
           </PanelBody>
         </InspectorControls>
       </div>

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
@@ -88,9 +88,10 @@ default:
 
         <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA","data-id":"f1f827c9-ed06-4e7d-b89d-a169e70a459c","data-entity-type":"node"} /-->
 
-        <!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","data-id":"https://www.google.com","data-entity-type":"","openInNewTab":true} /-->
+        <!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","data-id":"https://www.google.com","data-entity-type":"","openInNewTab":true,"icon":"ARROW"} /-->
+
+        <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media","icon":"ARROW","iconPlacement":"BEFORE"} /-->
 
-        <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
         <!-- wp:paragraph -->
         <p></p>
         <!-- /wp:paragraph -->

diff --git 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
+  icon
+  iconPlacement
 }
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
@@ -242,6 +242,19 @@ type BlockCta @type(id: "custom/cta") {
   url: Url @resolveEditorBlockAttribute(key: "url")
   text: String @resolveEditorBlockAttribute(key: "text")
   openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab")
+  icon: CTAIconType @resolveEditorBlockAttribute(key: "icon")
+  iconPlacement: CTAIconPlacement
+    @resolveEditorBlockAttribute(key: "iconPlacement")
+}
+
+enum CTAIconType {
+  NONE
+  ARROW
+}
+
+enum CTAIconPlacement {
+  AFTER
+  BEFORE
 }
 
 input PaginationInput {

diff --git 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
+          iconPlacement
         }
       }
     }
@@ -145,18 +147,24 @@ test('Blocks', async () => {
             },
             {
               "__typename": "BlockCta",
+              "icon": null,
+              "iconPlacement": null,
               "openInNewTab": null,
               "text": "Internal CTA",
               "url": "/en/drupal",
             },
             {
               "__typename": "BlockCta",
+              "icon": "ARROW",
+              "iconPlacement": null,
               "openInNewTab": true,
               "text": "External CTA",
               "url": "https://www.google.com",
             },
             {
               "__typename": "BlockCta",
+              "icon": "ARROW",
+              "iconPlacement": "BEFORE",
               "openInNewTab": null,
               "text": "CTA with link to media",
               "url": "/media/[numeric]",
@@ -205,6 +213,8 @@ test('Blocks', async () => {
             },
             {
               "__typename": "BlockCta",
+              "icon": null,
+              "iconPlacement": null,
               "openInNewTab": null,
               "text": null,
               "url": null,
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,6 @@ fragment BlockCta on BlockCta { @@
       url
       text
       openInNewTab
+      icon
+      iconPlacement
     }