@xplortech/apollo-core 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 
 ---
+## [0.5.0] - 2022-01-31
+
+### Added
+
+- Application Shell component ([#78](https://github.com/xplor/apollo/pull/78))
+- Event Emitters to Main Nav and Utility Bar to control state of Application Shell ([#78](https://github.com/xplor/apollo/pull/78))
+- Prop to Backdrop to set position relative/fixed ([#78](https://github.com/xplor/apollo/pull/78))
 
 ## [0.2.2] - 2021-12-18
 

package/build/style.css

@@ -1392,6 +1392,171 @@ textarea[class^="xpl-"] {
   --tw-ring-shadow: 0 0 #0000;
 }
 
+.xpl-application-shell {
+  grid-template-areas:
+    "nav utility"
+    "nav content";
+  grid-template-columns: -webkit-min-content 1fr;
+  grid-template-columns: min-content 1fr;
+  grid-template-rows: -webkit-min-content 1fr;
+  grid-template-rows: min-content 1fr;
+  max-height: 100vh;
+}
+
+.xpl-application-shell--with_subnav {
+    grid-template-areas:
+      "nav utility utility"
+      "nav subnav content";
+    grid-template-columns: -webkit-min-content -webkit-min-content 1fr;
+    grid-template-columns: min-content min-content 1fr;
+  }
+
+.xpl-application-shell__nav {
+    grid-area: nav;
+    height: 100vh;
+  }
+
+/* Only Firefox (as of 66) support animation of Grid tracks, so we need to apply annimation to the width of the bar. */
+
+.xpl-application-shell__nav--sm,
+    .xpl-application-shell__nav--md,
+    .xpl-application-shell__nav--default {
+      width: 0;
+      transition-property: all;
+      transition-timing-function: ease-in-out;
+    }
+
+.xpl-application-shell__nav--sm {
+      transform: translateX(-74px);
+      transition-duration: 0.2s;
+    }
+
+.xpl-application-shell__nav--sm--open {
+        width: 74px;
+        transition-duration: 0.2s;
+      }
+
+.xpl-application-shell__nav--md {
+      transform: translateX(-112px);
+      transition-duration: 0.25s;
+    }
+
+.xpl-application-shell__nav--md--open {
+        width: 112px;
+        transition-duration: 0.25s;
+      }
+
+.xpl-application-shell__nav--default {
+      transform: translateX(-240px);
+      transition-duration: 0.3s;
+    }
+
+.xpl-application-shell__nav--default--open {
+        transition-duration: 0.3s;
+        width: 240px;
+      }
+
+.xpl-application-shell__nav {
+    position: sticky;
+    top: 0px
+}
+
+.xpl-application-shell__subnav {
+    grid-area: subnav;
+  }
+
+.xpl-application-shell__subnav nav {
+      border-right: none;
+    }
+
+.xpl-application-shell__subnav {
+    --tw-bg-opacity: 1;
+    background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
+}
+
+.dark .xpl-application-shell__subnav {
+    --tw-bg-opacity: 1;
+    background-color: rgba(32, 30, 41, var(--tw-bg-opacity))
+  }
+
+.xpl-application-shell__subnav {
+    --tw-border-opacity: 1;
+    border-color: rgba(238, 239, 243, var(--tw-border-opacity))
+  }
+
+.dark .xpl-application-shell__subnav {
+    --tw-border-opacity: 1;
+    border-color: rgba(106, 109, 125, var(--tw-border-opacity))
+  }
+
+@media (min-width: 1024px) {
+    .xpl-application-shell__subnav {
+      border-right-width: 1px
+    }
+  }
+
+.xpl-application-shell__utility {
+    grid-area: utility;
+    position: sticky;
+    top: 0px;
+  }
+
+.xpl-application-shell__content {
+    grid-area: content;
+    --tw-bg-opacity: 1;
+    background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+  }
+
+.dark .xpl-application-shell__content {
+    --tw-bg-opacity: 1;
+    background-color: rgba(24, 22, 31, var(--tw-bg-opacity))
+  }
+
+.xpl-application-shell__content {
+    overflow-y: auto
+  }
+
+.xpl-application-shell {
+  --tw-bg-opacity: 1;
+  background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
+  display: grid
+}
+
+@media (max-width: 1023px) {
+  .xpl-application-shell {
+    grid-template-areas:
+      "nav utility"
+      "nav subnav"
+      "nav content";
+    grid-template-columns: -webkit-min-content 1fr;
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: -webkit-min-content -webkit-min-content 1fr;
+    grid-template-rows: min-content min-content 1fr;
+    height: 100vh;
+  }
+    .xpl-application-shell__sidebar--open {
+      grid-template-columns: -webkit-min-content 100vw;
+      grid-template-columns: min-content 100vw;
+    }
+    .xpl-application-shell {
+    overflow: hidden
+  }
+}
+
+@media (max-width: 640px) {
+  .xpl-application-shell {
+    grid-template-columns: -webkit-min-content 100vw;
+    grid-template-columns: min-content 100vw;
+    height: -webkit-fill-available;
+  }
+    .xpl-application-shell__nav {
+      max-height: -webkit-fill-available;
+    }
+    .xpl-application-shell__backdrop--open {
+      grid-area: utility / subnav / content;
+    }
+}
+
 .xpl-avatar {
   border-radius: 9999px;
   display: inline-block;
@@ -1679,14 +1844,21 @@ a.xpl-avatar--primary:focus {
 .xpl-backdrop {
   background-color: var(--xpl-color-gray-1000);
   opacity: 0.5;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+&--fixed {
   position: fixed;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+}
+
+&--relative {
+  position: relative;
 }
 
 .dark .xpl-backdrop {
@@ -2742,18 +2914,19 @@ button.xpl-button--xs.xpl-button--icon-only {
 }
 
 .xpl-content-area-wrapper {
+  height: 100%;
   min-width: 0;
 }
 
-.xpl-content-area-wrapper__wide {
-    padding: 1.5rem;
-  }
+.xpl-content-area-wrapper__wide .xpl-content-area {
+      padding: 1.5rem;
+    }
 
 @media (min-width: 768px) {
-    .xpl-content-area-wrapper__wide {
-      padding: 2rem
+      .xpl-content-area-wrapper__wide .xpl-content-area {
+        padding: 2rem
+      }
     }
-  }
 
 .xpl-content-area-wrapper__narrow {
     grid-template-areas: ". content .";
@@ -3969,19 +4142,27 @@ a.xpl-list-item:focus {
   width: 240px;
 }
 
-.xpl-main-nav nav {
-    grid-template-rows: 74px auto;
-  }
-
-.xpl-main-nav nav .xpl-nav-item:last-of-type a {
+.xpl-main-nav .xpl-main-nav__main_section .xpl-nav-item:last-of-type a {
         margin-bottom: 74px;
       }
 
+.xpl-main-nav .xpl-main-nav__main_section {
+    overflow-y: auto
+}
+
 .xpl-main-nav nav {
+    grid-template-rows: 74px 1fr -webkit-min-content;
+    grid-template-rows: 74px 1fr min-content;
     display: grid;
     height: 100%;
-    overflow-y: auto
-}
+    overflow-y: auto;
+    --tw-bg-opacity: 1;
+    background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
+  }
+
+.xpl-main-nav .xpl-nav-item > a {
+    width: 240px;
+  }
 
 /* Brand Section */
 
@@ -4008,53 +4189,85 @@ a.xpl-list-item:focus {
     padding: 1rem
 }
 
-/* Width for different screen sizes */
+.xpl-main-nav footer .xpl-avatar {
+      margin-right: 1rem;
+    }
 
-.xpl-main-nav__md {
-    width: 112px;
-  }
+.xpl-main-nav footer div p {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+      }
 
-.xpl-main-nav__md .xpl-nav-item a {
+.xpl-main-nav footer div p:first-of-type {
+        --tw-text-opacity: 1;
+        color: rgba(255, 255, 255, var(--tw-text-opacity));
+      }
+
+.xpl-main-nav footer div {
+      overflow-x: auto
+}
+
+.xpl-main-nav footer .xpl-nav-item > a svg {
+        fill: currentColor;
+        --tw-text-opacity: 1;
+        color: rgba(153, 155, 168, var(--tw-text-opacity));
+      }
+
+.xpl-main-nav footer {
+    --tw-bg-opacity: 1;
+    background-color: rgba(32, 30, 41, var(--tw-bg-opacity));
+    display: grid;
+    align-items: flex-end;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    --tw-text-opacity: 1;
+    color: rgba(153, 155, 168, var(--tw-text-opacity));
+    z-index: 20
+}
+
+/* Width for different screen sizes */
+
+.xpl-main-nav--md .xpl-nav-item a {
         width: 112px;
       }
 
-.xpl-main-nav__md .xpl-nav-item a svg {
+.xpl-main-nav--md .xpl-nav-item a svg {
           margin-right: 0px;
         }
 
-.xpl-main-nav__md .xpl-nav-item a {
+.xpl-main-nav--md .xpl-nav-item a {
         display: grid;
         justify-items: center;
         grid-auto-flow: row
 }
 
-.xpl-main-nav__md .xpl-avatar {
+.xpl-main-nav--md .xpl-avatar {
       margin-left: 1rem;
     }
 
-.xpl-main-nav__sm {
-    width: 74px;
-  }
+.xpl-main-nav--sm .xpl-nav-item a {
+        width: 74px;
+      }
 
-.xpl-main-nav__sm .xpl-nav-item a p {
+.xpl-main-nav--sm .xpl-nav-item a p {
           display: none;
         }
 
-.xpl-main-nav__sm .xpl-nav-item a .flatpickr-dayp{
+.xpl-main-nav--sm .xpl-nav-item a .flatpickr-dayp{
           visibility:hidden
         }
 
-.xpl-main-nav__sm .xpl-nav-item a svg {
+.xpl-main-nav--sm .xpl-nav-item a svg {
           margin-right: 0px;
         }
 
-.xpl-main-nav__sm .xpl-nav-item a {
+.xpl-main-nav--sm .xpl-nav-item a {
         display: grid;
         justify-items: center;
         grid-auto-flow: row
 }
 
-.xpl-main-nav__sm .xpl-nav-item a, .xpl-main-nav__md .xpl-nav-item a {
+.xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item a {
         font-size: 0.875rem;
         line-height: 1rem;
         font-weight: 600;
@@ -4062,84 +4275,37 @@ a.xpl-list-item:focus {
         padding-bottom: 0.75rem;
       }
 
-.xpl-main-nav__sm header p, .xpl-main-nav__md header p {
+.xpl-main-nav--sm header p, .xpl-main-nav--md header p {
         display: none;
       }
 
-.xpl-main-nav__sm header .flatpickr-dayp,.xpl-main-nav__md header .flatpickr-dayp{
+.xpl-main-nav--sm header .flatpickr-dayp,.xpl-main-nav--md header .flatpickr-dayp{
         visibility:hidden
       }
 
-.xpl-main-nav__sm header, .xpl-main-nav__md header {
+.xpl-main-nav--sm header, .xpl-main-nav--md header {
       align-content: center;
       justify-content: center;
       margin-top: 1rem
 }
 
-.xpl-main-nav__sm footer .xpl-avatar, .xpl-main-nav__md footer .xpl-avatar {
+.xpl-main-nav--sm footer .xpl-avatar, .xpl-main-nav--md footer .xpl-avatar {
         margin-right: 0px;
       }
 
-.xpl-main-nav__sm footer .xpl-nav-item a p, .xpl-main-nav__sm footer .xpl-nav-item div p, .xpl-main-nav__md footer .xpl-nav-item a p, .xpl-main-nav__md footer .xpl-nav-item div p {
+.xpl-main-nav--sm footer .xpl-nav-item a p, .xpl-main-nav--sm footer .xpl-nav-item div p, .xpl-main-nav--md footer .xpl-nav-item a p, .xpl-main-nav--md footer .xpl-nav-item div p {
             display: none;
           }
 
-.xpl-main-nav__sm footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav__sm footer .xpl-nav-item div .flatpickr-dayp,.xpl-main-nav__md footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav__md footer .xpl-nav-item div .flatpickr-dayp{
+.xpl-main-nav--sm footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--sm footer .xpl-nav-item div .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item div .flatpickr-dayp{
             visibility:hidden
           }
 
-.xpl-main-nav__sm footer .xpl-nav-item a, .xpl-main-nav__md footer .xpl-nav-item a {
+.xpl-main-nav--sm footer .xpl-nav-item a, .xpl-main-nav--md footer .xpl-nav-item a {
           display: inline-flex;
+          margin-bottom: 0px;
         }
 
-.xpl-main-nav footer .xpl-avatar {
-      margin-right: 1rem;
-    }
-
-.xpl-main-nav footer div p {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-      }
-
-.xpl-main-nav footer div p:first-of-type {
-        --tw-text-opacity: 1;
-        color: rgba(255, 255, 255, var(--tw-text-opacity));
-      }
-
-.xpl-main-nav footer div {
-      overflow-x: auto
-}
-
-.xpl-main-nav footer .xpl-nav-item > a svg {
-        fill: currentColor;
-        --tw-text-opacity: 1;
-        color: rgba(153, 155, 168, var(--tw-text-opacity));
-      }
-
-.xpl-main-nav footer {
-    --tw-bg-opacity: 1;
-    background-color: rgba(32, 30, 41, var(--tw-bg-opacity));
-    display: grid;
-    align-items: flex-end;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    position: absolute;
-    bottom: 0px;
-    --tw-text-opacity: 1;
-    color: rgba(153, 155, 168, var(--tw-text-opacity));
-    width: 100%;
-    z-index: 20
-}
-
-.xpl-main-nav {
-  --tw-bg-opacity: 1;
-  background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
-  position: fixed;
-  top: 0px;
-  bottom: 0px;
-  left: 0px
-}
-
 .xpl-nav-item a svg {
       height: 2rem;
       margin-right: 0.75rem;
@@ -4399,7 +4565,7 @@ a.xpl-list-item:focus {
 
 /* stylelint-disable no-descending-specificity, because the rule was expecting some of the code below to appear before some code that is nested above. */
 
-@media (max-width: 640px) {
+@media (max-width: 1023px) {
 
 .xpl-secondary-nav nav::after {
         content: '';
@@ -4417,7 +4583,7 @@ a.xpl-list-item:focus {
         }
       }
 
-@media (max-width: 640px) {
+@media (max-width: 1023px) {
 
 .xpl-secondary-nav nav::after {
         overflow: hidden;
@@ -4437,12 +4603,14 @@ a.xpl-list-item:focus {
       }
 
 .dark .xpl-secondary-nav nav {
+      --tw-bg-opacity: 1;
+      background-color: rgba(32, 30, 41, var(--tw-bg-opacity));
       --tw-border-opacity: 1;
       border-color: rgba(106, 109, 125, var(--tw-border-opacity));
       border-bottom-width: 1px;
     }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
       .dark .xpl-secondary-nav nav {
         border-bottom-width: 0px;
         border-right-width: 1px
@@ -4450,6 +4618,8 @@ a.xpl-list-item:focus {
     }
 
 .xpl-secondary-nav nav {
+    --tw-bg-opacity: 1;
+    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
     --tw-border-opacity: 1;
     border-color: rgba(238, 239, 243, var(--tw-border-opacity));
     border-right-width: 0px;
@@ -4457,11 +4627,10 @@ a.xpl-list-item:focus {
     position: relative
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
     .xpl-secondary-nav nav {
       border-bottom-width: 0px;
-      border-right-width: 1px;
-      height: 100vh
+      border-right-width: 1px
     }
   }
 
@@ -4483,7 +4652,7 @@ a.xpl-list-item:focus {
     white-space: nowrap
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
     .xpl-secondary-nav nav ul > :not([hidden]) ~ :not([hidden]) {
       --tw-space-y-reverse: 0;
       margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -4553,7 +4722,7 @@ a.xpl-list-item:focus {
     padding-right: 1.5rem
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
     .xpl-secondary-nav nav ul .xpl-nav-item a {
       border-bottom-width: 0px;
       border-right-width: 4px;
@@ -4566,7 +4735,7 @@ a.xpl-list-item:focus {
     background-color: rgba(32, 30, 41, var(--tw-bg-opacity));
   }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
 
 .xpl-secondary-nav {
     width: 200px;
@@ -4580,7 +4749,7 @@ a.xpl-list-item:focus {
   padding-top: 1.25rem
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .xpl-secondary-nav {
     display: block;
     padding: 0px
@@ -5263,32 +5432,37 @@ button.xpl-tag__close {
   transform: translateX(12px);
 }
 
-.xpl-utility-bar ul > * {
+.xpl-utility-bar ul >, .xpl-utility-bar nav >, .xpl-utility-bar xpl-breadcrumbs > {
       display: grid;
       align-content: center;
     }
 
-.xpl-utility-bar ul:nth-child(2) > * {
+.xpl-utility-bar ul:nth-child(2) > *, .xpl-utility-bar nav:nth-child(2) > *, .xpl-utility-bar xpl-breadcrumbs:nth-child(2) > * {
         margin-left: 0.5rem;
       }
 
-.xpl-utility-bar ul:nth-child(2) {
+.xpl-utility-bar ul:nth-child(2), .xpl-utility-bar nav:nth-child(2), .xpl-utility-bar xpl-breadcrumbs:nth-child(2) {
       justify-self: end
 }
 
-.xpl-utility-bar ul:first-child > * {
+.xpl-utility-bar ul:first-child > *, .xpl-utility-bar nav:first-child > *, .xpl-utility-bar xpl-breadcrumbs:first-child > * {
         margin-right: 0.5rem;
       }
 
-.xpl-utility-bar ul:first-child {
+.xpl-utility-bar ul:first-child, .xpl-utility-bar nav:first-child, .xpl-utility-bar xpl-breadcrumbs:first-child {
       justify-self: start
 }
 
-.xpl-utility-bar ul {
+.xpl-utility-bar ul, .xpl-utility-bar nav, .xpl-utility-bar xpl-breadcrumbs {
     display: grid;
+    align-items: center;
     align-content: center;
     grid-auto-flow: column
-}
+  }
+
+.xpl-utility-bar div:first-child {
+      display: flex;
+    }
 
 .xpl-utility-bar {
   --tw-bg-opacity: 1;
@@ -5336,3 +5510,16 @@ button.xpl-tag__close {
     padding-right: 1.5rem
   }
 }
+
+.xpl-utility-nav__bars {
+  fill: currentColor;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
+}
+
+.dark .xpl-utility-nav__bars {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
+}