From a63121e947c802c95cb02f880129e7e5314438b6 Mon Sep 17 00:00:00 2001
From: Kai Arrowood <kai.arrowood@konghq.com>
Date: Mon, 18 Apr 2022 17:51:39 -0400
Subject: [PATCH] feat(kmodalfullscreen): vue 3 upgrade (#585)

Port `KModalFullscreen` component.
---
 docs/.vuepress/config.ts                      |   1 +
 docs/components/modal-fullscreen.md           | 432 ++++++++++++++++++
 .../KModalFullscreen/KModalFullscreen.spec.ts |  92 ++++
 .../KModalFullscreen/KModalFullscreen.vue     | 357 +++++++++++++++
 src/components/index.ts                       |   1 +
 5 files changed, 883 insertions(+)
 create mode 100644 docs/components/modal-fullscreen.md
 create mode 100644 src/components/KModalFullscreen/KModalFullscreen.spec.ts
 create mode 100644 src/components/KModalFullscreen/KModalFullscreen.vue

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index c79078ac59..e28c685533 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -109,6 +109,7 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
               '/components/label',
               '/components/menu',
               '/components/modal',
+              '/components/modal-fullscreen',
               '/components/pagination',
               '/components/popover',
               '/components/prompt',
diff --git a/docs/components/modal-fullscreen.md b/docs/components/modal-fullscreen.md
new file mode 100644
index 0000000000..83829df330
--- /dev/null
+++ b/docs/components/modal-fullscreen.md
@@ -0,0 +1,432 @@
+# Modal Fullscreen
+
+The **KModalFullscreen** component is used to show content in a full screen modal on top of existing UI.
+
+<KButton appearance="primary" @click="defaultIsOpen = true">Open Modal</KButton>
+
+<KModalFullscreen title="Hello There!" :isVisible="defaultIsOpen" @canceled="defaultIsOpen = false" @proceed="defaultIsOpen = false">
+  <p>Proin in magna quam. Sed congue diam nec libero pretium, at lobortis erat dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse id gravida tellus. Quisque venenatis ligula lobortis dui viverra, sed pellentesque quam molestie. Nulla viverra vel nunc ut blandit. Donec eget luctus nisl, ut dapibus risus. Nulla eros diam, finibus eu dignissim id, vehicula eu odio. Sed egestas eu sem a vestibulum. In nisl mi, tincidunt ut mi eu, suscipit faucibus eros.</p>
+  <p>Curabitur semper vitae neque elementum imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi urna felis, feugiat vitae quam quis, rhoncus vestibulum est. Vivamus diam neque, dictum vel urna nec, faucibus aliquet ipsum. Integer sodales ornare purus, sit amet efficitur elit. Fusce feugiat pharetra mollis. Proin sit amet metus sed massa laoreet feugiat eu id enim. Duis egestas lectus in dapibus accumsan.</p>
+  <p>Maecenas rutrum molestie dolor, sit amet volutpat sapien tristique vitae. Nam tortor nulla, malesuada vel lacus ut, consectetur sagittis nisi. Vestibulum convallis rhoncus ipsum, vitae porta nulla pharetra quis. Nam tristique eget metus sit amet blandit. Suspendisse porta nunc ut dapibus finibus. In hac habitasse platea dictumst. Morbi vel lectus vulputate, cursus augue ultrices, vulputate massa. Pellentesque bibendum et augue et placerat. Duis a est et quam blandit ornare. Phasellus quis mi eget magna vehicula pharetra eu et nunc. In hac habitasse platea dictumst. Nam eleifend purus ante, in porta mauris vulputate eget. Nunc in nulla aliquet metus vehicula rhoncus.</p>
+  <p>Praesent fringilla sapien vitae faucibus vestibulum. Integer viverra hendrerit purus quis consequat. Phasellus dolor enim, interdum in faucibus ut, congue eu quam. Donec eu metus eget eros accumsan feugiat. Donec a magna posuere, sagittis eros ac, bibendum erat. Donec aliquet velit et nunc mattis tincidunt. Nam eu nibh nec purus pretium fermentum. Proin interdum nunc ac turpis blandit, sed malesuada lectus convallis. Morbi quis aliquet lorem, non ultrices quam. Aliquam et consectetur lorem. Nam ac nisl tellus. Duis id nunc lectus. Etiam semper auctor enim, id hendrerit nisl vulputate nec.</p>
+  <p>Nunc ante orci, tempus a fringilla quis, interdum et nisi. Nulla a dui ut leo scelerisque rhoncus. Suspendisse iaculis, orci quis congue sollicitudin, orci ligula tempus nisl, consequat elementum urna elit sit amet orci. Pellentesque in feugiat massa, ac dapibus nunc. Etiam dapibus vehicula elit, a sollicitudin nulla fringilla in. Pellentesque lobortis arcu lectus, sit amet fringilla quam pretium sit amet. Sed mi turpis, bibendum quis tincidunt vel, mattis finibus lorem. Ut imperdiet ultrices libero in dictum. Duis elementum imperdiet erat in feugiat. Nam tempor interdum tellus non auctor. Quisque sed sodales purus. Nunc eu est ac elit aliquet euismod. Fusce pellentesque, lorem sed elementum placerat, dolor felis scelerisque quam, ut placerat elit dolor sit amet dui.</p>
+  <p>Cras porttitor malesuada lorem vel malesuada. Fusce at hendrerit enim. Suspendisse potenti. Nullam interdum maximus dolor, et commodo urna imperdiet condimentum. Nunc hendrerit arcu eu libero sodales, sed auctor nibh sodales. Nunc mattis tortor eleifend, rutrum justo non, malesuada massa. Integer aliquet accumsan ex, et consequat urna egestas pretium.</p>
+</KModalFullscreen>
+
+```vue
+<KButton appearance="primary" @click="defaultIsOpen = true">Open Modal</KButton>
+
+<KModalFullscreen
+  title="Hello There!"
+  :isVisible="defaultIsOpen"
+  @canceled="defaultIsOpen = false"
+  @proceed="defaultIsOpen = false">
+  <p>{{ alotOfText }}</p>
+</KModalFullscreen>
+
+<script>
+export default {
+  data () {
+    return {
+      defaultIsOpen: false
+    }
+  }
+}
+</script>
+```
+
+## Props
+
+### iconString
+
+Name of KIcon to be displayed in the header.
+
+### title
+
+Title displayed in header. This prop is required for accessibility purposes even if you are slotting the title.
+
+### bodyHeader
+
+Text to display for the title in the body section.
+
+### bodyHeaderDescription
+
+Text to display beneath the `bodyHeader` as a description.
+
+### isVisible
+
+Tells the component whether or not to render modal.
+
+### cancelButtonText
+
+Change the text content of the close/cancel button.
+
+### cancelButtonAppearance
+
+Sets the [appearance](/components/button.html#props) of the close/cancel button.
+
+### actionButtonText
+
+Change the text content of the save/proceed button.
+
+### actionButtonAppearance
+
+Change the [appearance](/components/button.html#props) of the save/proceed button.
+
+<KButton appearance="primary" @click="contentIsOpen = true">Open Modal</KButton>
+
+<KModalFullscreen title="Hello There!" :isVisible="contentIsOpen" @canceled="contentIsOpen = false" @proceed="contentIsOpen = false" cancelButtonText="Abort" cancelButtonAppearance="secondary">
+  <p>Maecenas rutrum molestie dolor, sit amet volutpat sapien tristique vitae. Nam tortor nulla, malesuada vel lacus ut, consectetur sagittis nisi. Vestibulum convallis rhoncus ipsum, vitae porta nulla pharetra quis. Nam tristique eget metus sit amet blandit. Suspendisse porta nunc ut dapibus finibus. In hac habitasse platea dictumst. Morbi vel lectus vulputate, cursus augue ultrices, vulputate massa. Pellentesque bibendum et augue et placerat. Duis a est et quam blandit ornare. Phasellus quis mi eget magna vehicula pharetra eu et nunc. In hac habitasse platea dictumst. Nam eleifend purus ante, in porta mauris vulputate eget. Nunc in nulla aliquet metus vehicula rhoncus.</p>
+  <p>Praesent fringilla sapien vitae faucibus vestibulum. Integer viverra hendrerit purus quis consequat. Phasellus dolor enim, interdum in faucibus ut, congue eu quam. Donec eu metus eget eros accumsan feugiat. Donec a magna posuere, sagittis eros ac, bibendum erat. Donec aliquet velit et nunc mattis tincidunt. Nam eu nibh nec purus pretium fermentum. Proin interdum nunc ac turpis blandit, sed malesuada lectus convallis. Morbi quis aliquet lorem, non ultrices quam. Aliquam et consectetur lorem. Nam ac nisl tellus. Duis id nunc lectus. Etiam semper auctor enim, id hendrerit nisl vulputate nec.</p>
+  <p>Nunc ante orci, tempus a fringilla quis, interdum et nisi. Nulla a dui ut leo scelerisque rhoncus. Suspendisse iaculis, orci quis congue sollicitudin, orci ligula tempus nisl, consequat elementum urna elit sit amet orci. Pellentesque in feugiat massa, ac dapibus nunc. Etiam dapibus vehicula elit, a sollicitudin nulla fringilla in. Pellentesque lobortis arcu lectus, sit amet fringilla quam pretium sit amet. Sed mi turpis, bibendum quis tincidunt vel, mattis finibus lorem. Ut imperdiet ultrices libero in dictum. Duis elementum imperdiet erat in feugiat. Nam tempor interdum tellus non auctor. Quisque sed sodales purus. Nunc eu est ac elit aliquet euismod. Fusce pellentesque, lorem sed elementum placerat, dolor felis scelerisque quam, ut placerat elit dolor sit amet dui.</p>
+</KModalFullscreen>
+
+```vue
+<KButton appearance="primary" @click="contentIsOpen = true">Open Modal</KButton>
+
+<KModalFullscreen
+  title="Hello There!"
+  :isVisible="contentIsOpen"
+  @canceled="contentIsOpen = false"
+  @proceed="contentIsOpen = false"
+  cancelButtonText="Abort"
+  cancelButtonAppearance="secondary">
+  <p>Maecenas rutrum molestie dolor, sit amet volutpat sapien tristique vitae. Nam tortor nulla, malesuada vel lacus ut, consectetur sagittis nisi. Vestibulum convallis rhoncus ipsum, vitae porta nulla pharetra quis. Nam tristique eget metus sit amet blandit. Suspendisse porta nunc ut dapibus finibus. In hac habitasse platea dictumst. Morbi vel lectus vulputate, cursus augue ultrices, vulputate massa. Pellentesque bibendum et augue et placerat. Duis a est et quam blandit ornare. Phasellus quis mi eget magna vehicula pharetra eu et nunc. In hac habitasse platea dictumst. Nam eleifend purus ante, in porta mauris vulputate eget. Nunc in nulla aliquet metus vehicula rhoncus.</p>
+  <p>Praesent fringilla sapien vitae faucibus vestibulum. Integer viverra hendrerit purus quis consequat. Phasellus dolor enim, interdum in faucibus ut, congue eu quam. Donec eu metus eget eros accumsan feugiat. Donec a magna posuere, sagittis eros ac, bibendum erat. Donec aliquet velit et nunc mattis tincidunt. Nam eu nibh nec purus pretium fermentum. Proin interdum nunc ac turpis blandit, sed malesuada lectus convallis. Morbi quis aliquet lorem, non ultrices quam. Aliquam et consectetur lorem. Nam ac nisl tellus. Duis id nunc lectus. Etiam semper auctor enim, id hendrerit nisl vulputate nec.</p>
+  <p>Nunc ante orci, tempus a fringilla quis, interdum et nisi. Nulla a dui ut leo scelerisque rhoncus. Suspendisse iaculis, orci quis congue sollicitudin, orci ligula tempus nisl, consequat elementum urna elit sit amet orci. Pellentesque in feugiat massa, ac dapibus nunc. Etiam dapibus vehicula elit, a sollicitudin nulla fringilla in. Pellentesque lobortis arcu lectus, sit amet fringilla quam pretium sit amet. Sed mi turpis, bibendum quis tincidunt vel, mattis finibus lorem. Ut imperdiet ultrices libero in dictum. Duis elementum imperdiet erat in feugiat. Nam tempor interdum tellus non auctor. Quisque sed sodales purus. Nunc eu est ac elit aliquet euismod. Fusce pellentesque, lorem sed elementum placerat, dolor felis scelerisque quam, ut placerat elit dolor sit amet dui.</p>
+</KModalFullscreen>
+```
+
+## Slots
+
+There are 6 designated slots you can use to display content in the fullscreen modal.
+
+- `default` - modal body content
+- `header-icon`
+- `header-content` - title text in the header
+- `action-buttons` - contains action buttons which are right-aligned. If not used, provide default Cancel/Submit buttons
+- `body-header` - title to display in the body section
+- `body-header-description` - description text displayed beneath the `body-header`
+
+<KButton appearance="primary" @click="exampleIsOpen = true">Open Fullscreen Modal</KButton>
+
+<KModalFullscreen :isVisible="exampleIsOpen" title="Install Plugin" @canceled="exampleIsOpen = false">
+  <template v-slot:header-icon>
+    <KIcon icon="immunity" />
+  </template>
+  <template v-slot:header-content>
+    Install Plugin
+  </template>
+  <template v-slot:body-header>
+    Select a plugin
+  </template>
+  <template v-slot:body-header-description>
+    Choose a plugin from our catalog to install for your organization. <a>View documentation</a>
+  </template>
+  <template v-slot:action-buttons>
+    <KButton appearance="secondary" size="medium" @click="exampleIsOpen = false" class="mr-2">Back</KButton>
+    <KButton appearance="primary" size="medium" @click="exampleIsOpen = false">Save</KButton>
+  </template>
+  <h3>Security</h3>
+  <KCatalog :fetcher="() => getItems(8)" />
+  <h3>Authentication</h3>
+  <KCatalog :fetcher="() => getItems(16)" />
+</KModalFullscreen>
+
+```vue
+<KButton appearance="primary" @click="exampleIsOpen = true">Open Fullscreen Modal</KButton>
+
+<KModalFullscreen
+  :isVisible="exampleIsOpen"
+  title="Install Plugin"
+  @canceled="exampleIsOpen = false">
+  <template v-slot:header-icon>
+    <KIcon icon="immunity" />
+  </template>
+  <template v-slot:header-content>
+    Install Plugin
+  </template>
+  <template v-slot:body-header>
+    Select a plugin
+  </template>
+  <template v-slot:body-header-description>
+    Choose a plugin from our catalog to install for your organization. <a>View documentation</a>
+  </template>
+  <template v-slot:action-buttons>
+    <KButton appearance="secondary" size="medium" @click="exampleIsOpen = false">Back</KButton>
+    <KButton appearance="primary" size="medium" @click="exampleIsOpen = false">Save</KButton>
+  </template>
+  <h3>Security</h3>
+  <KCatalog :fetcher="() => getItems(8)" />
+  <h3>Authentication</h3>
+  <KCatalog :fetcher="() => getItems(16)" />
+</KModalFullscreen>
+```
+
+<KButton appearance="primary" @click="sampleIsOpen = true">Open Form Modal</KButton>
+
+<KModalFullscreen :isVisible="sampleIsOpen" title="Install Plugin" @canceled="sampleIsOpen = false" @proceed="sampleIsOpen = false" cancelButtonAppearance="secondary" actionButtonText="Delete" actionButtonAppearance="danger">
+  <template v-slot:header-content>
+    Install Plugin
+  </template>
+   <template v-slot:body-header>
+    <div class="ml-25">Configure a key auth plugin</div>
+  </template>
+  <template v-slot:body-header-description>
+    <div class="ml-25">Lorem ipsum factum. <a>View documentation</a></div>
+  </template>
+  <template v-slot:action-buttons>
+    <KButton size="medium" @click="sampleIsOpen = false" class="mr-2">Back</KButton>
+    <KButton appearance="creation" size="medium" @click="sampleIsOpen = false">Save</KButton>
+  </template>
+  <div class="ml-25">
+    <KInputSwitch v-model="checked" label="This plugin is enabled" class="display-items" />
+    <br><br>
+    <div class="wrapper display-items">
+      <input type="text" placeholder="Enter list of tags">
+      <label for="">Tags</label>
+    </div>
+    <p class="help display-items">e.g., tag1, tag2, tag3</p>
+    <div class="wrapper display-items">
+      <input type="text" >
+      <label for="">Config anonymous</label>
+    </div>
+    <br><br>
+    <KCheckbox v-model="checkedBox1" class="checked display-items">
+      Config key in body
+    </KCheckbox>
+    <br><br>
+    <KCheckbox v-model="checkedBox2" class="checked display-items">
+      Config key in header
+    </KCheckbox>
+    <br><br>
+    <KCheckbox v-model="checkedBox3" class="checked display-items">
+      Config key in query
+    </KCheckbox>
+    <br><br>
+    <KCheckbox v-model="checkedBox4" class="checked display-items">
+      Config hide credentials
+    </KCheckbox>
+    <br><br>
+    <div class="wrapper display-items">
+      <input type="text" placeholder="0" />
+      <label for="">Health checks active healthy interval</label>
+    </div>
+    <br><br>
+    <KCheckbox v-model="checkedBox5" class="checked display-items">
+      Config run on preflight
+    </KCheckbox>
+  </div>
+</KModalFullscreen>
+
+```vue
+<KButton appearance="primary" @click="sampleIsOpen = true">Open Form Modal</KButton>
+
+<KModalFullscreen
+  :isVisible="sampleIsOpen"
+  title="Install Plugin"
+  @canceled="sampleIsOpen = false"
+  @proceed="sampleIsOpen = false"
+  cancelButtonAppearance="secondary"
+  actionButtonText="Delete"
+  actionButtonAppearance="danger">
+  <template v-slot:header-content>
+    Install Plugin
+  </template>
+   <template v-slot:body-header>
+    <div class="ml-25">Configure a key auth plugin</div>
+  </template>
+  <template v-slot:body-header-description>
+    <div class="ml-25">Lorem ipsum factum. <a>View documentation</a></div>
+  </template>
+  <template v-slot:action-buttons>
+    <KButton size="medium" @click="sampleIsOpen = false">Back</KButton>
+    <KButton appearance="creation" size="medium" @click="sampleIsOpen = false">Save</KButton>
+  </template>
+  <div class="ml-25">
+    <KInputSwitch v-model="checked" label="This plugin is enabled" class="display-items" />
+    <br><br>
+    <div class="wrapper display-items">
+      <input type="text" placeholder="Enter list of tags">
+      <label for="">Tags</label>
+    </div>
+    <p class="help display-items">e.g., tag1, tag2, tag3</p>
+    <div class="wrapper display-items">
+      <input type="text" >
+      <label for="">Config anonymous</label>
+    </div>
+    <br><br>
+    <KCheckbox v-model="checkedBox1" class="checked display-items">
+      Config key in body
+    </KCheckbox>
+    <br><br>
+    <KCheckbox v-model="checkedBox2" class="checked display-items">
+      Config key in header
+    </KCheckbox>
+    <br><br>
+    <KCheckbox v-model="checkedBox3" class="checked display-items">
+      Config key in query
+    </KCheckbox>
+    <br><br>
+    <KCheckbox v-model="checkedBox4" class="checked display-items">
+      Config hide credentials
+    </KCheckbox>
+    <br><br>
+    <div class="wrapper display-items">
+      <input type="text" placeholder="0" />
+      <label for="">Health checks active healthy interval</label>
+    </div>
+    <br><br>
+    <KCheckbox v-model="checkedBox5" class="checked display-items">
+      Config run on preflight
+    </KCheckbox>
+  </div>
+</KModalFullscreen>
+```
+
+## Events
+
+- `@canceled` - Emitted when cancel/close button is clicked or the Escape key is pressed
+- `@proceed` - Emitted when action button is clicked or the Enter key is pressed
+
+## Theming
+
+| Variable | Purpose
+|:-------- |:-------
+| `--KModalFullscreenMaxWidth` | Modal max width
+| `--KModalFullscreenHeaderColor` | Header text color
+| `--KModalFullscreenHeaderSize` | Header font size
+| `--KModalFullscreenHeaderWeight` | Header font weight
+| `--KModalFullscreenColor`| Main content text color
+| `--KModalFullscreenFontSize`| Main content text size
+
+An Example of changing the the colors of KModalFullscreen might look like.
+> Note: We are scoping the overrides to a wrapper in this example
+
+<KButton appearance="primary" @click="themeIsOpen = true">Open Modal</KButton>
+
+<div class="modal-wrapper">
+  <KModalFullscreen
+    title="Hello There!"
+    :isVisible="themeIsOpen"
+    @canceled="themeIsOpen = false"
+    @proceed="themeIsOpen = false">
+    <p>Proin in magna quam. Sed congue diam nec libero pretium, at lobortis erat dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse id gravida tellus. Quisque venenatis ligula lobortis dui viverra, sed pellentesque quam molestie. Nulla viverra vel nunc ut blandit. Donec eget luctus nisl, ut dapibus risus. Nulla eros diam, finibus eu dignissim id, vehicula eu odio. Sed egestas eu sem a vestibulum. In nisl mi, tincidunt ut mi eu, suscipit faucibus eros.</p>
+    <p>Curabitur semper vitae neque elementum imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi urna felis, feugiat vitae quam quis, rhoncus vestibulum est. Vivamus diam neque, dictum vel urna nec, faucibus aliquet ipsum. Integer sodales ornare purus, sit amet efficitur elit. Fusce feugiat pharetra mollis. Proin sit amet metus sed massa laoreet feugiat eu id enim. Duis egestas lectus in dapibus accumsan.</p>
+    <p>Maecenas rutrum molestie dolor, sit amet volutpat sapien tristique vitae. Nam tortor nulla, malesuada vel lacus ut, consectetur sagittis nisi. Vestibulum convallis rhoncus ipsum, vitae porta nulla pharetra quis. Nam tristique eget metus sit amet blandit. Suspendisse porta nunc ut dapibus finibus. In hac habitasse platea dictumst. Morbi vel lectus vulputate, cursus augue ultrices, vulputate massa. Pellentesque bibendum et augue et placerat. Duis a est et quam blandit ornare. Phasellus quis mi eget magna vehicula pharetra eu et nunc. In hac habitasse platea dictumst. Nam eleifend purus ante, in porta mauris vulputate eget. Nunc in nulla aliquet metus vehicula rhoncus.</p>
+    <p>Praesent fringilla sapien vitae faucibus vestibulum. Integer viverra hendrerit purus quis consequat. Phasellus dolor enim, interdum in faucibus ut, congue eu quam. Donec eu metus eget eros accumsan feugiat. Donec a magna posuere, sagittis eros ac, bibendum erat. Donec aliquet velit et nunc mattis tincidunt. Nam eu nibh nec purus pretium fermentum. Proin interdum nunc ac turpis blandit, sed malesuada lectus convallis. Morbi quis aliquet lorem, non ultrices quam. Aliquam et consectetur lorem. Nam ac nisl tellus. Duis id nunc lectus. Etiam semper auctor enim, id hendrerit nisl vulputate nec.</p>
+    <p>Nunc ante orci, tempus a fringilla quis, interdum et nisi. Nulla a dui ut leo scelerisque rhoncus. Suspendisse iaculis, orci quis congue sollicitudin, orci ligula tempus nisl, consequat elementum urna elit sit amet orci. Pellentesque in feugiat massa, ac dapibus nunc. Etiam dapibus vehicula elit, a sollicitudin nulla fringilla in. Pellentesque lobortis arcu lectus, sit amet fringilla quam pretium sit amet. Sed mi turpis, bibendum quis tincidunt vel, mattis finibus lorem. Ut imperdiet ultrices libero in dictum. Duis elementum imperdiet erat in feugiat. Nam tempor interdum tellus non auctor. Quisque sed sodales purus. Nunc eu est ac elit aliquet euismod. Fusce pellentesque, lorem sed elementum placerat, dolor felis scelerisque quam, ut placerat elit dolor sit amet dui.</p>
+    <p>Cras porttitor malesuada lorem vel malesuada. Fusce at hendrerit enim. Suspendisse potenti. Nullam interdum maximus dolor, et commodo urna imperdiet condimentum. Nunc hendrerit arcu eu libero sodales, sed auctor nibh sodales. Nunc mattis tortor eleifend, rutrum justo non, malesuada massa. Integer aliquet accumsan ex, et consequat urna egestas pretium.</p>
+  </KModalFullscreen>
+</div>
+
+```vue
+
+<KButton appearance="primary" @click="themeIsOpen = true">Open Modal</KButton>
+
+<div class="modal-wrapper">
+  <KModalFullscreen
+    title="Hello There!"
+    :isVisible="themeIsOpen"
+    @canceled="themeIsOpen = false"
+    @proceed="themeIsOpen = false" >
+    <p>{{ soMuchText1 }}</p>
+    <p>{{ soMuchText2 }}</p>
+    <p>{{ soMuchText3 }}</p>
+    <p>{{ soMuchText4 }}</p>
+    <p>{{ soMuchText5 }}</p>
+  </KModalFullscreen>
+</div>
+
+<style>
+.modal-wrapper {
+  --KModalFullscreenHeaderColor: red;
+  --KModalFullscreenColor: green;
+}
+</style>
+```
+
+<script>
+function getItems(count) {
+  let myItems = []
+    for (let i = 0; i < count; i++) {
+      myItems.push({
+      title: "Item " + i,
+      description: "The item's description for number " + i
+      })
+    }
+  return myItems
+}
+
+export default {
+  data () {
+    return {
+      checked: true,
+      checkedBox1: false,
+      checkedBox2: true,
+      checkedBox3: false,
+      checkedBox4: true,
+      checkedBox5: true,
+      defaultIsOpen: false,
+      exampleIsOpen: false,
+      themeIsOpen: false,
+      sampleIsOpen: false,
+      getItems,
+      contentIsOpen: false
+    }
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-wrapper {
+  --KModalFullscreenHeaderColor: red;
+  --KModalFullscreenColor: green;
+}
+
+.ml-25 {
+  margin-left: 25%;
+}
+
+.k-switch {
+  border-top: 1px solid #eaecef;
+  padding-top: 26px;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 26px;
+}
+
+.display {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.display-items {
+  width: 50%;
+}
+
+.wrapper {
+  position: relative;
+  height: 56px;
+
+  input {
+    width: 100%;
+    height: 80%;
+    border-radius: 4px;
+    border: 1px solid var(--grey-300);
+    background-color: var(--white);
+    text-indent: 10px;
+  }
+
+  label {
+    position: absolute;
+    top: -10px;
+    left: 15px;
+    padding: 5px;
+    background-color: var(--white);
+    color: var(--grey-500);
+    font-size: 11px;
+  }
+}
+</style>
diff --git a/src/components/KModalFullscreen/KModalFullscreen.spec.ts b/src/components/KModalFullscreen/KModalFullscreen.spec.ts
new file mode 100644
index 0000000000..d1a3968172
--- /dev/null
+++ b/src/components/KModalFullscreen/KModalFullscreen.spec.ts
@@ -0,0 +1,92 @@
+// Import types for custom commands
+/// <reference types="../../cypress/support" />
+
+import { mount } from '@cypress/vue'
+import { h } from 'vue'
+import KModalFullscreen from '@/components/KModalFullscreen/KModalFullscreen.vue'
+
+describe('KModalFullscreen', () => {
+  it('renders proper content when using slots', () => {
+    const headerIcon = 'This is some header icon text'
+    const headerText = 'This is some header text'
+    const bodyHeader = 'This is some body header text'
+    const bodyHeaderDescription = 'This is some body header description text'
+    const bodyText = 'This is some body text'
+
+    mount(KModalFullscreen, {
+      props: {
+        isVisible: true,
+        title: headerText,
+      },
+      slots: {
+        'header-icon': () => h('div', {}, headerIcon),
+        'header-content': () => h('div', {}, headerText),
+        'body-header': () => h('div', {}, bodyHeader),
+        'body-header-description': () => h('div', {}, bodyHeaderDescription),
+        default: () => h('div', {}, bodyText),
+      },
+    })
+
+    cy.get('.k-modal-fullscreen-title .header-icon').should('contain', headerIcon)
+    cy.get('.k-modal-fullscreen-header').should('contain', headerText)
+    cy.get('.k-modal-fullscreen-body-header .body-header').should('contain', bodyHeader)
+    cy.get('.k-modal-fullscreen-body-header .body-header-description').should('contain', bodyHeaderDescription)
+    cy.get('.k-modal-fullscreen-body').should('contain', bodyText)
+  })
+
+  it('renders proper content when using action-buttons slot', () => {
+    const actionButtonsText = 'This is some action buttons text'
+
+    mount(KModalFullscreen, {
+      props: {
+        isVisible: true,
+        title: 'Test Me',
+      },
+      slots: {
+        'action-buttons': h('div', {}, actionButtonsText),
+      },
+    })
+
+    cy.get('.k-modal-fullscreen-action').should('contain', actionButtonsText)
+  })
+
+  it('renders proper content when using props', () => {
+    const title = 'Sweet prop title'
+    const actionButtonText = 'Sweet prop actionButton'
+    const cancelButtonText = 'Sweet prop cancelButton'
+    const bodyHeader = 'Sweet prop bodyHeader'
+    const bodyHeaderDescription = 'Sweet prop bodyHeaderDescription'
+
+    mount(KModalFullscreen, {
+      props: {
+        isVisible: true,
+        title,
+        actionButtonText,
+        cancelButtonText,
+        bodyHeader,
+        bodyHeaderDescription,
+        iconString: 'immunity',
+      },
+    })
+
+    cy.get('.k-modal-fullscreen-title .header-icon .kong-icon-immunity').should('be.visible')
+    cy.get('.proceed-button').should('contain', actionButtonText)
+    cy.get('.cancel-button').should('contain', cancelButtonText)
+    cy.get('.k-modal-fullscreen-header').should('contain', title)
+    cy.get('.k-modal-fullscreen-body-header .body-header').should('contain', bodyHeader)
+    cy.get('.k-modal-fullscreen-body-header .body-header-description').should('contain', bodyHeaderDescription)
+  })
+
+  it('emits close when hitting escape', () => {
+    mount(KModalFullscreen, {
+      props: {
+        title: 'Test Me',
+        isVisible: true,
+      },
+    })
+
+    cy.get('body').type('{esc}').then(() => {
+      cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'canceled')
+    })
+  })
+})
diff --git a/src/components/KModalFullscreen/KModalFullscreen.vue b/src/components/KModalFullscreen/KModalFullscreen.vue
new file mode 100644
index 0000000000..b289a45564
--- /dev/null
+++ b/src/components/KModalFullscreen/KModalFullscreen.vue
@@ -0,0 +1,357 @@
+<template>
+  <div
+    v-if="isVisible"
+    :aria-label="title"
+    class="k-modal-fullscreen isOpen"
+    role="dialog"
+    aria-modal="true"
+    @keyup.esc="close"
+    @keyup.enter="proceed"
+  >
+    <div
+      ref="modalBodyContent"
+      class="k-modal-fullscreen-dialog"
+      tabindex="0"
+    >
+      <div class="k-modal-fullscreen-body-header">
+        <div
+          v-if="$slots['body-header'] || bodyHeader"
+          class="body-header"
+        >
+          <slot name="body-header">
+            {{ bodyHeader }}
+          </slot>
+        </div>
+        <div
+          v-if="$slots['body-header-description'] || bodyHeaderDescription"
+          class="body-header-description"
+        >
+          <slot name="body-header-description">
+            {{ bodyHeaderDescription }}
+          </slot>
+        </div>
+      </div>
+
+      <div class="k-modal-fullscreen-body">
+        <slot name="default" />
+      </div>
+
+      <!-- Header at the bottom to allow proper tabindex -->
+      <div class="k-modal-fullscreen-header">
+        <div
+          class="k-modal-fullscreen-header-description"
+          role="heading"
+          aria-level="2"
+        >
+          <div class="k-modal-fullscreen-title">
+            <span class="header-icon pr-2 my-auto">
+              <slot name="header-icon">
+                <KIcon :icon="iconString" />
+              </slot>
+            </span>
+            <span class="header-content my-auto">
+              <slot name="header-content">{{ title }}</slot>
+            </span>
+          </div>
+          <div class="k-modal-fullscreen-action ml-3">
+            <div class="k-modal-fullscreen-action-buttons">
+              <slot name="action-buttons">
+                <KButton
+                  :appearance="cancelButtonAppearance"
+                  class="cancel-button"
+                  @click="close"
+                >
+                  {{ cancelButtonText }}
+                </KButton>
+                <KButton
+                  :appearance="actionButtonAppearance"
+                  class="proceed-button"
+                  @click="proceed"
+                >
+                  {{ actionButtonText }}
+                </KButton>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref, computed, onMounted, onUnmounted, onBeforeUnmount, nextTick } from 'vue'
+import KButton from '@/components/KButton/KButton.vue'
+import KIcon from '@/components/KIcon/KIcon.vue'
+
+export default defineComponent({
+  name: 'KModalFullscreen',
+  components: { KButton, KIcon },
+  props: {
+    /**
+     * Set the text of the title, if using title slot
+     */
+    title: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Set the title in the body
+     */
+    bodyHeader: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Text to display as a description of the body's title
+     */
+    bodyHeaderDescription: {
+      type: String,
+      default: '',
+    },
+    /**
+      *  Pass whether or not the modal should be visible
+      */
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Set the text of the close/cancel button
+     */
+    cancelButtonText: {
+      type: String,
+      default: 'Cancel',
+    },
+    /**
+     * Set the text of the action/proceed button
+     */
+    actionButtonText: {
+      type: String,
+      default: 'Save',
+    },
+    /**
+     * Set the appearance of the action/proceed button
+     */
+    actionButtonAppearance: {
+      type: String,
+      default: 'primary',
+    },
+    /**
+     * Set the appearance of the close/cancel button
+     */
+    cancelButtonAppearance: {
+      type: String,
+      default: 'outline',
+    },
+    /**
+      *  Pass the type of icon for the header on the left
+      */
+    iconString: {
+      type: String,
+      default: 'kong',
+    },
+  },
+  emits: ['canceled', 'proceed'],
+  setup(props, { emit }) {
+    const modalBodyContent = ref(null)
+    const isOpen = computed(() => {
+      return !!props.isVisible
+    })
+
+    watch(() => props.isVisible, async () => {
+      if (isOpen.value) {
+        document.body.style.overflow = 'hidden'
+
+        await nextTick()
+
+        if (modalBodyContent.value) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          modalBodyContent.value.focus()
+        }
+      } else {
+        document.body.style.overflow = ''
+      }
+    })
+
+    const handleKeydown = (e: any) => {
+      if (props.isVisible) {
+        if (e.keyCode === 27) { // `esc` key
+          close()
+        } else if (e.keyCode === 13) { // `enter` key
+          proceed()
+        }
+      }
+    }
+
+    const close = () => {
+      emit('canceled')
+    }
+
+    const proceed = () => {
+      emit('proceed')
+    }
+
+    onMounted(() => {
+      document.addEventListener('keydown', handleKeydown)
+    })
+
+    onBeforeUnmount(() => {
+      document.removeEventListener('keydown', handleKeydown)
+    })
+
+    onUnmounted(() => {
+      document.body.style.overflow = ''
+    })
+
+    return {
+      isOpen,
+      modalBodyContent,
+      handleKeydown,
+      close,
+      proceed,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables';
+$screen-sm: 768px;
+$screen-md: 992px;
+$fullscreen-modal-padding: 64px;
+
+.k-modal-fullscreen-dialog {
+  padding-top: $fullscreen-modal-padding * 2;
+  background: var(--white);
+  z-index: 9999;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+
+  @media only screen and (min-width: ($screen-sm + 1px)) {
+    padding-top: $fullscreen-modal-padding;
+  }
+}
+
+.k-modal-fullscreen-header {
+  position: fixed;
+  display: flex;
+  top: 0;
+  width: 100%;
+  flex-direction: column;
+  padding: var(--spacing-lg) 0;
+  background-color: var(--white);
+  border-bottom: 1px solid var(--grey-300);
+
+  .k-modal-fullscreen-header-description {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--KModalFullscreenHeaderSize, 20px);
+    font-weight: var(--KModalFullscreenHeaderWeight, 500);
+    color: var(--KModalFullscreenHeaderColor, var(--black-500, color(black-500)));
+  }
+
+  .k-modal-fullscreen-body {
+    text-align: center;
+    position: relative;
+    flex: 1 1 auto;
+    font-size: var(--KModalFullscreenFontSize, 13px);
+    line-height: 20px;
+  }
+}
+
+.k-modal-fullscreen-title {
+  display: inline-flex;
+  position: relative;
+  margin-left: 36px;
+}
+
+.k-modal-fullscreen-action {
+  display: inline-flex;
+  margin-right: var(--spacing-xl, spacing(xl));
+
+  & button {
+    height: 40px;
+    margin-left: var(--spacing-md, spacing(md));
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 13px;
+  }
+}
+
+.header-icon {
+  margin-right: 6px;
+  border-right: 1px solid var(--grey-300);
+}
+
+.k-modal-fullscreen-body-header,
+.k-modal-fullscreen-body {
+  color: var(--KModalFullscreenColor, var(--black-500, color(black-500)));
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+
+  @media only screen and (min-width: ($screen-sm + 1px)) {
+    padding-left: 120px;
+    padding-right: 120px;
+  }
+
+  @media only screen and (min-width: ($screen-md + 1px)) {
+    padding-left: 230px;
+    padding-right: 230px;
+  }
+}
+
+.k-modal-fullscreen-body-header {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.k-modal-fullscreen-body {
+  padding-bottom: var(--spacing-lg);
+  @media only screen and (min-width: ($screen-sm + 1px)) {
+    padding-bottom: $fullscreen-modal-padding;
+  }
+}
+
+.k-modal-fullscreen-body-header {
+  margin-top: $fullscreen-modal-padding;
+  margin-bottom: 54px;
+
+  .body-header {
+    font-size: 32px;
+    line-height: 32px;
+    font-weight: 600;
+    margin-bottom: -4px;
+  }
+
+  .body-header-description {
+    font-weight: 200;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--grey-600);
+    margin-top: var(--spacing-md);
+  }
+}
+
+.k-modal-fullscreen-body-description h2 {
+  border: none;
+}
+
+.k-modal-fullscreen.isOpen .k-modal-fullscreen-dialog {
+  overflow-y: auto;
+}
+
+.header-content {
+  display: inline-block;
+  margin-top: var(--spacing-xxs, spacing(xxs))
+}
+
+.k-modal-fullscreen-action-buttons {
+  margin-left: auto;
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index da5518682a..93cd39669f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -26,6 +26,7 @@ export { default as KLabel } from './KLabel/KLabel.vue'
 export { default as KMenu } from './KMenu/KMenu.vue'
 export { default as KMenuItem } from './KMenu/KMenuItem.vue'
 export { default as KModal } from './KModal/KModal.vue'
+export { default as KModalFullscreen } from './KModalFullscreen/KModalFullscreen.vue'
 export { default as KPagination } from './KPagination/KPagination.vue'
 export { default as KPop } from './KPop/KPop.vue'
 export { default as KPrompt } from './KPrompt/KPrompt.vue'