test(flow-item, panel): add tests for internal property. (#7931)

**Related Issue:** #7930 ## Summary - Adds stories for internal collapseDirection property.
Esri · Oct 5, 2023 · 7ad1ce0 · 7ad1ce0
1 parent d95aeb8
commit 7ad1ce0
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 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
@@ -65,6 +65,14 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           return this;
         },
       },
+      {
+        name: "collapse-direction",
+        commit(): Attribute {
+          this.value = select("collapseDirection", ["down", "up"], "down");
+          delete this.build;
+          return this;
+        },
+      },
       {
         name: "height-scale",
         commit(): Attribute {
@@ -159,6 +167,10 @@ export const collapsed_TestOnly = (): string => html`
   <calcite-flow-item collapsed collapsible closable> Hello World! </calcite-flow-item>
 `;
 
+export const collapseDirectionUp_TestOnly = (): string => html`
+  <calcite-flow-item collapsed collapsible collapse-direction="up" closable> Hello World! </calcite-flow-item>
+`;
+
 export const disabledWithStyledSlot_TestOnly = (): string => html`
   <calcite-flow-item style="height: 100%;" heading="Heading" disabled>
     <div id="content" style="height: 100%;">${contentHTML}</div>

diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -65,6 +65,14 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           return this;
         },
       },
+      {
+        name: "collapse-direction",
+        commit(): Attribute {
+          this.value = select("collapseDirection", ["down", "up"], "down");
+          delete this.build;
+          return this;
+        },
+      },
       {
         name: "height-scale",
         commit(): Attribute {
@@ -222,6 +230,41 @@ export const collapsibleWithActions_TestOnly = (): string => html`
   </calcite-panel>
 `;
 
+export const collapseDirectionUp_TestOnly = (): string => html`
+  <calcite-panel
+    style="height: 100%;"
+    closable
+    collapsible
+    collapse-direction="up"
+    heading="Collapsible with actions"
+    description="A panel that can be collapsed"
+  >
+    <calcite-action text="information" text-enabled icon="information" slot="header-actions-start"></calcite-action>
+    <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+    <div id="content" style="height: 100%;">${contentHTML}</div>
+    ${footerHTML}
+  </calcite-panel>
+`;
+
+export const collapseDirectionUpCollapsed_TestOnly = (): string => html`
+  <calcite-panel
+    style="height: 100%;"
+    closable
+    collapsible
+    collapsed
+    collapse-direction="up"
+    heading="Collapsible with actions"
+    description="A panel that can be collapsed"
+  >
+    <calcite-action text="information" text-enabled icon="information" slot="header-actions-start"></calcite-action>
+    <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+    <div id="content" style="height: 100%;">${contentHTML}</div>
+    ${footerHTML}
+  </calcite-panel>
+`;
+
 export const collapsedWithActions_TestOnly = (): string => html`
   <calcite-panel
     style="height: 100%;"