From 43ac69fe002d9f9e8d59920cfc85e0340c9c4221 Mon Sep 17 00:00:00 2001
From: Paul Kuruvilla <rohitpaulk@gmail.com>
Date: Sat, 17 Jun 2017 17:14:45 +0530
Subject: [PATCH] Add notes about modal component

---
 scss/components/modal.scss | 39 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/scss/components/modal.scss b/scss/components/modal.scss
index 09b80cbbdc..7a0eeb83c9 100644
--- a/scss/components/modal.scss
+++ b/scss/components/modal.scss
@@ -1,3 +1,42 @@
+/*
+ * ======= MARKUP =======
+ *
+ * <div class="modal-wrapper">
+ *     <div class="modal">
+ *         <header>
+ *             <h2>Title!</h2>
+ *             <button class="close-modal">
+ *               X
+ *             </button>
+ *         </header>
+ *         <section>
+ *             Your content here.
+ *         </section>
+ *     </div>
+ * </div>
+ *
+ * ======= VISUAL EXPLANATION =======
+ *
+ * div.modal-wrapper (full-screen)
+ *
+ *             div.modal (horizontally centered)
+ *              ----------------------------
+ *             |  header       (button) [x] |
+ *             |____________________________|
+ *             |  section                   |
+ *             |                            |
+ *             |                            |
+ *             |                            |
+ *             |                            |
+ *              ----------------------------
+ *
+ * ======= NOTES =======
+ *
+ * - The modal width is not fixed. Set width on .modal directly, or it'll
+ *   be decided by child content
+ * - To open/close, show/hide the .modal-wrapper div. Hidden by default.
+ */
+
 .modal-wrapper {
     width: 100vw;
     height: 100vh;