Add call to action (and list) block

admin/src/common/blocks/CallToActionBlock.tsx

@@ -0,0 +1,33 @@
+import { BlockCategory, createCompositeBlock, createCompositeBlockSelectField } from "@comet/blocks-admin";
+import { CallToActionBlockData } from "@src/blocks.generated";
+import { FormattedMessage } from "react-intl";
+
+import { TextLinkBlock } from "./TextLinkBlock";
+
+export const CallToActionBlock = createCompositeBlock(
+    {
+        name: "CallToAction",
+        displayName: <FormattedMessage id="callToActionBlock.displayName" defaultMessage="Call To Action" />,
+        blocks: {
+            textLink: {
+                block: TextLinkBlock,
+                title: <FormattedMessage id="callToActionBlock.link.displayName" defaultMessage="Link" />,
+            },
+            variant: {
+                block: createCompositeBlockSelectField<CallToActionBlockData["variant"]>({
+                    defaultValue: "Contained",
+                    options: [
+                        { value: "Contained", label: <FormattedMessage id="callToActionBlock.variant.contained" defaultMessage="Contained" /> },
+                        { value: "Outlined", label: <FormattedMessage id="callToActionBlock.variant.outlined" defaultMessage="Outlined" /> },
+                        { value: "Text", label: <FormattedMessage id="callToActionBlock.variant.text" defaultMessage="Text" /> },
+                    ],
+                    fieldProps: { label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />, fullWidth: true },
+                }),
+            },
+        },
+    },
+    (block) => {
+        block.category = BlockCategory.Navigation;
+        return block;
+    },
+);

admin/src/common/blocks/CallToActionListBlock.tsx

@@ -0,0 +1,11 @@
+import { createListBlock } from "@comet/blocks-admin";
+import { CallToActionBlock } from "@src/common/blocks/CallToActionBlock";
+import { FormattedMessage } from "react-intl";
+
+export const CallToActionListBlock = createListBlock({
+    name: "CallToActionList",
+    displayName: <FormattedMessage id="callToActionListBlock.displayName" defaultMessage="Call To Action List" />,
+    block: CallToActionBlock,
+    itemName: <FormattedMessage id="callToActionListBlock.itemName" defaultMessage="action" />,
+    itemsName: <FormattedMessage id="callToActionListBlock.itemsName" defaultMessage="actions" />,
+});

admin/src/documents/pages/blocks/PageContentBlock.tsx

@@ -1,7 +1,7 @@
 import { createBlocksBlock, YouTubeVideoBlock } from "@comet/blocks-admin";
 import { AnchorBlock, DamImageBlock, DamVideoBlock } from "@comet/cms-admin";
+import { CallToActionListBlock } from "@src/common/blocks/CallToActionListBlock";
 import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
-import { LinkListBlock } from "@src/common/blocks/LinkListBlock";
 import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
 import { SpaceBlock } from "@src/common/blocks/SpaceBlock";
 import { TextImageBlock } from "@src/common/blocks/TextImageBlock";
@@ -17,6 +17,6 @@ export const PageContentBlock = createBlocksBlock({
         textImage: TextImageBlock,
         damVideo: DamVideoBlock,
         youTubeVideo: YouTubeVideoBlock,
-        links: LinkListBlock,
+        callToActionList: CallToActionListBlock,
     },
 });

api/block-meta.json

@@ -16,6 +16,102 @@
             }
         ]
     },
+    {
+        "name": "CallToAction",
+        "fields": [
+            {
+                "name": "textLink",
+                "kind": "Block",
+                "block": "TextLink",
+                "nullable": false
+            },
+            {
+                "name": "variant",
+                "kind": "Enum",
+                "enum": [
+                    "Contained",
+                    "Outlined",
+                    "Text"
+                ],
+                "nullable": false
+            }
+        ],
+        "inputFields": [
+            {
+                "name": "textLink",
+                "kind": "Block",
+                "block": "TextLink",
+                "nullable": false
+            },
+            {
+                "name": "variant",
+                "kind": "Enum",
+                "enum": [
+                    "Contained",
+                    "Outlined",
+                    "Text"
+                ],
+                "nullable": false
+            }
+        ]
+    },
+    {
+        "name": "CallToActionList",
+        "fields": [
+            {
+                "name": "blocks",
+                "kind": "NestedObjectList",
+                "object": {
+                    "fields": [
+                        {
+                            "name": "key",
+                            "kind": "String",
+                            "nullable": false
+                        },
+                        {
+                            "name": "visible",
+                            "kind": "Boolean",
+                            "nullable": false
+                        },
+                        {
+                            "name": "props",
+                            "kind": "Block",
+                            "block": "CallToAction",
+                            "nullable": false
+                        }
+                    ]
+                },
+                "nullable": false
+            }
+        ],
+        "inputFields": [
+            {
+                "name": "blocks",
+                "kind": "NestedObjectList",
+                "object": {
+                    "fields": [
+                        {
+                            "name": "key",
+                            "kind": "String",
+                            "nullable": false
+                        },
+                        {
+                            "name": "visible",
+                            "kind": "Boolean",
+                            "nullable": false
+                        },
+                        {
+                            "name": "props",
+                            "kind": "Block",
+                            "block": "CallToAction",
+                            "nullable": false
+                        }
+                    ]
+                },
+                "nullable": false
+            }
+        ]
+    },
     {
         "name": "DamImage",
         "fields": [
@@ -406,63 +502,6 @@
             }
         ]
     },
-    {
-        "name": "LinkList",
-        "fields": [
-            {
-                "name": "blocks",
-                "kind": "NestedObjectList",
-                "object": {
-                    "fields": [
-                        {
-                            "name": "key",
-                            "kind": "String",
-                            "nullable": false
-                        },
-                        {
-                            "name": "visible",
-                            "kind": "Boolean",
-                            "nullable": false
-                        },
-                        {
-                            "name": "props",
-                            "kind": "Block",
-                            "block": "TextLink",
-                            "nullable": false
-                        }
-                    ]
-                },
-                "nullable": false
-            }
-        ],
-        "inputFields": [
-            {
-                "name": "blocks",
-                "kind": "NestedObjectList",
-                "object": {
-                    "fields": [
-                        {
-                            "name": "key",
-                            "kind": "String",
-                            "nullable": false
-                        },
-                        {
-                            "name": "visible",
-                            "kind": "Boolean",
-                            "nullable": false
-                        },
-                        {
-                            "name": "props",
-                            "kind": "Block",
-                            "block": "TextLink",
-                            "nullable": false
-                        }
-                    ]
-                },
-                "nullable": false
-            }
-        ]
-    },
     {
         "name": "OptionalPixelImage",
         "fields": [
@@ -527,7 +566,7 @@
                                 "textImage": "TextImage",
                                 "damVideo": "DamVideo",
                                 "youTubeVideo": "YouTubeVideo",
-                                "links": "LinkList"
+                                "callToActionList": "CallToActionList"
                             },
                             "nullable": false
                         }
@@ -569,7 +608,7 @@
                                 "textImage": "TextImage",
                                 "damVideo": "DamVideo",
                                 "youTubeVideo": "YouTubeVideo",
-                                "links": "LinkList"
+                                "callToActionList": "CallToActionList"
                             },
                             "nullable": false
                         }

api/src/common/blocks/call-to-action-list.block.ts

@@ -0,0 +1,4 @@
+import { createListBlock } from "@comet/blocks-api";
+import { CallToActionBlock } from "@src/common/blocks/call-to-action.block";
+
+export const CallToActionListBlock = createListBlock({ block: CallToActionBlock }, "CallToActionList");

api/src/common/blocks/call-to-action.block.ts

@@ -0,0 +1,43 @@
+import {
+    BlockData,
+    BlockDataInterface,
+    BlockField,
+    BlockInput,
+    ChildBlock,
+    ChildBlockInput,
+    createBlock,
+    ExtractBlockInput,
+    inputToData,
+} from "@comet/blocks-api";
+import { IsEnum } from "class-validator";
+
+import { TextLinkBlock } from "./text-link.block";
+
+enum Variant {
+    Contained = "Contained",
+    Outlined = "Outlined",
+    Text = "Text",
+}
+
+class CallToActionBlockData extends BlockData {
+    @ChildBlock(TextLinkBlock)
+    textLink: BlockDataInterface;
+
+    @BlockField({ type: "enum", enum: Variant })
+    variant: Variant;
+}
+
+class CallToActionBlockInput extends BlockInput {
+    @ChildBlockInput(TextLinkBlock)
+    textLink: ExtractBlockInput<typeof TextLinkBlock>;
+
+    @IsEnum(Variant)
+    @BlockField({ type: "enum", enum: Variant })
+    variant: Variant;
+
+    transformToBlockData(): CallToActionBlockData {
+        return inputToData(CallToActionBlockData, this);
+    }
+}
+
+export const CallToActionBlock = createBlock(CallToActionBlockData, CallToActionBlockInput, "CallToAction");

api/src/documents/pages/blocks/page-content.block.ts

@@ -1,7 +1,7 @@
 import { createBlocksBlock, YouTubeVideoBlock } from "@comet/blocks-api";
 import { AnchorBlock, DamImageBlock, DamVideoBlock } from "@comet/cms-api";
+import { CallToActionListBlock } from "@src/common/blocks/call-to-action-list.block";
 import { HeadingBlock } from "@src/common/blocks/heading.block";
-import { LinkListBlock } from "@src/common/blocks/link-list.block";
 import { RichTextBlock } from "@src/common/blocks/rich-text.block";
 import { SpaceBlock } from "@src/common/blocks/space.block";
 import { TextImageBlock } from "@src/common/blocks/text-image.block";
@@ -17,7 +17,7 @@ export const PageContentBlock = createBlocksBlock(
             textImage: TextImageBlock,
             damVideo: DamVideoBlock,
             youTubeVideo: YouTubeVideoBlock,
-            links: LinkListBlock,
+            callToActionList: CallToActionListBlock,
         },
     },
     "PageContent",

site/src/common/blocks/CallToActionBlock.tsx

@@ -0,0 +1,17 @@
+"use client";
+import { PropsWithData, withPreview } from "@comet/cms-site";
+import { CallToActionBlockData } from "@src/blocks.generated";
+import { LinkBlock } from "@src/common/blocks/LinkBlock";
+import { HiddenIfInvalidLink } from "@src/common/helpers/HiddenIfInvalidLink";
+import { Button } from "@src/components/common/Button";
+
+export const CallToActionBlock = withPreview(
+    ({ data: { textLink, variant } }: PropsWithData<CallToActionBlockData>) => (
+        <HiddenIfInvalidLink link={textLink.link}>
+            <LinkBlock data={textLink.link}>
+                <Button variant={variant}>{textLink.text}</Button>
+            </LinkBlock>
+        </HiddenIfInvalidLink>
+    ),
+    { label: "Call To Action" },
+);

site/src/common/blocks/CallToActionListBlock.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { ListBlock, PropsWithData, withPreview } from "@comet/cms-site";
+import { CallToActionListBlockData } from "@src/blocks.generated";
+import { CallToActionBlock } from "@src/common/blocks/CallToActionBlock";
+import styled from "styled-components";
+
+export const CallToActionListBlock = withPreview(
+    ({ data }: PropsWithData<CallToActionListBlockData>) => (
+        <Root>
+            <ListBlock data={data} block={(block) => <CallToActionBlock data={block} />} />
+        </Root>
+    ),
+    { label: "Call To Action List" },
+);
+
+const Root = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: ${({ theme }) => theme.spacing.S300};
+
+    ${({ theme }) => theme.breakpoints.sm.mediaQuery} {
+        gap: ${({ theme }) => theme.spacing.S400};
+    }
+`;

site/src/common/blocks/LinkBlock.tsx

@@ -1,6 +1,6 @@
 import { ExternalLinkBlock, InternalLinkBlock, OneOfBlock, PropsWithData, SupportedBlocks, withPreview } from "@comet/cms-site";
 import { LinkBlockData } from "@src/blocks.generated";
-import * as React from "react";
+import { ReactElement } from "react";
 
 const supportedBlocks: SupportedBlocks = {
     internal: ({ children, title, ...props }) => (
@@ -16,7 +16,7 @@ const supportedBlocks: SupportedBlocks = {
 };
 
 interface LinkBlockProps extends PropsWithData<LinkBlockData> {
-    children: React.ReactElement;
+    children: ReactElement;
 }
 
 export const LinkBlock = withPreview(