Change prop name to labels

vivid-planet · Sep 11, 2024 · 0c38888 · 0c38888
1 parent 7f6750c
commit 0c38888
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/fluffy-points-think.md b/.changeset/fluffy-points-think.md
@@ -6,9 +6,9 @@ Add support for custom tab labels in OneOfBlock tabs
 
 Usage:
 
--   Add tabLabels to `createOneOfBlock` props
+-   Add labels to `createOneOfBlock` props
     -   ````ts
-        tabLabels: {
+        labels: {
                 image: (
                     <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
                         <Image />
@@ -27,4 +27,4 @@ Usage:
             }
             ```
         ````
-    -   the keys in the tabLabels need to be the same as the `supportedBlocks`
+    -   the keys in the labels need to be the same as the `supportedBlocks`
diff --git a/demo/admin/src/pages/blocks/MediaBlock.tsx b/demo/admin/src/pages/blocks/MediaBlock.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from "@comet/admin";
-import { Image, Video, YouTube } from "@comet/admin-icons";
+import { Image, Video, Vimeo, YouTube } from "@comet/admin-icons";
 import { BlockCategory, createOneOfBlock } from "@comet/blocks-admin";
 import { DamImageBlock, DamVideoBlock, VimeoVideoBlock, YouTubeVideoBlock } from "@comet/cms-admin";
 import { FormattedMessage } from "react-intl";
@@ -11,7 +11,7 @@ export const MediaBlock = createOneOfBlock({
     allowEmpty: false,
     variant: "toggle",
     supportedBlocks: { image: DamImageBlock, damVideo: DamVideoBlock, youTubeVideo: YouTubeVideoBlock, vimeoVideo: VimeoVideoBlock },
-    tabLabels: {
+    labels: {
         image: (
             <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
                 <Image />
@@ -27,5 +27,10 @@ export const MediaBlock = createOneOfBlock({
                 <YouTube />
             </Tooltip>
         ),
+        vimeoVideo: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.vimeo" defaultMessage="Video (Vimeo)" />}>
+                <Vimeo />
+            </Tooltip>
+        ),
     },
 });
diff --git a/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx
@@ -62,15 +62,15 @@ export interface CreateOneOfBlockOptions<T extends boolean> {
     name: string;
     displayName?: ReactNode;
     supportedBlocks: Record<BlockType, BlockInterface>;
-    tabLabels?: Record<BlockType, React.ReactNode>;
+    labels?: Record<BlockType, React.ReactNode>;
     category?: BlockCategory | CustomBlockCategory;
     variant?: "select" | "radio" | "toggle";
     allowEmpty?: T;
 }
 
 export const createOneOfBlock = <T extends boolean = boolean>({
     supportedBlocks,
-    tabLabels,
+    labels,
     name,
     displayName = "Switch",
     category = BlockCategory.Other,
@@ -118,7 +118,7 @@ export const createOneOfBlock = <T extends boolean = boolean>({
     Object.entries(supportedBlocks).forEach(([blockType, block]) => {
         options.push({
             value: blockType,
-            label: tabLabels && tabLabels[blockType] ? tabLabels[blockType] : block.displayName,
+            label: labels && labels[blockType] ? labels[blockType] : block.displayName,
         });
     });