feat: popover css and documentation (#540)

* remove console.log

* add zi-modal-element to docs

* add comment TOC to popover

* fix: remove z-index from content

docs/_data/z-index.json

@@ -59,6 +59,11 @@
     "output": "600",
     "description": "Modal"
   },
+  {
+    "name": "modal-element",
+    "output": "650",
+    "description": "An element within a modal"
+  },
   {
     "name": "notification",
     "output": "700",

docs/assets/js/popover.js

@@ -23,7 +23,6 @@ $(document).ready(function() {
     contentContainer.removeClass('d-vi-hidden');
     contentContainer.addClass('d-vi-visible');
     closestOverlay.attr('aria-hidden','false');
-    console.log(closestOverlay)
 
     if (closestOverlay.length) {
       $(body).addClass('d-of-hidden');

lib/build/less/components/popover.less

@@ -1,3 +1,24 @@
+//
+//  DIALTONE
+//  COMPONENTS: POPOVER
+//
+//  These are popover classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/popover
+//
+//  TABLE OF CONTENTS
+//  • POPOVER
+//  • POPOVER DIALOG
+//    - Base dialog style
+//    - Content
+//    - Header / Footer
+
+
+//  $  POPOVER
+//  ----------------------------------------------------------------------------
+
+//  $  POPOVER DIALOG
+//  ----------------------------------------------------------------------------
 .d-popover__dialog {
   &,
   *,
@@ -6,7 +27,6 @@
     box-sizing: border-box;
   }
 
-  z-index: var(--zi-popover);
   display: grid;
   grid-template-rows: auto 1fr;
   overflow: auto;
@@ -16,10 +36,14 @@
   box-shadow: var(--bs-card);
 }
 
+//  $$  DIALOG CONTENT
+//  ----------------------------------------------------------------------------
 .d-popover__content {
   overflow: auto;
 }
 
+//  $$  DIALOG HEADER / FOOTER
+//  ----------------------------------------------------------------------------
 .d-popover__header-footer-base {
   display: flex;
   align-items: center;
@@ -43,8 +67,3 @@
 
   border-top: var(--su1) solid var(--black-075);
 }
-
-//When modal overlay is displayed, put the popover anchor on top of it.
-.d-modal[aria-hidden='false'] + .d-popover * {
-  z-index: var(--zi-modal-element);
-}