feat(kcollapse): component reskin [KHCP-8976]

docs/components/card.md

@@ -79,15 +79,11 @@ String to be used as a title. Can also be [slotted](#slots).
 HTML element you want title to be rendered as. Defaults to `div`.
 
 Accepted values are:
-* `div`
-* `span`
-* `a`
-* `h1`
-* `h2`
-* `h3`
-* `h4`
-* `h5`
-* `h6`
+<ul>
+  <li v-for="tag in HeaderTags" :key="`${tag}-header-tag`">
+    <code>{{ tag }}</code>
+  </li>
+</ul>
 
 <KCard title-tag="h4" title="Card Title H4 Heading" />
 
@@ -201,4 +197,5 @@ Bottom drawer of the card. Useful for providing contextual information.
 
 <script setup lang="ts">
 import { MoreIcon } from '@kong/icons'
+import { HeaderTags } from '@/types'
 </script>

docs/guide/migrating-to-version-9.md

@@ -258,6 +258,21 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 ### KCollapse
 
+#### Events
+
+* `toggled` event was renamed to `toggle`
+
+#### Structure
+
+* `k-collapse-heading` class has been replaced with `collapse-heading`
+* `k-collapse-title` class and `data-testid` attribute has been replaced with `collapse-title`
+* `k-collapse-trigger` class has been replaced with `collapse-trigger` 
+* `k-collapse-trigger-content` class and `data-testid` attribute has been replaced with `collapse-trigger-content`
+* `k-collapse-trigger-label` class and `data-testid` attribute has been replaced with `collapse-trigger-label`
+* `k-collapse-trigger-chevron` class has been replaced with `collapse-trigger-icon`
+* `k-collapse-trigger-icon` class and `data-testid` attribute has been replaced with `collapse-trigger-icon`
+* `k-collapse-visible-content` class and `data-testid` attribute has been replaced with `collapse-visible-content`
+* `k-collapse-hidden-content` class and `data-testid` attribute has been replaced with `collapse-hidden-content`
 
 ### KDateTimePicker
 

sandbox/index.ts

@@ -23,6 +23,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KCatalog', to: { name: 'catalog' } },
   { name: 'KCheckbox', to: { name: 'checkbox' } },
   { name: 'KCodeBlock', to: { name: 'codeblock' } },
+  { name: 'KCollapse', to: { name: 'collapse' } },
   { name: 'KCopy', to: { name: 'copy' } },
   { name: 'KDateTimePicker', to: { name: 'datetimepicker' } },
   { name: 'KDropdown', to: { name: 'dropdown' } },

sandbox/pages/SandboxCollapse.vue

@@ -0,0 +1,82 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KPagination"
+  >
+    <div class="kpagination-sandbox">
+      <!-- Figma -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Figma"
+      />
+      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11254&mode=dev&t=z4m6LiZVAeHHwxSH-1">
+        Figma
+      </KExternalLink>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="KCollapse title">
+        <KCollapse title="KCollapse title">
+          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>
+      <SandboxSectionComponent title="triggerAlignment">
+        <KCollapse
+          title="KCollapse title"
+          trigger-alignment="leading"
+          trigger-label="Trigger label"
+        >
+          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>
+      <SandboxSectionComponent title="triggerLabel">
+        <KCollapse
+          trigger-label="Trigger label"
+        >
+          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>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent title="visible-content">
+        <KCollapse title="KCollapse title">
+          <template #visible-content>
+            This is the visible content
+          </template>
+          This is the hidden content
+        </KCollapse>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="trigger-content">
+        <KCollapse>
+          <template #trigger-content>
+            Custom trigger content
+          </template>
+          This is the hidden content
+        </KCollapse>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="trigger">
+        <KCollapse>
+          <template #trigger="{ isCollapsed, toggle }">
+            <KButton @click="toggle()">
+              {{ isCollapsed ? 'Expand' : 'Collapse' }}
+            </KButton>
+          </template>
+          This is the hidden content
+        </KCollapse>
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+</script>

sandbox/router/sandbox-routes.ts

@@ -56,6 +56,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Code Block Sandbox' },
     component: () => import('../pages/SandboxCodeBlock.vue'),
   },
+  {
+    path: '/collapse',
+    name: 'collapse',
+    meta: { title: 'Collapse Sandbox' },
+    component: () => import('../pages/SandboxCollapse.vue'),
+  },
   {
     path: '/copy',
     name: 'copy',

src/components/KCollapse/KCollapse.cy.ts

@@ -18,9 +18,9 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-title').should('exist')
-    cy.getTestId('k-collapse-title').should('contain.text', title)
-    cy.getTestId('k-collapse-trigger-label').should('contain.text', triggerLabel)
+    cy.getTestId('collapse-title').should('exist')
+    cy.getTestId('collapse-title').should('contain.text', title)
+    cy.getTestId('collapse-trigger-label').should('contain.text', triggerLabel)
   })
 
   it('displays a caret for trigger if no label provided', () => {
@@ -32,7 +32,7 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-icon').should('exist')
+    cy.getTestId('collapse-trigger-icon').should('exist')
   })
 
   it('allows using leading trigger alignment', () => {
@@ -49,8 +49,8 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-label').should('contain.text', triggerLabel)
-    cy.get('.k-collapse-heading').should('not.have.class', 'has-trailing-trigger')
+    cy.getTestId('collapse-trigger-label').should('contain.text', triggerLabel)
+    cy.get('.collapse-heading').should('not.have.class', 'has-trailing-trigger')
   })
 
   it('correctly shows and hides content with trigger click', () => {
@@ -66,12 +66,12 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-label').should('contain.text', triggerLabel)
+    cy.getTestId('collapse-trigger-label').should('contain.text', triggerLabel)
     // hidden by default
-    cy.getTestId('k-collapse-hidden-content').should('not.be.visible')
+    cy.getTestId('collapse-hidden-content').should('not.be.visible')
     // visible when clicked
-    cy.getTestId('k-collapse-trigger-label').click()
-    cy.getTestId('k-collapse-hidden-content').should('be.visible')
+    cy.getTestId('collapse-trigger-label').click()
+    cy.getTestId('collapse-hidden-content').should('be.visible')
   })
 
   it('allows content to be expanded by default', () => {
@@ -86,13 +86,13 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-content').should('exist')
+    cy.getTestId('collapse-trigger-content').should('exist')
     // visible by default
-    cy.getTestId('k-collapse-hidden-content').should('be.visible')
-    cy.getTestId('k-collapse-hidden-content').should('contain.text', collapseContent)
+    cy.getTestId('collapse-hidden-content').should('be.visible')
+    cy.getTestId('collapse-hidden-content').should('contain.text', collapseContent)
     // hidden when clicked
-    cy.getTestId('k-collapse-trigger-content').click()
-    cy.getTestId('k-collapse-hidden-content').should('not.be.visible')
+    cy.getTestId('collapse-trigger-content').click()
+    cy.getTestId('collapse-hidden-content').should('not.be.visible')
   })
 
   it('renders proper content when using slots', () => {
@@ -108,14 +108,14 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-content').should('contain.text', triggerContent)
-    cy.getTestId('k-collapse-visible-content').should('exist')
-    cy.getTestId('k-collapse-visible-content').should('contain.text', visibleContent)
+    cy.getTestId('collapse-trigger-content').should('contain.text', triggerContent)
+    cy.getTestId('collapse-visible-content').should('exist')
+    cy.getTestId('collapse-visible-content').should('contain.text', visibleContent)
     // hidden by default
-    cy.getTestId('k-collapse-hidden-content').should('not.be.visible')
+    cy.getTestId('collapse-hidden-content').should('not.be.visible')
     // visible when clicked
-    cy.getTestId('k-collapse-trigger-content').click()
-    cy.getTestId('k-collapse-hidden-content').should('be.visible')
-    cy.getTestId('k-collapse-hidden-content').should('contain.text', collapseContent)
+    cy.getTestId('collapse-trigger-content').click()
+    cy.getTestId('collapse-hidden-content').should('be.visible')
+    cy.getTestId('collapse-hidden-content').should('contain.text', collapseContent)
   })
 })