From bd32f0ba303f666d50c6a6b7115e8b37aecfa3a7 Mon Sep 17 00:00:00 2001
From: Vasile Chindris <vasile.chindris@amazee.com>
Date: Thu, 16 May 2024 13:35:29 +0300
Subject: [PATCH] chore(SLB-378): cta component style in the editor

---
 packages/drupal/gutenberg_blocks/css/edit.css |  4 ++
 .../gutenberg_blocks/src/blocks/cta.tsx       | 62 ++++++++++++++-----
 2 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css
index 58aefe52d..fbd577688 100644
--- a/packages/drupal/gutenberg_blocks/css/edit.css
+++ b/packages/drupal/gutenberg_blocks/css/edit.css
@@ -56,3 +56,7 @@
   margin-right: 7px;
   content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' %3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
 }
+
+.gutenberg__editor .edit-post-visual-editor__content-area a.no-underline {
+  text-decoration: none;
+}
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
index 83bfd63de..5b70375d3 100644
--- a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
+++ b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import {
   // @ts-ignore
   __experimentalLinkControl as LinkControl,
@@ -14,6 +15,23 @@ const { t: __ } = Drupal;
 // @ts-ignore
 const { setPlainTextAttribute } = silverbackGutenbergUtils;
 
+const ArrowRightIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 15"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.83401 4.23435C9.98403 4.08437 10.1875 4.00012 10.3996 4.00012C10.6117 4.00012 10.8152 4.08437 10.9652 4.23435L14.1652 7.43435C14.3152 7.58437 14.3994 7.78782 14.3994 7.99995C14.3994 8.21208 14.3152 8.41553 14.1652 8.56555L10.9652 11.7656C10.8143 11.9113 10.6122 11.9919 10.4025 11.9901C10.1927 11.9883 9.99208 11.9041 9.84375 11.7558C9.69543 11.6075 9.61129 11.4068 9.60947 11.1971C9.60765 10.9873 9.68828 10.7852 9.83401 10.6344L11.6684 8.79995H2.39961C2.18744 8.79995 1.98395 8.71567 1.83392 8.56564C1.68389 8.41561 1.59961 8.21212 1.59961 7.99995C1.59961 7.78778 1.68389 7.5843 1.83392 7.43427C1.98395 7.28424 2.18744 7.19995 2.39961 7.19995H11.6684L9.83401 5.36555C9.68403 5.21553 9.59978 5.01208 9.59978 4.79995C9.59978 4.58782 9.68403 4.38437 9.83401 4.23435Z"
+      className=" fill-blue-600 group-hover:fill-white transition-all duration-200 ease-in-out"
+    />
+  </svg>
+);
+
 // @ts-ignore
 registerBlockType('custom/cta', {
   title: 'CTA',
@@ -50,23 +68,33 @@ registerBlockType('custom/cta', {
   edit: compose(withState({}))((props) => {
     return (
       <div>
-        <RichText
-          identifier="text"
-          className={`button`}
-          tagName="p"
-          value={props.attributes.text}
-          allowedFormats={[]}
-          // @ts-ignore
-          disableLineBreaks={true}
-          placeholder={__('Link text')}
-          keepPlaceholderOnFocus={true}
-          style={{
-            cursor: 'text',
-          }}
-          onChange={(text: string) => {
-            setPlainTextAttribute(props, 'text', text);
-          }}
-        />
+        <a
+          className={clsx(
+            {
+              'flex-row-reverse': props.attributes.iconPosition === 'BEFORE',
+            },
+            'no-underline text-blue-600 hover:text-white font-medium hover:bg-blue-600 flex flex-row items-center border border-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg  py-2 px-3 gap-2 text-xs text-center w-fit transition-all duration-200 ease-in-out group',
+          )}
+        >
+          <RichText
+            identifier="text"
+            tagName="span"
+            value={props.attributes.text}
+            allowedFormats={[]}
+            // @ts-ignore
+            disableLineBreaks={true}
+            placeholder={__('Link text')}
+            keepPlaceholderOnFocus={true}
+            style={{
+              cursor: 'text',
+            }}
+            onChange={(text: string) => {
+              setPlainTextAttribute(props, 'text', text);
+            }}
+          />
+          {typeof props.attributes.icon !== 'undefined' &&
+            props.attributes.icon === 'ARROW' && <ArrowRightIcon />}
+        </a>
         <InspectorControls>
           <PanelBody title={__('CTA Link')}>
             <LinkControl