From e80f6aad4d502bf878210905bd8e879105f6f619 Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Tue, 9 Jul 2024 11:12:40 -0700
Subject: [PATCH] feat(panel, flow-item): add scale control to simple stories

---
 .../src/components/flow-item/flow-item.stories.ts        | 9 ++++++++-
 .../src/components/panel/panel.stories.ts                | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
index 6ce81621e66..f24da6bca2f 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
@@ -23,6 +23,7 @@ export default {
     collapsed: false,
     collapseDirection: collapseDirection.defaultValue,
     heightScale: scale.defaultValue,
+    scale: scale.defaultValue,
     loading: false,
   },
   argTypes: {
@@ -34,6 +35,10 @@ export default {
       options: scale.values,
       control: { type: "select" },
     },
+    scale: {
+      options: scale.values,
+      control: { type: "select" },
+    },
   },
 };
 
@@ -86,9 +91,11 @@ export const simple = (args: FlowItemStoryArgs): string => html`
     ${boolean("collapsed", args.collapsed)}
     collapse-direction="${args.collapseDirection}"
     height-scale="${args.heightScale}"
+    scale="${args.scale}"
     ${boolean("loading", args.loading)}
+    heading="Heading"
+    description="A wonderful flow item description"
   >
-    ${headerHTML}
     <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
     <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
     ${contentHTML}
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index c3859ce4027..eacf225e83b 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -23,6 +23,7 @@ export default {
     collapsible: false,
     collapseDirection: collapseDirection.defaultValue,
     heightScale: scale.defaultValue,
+    scale: scale.defaultValue,
     loading: false,
   },
   argTypes: {
@@ -34,6 +35,10 @@ export default {
       options: scale.values,
       control: { type: "select" },
     },
+    scale: {
+      options: scale.values,
+      control: { type: "select" },
+    },
   },
 };
 
@@ -84,9 +89,11 @@ export const simple = (args: PanelStoryArgs): string => html`
     ${boolean("collapsible", args.collapsible)}
     collapseDirection="${args.collapseDirection}"
     heightScale="${args.heightScale}"
+    scale="${args.scale}"
     ${boolean("loading", args.loading)}
+    heading="Heading"
+    description="A great panel description"
   >
-    ${headerHTML}
     <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
     <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
     ${contentHTML}