diff --git a/packages/volto-blocks/news/4.internal b/packages/volto-blocks/news/4.internal new file mode 100644 index 0000000..cc111bd --- /dev/null +++ b/packages/volto-blocks/news/4.internal @@ -0,0 +1 @@ +Created component for ctas in blocks @sabrina-bongiovanni \ No newline at end of file diff --git a/packages/volto-blocks/src/components/blocks/CallToAction/Edit.tsx b/packages/volto-blocks/src/components/blocks/CallToAction/Edit.tsx index c4cd2ab..f4413c6 100644 --- 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] && ( -
- ) => { - e.preventDefault(); - }} - > - {data.linkTitle} - -
+ ) => { + e.preventDefault(); + }} + openLinkInNewTab={false} + {...data} + > + {data.linkTitle} + )} diff --git a/packages/volto-blocks/src/components/blocks/CallToAction/View.tsx b/packages/volto-blocks/src/components/blocks/CallToAction/View.tsx index 273bdce..f53843f 100644 --- a/packages/volto-blocks/src/components/blocks/CallToAction/View.tsx +++ b/packages/volto-blocks/src/components/blocks/CallToAction/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/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; @@ -14,7 +15,6 @@ type Props = BlockViewProps & { export default function View({ data, className, style }: Props) { const Container = config.getComponent('Container').component || 'div'; - return (
)} {data.linkHref?.[0] && ( -
- - {data.linkTitle} - -
+ + {data.linkTitle} + )}
diff --git a/packages/volto-blocks/src/components/blocks/CardWithImages/Edit.tsx b/packages/volto-blocks/src/components/blocks/CardWithImages/Edit.tsx index b9c4ff2..257848d 100644 --- 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] && ( -
- ) => { - e.preventDefault(); - }} - > - {data.linkTitle} - -
+ ) => { + e.preventDefault(); + }} + openLinkInNewTab={false} + {...data} + > + {data.linkTitle} + )} diff --git a/packages/volto-blocks/src/components/blocks/CardWithImages/View.tsx b/packages/volto-blocks/src/components/blocks/CardWithImages/View.tsx index b0265bc..bceff0e 100644 --- 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) { )} {data.linkHref?.[0] && ( -
- - {data.linkTitle} - -
+ + {data.linkTitle} + )} diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx index 0172f6d..2be55d1 100644 --- 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) { ))} {data.linkHref?.[0] && ( -
- ) => { - e.preventDefault(); - }} - > - {data.linkTitle} - -
+ ) => { + e.preventDefault(); + }} + openLinkInNewTab={false} + {...data} + > + {data.linkTitle} + )} diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx index 4d048b2..8245a31 100644 --- 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) { ))} {data.linkHref?.[0] && ( -
- - {data.linkTitle} - -
+ + {data.linkTitle} + )} diff --git a/packages/volto-blocks/src/components/blocks/PageIntro/Edit.tsx b/packages/volto-blocks/src/components/blocks/PageIntro/Edit.tsx index 694a721..46f57f3 100644 --- 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] && ( -
- ) => { - e.preventDefault(); - }} - > - {data.linkTitle} - -
+ ) => { + e.preventDefault(); + }} + openLinkInNewTab={false} + {...data} + > + {data.linkTitle} + )}
diff --git a/packages/volto-blocks/src/components/blocks/PageIntro/View.tsx b/packages/volto-blocks/src/components/blocks/PageIntro/View.tsx index b985fd6..4b2ff34 100644 --- 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) { )} {data.linkHref?.[0] && ( -
- - {data.linkTitle} - -
+ + {data.linkTitle} + )}
diff --git a/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx b/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx index ce44c91..73ccb52 100644 --- 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] && ( -
- ) => { - e.preventDefault(); - }} - > - {data.linkTitle} - -
+ ) => { + e.preventDefault(); + }} + openLinkInNewTab={false} + {...data} + > + {data.linkTitle} + )}
diff --git a/packages/volto-blocks/src/components/blocks/Testimonials/View.tsx b/packages/volto-blocks/src/components/blocks/Testimonials/View.tsx index 0ebc3be..ac8f78a 100644 --- a/packages/volto-blocks/src/components/blocks/Testimonials/View.tsx +++ b/packages/volto-blocks/src/components/blocks/Testimonials/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/Testimonials/styles.module.css'; 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 Props = BlockViewProps & { data: TestimonialsData; @@ -14,6 +15,7 @@ type Props = BlockViewProps & { export default function View({ data, className, style }: Props) { const Container = config.getComponent('Container').component || 'div'; + // const Image = config.getComponent('Image').component; return ( @@ -48,14 +50,17 @@ export default function View({ data, className, style }: Props) { )} {data.linkHref?.[0] && ( -
- - {data.linkTitle} - -
+ + {data.linkTitle} + )} diff --git a/packages/volto-blocks/src/components/blocks/commons/CTA.tsx b/packages/volto-blocks/src/components/blocks/commons/CTA.tsx new file mode 100644 index 0000000..ef03008 --- /dev/null +++ b/packages/volto-blocks/src/components/blocks/commons/CTA.tsx @@ -0,0 +1,12 @@ +import { type ComponentProps } from 'react'; +import { UniversalLink } from '@plone/volto/components'; + +const CTA = (props: ComponentProps) => { + return ( +
+ +
+ ); +}; + +export default CTA;