Add support for custom labels in createOneOfBlock

.changeset/fluffy-points-think.md

@@ -0,0 +1,30 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Add support for custom labels in OneOfBlock tabs
+
+Usage:
+
+-   Add labels to `createOneOfBlock` props
+    -   ````ts
+        labels: {
+                image: (
+                    <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
+                        <Image />
+                    </Tooltip>
+                ),
+                damVideo: (
+                    <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.dam" defaultMessage="Video (DAM)" />}>
+                        <Video />
+                    </Tooltip>
+                ),
+                youTubeVideo: (
+                    <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.youtube" defaultMessage="Video (YouTube)" />}>
+                        <YouTube />
+                    </Tooltip>
+                ),
+            }
+            ```
+        ````
+    -   the keys in the labels need to be the same as the `supportedBlocks`

demo/admin/src/common/blocks/MediaBlock.tsx

@@ -1,3 +1,5 @@
+import { Tooltip } from "@comet/admin";
+import { Image, Video, Vimeo, Youtube } from "@comet/admin-icons";
 import { BlockCategory, BlockInterface, createOneOfBlock } from "@comet/blocks-admin";
 import { DamImageBlock, DamVideoBlock, VimeoVideoBlock, YouTubeVideoBlock } from "@comet/cms-admin";
 import { FormattedMessage } from "react-intl";
@@ -8,5 +10,27 @@ export const MediaBlock: BlockInterface = createOneOfBlock({
     displayName: <FormattedMessage id="mediaBlock.displayName" defaultMessage="Media" />,
     allowEmpty: false,
     variant: "toggle",
+    labels: {
+        image: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
+                <Image />
+            </Tooltip>
+        ),
+        damVideo: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.dam" defaultMessage="Video (DAM)" />}>
+                <Video />
+            </Tooltip>
+        ),
+        youTubeVideo: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.youtube" defaultMessage="Video (YouTube)" />}>
+                <Youtube />
+            </Tooltip>
+        ),
+        vimeoVideo: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.vimeo" defaultMessage="Video (Vimeo)" />}>
+                <Vimeo />
+            </Tooltip>
+        ),
+    },
     category: BlockCategory.Media,
 });

packages/admin/admin-icons/src/index.ts

@@ -11,8 +11,6 @@ export { default as MovePage } from "./MovePage";
 export { default as RadioChecked } from "./RadioChecked";
 export { default as RadioUnchecked } from "./RadioUnchecked";
 export { default as ThreeDotSaving } from "./ThreeDotSaving";
-export { default as Vimeo } from "./Vimeo";
-export { default as YouTube } from "./YouTube";
 
 export type IconName =
     | GeneratedIconName
@@ -25,6 +23,4 @@ export type IconName =
     | "MovePage"
     | "RadioChecked"
     | "RadioUnchecked"
-    | "ThreeDotSaving"
-    | "Vimeo"
-    | "YouTube";
+    | "ThreeDotSaving";

packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx

@@ -62,13 +62,15 @@ export interface CreateOneOfBlockOptions<T extends boolean> {
     name: string;
     displayName?: ReactNode;
     supportedBlocks: Record<BlockType, BlockInterface>;
+    labels?: Record<BlockType, React.ReactNode>;
     category?: BlockCategory | CustomBlockCategory;
     variant?: "select" | "radio" | "toggle";
     allowEmpty?: T;
 }
 
 export const createOneOfBlock = <T extends boolean = boolean>({
     supportedBlocks,
+    labels,
     name,
     displayName = "Switch",
     category = BlockCategory.Other,
@@ -116,7 +118,7 @@ export const createOneOfBlock = <T extends boolean = boolean>({
     Object.entries(supportedBlocks).forEach(([blockType, block]) => {
         options.push({
             value: blockType,
-            label: block.displayName,
+            label: labels && labels[blockType] ? labels[blockType] : block.displayName,
         });
     });