From b16fe24ddc82ed56ca69116f04dd89ca3ab4b1ce Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Mon, 6 Aug 2018 16:54:12 -0400
Subject: [PATCH] Working modal component

---
 js/index.js                     | 19 ++++++++++++++++++-
 styles/core/_util.scss          |  4 ++++
 templates/components/modal.html | 26 ++++++++++++--------------
 templates/styleguide.html       | 31 ++++++++++++++-----------------
 4 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/js/index.js b/js/index.js
index 0c122a10..1ec66270 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,6 +1,23 @@
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
 
-import './example'
+const app = new Vue({
+  el: '#vue-root',
+  methods: {
+    closeModal: function(name) {
+      this.modals[name] = false
+    },
+    openModal: function (name) {
+      this.modals[name] = true
+    }
+  },
+  data: function() {
+    return {
+      modals: {
+        styleguideModal: false,
+      }
+    }
+  }
+})
 
 console.log('hello from index')
diff --git a/styles/core/_util.scss b/styles/core/_util.scss
index 48957b6c..c041db1e 100644
--- a/styles/core/_util.scss
+++ b/styles/core/_util.scss
@@ -31,3 +31,7 @@
 @mixin line-max {
   max-width: 45em;
 }
+
+[v-cloak] {
+  display: none
+}
diff --git a/templates/components/modal.html b/templates/components/modal.html
index c6918a0e..aedebd42 100644
--- a/templates/components/modal.html
+++ b/templates/components/modal.html
@@ -1,23 +1,21 @@
 {% from "components/icon.html" import Icon %}
 
 {% macro Modal(name, dismissable=False) -%}
-  <Modal inline-template ref={{ name }}>
-    <div v-if='active'>
-      <div class='modal' v-on:click='handleDismiss'>
-        <div class='modal__dialog' role='dialog' aria-modal='true'>
+<div v-if='modals.{{name}} === true' v-cloak>
+    <div class='modal'>
+      <div class='modal__dialog' role='dialog' aria-modal='true'>
 
-          {% if dismissable %}
-            <button class='icon-link modal__dismiss' v-on:click='handleDismiss'>
-              {{ Icon('x') }}
-              <span>Close</span>
-            </button>
-          {% endif %}
+        {% if dismissable %}
+          <button class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
+            {{ Icon('x') }}
+            <span>Close</span>
+          </button>
+        {% endif %}
 
-          <div class='modal__body'>
-              {{ caller() }}
-          </div>
+        <div class='modal__body'>
+            {{ caller() }}
         </div>
       </div>
     </div>
-  </Modal>
+  </div>
 {%- endmacro %}
diff --git a/templates/styleguide.html b/templates/styleguide.html
index 4e4799c1..b57e45ac 100644
--- a/templates/styleguide.html
+++ b/templates/styleguide.html
@@ -4,31 +4,28 @@
 {% from "components/modal.html" import Modal %}
 {% from "components/alert.html" import Alert %}
 
-{% block modal %}
-  {% if g.modalOpen %}
-    {% call Modal(name='styleguide-modal', dismissable=True) %}
-      <h1>A modal dialog</h1>
-
-      <p>We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.</p>
-      <p>I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!</p>
-
-      <div class='action-group'>
-        <a href='/styleguide' class='action-group__action usa-button'>Close</a>
-        <a href='/styleguide' class='action-group__action'>This also closes the modal</a>
-      </div>
-    {% endcall %}
-  {% endif %}
-{% endblock %}
-
 
 {% block content %}
 
+  {% call Modal(name='styleguideModal', dismissable=True) %}
+    <h1>A modal dialog</h1>
+
+    <p>We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.</p>
+    <p>I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!</p>
+
+    <div class='action-group'>
+      <a v-on:click="closeModal('styleguideModal')" class='action-group__action usa-button'>Close</a>
+      <a class='action-group__action' v-on:click="closeModal('styleguideModal')">This also closes the modal</a>
+    </div>
+  {% endcall %}
+
+
 {{ Alert('A Warning Alert',
   message="\
     <p>This is a message. It is a very important message. Please note, <strong>proper semantic markup is required</strong> here, such as paragraph tags. Don't omit paragraph tags!</p>\
     <p>Also note the same for actions below. You'll need to include the full link markup.</p>\
   ",
-  actions='<a v-on:click="openModal" href="#">Open a Modal Dialog</a>',
+  actions='<a v-on:click="openModal(\'styleguideModal\')">Open a Modal Dialog</a>',
   level='warning'
 ) }}