From bc49526af3081854ee65757f0fb41a6c27bcfa57 Mon Sep 17 00:00:00 2001
From: Amirah Chamble <Amirah.Chamble@users.noreply.github.com>
Date: Thu, 10 Jan 2019 15:24:34 -0500
Subject: [PATCH] feat: removed Modals  scss files and added styles within
 Modals  component

---
 src/components/FishTankModal.vue   | 251 +++++++++++++++++++++++++----
 src/styles.scss                    |   1 -
 src/styles/components/_modals.scss | 186 ---------------------
 3 files changed, 223 insertions(+), 215 deletions(-)
 delete mode 100644 src/styles/components/_modals.scss

diff --git a/src/components/FishTankModal.vue b/src/components/FishTankModal.vue
index a3b1843..95dc3da 100644
--- a/src/components/FishTankModal.vue
+++ b/src/components/FishTankModal.vue
@@ -1,58 +1,58 @@
 <template>
-  <div class="ft-modal__entry-point">
+  <div class="modal__entry-point">
     <div
       ref="content"
       :class="classObj"
-      class="ft-modal"
+      class="modal"
     >
       <div
         v-if="escapeable"
-        class="ft-modal__escapable-background"
+        class="modal__escapable-background"
         @click="close"
       />
       <div
         :style="styles"
-        class="ft-modal__container"
+        class="modal__container"
       >
         <div
-          class="ft-modal__heading"
+          class="modal__heading"
         >
-          <div class="ft-modal__heading-title-container">
+          <div class="modal__heading-title-container">
             <div
               v-if="$slots.headingIcon"
-              class="ft-modal__heading-icon-wrapper"
+              class="modal__heading-icon-wrapper"
               tabindex="-1"
             >
               <div 
-                class="ft-modal__heading-icon" 
+                class="modal__heading-icon" 
                 tabindex="-1">
                 <slot name="headingIcon"/>
               </div>
             </div>
             <div
               v-if="heading"
-              class="ft-modal__heading-title"
+              class="modal__heading-title"
             >
               {{ heading }}
             </div>
           </div>
           <div
             v-if="$slots.headingExtra"
-            class="ft-modal__heading-extra"
+            class="modal__heading-extra"
           >
             <slot 
               name="headingExtra"/>
           </div>
-          <div class="ft-modal__close">
+          <div class="modal__close">
             <span
               v-if="!dialog"
-              class="ft-modal__close-separator"
+              class="modal__close-separator"
             />
-            <div class="ft-modal__close-icon-wrapper">
+            <div class="modal__close-icon-wrapper">
               <Close24
                 tabindex="0"
                 aria-label="Close Modal"
-                class="ft-modal__close-icon"
+                class="modal__close-icon"
                 @click="close"
                 @keydown.enter="accessibilityClick"
               />
@@ -60,23 +60,23 @@
           </div>
         </div>
 
-        <div class="ft-modal__body">
+        <div class="modal__body">
           <slot/>
         </div>
 
         <div
           v-if="showFooter"
-          class="ft-modal__footer"
+          class="modal__footer"
         >
           <div
             v-if="$slots.footer"
-            class="ft-modal__footer-container"
+            class="modal__footer-container"
           >
             <slot name="footer"/>
           </div>
           <div
             v-else-if="$slots.footerLeft || $slots.footerRight"
-            class="ft-modal__footer-container"
+            class="modal__footer-container"
           >
             <div>
               <slot 
@@ -99,7 +99,7 @@ import Detachable from '@/util/detachable'
 import { Close24 } from '@fishtank/icons-vue'
 
 let overlayTimeout: null | number = null
-let overlay: null | HTMLElement = document.querySelector('.ft-overlay')
+let overlay: null | HTMLElement = document.querySelector('.overlay')
 
 export default Vue.extend({
   components: {
@@ -167,9 +167,9 @@ export default Vue.extend({
     },
     classObj() : Record<any, any> {
       let classObj : Record<string, boolean> = {
-        'ft-modal--active': this.active,
-        'ft-modal--fixed': this.fixed,
-        'ft-modal--dialog': this.dialog,
+        'modal--active': this.active,
+        'modal--fixed': this.fixed,
+        'modal--dialog': this.dialog,
       }
 
       // This is a bit of a hack, but since our rendered modal doesn't actually appear
@@ -178,7 +178,7 @@ export default Vue.extend({
       // custom classes from the top-level item onto the actual modal div.
       if (this.$el) {
         let parentClasses = this.$el.className.split(' ').forEach((classVal) => {
-          if(classVal !== "ft-modal__entry-point") {
+          if(classVal !== "modal__entry-point") {
             classObj[classVal] = true
           }
         })
@@ -236,17 +236,17 @@ export default Vue.extend({
         this.clearTimeout()
 
         return overlay ?
-                !!overlay.classList.add('ft-overlay--active') :
+                !!overlay.classList.add('overlay--active') :
                 false
       }
 
       if (!overlay) {
-        overlay = document.querySelector('.ft-overlay') as HTMLElement | null
+        overlay = document.querySelector('.overlay') as HTMLElement | null
       }
       if (!overlay) {
         overlay = document.createElement('div')
       }
-      overlay.className = 'ft-overlay'
+      overlay.className = 'overlay'
 
       this.hideScroll()
 
@@ -256,7 +256,7 @@ export default Vue.extend({
       overlay.clientHeight // Force repaint
       requestAnimationFrame(() => {
         if (!overlay) return
-        overlay.className += ' ft-overlay--active'
+        overlay.className += ' overlay--active'
       })
 
       return true
@@ -266,7 +266,7 @@ export default Vue.extend({
         return this.showScroll()
       }
 
-      overlay.classList.remove('ft-overlay--active')
+      overlay.classList.remove('overlay--active')
 
       overlayTimeout = window.setTimeout(() => {
         // IE11 Fix
@@ -412,3 +412,198 @@ export default Vue.extend({
   }
 })
 </script>
+
+<style lang="scss">
+
+  @import '../styles/mixins';
+  @import "../../node_modules/@fishtank/colors/dist/index";
+  @import "../../node_modules/@fishtank/type/dist/index";
+
+  $modal-border: 1px solid $color-gray-lighter;
+
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal__escapable-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.modal__container {
+  position: relative;
+	box-sizing: border-box;
+  border: $modal-border;
+	border-radius: 2px;
+	background-color: $color-white;
+  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.4);
+  width: 100%;
+  overflow: hidden;
+  max-width: 500px;
+  max-height: calc(100% - (36px * 2));
+  display: flex;
+  flex-direction: column;
+  z-index: 1002;
+}
+
+.modal--active {
+  display: flex;
+}
+
+.modal--fixed {
+  .modal__container {
+    height: 100%;
+  }
+}
+
+.modal__heading {
+  padding: $baseline * 3;
+  background-color: $color-gray-lightest;
+  box-sizing: border-box;
+  border-bottom: $modal-border;
+  border-radius: 2px 2px 0 0;
+  height: $baseline * 12;
+  min-height: $baseline * 12;
+  font-size: $fontsize-base-lg;
+  line-height: $lineheight-base-lg;
+  font-family: $font-primary;
+  font-weight: $fontweight-semi;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  white-space: nowrap;
+}
+
+.modal__heading,
+.modal__footer {
+  box-sizing: border-box;
+}
+
+.modal__footer {
+  padding: $baseline * 3;
+  white-space: nowrap;
+}
+
+.modal__footer-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal__heading-title-container {
+  display: flex;
+  align-items: center;
+}
+
+.modal__heading-icon {
+  display: flex;
+}
+
+.modal__heading-icon-wrapper  + .modal__heading-title {
+  margin-left: 8px;
+}
+
+.modal__heading-extra {
+  flex: 0 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 12px;
+}
+
+.modal__close {
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+}
+
+.modal__close-separator {
+  display: inline-block;
+  width: 1px;
+  height: 32px;
+  background-color: $color-gray-lighter;
+}
+
+.modal__close-icon-wrapper {
+  padding-left: 12px;
+  display: flex;
+}
+
+.modal__close-icon {
+  cursor: pointer;
+}
+
+.modal__body {
+  padding: $baseline * 3;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.modal--fixed {
+  .modal__footer {
+    padding: $baseline * 3;
+    background-color: $color-gray-lightest;
+    border-top: $modal-border;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .modal__body {
+    flex: 1 100%;
+  }
+}
+
+.modal--dialog {
+  .modal__heading {
+    background-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0 $baseline * 3;
+  }
+}
+
+@include breakpoint-sm-or-lesser {
+  .modal__container {
+    height: 100%;
+    max-height: 100%;
+  }
+
+  .modal__body {
+    flex: 1 100%;
+  }
+
+  .modal--fixed {
+    .modal__footer {
+      padding-bottom: $baseline * 3;
+    }
+  }
+}
+
+.overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  background-color: rgba(black, 0.5)
+}
+
+.overlay--active {
+  display: block;
+}
+
+</style>
diff --git a/src/styles.scss b/src/styles.scss
index e68d2b2..2bdab80 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -5,7 +5,6 @@
 @import "./styles/components/buttons";
 @import "./styles/components/cards";
 @import "./styles/components/input-text";
-@import "./styles/components/modals";
 @import "./styles/components/tags";
 @import "./styles/components/spinner";
 @import "./styles/components/buttongroup";
diff --git a/src/styles/components/_modals.scss b/src/styles/components/_modals.scss
deleted file mode 100644
index bc398fa..0000000
--- a/src/styles/components/_modals.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-$modal-border: 1px solid $color-gray-lighter;
-
-
-.ft-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  display: none;
-  justify-content: center;
-  align-items: center;
-}
-
-.ft-modal__escapable-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  cursor: pointer;
-}
-
-.ft-modal__container {
-  position: relative;
-	box-sizing: border-box;
-  border: $modal-border;
-	border-radius: 2px;
-	background-color: $color-white;
-  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.4);
-  width: 100%;
-  overflow: hidden;
-  max-width: 500px;
-  max-height: calc(100% - (36px * 2));
-  display: flex;
-  flex-direction: column;
-  z-index: 1002;
-}
-
-.ft-modal--active {
-  display: flex;
-}
-
-.ft-modal--fixed {
-  .ft-modal__container {
-    height: 100%;
-  }
-}
-
-.ft-modal__heading {
-  padding: $baseline * 3;
-  background-color: $color-gray-lightest;
-  box-sizing: border-box;
-  border-bottom: $modal-border;
-  border-radius: 2px 2px 0 0;
-  height: $baseline * 12;
-  min-height: $baseline * 12;
-  font-size: $fontsize-base-lg;
-  line-height: $lineheight-base-lg;
-  font-family: $font-primary;
-  font-weight: $fontweight-semi;
-  display: flex;
-  align-content: center;
-  justify-content: space-between;
-  white-space: nowrap;
-}
-
-.ft-modal__heading,
-.ft-modal__footer {
-  box-sizing: border-box;
-}
-
-.ft-modal__footer {
-  padding: $baseline * 3;
-  white-space: nowrap;
-}
-
-.ft-modal__footer-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.ft-modal__heading-title-container {
-  display: flex;
-  align-items: center;
-}
-
-.ft-modal__heading-icon {
-  display: flex;
-}
-
-.ft-modal__heading-icon-wrapper  + .ft-modal__heading-title {
-  margin-left: 8px;
-}
-
-.ft-modal__heading-extra {
-  flex: 0 100%;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-right: 12px;
-}
-
-.ft-modal__close {
-  display: flex;
-  align-items: center;
-  margin-left: 12px;
-}
-
-.ft-modal__close-separator {
-  display: inline-block;
-  width: 1px;
-  height: 32px;
-  background-color: $color-gray-lighter;
-}
-
-.ft-modal__close-icon-wrapper {
-  padding-left: 12px;
-  display: flex;
-}
-
-.ft-modal__close-icon {
-  cursor: pointer;
-}
-
-.ft-modal__body {
-  padding: $baseline * 3;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.ft-modal--fixed {
-  .ft-modal__footer {
-    padding: $baseline * 3;
-    background-color: $color-gray-lightest;
-    border-top: $modal-border;
-    border-radius: 0 0 2px 2px;
-  }
-
-  .ft-modal__body {
-    flex: 1 100%;
-  }
-}
-
-.ft-modal--dialog {
-  .ft-modal__heading {
-    background-color: transparent;
-    padding-left: 0;
-    padding-right: 0;
-    margin: 0 $baseline * 3;
-  }
-}
-
-@include breakpoint-sm-or-lesser {
-  .ft-modal__container {
-    height: 100%;
-    max-height: 100%;
-  }
-
-  .ft-modal__body {
-    flex: 1 100%;
-  }
-
-  .ft-modal--fixed {
-    .ft-modal__footer {
-      padding-bottom: $baseline * 3;
-    }
-  }
-}
-
-.ft-overlay {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 999;
-  background-color: rgba(black, 0.5)
-}
-
-.ft-overlay--active {
-  display: block;
-}
\ No newline at end of file