Added CTA component for blocks (#4)

* feat: added CTA component for blocks * fix: restored plone/components version * merge of main into additional_cta * fix: removed unused import * chore: added news * fix: fixed relative imports + added classname to cta container * fix: cta props * fix: added flattenToAppUrl function to View Links * fix: added flattenToAppUrl function to View Links with correct import
RedTurtle · Nov 21, 2024 · df1b05c · df1b05c
1 parent f6bf867
commit df1b05c
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 110 deletions.
diff --git a/packages/volto-blocks/news/4.internal b/packages/volto-blocks/news/4.internal
@@ -0,0 +1 @@
+Created component for ctas in blocks @sabrina-bongiovanni
diff --git a/packages/volto-blocks/src/components/blocks/CallToAction/Edit.tsx b/packages/volto-blocks/src/components/blocks/CallToAction/Edit.tsx
@@ -1,6 +1,6 @@
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
-import { SidebarPortal, Icon, UniversalLink } from '@plone/volto/components';
+import { SidebarPortal, Icon } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import type { BlockEditProps } from '@plone/types';
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/calltoaction.svg';
 import type { CallToActionData } from '@redturtle/volto-blocks/components/blocks/CallToAction/schema';
 
 import config from '@plone/registry';
+import CTA from '@redturtle/volto-blocks/components/blocks/commons/CTA';
 
 type CallToActionEditProps = BlockEditProps & {
   data: CallToActionData;
@@ -75,17 +76,16 @@ export default function Edit(props: CallToActionEditProps) {
             placeholder={intl.formatMessage(messages.text)}
           />
           {data.linkHref?.[0] && (
-            <div className={cx('block-calltoaction-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}
+              onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                e.preventDefault();
+              }}
+              openLinkInNewTab={false}
+              {...data}
+            >
+              {data.linkTitle}
+            </CTA>
           )}
         </Container>
       </section>

diff --git a/packages/volto-blocks/src/components/blocks/CallToAction/View.tsx b/packages/volto-blocks/src/components/blocks/CallToAction/View.tsx
@@ -1,20 +1,20 @@
-import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
 import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import type { BlockViewProps } from '@plone/types';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 import styles from '@redturtle/volto-blocks/components/blocks/CallToAction/styles.module.css';
 import type { CallToActionData } from '@redturtle/volto-blocks/components/blocks/CallToAction/schema';
 
 import config from '@plone/registry';
+import CTA from '@redturtle/volto-blocks/components/blocks/commons/CTA';
 
 type Props = BlockViewProps & {
   data: CallToActionData;
 };
 
 export default function View({ data, className, style }: Props) {
   const Container = config.getComponent('Container').component || 'div';
-
   return (
     <section
       className={cx('block-calltoaction', styles.block, className)}
@@ -35,14 +35,17 @@ export default function View({ data, className, style }: Props) {
           </div>
         )}
         {data.linkHref?.[0] && (
-          <div className={cx('block-calltoaction-cta', styles.cta)}>
-            <UniversalLink
-              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-              openLinkInNewTab={false}
-            >
-              {data.linkTitle}
-            </UniversalLink>
-          </div>
+          <CTA
+            href={
+              data.linkHref
+                ? flattenToAppURL(data.linkHref[0]['@id'])
+                : undefined
+            }
+            openLinkInNewTab={false}
+            {...data}
+          >
+            {data.linkTitle}
+          </CTA>
         )}
       </Container>
     </section>

diff --git a/packages/volto-blocks/src/components/blocks/CardWithImages/Edit.tsx b/packages/volto-blocks/src/components/blocks/CardWithImages/Edit.tsx
@@ -1,6 +1,6 @@
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
-import { SidebarPortal, Icon, UniversalLink } from '@plone/volto/components';
+import { SidebarPortal, Icon } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import type { BlockEditProps } from '@plone/types';
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/cardwithimages.svg';
 import type { CardWithImagesData } from '@redturtle/volto-blocks/components/blocks/CardWithImages/schema';
 
 import config from '@plone/registry';
+import CTA from '@redturtle/volto-blocks/components/blocks/commons/CTA';
 
 type CardWithImagesEditProps = BlockEditProps & {
   data: CardWithImagesData;
@@ -111,17 +112,16 @@ export default function Edit(props: CardWithImagesEditProps) {
               placeholder={intl.formatMessage(messages.text)}
             />
             {data.linkHref?.[0] && (
-              <div className={cx('block-cardiwithimages-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}
+                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                  e.preventDefault();
+                }}
+                openLinkInNewTab={false}
+                {...data}
+              >
+                {data.linkTitle}
+              </CTA>
             )}
           </div>
         </Container>

diff --git a/packages/volto-blocks/src/components/blocks/CardWithImages/View.tsx b/packages/volto-blocks/src/components/blocks/CardWithImages/View.tsx
@@ -1,5 +1,4 @@
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
 import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import type { BlockViewProps } from '@plone/types';
@@ -8,6 +7,7 @@ import styles from '@redturtle/volto-blocks/components/blocks/CardWithImages/sty
 import type { CardWithImagesData } from '@redturtle/volto-blocks/components/blocks/CardWithImages/schema';
 
 import config from '@plone/registry';
+import CTA from '@redturtle/volto-blocks/components/blocks/commons/CTA';
 
 type Props = BlockViewProps & {
   data: CardWithImagesData;
@@ -69,18 +69,17 @@ export default function View({ data, className, style }: Props) {
             </div>
           )}
           {data.linkHref?.[0] && (
-            <div className={cx('block-cardiwithimages-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
+              }
+              openLinkInNewTab={false}
+              {...data}
+            >
+              {data.linkTitle}
+            </CTA>
           )}
         </div>
       </Container>

diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx
@@ -1,5 +1,5 @@
 import type { BlockEditProps } from '@plone/types';
-import { Icon, SidebarPortal, UniversalLink } from '@plone/volto/components';
+import { Icon, SidebarPortal } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import EditItem from '@redturtle/volto-blocks/components/blocks/IconsAndText/EditItem';
 import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema';
@@ -15,6 +15,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { v4 as uuid } from 'uuid';
 
 import config from '@plone/registry';
+import CTA from '@redturtle/volto-blocks/components/blocks/commons/CTA';
 
 type IconsAndTextEditProps = BlockEditProps & {
   data: IconsAndTextData;
@@ -123,17 +124,16 @@ 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}
+              onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                e.preventDefault();
+              }}
+              openLinkInNewTab={false}
+              {...data}
+            >
+              {data.linkTitle}
+            </CTA>
           )}
         </Container>
       </section>

diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx
@@ -1,11 +1,12 @@
 import config from '@plone/registry';
 import type { BlockViewProps } from '@plone/types';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import { TextBlockView } from '@plone/volto-slate/blocks/Text';
-import { UniversalLink } from '@plone/volto/components';
 import ViewItem from '@redturtle/volto-blocks/components/blocks/IconsAndText/ViewItem';
 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 '@redturtle/volto-blocks/components/blocks/commons/CTA';
 
 type Props = BlockViewProps & {
   data: IconsAndTextData;
@@ -57,14 +58,17 @@ 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
+                  ? flattenToAppURL(data.linkHref[0]['@id'])
+                  : undefined
+              }
+              openLinkInNewTab={false}
+              {...data}
+            >
+              {data.linkTitle}
+            </CTA>
           )}
         </Container>
       </section>

diff --git a/packages/volto-blocks/src/components/blocks/PageIntro/Edit.tsx b/packages/volto-blocks/src/components/blocks/PageIntro/Edit.tsx
@@ -1,6 +1,6 @@
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
-import { SidebarPortal, Icon, UniversalLink } from '@plone/volto/components';
+import { SidebarPortal, Icon } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import type { BlockEditProps } from '@plone/types';
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/pageintro.svg';
 import type { PageIntroData } from '@redturtle/volto-blocks/components/blocks/PageIntro/schema';
 
 import config from '@plone/registry';
+import CTA from '@redturtle/volto-blocks/components/blocks/commons/CTA';
 
 type PageIntroEditProps = BlockEditProps & {
   data: PageIntroData;
@@ -66,17 +67,16 @@ export default function Edit(props: PageIntroEditProps) {
               placeholder={intl.formatMessage(messages.title)}
             />
             {data.linkHref?.[0] && (
-              <div className={cx('block-pageintro-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}
+                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                  e.preventDefault();
+                }}
+                openLinkInNewTab={false}
+                {...data}
+              >
+                {data.linkTitle}
+              </CTA>
             )}
           </div>
           <div className={cx('block-pageintro-wide-col', styles.wide)}>

diff --git a/packages/volto-blocks/src/components/blocks/PageIntro/View.tsx b/packages/volto-blocks/src/components/blocks/PageIntro/View.tsx
@@ -1,12 +1,13 @@
-import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
 import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import type { BlockViewProps } from '@plone/types';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 import styles from '@redturtle/volto-blocks/components/blocks/PageIntro/styles.module.css';
 import type { PageIntroData } from '@redturtle/volto-blocks/components/blocks/PageIntro/schema';
 
 import config from '@plone/registry';
+import CTA from '@redturtle/volto-blocks/components/blocks/commons/CTA';
 
 type Props = BlockViewProps & {
   data: PageIntroData;
@@ -29,14 +30,17 @@ export default function View({ data, className, style }: Props) {
             </h2>
           )}
           {data.linkHref?.[0] && (
-            <div className={cx('block-pageintro-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={
+                data.linkHref
+                  ? flattenToAppURL(data.linkHref[0]['@id'])
+                  : undefined
+              }
+              openLinkInNewTab={false}
+              {...data}
+            >
+              {data.linkTitle}
+            </CTA>
           )}
         </div>
         <div className={cx('block-pageintro-wide-col', styles.wide)}>

diff --git a/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx b/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx
@@ -1,6 +1,6 @@
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
-import { SidebarPortal, Icon, UniversalLink } from '@plone/volto/components';
+import { SidebarPortal, Icon } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import type { BlockEditProps } from '@plone/types';
@@ -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 '@redturtle/volto-blocks/components/blocks/commons/CTA';
 
 type TestimonialsEditProps = BlockEditProps & {
   data: TestimonialsData;
@@ -91,17 +92,16 @@ 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}
+                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                  e.preventDefault();
+                }}
+                openLinkInNewTab={false}
+                {...data}
+              >
+                {data.linkTitle}
+              </CTA>
             )}
           </div>
         </Container>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Created component for ctas in blocks @sabrina-bongiovanni