From 7fc5c69e17e3430bdf7d7452be1615b781913ada Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Fri, 18 Oct 2024 10:27:15 +0200
Subject: [PATCH] :memo: - docs: further improvements to Kanban(Template)
 stories

---
 src/components/data/kanban/kanban.stories.tsx |  3 ++-
 src/components/data/kanban/kanban.tsx         |  2 +-
 src/lib/format/string.ts                      | 12 +++++++++---
 src/templates/kanban/kanban.stories.tsx       |  6 +++---
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/data/kanban/kanban.stories.tsx b/src/components/data/kanban/kanban.stories.tsx
index 740f8da..9604d45 100644
--- a/src/components/data/kanban/kanban.stories.tsx
+++ b/src/components/data/kanban/kanban.stories.tsx
@@ -66,7 +66,7 @@ export const AdditionalFields: Story = {
   },
 };
 
-export const WithCustomPreview: Story = {
+export const CustomPreview: Story = {
   ...KanbanComponent,
   // @ts-expect-error - Fix never
   args: {
@@ -76,6 +76,7 @@ export const WithCustomPreview: Story = {
         alt={attributeData.title}
         src="/static/maykin_logo.png"
         height="24"
+        style={{ objectFit: "contain" }}
       />
     ),
   },
diff --git a/src/components/data/kanban/kanban.tsx b/src/components/data/kanban/kanban.tsx
index fab1817..0fe21fb 100644
--- a/src/components/data/kanban/kanban.tsx
+++ b/src/components/data/kanban/kanban.tsx
@@ -331,7 +331,7 @@ export const KanbanSection: React.FC<KanbanSectionProps> = ({
     >
       {fieldset[0] && (
         <Toolbar directionResponsive={false} pad={false} variant="transparent">
-          <H3>{fieldset[0]}</H3>
+          <H3>{field2Title(fieldset[0])}</H3>
           <Badge rounded>{objectList.length}</Badge>
         </Toolbar>
       )}
diff --git a/src/lib/format/string.ts b/src/lib/format/string.ts
index 5fe91e9..48ca51f 100644
--- a/src/lib/format/string.ts
+++ b/src/lib/format/string.ts
@@ -17,10 +17,16 @@ export const addSpaces = (string: string) =>
 
 /**
  * Converts "fieldName" to "Field name".
- * @param field
+ * @deprecated Use `field2title` instead.
  */
-export const field2Caption = (field: string): string =>
-  ucFirst(unHyphen(addSpaces(field)));
+export const field2Caption = (field: string): string => {
+  if (process && process?.env?.NODE_ENV !== "production") {
+    console.warn(
+      "DEPRECATION: `field2Caption` is deprecated, use `field2Title` instead.",
+    );
+  }
+  return ucFirst(unHyphen(addSpaces(field)));
+};
 
 interface Field2TitleOptions {
   addSpaces?: boolean;
diff --git a/src/templates/kanban/kanban.stories.tsx b/src/templates/kanban/kanban.stories.tsx
index 03475e2..899fae2 100644
--- a/src/templates/kanban/kanban.stories.tsx
+++ b/src/templates/kanban/kanban.stories.tsx
@@ -3,9 +3,9 @@ import * as React from "react";
 
 import { Badge, Outline } from "../../components";
 import {
+  CustomPreview as CustomPreviewComponentStory,
   Draggable as DraggableComponentStory,
   KanbanComponent as KanbanComponentStory,
-  WithCustomPreview as WithCustomPreviewComponentStory,
   WithToolbar as WithToolbarComponentStory,
 } from "../../components/data/kanban/kanban.stories";
 import { KanbanTemplate } from "./kanban";
@@ -120,11 +120,11 @@ export const WithSecondaryNavigation: Story = {
   },
 };
 
-export const WithCustomPreview: Story = {
+export const CustomPreview: Story = {
   ...kanbanTemplate,
   args: {
     ...kanbanTemplate.args,
-    kanbanProps: WithCustomPreviewComponentStory.args,
+    kanbanProps: CustomPreviewComponentStory.args,
   },
 };