fix: address pr feedback

Kong · Jan 10, 2025 · cb05edc · cb05edc
1 parent db78ca0
commit cb05edc
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 57 deletions.
diff --git a/...re/app-layout/docs/collapsible-section.md → ...core/app-layout/docs/page-info-section.md b/...re/app-layout/docs/collapsible-section.md → ...core/app-layout/docs/page-info-section.md
@@ -1,6 +1,6 @@
-# CollapsibleSection.vue
+# PageInfoSection.vue
 
-A Kong UI simple collapsible section component.
+A Kong UI simple optionally collapsible section component.
 
 - [Requirements](#requirements)
 - [Usage](#usage)

diff --git a/packages/core/app-layout/sandbox/pages/LayoutPage.vue b/packages/core/app-layout/sandbox/pages/LayoutPage.vue
@@ -109,27 +109,27 @@
     <p>This is the top.</p>
 
     <div class="collapsible-sections-container">
-      <CollapsibleSection
+      <PageInfoSection
         description="This is a collapsible section that's rendered collapsed by default. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
         title="Collapsible section"
       >
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae. Repellat quam voluptas vitae, maxime consequuntur praesentium et suscipit. Numquam aliquid nulla vel esse accusantium reiciendis error?
-      </CollapsibleSection>
+      </PageInfoSection>
 
-      <CollapsibleSection
+      <PageInfoSection
         description="This is a collapsible section that's rendered open by default. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
         open
         title="Collapsible section"
         title-tag="h2"
       >
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae. Repellat quam voluptas vitae, maxime consequuntur praesentium et suscipit. Numquam aliquid nulla vel esse accusantium reiciendis error?
-      </CollapsibleSection>
+      </PageInfoSection>
 
       <KComponent
         v-slot="{ data }"
         :data="{ toggleModel: true }"
       >
-        <CollapsibleSection
+        <PageInfoSection
           :collapsible="false"
           description="This is a non-collapsible section with a toggle in the header. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
           title="Non-collapsible section"
@@ -139,7 +139,7 @@
           </template>
 
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae. Repellat quam voluptas vitae, maxime consequuntur praesentium et suscipit. Numquam aliquid nulla vel esse accusantium reiciendis error?
-        </CollapsibleSection>
+        </PageInfoSection>
       </KComponent>
     </div>
 
@@ -164,7 +164,7 @@ import AppGruceLogo from '../components/icons/AppGruceLogo.vue'
 import AppLogo from '../components/icons/AppLogo.vue'
 import { OverviewIcon, RuntimesIcon, ServiceHubIcon, MeshIcon, DevPortalIcon, BarChartIcon, PeopleIcon, CogIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
-import CollapsibleSection from '../../src/components/collapsibleSection/CollapsibleSection.vue'
+import PageInfoSection from '../../src/components/pageInfoSection/PageInfoSection.vue'
 
 const userNameAndEmail = ref<string>('Jackie Jiang\n[email protected]')
 

diff --git a/...llapsibleSection/CollapsibleSection.cy.ts → ...nts/pageInfoSection/PageInfoSection.cy.ts b/...llapsibleSection/CollapsibleSection.cy.ts → ...nts/pageInfoSection/PageInfoSection.cy.ts
@@ -1,12 +1,12 @@
-import CollapsibleSection from './CollapsibleSection.vue'
+import PageInfoSection from './PageInfoSection.vue'
 
-describe('<CollapsibleSection />', () => {
+describe('<PageInfoSection />', () => {
   describe('as a collapsible section', () => {
     it('renders a collapsible section', () => {
       const title = 'Collapsible section'
       const description = 'This is a collapsible section.'
 
-      cy.mount(CollapsibleSection, {
+      cy.mount(PageInfoSection, {
         props: {
           title,
           description,
@@ -17,24 +17,24 @@ describe('<CollapsibleSection />', () => {
         },
       })
 
-      cy.getTestId('collapsible-section').should('be.visible').and('not.have.attr', 'open')
+      cy.getTestId('page-info-section').should('be.visible').and('not.have.attr', 'open')
       // verify correct HTML tag
-      cy.getTestId('collapsible-section').should('have.prop', 'tagName').and('eq', 'DETAILS')
-      cy.getTestId('collapsible-section').findTestId('slotted-hidden-content').should('not.be.visible')
+      cy.getTestId('page-info-section').should('have.prop', 'tagName').and('eq', 'DETAILS')
+      cy.getTestId('page-info-section').findTestId('slotted-hidden-content').should('not.be.visible')
 
       // verify correct content
-      cy.getTestId('collapsible-section-title').should('be.visible').and('have.text', title)
-      cy.getTestId('collapsible-section-description').should('be.visible').and('have.text', description)
+      cy.getTestId('page-info-section-title').should('be.visible').and('have.text', title)
+      cy.getTestId('page-info-section-description').should('be.visible').and('have.text', description)
 
       // verify correct HTML tag
-      cy.getTestId('collapsible-section-header').should('have.prop', 'tagName').and('eq', 'SUMMARY')
-      cy.getTestId('collapsible-section-header').find('.collapsible-section-chevron-icon').should('be.visible')
+      cy.getTestId('page-info-section-header').should('have.prop', 'tagName').and('eq', 'SUMMARY')
+      cy.getTestId('page-info-section-header').find('.page-info-section-chevron-icon').should('be.visible')
     })
 
     it('expands and collapses the section when clicking the header', () => {
       const slottedContentTestId = 'slotted-hidden-content'
 
-      cy.mount(CollapsibleSection, {
+      cy.mount(PageInfoSection, {
         props: {
           title: 'Collapsible section',
           collapsible: true,
@@ -45,15 +45,15 @@ describe('<CollapsibleSection />', () => {
       })
 
       // expand the section
-      cy.getTestId('collapsible-section-header').click()
+      cy.getTestId('page-info-section-header').click()
 
-      cy.getTestId('collapsible-section').should('have.attr', 'open')
+      cy.getTestId('page-info-section').should('have.attr', 'open')
       cy.getTestId(slottedContentTestId).should('be.visible')
 
       // collapse the section
-      cy.getTestId('collapsible-section-header').click()
+      cy.getTestId('page-info-section-header').click()
 
-      cy.getTestId('collapsible-section').should('not.have.attr', 'open')
+      cy.getTestId('page-info-section').should('not.have.attr', 'open')
       cy.getTestId(slottedContentTestId).should('not.be.visible')
     })
   })
@@ -63,7 +63,7 @@ describe('<CollapsibleSection />', () => {
       const title = 'Non-collapsible section'
       const slottedContentTestId = 'slotted-always-visible-content'
 
-      cy.mount(CollapsibleSection, {
+      cy.mount(PageInfoSection, {
         props: {
           title,
           collapsible: false,
@@ -73,23 +73,23 @@ describe('<CollapsibleSection />', () => {
         },
       })
 
-      cy.getTestId('collapsible-section').as('details')
-      cy.getTestId('collapsible-section-header').as('summary')
+      cy.getTestId('page-info-section').as('details')
+      cy.getTestId('page-info-section-header').as('summary')
 
       // verify correct HTML tag
-      cy.getTestId('collapsible-section').should('have.prop', 'tagName').and('eq', 'DIV')
-      cy.getTestId('collapsible-section').findTestId(slottedContentTestId).should('be.visible')
+      cy.getTestId('page-info-section').should('have.prop', 'tagName').and('eq', 'DIV')
+      cy.getTestId('page-info-section').findTestId(slottedContentTestId).should('be.visible')
 
-      cy.getTestId('collapsible-section-header').should('be.visible').and('have.text', title)
+      cy.getTestId('page-info-section-header').should('be.visible').and('have.text', title)
       // verify correct HTML tag
-      cy.getTestId('collapsible-section-header').should('have.prop', 'tagName').and('eq', 'DIV')
-      cy.getTestId('collapsible-section-header').find('.collapsible-section-chevron-icon').should('not.exist')
+      cy.getTestId('page-info-section-header').should('have.prop', 'tagName').and('eq', 'DIV')
+      cy.getTestId('page-info-section-header').find('.page-info-section-chevron-icon').should('not.exist')
     })
 
     it('renders actions slot', () => {
       const slottedActionsTestId = 'slotted-action-button'
 
-      cy.mount(CollapsibleSection, {
+      cy.mount(PageInfoSection, {
         props: {
           title: 'Non-collapsible section',
           collapsible: false,

diff --git a/...collapsibleSection/CollapsibleSection.vue → ...nents/pageInfoSection/PageInfoSection.vue b/...collapsibleSection/CollapsibleSection.vue → ...nents/pageInfoSection/PageInfoSection.vue
@@ -1,28 +1,28 @@
 <template>
   <component
     :is="collapsible ? 'details' : 'div'"
-    class="collapsible-section"
-    data-testid="collapsible-section"
+    class="page-info-section"
+    data-testid="page-info-section"
   >
     <component
       :is="collapsible ? 'summary' : 'div'"
-      class="collapsible-section-header"
-      data-testid="collapsible-section-header"
+      class="page-info-section-header"
+      data-testid="page-info-section-header"
     >
       <slot name="header">
-        <div class="collapsible-section-default-header">
+        <div class="page-info-section-default-header">
           <component
             :is="titleTag"
             v-if="title"
-            class="collapsible-section-title"
-            data-testid="collapsible-section-title"
+            class="page-info-section-title"
+            data-testid="page-info-section-title"
           >
             {{ title }}
           </component>
           <div
             v-if="description"
-            class="collapsible-section-description"
-            data-testid="collapsible-section-description"
+            class="page-info-section-description"
+            data-testid="page-info-section-description"
           >
             {{ description }}
           </div>
@@ -31,7 +31,7 @@
 
       <ChevronRightIcon
         v-if="collapsible"
-        class="collapsible-section-chevron-icon"
+        class="page-info-section-chevron-icon"
         decorative
       />
       <slot
@@ -42,8 +42,8 @@
 
     <div
       v-if="$slots.default"
-      class="collapsible-section-content"
-      data-testid="collapsible-section-content"
+      class="page-info-section-content"
+      data-testid="page-info-section-content"
     >
       <slot name="default" />
     </div>
@@ -78,32 +78,32 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-.collapsible-section {
+.page-info-section {
   border: $kui-border-width-10 solid $kui-color-border;
   border-radius: $kui-border-radius-30;
 
-  .collapsible-section-header {
+  .page-info-section-header {
     align-items: center;
     display: flex;
     gap: $kui-space-20;
     justify-content: space-between;
     padding: $kui-space-70;
 
-    .collapsible-section-default-header {
+    .page-info-section-default-header {
       display: flex;
       flex-direction: column;
       gap: $kui-space-40;
       max-width: 700px;
 
-      .collapsible-section-title {
+      .page-info-section-title {
         color: $kui-color-text;
         font-size: $kui-font-size-40;
         font-weight: $kui-font-weight-bold;
         line-height: $kui-line-height-30;
         margin: $kui-space-0;
       }
 
-      .collapsible-section-description {
+      .page-info-section-description {
         color: $kui-color-text-neutral;
         font-size: $kui-font-size-30;
         line-height: $kui-line-height-30;
@@ -112,7 +112,7 @@ defineProps({
     }
   }
 
-  .collapsible-section-content {
+  .page-info-section-content {
     background: $kui-color-background-neutral-weakest;
     border-top: $kui-border-width-10 solid $kui-color-border;
     display: flex;
@@ -137,11 +137,11 @@ defineProps({
   }
 }
 
-details.collapsible-section {
+details.page-info-section {
   overflow: auto;
 
   &[open] {
-    .collapsible-section-chevron-icon {
+    .page-info-section-chevron-icon {
       transform: rotate(90deg);
     }
   }
@@ -158,10 +158,10 @@ details.collapsible-section {
     }
   }
 
-  .collapsible-section-header {
+  .page-info-section-header {
     cursor: pointer;
 
-    .collapsible-section-chevron-icon {
+    .page-info-section-chevron-icon {
       flex-shrink: 0;
       pointer-events: none;
       transition: transform $kui-animation-duration-20 ease;

diff --git a/packages/core/app-layout/src/index.ts b/packages/core/app-layout/src/index.ts
@@ -8,7 +8,7 @@ import AppNavbar from './components/navbar/AppNavbar.vue'
 import AppPageHeader from './components/pageHeader/AppPageHeader.vue'
 import AppSidebar from './components/sidebar/AppSidebar.vue'
 import SidebarToggle from './components/sidebar/SidebarToggle.vue'
-import CollapsibleSection from './components/collapsibleSection/CollapsibleSection.vue'
+import PageInfoSection from './components/pageInfoSection/PageInfoSection.vue'
 
 // Export Vue plugin as the default
 export default {
@@ -29,7 +29,7 @@ export {
   AppPageHeader,
   AppSidebar,
   SidebarToggle,
-  CollapsibleSection,
+  PageInfoSection,
 }
 
 export * from './types'