fix: update slot knobs to render name properly (#133)

Author: web-padawan

.changeset/nice-brooms-tell.md

@@ -0,0 +1,6 @@
+---
+'@api-viewer/demo': patch
+'api-viewer-element': patch
+---
+
+Update slot knobs to render name properly

packages/api-demo/src/controllers/slots-controller.ts

@@ -7,14 +7,9 @@ import {
   AbstractController,
   AbstractControllerHost
 } from './abstract-controller.js';
+import { formatSlot } from '../ui/controls.js';
 import { SlotValue } from '../types.js';
 
-const capitalize = (name: string): string =>
-  name[0].toUpperCase() + name.slice(1);
-
-const getSlotContent = (name: string): string =>
-  capitalize(name === '' ? 'content' : name);
-
 export class SlotsController extends AbstractController<SlotValue> {
   enabled: boolean;
 
@@ -40,7 +35,7 @@ export class SlotsController extends AbstractController<SlotValue> {
       .map((slot) => {
         return {
           ...slot,
-          content: getSlotContent(slot.name)
+          content: formatSlot(slot.name)
         };
       }) as SlotValue[];
   }

packages/api-demo/src/types.ts

@@ -21,7 +21,6 @@ export type Knob<T extends Knobable = unknown> = T & {
   custom?: boolean;
   options?: string[];
   knobType: string;
-  content?: string;
 };
 
 export type PropertyKnob = Knob<ClassField>;

packages/api-demo/src/ui/controls.ts

@@ -8,6 +8,12 @@ import {
 
 type InputRenderer = (item: Knobable, id: string) => TemplateResult;
 
+const capitalize = (name: string): string =>
+  name[0].toUpperCase() + name.slice(1);
+
+export const formatSlot = (name: string): string =>
+  capitalize(name === '' ? 'content' : name);
+
 export const cssPropRenderer: InputRenderer = (
   knob: Knobable,
   id: string
@@ -90,9 +96,9 @@ export const renderKnobs = (
   renderer: InputRenderer
 ): TemplateResult => {
   const rows = items.map((item: Knobable) => {
-    const { name, content } = item as PropertyKnob;
+    const { name } = item as PropertyKnob;
     const id = `${type}-${name || 'default'}`;
-    const label = type === 'slot' ? content : name;
+    const label = type === 'slot' ? formatSlot(name) : name;
     return html`
       <tr>
         <td>