feat: add confirmation modal

techfromsage · Oct 6, 2021 · 9d92b69 · 9d92b69
1 parent 89497d1
commit 9d92b69
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 2 deletions.
diff --git a/docs/assets/css/talis.css b/docs/assets/css/talis.css
diff --git a/docs/assets/css/talis.css.map b/docs/assets/css/talis.css.map
diff --git a/docs/assets/img/discard.svg b/docs/assets/img/discard.svg
diff --git a/docs/index.html b/docs/index.html
@@ -1055,6 +1055,10 @@ <h2>Modals</h2>
   Launch demo modal
 </button>
 
+<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#confirmation-modal">
+  Launch confirmation modal
+</button>
+
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -1082,6 +1086,32 @@ <h2 class="modal-title" id="modal-label">Modal title</h2>
   </div>
   <!-- /.modal-dialog -->
 </div>
+
+<div class="modal o-confirmation-modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="confirmation-label" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <img src="/bootstrap-theme/assets/img/discard.svg" class="modal-image" alt="" width="149" height="158" />
+      <div class="modal-header">
+        <h2 class="modal-title" id="confirmation-label">Are you sure?</h2>
+      </div>
+      <div class="modal-body">
+        <p>
+          You will lose your unsaved data.
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-lg btn-danger" data-bs-dismiss="modal">
+          Yes
+        </button>
+        <button type="button" class="btn btn-lg btn-default">
+          Cancel
+        </button>
+      </div>
+    </div>
+    <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>
 <hr>
 
 <button type="button" class="btn btn-primary btn-lg js-btn-toast">

diff --git a/scss/_confirmation-modal.scss b/scss/_confirmation-modal.scss
@@ -0,0 +1,29 @@
+@use "sass:math";
+
+.o-confirmation-modal {
+
+  .modal-dialog {
+    max-width: 26.25rem;
+  }
+
+  .modal-image {
+    margin: $modal-inner-padding $modal-inner-padding 0;
+  }
+
+  .modal-header {
+    justify-content: flex-start;
+    padding-bottom: 0;
+  }
+
+  .modal-content {
+    padding: math.div($modal-inner-padding, 2);
+    @include border-radius(0.5rem);
+    font-size: 1rem;
+  }
+
+  .modal-footer {
+    justify-content: flex-start;
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
diff --git a/scss/talis.scss b/scss/talis.scss
@@ -92,3 +92,5 @@ $enable-shadows: false;
 @import "typography";
 @import "utils";
 @import "well";
+
+@import "confirmation-modal";
diff --git a/src/docs/_includes/modals.njk b/src/docs/_includes/modals.njk
@@ -4,6 +4,10 @@
   Launch demo modal
 </button>
 
+<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#confirmation-modal">
+  Launch confirmation modal
+</button>
+
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -31,4 +35,30 @@
   </div>
   <!-- /.modal-dialog -->
 </div>
+
+<div class="modal o-confirmation-modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="confirmation-label" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <img src="{{ '/assets/img/discard.svg' | url }}" class="modal-image" alt="" width="149" height="158" />
+      <div class="modal-header">
+        <h2 class="modal-title" id="confirmation-label">Are you sure?</h2>
+      </div>
+      <div class="modal-body">
+        <p>
+          You will lose your unsaved data.
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-lg btn-danger" data-bs-dismiss="modal">
+          Yes
+        </button>
+        <button type="button" class="btn btn-lg btn-default">
+          Cancel
+        </button>
+      </div>
+    </div>
+    <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>
 <hr>