fix(slideout): Header updates [khcp-7919] (#1539)

fix(slideout): Design Updates [khcp-7919]
Kong · Aug 1, 2023 · 9f23472 · 9f23472
1 parent c83cfe8
commit 9f23472
Show file tree

Hide file tree

Showing 5 changed files with 315 additions and 38 deletions.
diff --git a/docs/components/slideout.md b/docs/components/slideout.md
@@ -18,12 +18,11 @@ Below we demonstrate wrapping `KSlideout` in the [`KToggle`](/components/renderl
       </div>
       <KButton appearance="primary">Buttons</KButton>
       <KCard class="vertical-spacing">
-        <template v-slot:body>
+        <template #body>
           Something in a KCard
         </template>
       </KCard>
       <KAlert
-        appearance="info"
         alert-message="Or even an alert!"
         class="vertical-spacing" />
     </KSlideout>
@@ -45,12 +44,11 @@ Below we demonstrate wrapping `KSlideout` in the [`KToggle`](/components/renderl
       </div>
       <KButton appearance="primary">Buttons</KButton>
       <KCard class="vertical-spacing">
-        <template v-slot:body>
+        <template #body>
           Something in a KCard
         </template>
       </KCard>
       <KAlert
-        appearance="info"
         alert-message="Or even an alert!"
         class="vertical-spacing" />
     </KSlideout>
@@ -64,9 +62,113 @@ Below we demonstrate wrapping `KSlideout` in the [`KToggle`](/components/renderl
 
 Tells the component whether or not to render the open panel.
 
+### closeButtonAlignment
+
+Controls the close button alignment, can be `start` (default) or `end`.
+
+### offsetTop
+
+Allows a host app to define the offset from the top of the page, expects a `number` and that will be converted to `px`, defaults to `0px`.
+
+### hasOverlay
+
+Tells the component whether or not to enable / disable overlay when the slideout content is visible, defaults to `true`.
+
+<KToggle v-slot="{ isToggled, toggle }">
+  <div>
+    <KButton @click="toggle">Toggle Panel With Disabled Overlay</KButton>
+    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end">
+      <div>
+        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
+        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
+      </div>
+      <KButton appearance="primary">Buttons</KButton>
+      <KCard class="vertical-spacing">
+        <template #body>
+          Something in a KCard
+        </template>
+      </KCard>
+      <KAlert
+        alert-message="Or even an alert!"
+        class="vertical-spacing" />
+    </KSlideout>
+  </div>
+</KToggle>
+
+```html
+<KToggle v-slot="{ isToggled, toggle }">
+  <div>
+    <KButton @click="toggle">Toggle Panel</KButton>
+        <KSlideout :is-visible="isToggled.value" @close="toggle" has-overlay close-button-alignment="end">
+      <div>
+        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
+        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
+      </div>
+      <KButton appearance="primary">Buttons</KButton>
+      <KCard class="vertical-spacing">
+        <template #body>
+          Something in a KCard
+        </template>
+      </KCard>
+      <KAlert
+        alert-message="Or even an alert!"
+        class="vertical-spacing" />
+    </KSlideout>
+  </div>
+</KToggle>
+```
+
+### title
+
+This prop takes a string that will be displayed as the title of the slide-out.
+
+<KToggle v-slot="{ isToggled, toggle }">
+  <div>
+    <KButton @click="toggle">Toggle Panel With Title</KButton>
+    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end" title="GET/account/kong.admin.servicekjagfabxncbadrtyuwefef">
+      <div>
+        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
+        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
+      </div>
+      <KButton appearance="primary">Buttons</KButton>
+      <KCard class="vertical-spacing">
+        <template #body>
+          Something in a KCard
+        </template>
+      </KCard>
+      <KAlert
+        alert-message="Or even an alert!"
+        class="vertical-spacing" />
+    </KSlideout>
+  </div>
+</KToggle>
+
+```html
+<KToggle v-slot="{ isToggled, toggle }">
+  <div>
+    <KButton @click="toggle">Toggle Panel With Title</KButton>
+    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end" title="GET/account/kong.admin.servicekjagfabxncbadrtyuwefef">
+      <div>
+        <h2>Not only can you put any html in here like the paragraph below but you can also use other components</h2>
+        <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
+      </div>
+      <KButton appearance="primary">Buttons</KButton>
+      <KCard class="vertical-spacing">
+        <template #body>
+          Something in a KCard
+        </template>
+      </KCard>
+      <KAlert
+        alert-message="Or even an alert!"
+        class="vertical-spacing" />
+    </KSlideout>
+  </div>
+</KToggle>
+```
+
 ## Slots
 
-There is one default slot which is used to place content into the slideout panel.
+- `default` - used to place content into the slideout panel
 
 ```html
 <KSlideout :is-visible="isToggled" @close="toggle">
@@ -77,9 +179,12 @@ There is one default slot which is used to place content into the slideout panel
 </KSlideout>
 ```
 
+- `before-title` - used to customize the header to add content before title
+- `after-title` - used to customize the header to add content after title
+
 ## Events
 
-- `@close` - Emitted when the close button is clicked, anything outside the panel is clicked, or the `esc` key is pressed.
+- `close` - Emitted when the close button is clicked, anything outside the panel is clicked, or the `esc` key is pressed.
 
 <style lang="scss" scoped>
 .vertical-spacing {

diff --git a/src/components/KSlideout/KSlideout.cy.ts b/src/components/KSlideout/KSlideout.cy.ts
@@ -20,16 +20,54 @@ describe('KSlideout', () => {
     cy.get('p').should('be.visible')
   })
 
-  it('emits close when panel-background is clicked', () => {
+  it('renders props when passed', () => {
+    const titleProp = 'Hello!'
+    const closeButtonAlignmentProp = 'end'
+
     mount(KSlideout, {
       props: {
         isVisible: true,
+        title: titleProp,
+        closeButtonAlignment: closeButtonAlignmentProp,
       },
     })
 
-    cy.get('.panel-background').click({ force: true }).then(() => {
-      cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'close')
+    cy.getTestId('k-slideout-title').should('exist')
+    cy.getTestId('k-slideout-title').should('be.visible')
+  })
+
+  it('renders cancel button on right when prop is used', () => {
+    const closeButtonAlignmentProp = 'end'
+
+    mount(KSlideout, {
+      props: {
+        isVisible: true,
+        closeButtonAlignment: closeButtonAlignmentProp,
+      },
     })
+
+    cy.getTestId('close-button-end').should('exist')
+    cy.getTestId('close-button-end').should('be.visible')
+  })
+
+  it('emits close when panel-background is clicked', () => {
+    mount(KSlideout, {
+      props: {
+        isVisible: true,
+        onClose: cy.spy().as('onCloseSpy'),
+      },
+    }).then(({ wrapper }) => wrapper)
+      .as('vueWrapper')
+
+    cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(KSlideout)
+      .vm.$emit('close', true))
+
+    cy.get('@onCloseSpy').should('have.been.called')
+
+    cy.get('.panel-background').click({ force: true })
+      .then(() => {
+        cy.get('@onCloseSpy').should('have.been.called')
+      })
   })
 
   it('emits close when esc key pressed', () => {