fix(app-layout): rename apppageinfosection component

packages/core/app-layout/docs/page-info-section.md

@@ -1,4 +1,4 @@
-# PageInfoSection.vue
+# AppPageInfoSection.vue
 
 A Kong UI simple optionally collapsible section component.
 

packages/core/app-layout/sandbox/pages/LayoutPage.vue

@@ -109,27 +109,27 @@
     <p>This is the top.</p>
 
     <div class="collapsible-sections-container">
-      <PageInfoSection
+      <AppPageInfoSection
         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?
-      </PageInfoSection>
+      </AppPageInfoSection>
 
-      <PageInfoSection
+      <AppPageInfoSection
         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?
-      </PageInfoSection>
+      </AppPageInfoSection>
 
       <KComponent
         v-slot="{ data }"
         :data="{ toggleModel: true }"
       >
-        <PageInfoSection
+        <AppPageInfoSection
           :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?
-        </PageInfoSection>
+        </AppPageInfoSection>
       </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 PageInfoSection from '../../src/components/pageInfoSection/PageInfoSection.vue'
+import AppPageInfoSection from '../../src/components/pageInfoSection/AppPageInfoSection.vue'
 
 const userNameAndEmail = ref<string>('Jackie Jiang\[email protected]')
 

packages/core/app-layout/src/components/pageInfoSection/PageInfoSection.cy.ts → packages/core/app-layout/src/components/pageInfoSection/AppPageInfoSection.cy.ts

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

packages/core/app-layout/src/components/pageInfoSection/PageInfoSection.vue → packages/core/app-layout/src/components/pageInfoSection/AppPageInfoSection.vue

@@ -1,28 +1,28 @@
 <template>
   <component
     :is="collapsible ? 'details' : 'div'"
-    class="page-info-section"
-    data-testid="page-info-section"
+    class="app-page-info-section"
+    data-testid="app-page-info-section"
   >
     <component
       :is="collapsible ? 'summary' : 'div'"
-      class="page-info-section-header"
-      data-testid="page-info-section-header"
+      class="app-page-info-section-header"
+      data-testid="app-page-info-section-header"
     >
       <slot name="header">
-        <div class="page-info-section-default-header">
+        <div class="app-page-info-section-default-header">
           <component
             :is="titleTag"
             v-if="title"
-            class="page-info-section-title"
-            data-testid="page-info-section-title"
+            class="app-page-info-section-title"
+            data-testid="app-page-info-section-title"
           >
             {{ title }}
           </component>
           <div
             v-if="description"
-            class="page-info-section-description"
-            data-testid="page-info-section-description"
+            class="app-page-info-section-description"
+            data-testid="app-page-info-section-description"
           >
             {{ description }}
           </div>
@@ -31,7 +31,7 @@
 
       <ChevronRightIcon
         v-if="collapsible"
-        class="page-info-section-chevron-icon"
+        class="app-page-info-section-chevron-icon"
         decorative
       />
       <slot
@@ -42,8 +42,8 @@
 
     <div
       v-if="$slots.default"
-      class="page-info-section-content"
-      data-testid="page-info-section-content"
+      class="app-page-info-section-content"
+      data-testid="app-page-info-section-content"
     >
       <slot name="default" />
     </div>
@@ -78,32 +78,32 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-.page-info-section {
+.app-page-info-section {
   border: $kui-border-width-10 solid $kui-color-border;
   border-radius: $kui-border-radius-30;
 
-  .page-info-section-header {
+  .app-page-info-section-header {
     align-items: center;
     display: flex;
     gap: $kui-space-20;
     justify-content: space-between;
     padding: $kui-space-70;
 
-    .page-info-section-default-header {
+    .app-page-info-section-default-header {
       display: flex;
       flex-direction: column;
       gap: $kui-space-40;
       max-width: 700px;
 
-      .page-info-section-title {
+      .app-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;
       }
 
-      .page-info-section-description {
+      .app-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({
     }
   }
 
-  .page-info-section-content {
+  .app-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.page-info-section {
+details.app-page-info-section {
   overflow: auto;
 
   &[open] {
-    .page-info-section-chevron-icon {
+    .app-page-info-section-chevron-icon {
       transform: rotate(90deg);
     }
   }
@@ -158,10 +158,10 @@ details.page-info-section {
     }
   }
 
-  .page-info-section-header {
+  .app-page-info-section-header {
     cursor: pointer;
 
-    .page-info-section-chevron-icon {
+    .app-page-info-section-chevron-icon {
       flex-shrink: 0;
       pointer-events: none;
       transition: transform $kui-animation-duration-20 ease;

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 PageInfoSection from './components/pageInfoSection/PageInfoSection.vue'
+import AppPageInfoSection from './components/pageInfoSection/AppPageInfoSection.vue'
 
 // Export Vue plugin as the default
 export default {
@@ -29,7 +29,7 @@ export {
   AppPageHeader,
   AppSidebar,
   SidebarToggle,
-  PageInfoSection,
+  AppPageInfoSection,
 }
 
 export * from './types'