From 29d8ce53ac815734c26ddfb364ce7b7f2289bf66 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 25 Jun 2024 09:55:11 -0700
Subject: [PATCH] fix(flow-item): fix inverted footer start/end slots

---
 .../components/flow-item/flow-item.stories.ts | 12 +++----
 .../src/components/flow-item/flow-item.tsx    |  2 +-
 .../src/components/panel/panel.stories.ts     | 34 +++++++------------
 3 files changed, 19 insertions(+), 29 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 102b3a1294f..6ce81621e66 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
@@ -65,16 +65,16 @@ const contentHTML = html`
 `;
 
 const footerHTML = html`
-  <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Naw.</calcite-button>
-  <calcite-button slot="${SLOTS.footerEnd}" width="half">Yeah!</calcite-button>
+  <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Footer start</calcite-button>
+  <calcite-button slot="${SLOTS.footerEnd}" width="half">Footer end</calcite-button>
 `;
 
 const flowItemContent = `${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}
-  <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
-  <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
+  <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Footer</calcite-button>
+  <calcite-button slot="${SLOTS.footer}" width="half">Footer</calcite-button>
   `;
 
 export const simple = (args: FlowItemStoryArgs): string => html`
@@ -93,8 +93,8 @@ export const simple = (args: FlowItemStoryArgs): string => html`
     <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
     ${contentHTML}
     <calcite-fab slot="fab"></calcite-fab>
-    <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
-    <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
+    <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Footer</calcite-button>
+    <calcite-button slot="${SLOTS.footer}" width="half">Footer</calcite-button>
   </calcite-flow-item>
 `;
 
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index 55b0cbc0d58..9d87efa0715 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -393,8 +393,8 @@ export class FlowItem
             <slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />
             <slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />
             <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer}>
-              <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
               <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
+              <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
             </slot>
             <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />
             <slot />
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 55aec5b6167..a5d8c6f7ab9 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -65,8 +65,8 @@ const contentHTML = html`
 `;
 
 const footerHTML = html`
-  <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Naw.</calcite-button>
-  <calcite-button slot="${SLOTS.footerEnd}" width="half">Yeah!</calcite-button>
+  <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Footer start</calcite-button>
+  <calcite-button slot="${SLOTS.footerEnd}" width="half">Footer end</calcite-button>
 `;
 
 const panelContent = `${headerHTML}
@@ -253,7 +253,7 @@ export const actionBarBackgroundColor_TestOnly = (): string =>
     <p style="height: 400px">Hello world!</p>
     <p style="height: 400px">Hello world!</p>
     <p style="height: 400px">Hello world!</p>
-    <p slot="footer">Slotted content!</p>
+    <p slot="footer">Footer!</p>
   </calcite-panel>`;
 
 export const footerWithoutContent_TestOnly = (): string =>
@@ -262,7 +262,7 @@ export const footerWithoutContent_TestOnly = (): string =>
     heading="Header!"
     style="width: 300px; height:auto; --calcite-panel-header-border-block-end:none;"
   >
-    <p slot="footer">Footer content!</p>
+    <p slot="footer">Footer!</p>
   </calcite-panel>`;
 
 export const actionBarWithoutContent_TestOnly = (): string =>
@@ -309,7 +309,7 @@ export const footerAndActionBarWithoutContent_TestOnly = (): string =>
         <calcite-action text="Layers" icon="layers"> </calcite-action>
       </calcite-action-group>
     </calcite-action-bar>
-    <p slot="footer">Footer content!</p>
+    <p slot="footer">Footer!</p>
   </calcite-panel>`;
 
 export const flexContent_TestOnly = (): string =>
@@ -395,7 +395,7 @@ export const footerAndContentTopBottomSlots = (): string => html`
       <p>Hello world!</p>
       <p>Hello world!</p>
       <div slot="content-bottom">Slot for a content-bottom.</div>
-      <p slot="footer">Slotted content!</p>
+      <p slot="footer">Footer!</p>
     </calcite-panel>
   </div>
 `;
@@ -405,22 +405,12 @@ export const footerStartAndEndSlots = (): string => html`
     <div slot="header-content">header-content slot</div>
     <p>Slotted content!</p>
     <div slot="content-bottom">Slot for a content-bottom.</div>
-    <calcite-button
-      type="button"
-      slot="footer-start"
-      kind="neutral"
-      scale="s"
-      id="card-icon-test-1"
-      icon-start="check"
-    ></calcite-button>
-    <calcite-button
-      type="button"
-      slot="footer-end"
-      kind="neutral"
-      scale="s"
-      id="card-icon-test-1"
-      icon-start="check"
-    ></calcite-button>
+    <calcite-button type="button" slot="footer-start" kind="neutral" scale="s" id="card-icon-test-1" icon-start="check"
+      >Footer start</calcite-button
+    >
+    <calcite-button type="button" slot="footer-end" kind="neutral" scale="s" id="card-icon-test-1" icon-start="check"
+      >Footer end</calcite-button
+    >
   </calcite-panel>
 `;