fix(kcollapse): add title slot (#2174)

* fix(kcollapse): add title slot * docs(kcollapse): update component docs * fix(kcollapse): minor fix * fix(kcollapse): minor fix
Kong · Jun 15, 2024 · c78e877 · c78e877
1 parent 1a60e61
commit c78e877
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 2 deletions.
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
@@ -212,6 +212,36 @@ You may utilize the `trigger-content` slot (to control the anchor text) or the `
 </KCollapse>
 ```
 
+### title
+
+Slot for custom title content.
+
+<KCollapse>
+  <template #title>
+    <KongIcon
+      :color="KUI_COLOR_TEXT_NEUTRAL"
+      :size="KUI_ICON_SIZE_40"
+    />
+    Custom title
+  </template>
+
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+</KCollapse>
+
+```html
+<KCollapse>
+  <template #title>
+    <KongIcon
+      :color="KUI_COLOR_TEXT_NEUTRAL"
+      :size="KUI_ICON_SIZE_40"
+    />
+    Custom title
+  </template>
+
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+</KCollapse>
+```
+
 ## Events
 
 ### toggle
@@ -225,6 +255,8 @@ Emitted when the `modelValue` is changed.
 <script setup lang="ts">
 import { ref } from 'vue'
 import { HeaderTags } from '@/types'
+import { KongIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 
 const vModelCollapsed = ref<boolean>(true)
 </script>

diff --git a/sandbox/pages/SandboxCollapse.vue b/sandbox/pages/SandboxCollapse.vue
@@ -71,6 +71,40 @@
           This is the hidden content
         </KCollapse>
       </SandboxSectionComponent>
+      <SandboxSectionComponent title="title">
+        <KCollapse>
+          <template #title>
+            Slotted title
+          </template>
+
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </KCollapse>
+      </SandboxSectionComponent>
+
+      <!-- Usage -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Usage"
+      />
+      <SandboxSectionComponent title="Slotted title & cusom trigger">
+        <KCollapse>
+          <template #title>
+            <KongIcon
+              :color="KUI_COLOR_TEXT_NEUTRAL"
+              :size="KUI_ICON_SIZE_40"
+            />
+            Slotted title
+          </template>
+
+          <template #trigger="{ isCollapsed, toggle }">
+            <KButton @click="toggle()">
+              {{ isCollapsed ? 'Expand' : 'Collapse' }}
+            </KButton>
+          </template>
+
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </KCollapse>
+      </SandboxSectionComponent>
     </div>
   </SandboxLayout>
 </template>
@@ -79,4 +113,6 @@
 import { inject } from 'vue'
 import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { KongIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 </script>
diff --git a/src/components/KCollapse/KCollapse.cy.ts b/src/components/KCollapse/KCollapse.cy.ts
@@ -118,4 +118,22 @@ describe('KCollapse', () => {
     cy.getTestId('collapse-hidden-content').should('be.visible')
     cy.getTestId('collapse-hidden-content').should('contain.text', collapseContent)
   })
+
+  it('renders title slot when using slots', () => {
+    const title = 'Awesome title'
+    const triggerLabel = 'Awesome label'
+    const collapseContent = 'Can you see me?'
+
+    mount(KCollapse, {
+      props: {
+        triggerLabel,
+      },
+      slots: {
+        title: h('div', { 'data-testid': 'custom-title' }, title),
+        default: h('div', {}, collapseContent),
+      },
+    })
+
+    cy.getTestId('custom-title').should('contain.text', title)
+  })
 })
diff --git a/src/components/KCollapse/KCollapse.vue b/src/components/KCollapse/KCollapse.vue
@@ -6,11 +6,13 @@
     >
       <component
         :is="titleTag"
-        v-if="title"
+        v-if="title || $slots.title"
         class="collapse-title"
         data-testid="collapse-title"
       >
-        {{ title }}
+        <slot name="title">
+          {{ title }}
+        </slot>
       </component>
       <div class="collapse-trigger">
         <slot
@@ -167,9 +169,12 @@ watch(modelComputed, (newVal, oldVal) => {
     margin-bottom: var(--kui-space-50, $kui-space-50);
 
     .collapse-title {
+      align-items: center;
       color: var(--kui-color-text, $kui-color-text);
+      display: flex;
       font-size: var(--kui-font-size-40, $kui-font-size-40);
       font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+      gap: var(--kui-space-50, $kui-space-50);
       letter-spacing: var(--kui-letter-spacing-minus-30, $kui-letter-spacing-minus-30);
       line-height: var(--kui-line-height-30, $kui-line-height-30);
       margin: var(--kui-space-0, $kui-space-0);
@@ -214,8 +219,13 @@ watch(modelComputed, (newVal, oldVal) => {
     }
 
     &.has-trailing-trigger {
+      align-items: center;
       display: flex;
       justify-content: space-between;
+
+      .collapse-title {
+        margin-bottom: var(--kui-space-0, $kui-space-0);
+      }
     }
   }