feat: added CTA component for blocks

RedTurtle · Nov 14, 2024 · 088bc10 · 088bc10
1 parent c167d45
commit 088bc10
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 100 deletions.
diff --git a/packages/volto-blocks/package.json b/packages/volto-blocks/package.json
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@loadable/component": "5.14.1",
-    "@plone/components": "2.0.0-alpha.13",
+    "@plone/components": "^2.1.1",
     "@redturtle/volto-slate-extras": "workspace:^2.0.1",
     "classnames": "2.2.6",
     "lodash": "4.17.21",

diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx
@@ -15,6 +15,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { v4 as uuid } from 'uuid';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type IconsAndTextEditProps = BlockEditProps & {
   data: IconsAndTextData;
@@ -123,17 +124,15 @@ export default function Edit(props: IconsAndTextEditProps) {
               ))}
           </div>
           {data.linkHref?.[0] && (
-            <div className={cx('block-iconsandtext-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                  e.preventDefault();
-                }}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                e.preventDefault();
+              }}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </Container>
       </section>

diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx
@@ -6,6 +6,7 @@ import ViewItem from '@redturtle/volto-blocks/components/blocks/IconsAndText/Vie
 import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.scss';
 import cx from 'classnames';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: IconsAndTextData;
@@ -53,14 +54,12 @@ export default function View({ data, className, style }: Props) {
               ))}
           </div>
           {data.linkHref?.[0] && (
-            <div className={cx('block-iconsandtext-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </Container>
       </section>

diff --git a/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx b/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/text7.svg';
 import type { TestimonialsData } from '@redturtle/volto-blocks/components/blocks/Testimonials/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type TestimonialsEditProps = BlockEditProps & {
   data: TestimonialsData;
@@ -91,17 +92,15 @@ export default function Edit(props: TestimonialsEditProps) {
               placeholder={intl.formatMessage(messages.text)}
             />
             {data.linkHref?.[0] && (
-              <div className={cx('block-testimonials-cta', styles.cta)}>
-                <UniversalLink
-                  href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                  openLinkInNewTab={false}
-                  onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                    e.preventDefault();
-                  }}
-                >
-                  {data.linkTitle}
-                </UniversalLink>
-              </div>
+              <CTA
+                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+                linkTitle={data.linkTitle}
+                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                  e.preventDefault();
+                }}
+                openLinkInNewTab={false}
+                {...data}
+              />
             )}
           </div>
         </Container>

diff --git a/packages/volto-blocks/src/components/blocks/Testimonials/View.tsx b/packages/volto-blocks/src/components/blocks/Testimonials/View.tsx
@@ -7,6 +7,7 @@ import styles from '@redturtle/volto-blocks/components/blocks/Testimonials/style
 import type { TestimonialsData } from '@redturtle/volto-blocks/components/blocks/Testimonials/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: TestimonialsData;
@@ -48,14 +49,12 @@ export default function View({ data, className, style }: Props) {
             </div>
           )}
           {data.linkHref?.[0] && (
-            <div className={cx('block-testimonials-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </div>
       </Container>

diff --git a/packages/volto-blocks/src/components/blocks/Text1/Edit.tsx b/packages/volto-blocks/src/components/blocks/Text1/Edit.tsx
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/text1.svg';
 import type { Text1Data } from '@redturtle/volto-blocks/components/blocks/Text1/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Text1EditProps = BlockEditProps & {
   data: Text1Data;
@@ -64,17 +65,15 @@ export default function Edit(props: Text1EditProps) {
               placeholder={intl.formatMessage(messages.title)}
             />
             {data.linkHref?.[0] && (
-              <div className={cx('block-text1-cta', styles.cta)}>
-                <UniversalLink
-                  href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                  openLinkInNewTab={false}
-                  onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                    e.preventDefault();
-                  }}
-                >
-                  {data.linkTitle}
-                </UniversalLink>
-              </div>
+              <CTA
+                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+                linkTitle={data.linkTitle}
+                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                  e.preventDefault();
+                }}
+                openLinkInNewTab={false}
+                {...data}
+              />
             )}
           </div>
           <div className={cx('block-text1-wide-col', styles.wide)}>

diff --git a/packages/volto-blocks/src/components/blocks/Text1/View.tsx b/packages/volto-blocks/src/components/blocks/Text1/View.tsx
@@ -7,6 +7,7 @@ import styles from '@redturtle/volto-blocks/components/blocks/Text1/styles.modul
 import type { Text1Data } from '@redturtle/volto-blocks/components/blocks/Text1/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: Text1Data;
@@ -29,14 +30,12 @@ export default function View({ data, className, style }: Props) {
             </h2>
           )}
           {data.linkHref?.[0] && (
-            <div className={cx('block-text1-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </div>
         <div className={cx('block-text1-wide-col', styles.wide)}>

diff --git a/packages/volto-blocks/src/components/blocks/Text6/Edit.tsx b/packages/volto-blocks/src/components/blocks/Text6/Edit.tsx
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/text6.svg';
 import type { Text6Data } from '@redturtle/volto-blocks/components/blocks/Text6/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Text6EditProps = BlockEditProps & {
   data: Text6Data;
@@ -73,17 +74,15 @@ export default function Edit(props: Text6EditProps) {
             placeholder={intl.formatMessage(messages.text)}
           />
           {data.linkHref?.[0] && (
-            <div className={cx('block-text6-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                  e.preventDefault();
-                }}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                e.preventDefault();
+              }}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </Container>
       </section>

diff --git a/packages/volto-blocks/src/components/blocks/Text6/View.tsx b/packages/volto-blocks/src/components/blocks/Text6/View.tsx
@@ -7,6 +7,7 @@ import styles from '@redturtle/volto-blocks/components/blocks/Text6/styles.modul
 import type { Text6Data } from '@redturtle/volto-blocks/components/blocks/Text6/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: Text6Data;
@@ -33,14 +34,12 @@ export default function View({ data, className, style }: Props) {
           </div>
         )}
         {data.linkHref?.[0] && (
-          <div className={cx('block-text6-cta', styles.cta)}>
-            <UniversalLink
-              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-              openLinkInNewTab={false}
-            >
-              {data.linkTitle}
-            </UniversalLink>
-          </div>
+          <CTA
+            href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+            linkTitle={data.linkTitle}
+            openLinkInNewTab={false}
+            {...data}
+          />
         )}
       </Container>
     </section>

diff --git a/packages/volto-blocks/src/components/blocks/Text7/Edit.tsx b/packages/volto-blocks/src/components/blocks/Text7/Edit.tsx
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/text7.svg';
 import type { Text7Data } from '@redturtle/volto-blocks/components/blocks/Text7/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Text7EditProps = BlockEditProps & {
   data: Text7Data;
@@ -109,17 +110,15 @@ export default function Edit(props: Text7EditProps) {
               placeholder={intl.formatMessage(messages.text)}
             />
             {data.linkHref?.[0] && (
-              <div className={cx('block-text7-cta', styles.cta)}>
-                <UniversalLink
-                  href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                  openLinkInNewTab={false}
-                  onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                    e.preventDefault();
-                  }}
-                >
-                  {data.linkTitle}
-                </UniversalLink>
-              </div>
+              <CTA
+                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+                linkTitle={data.linkTitle}
+                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                  e.preventDefault();
+                }}
+                openLinkInNewTab={false}
+                {...data}
+              />
             )}
           </div>
         </Container>

diff --git a/packages/volto-blocks/src/components/blocks/Text7/View.tsx b/packages/volto-blocks/src/components/blocks/Text7/View.tsx
@@ -8,6 +8,7 @@ import styles from '@redturtle/volto-blocks/components/blocks/Text7/styles.modul
 import type { Text7Data } from '@redturtle/volto-blocks/components/blocks/Text7/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: Text7Data;
@@ -67,18 +68,16 @@ export default function View({ data, className, style }: Props) {
             </div>
           )}
           {data.linkHref?.[0] && (
-            <div className={cx('block-text7-cta', styles.cta)}>
-              <UniversalLink
-                href={
-                  data.linkHref
-                    ? flattenToAppURL(data.linkHref[0]['@id'])
-                    : undefined
-                }
-                openLinkInNewTab={false}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={
+                data.linkHref
+                  ? flattenToAppURL(data.linkHref[0]['@id'])
+                  : undefined
+              }
+              linkTitle={data.linkTitle}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </div>
       </Container>

diff --git a/packages/volto-blocks/src/components/blocks/commons/CTA.tsx b/packages/volto-blocks/src/components/blocks/commons/CTA.tsx
@@ -0,0 +1,20 @@
+import { type ComponentProps } from 'react';
+import { UniversalLink } from '@plone/volto/components';
+
+const CTA = (props: ComponentProps<typeof UniversalLink>) => {
+  const { href, linkTitle, onClick, openLinkInNewTab } = props;
+  return (
+    <div>
+      <UniversalLink
+        href={href}
+        openLinkInNewTab={openLinkInNewTab}
+        onClick={onClick}
+        {...props}
+      >
+        {linkTitle}
+      </UniversalLink>
+    </div>
+  );
+};
+
+export default CTA;