Merge pull request #157 from Orange-OpenSource/essentials

create a dedicated space for essentials
Orange-OpenSource · Dec 13, 2019 · 5f3808f · 5f3808f
2 parents f47db51 + 30560e8
commit 5f3808f
Show file tree

Hide file tree

Showing 73 changed files with 3,078 additions and 585 deletions.
diff --git a/build/postcss.config.js b/build/postcss.config.js
@@ -1,7 +1,7 @@
 'use strict'
 
 module.exports = (ctx) => ({
-  map: ctx.file.dirname.includes('examples') ? false : {
+  map: ctx.file.dirname.includes('examples') || ctx.file.dirname.includes('essentials') ? false : {
     inline: false,
     annotation: true,
     sourcesContent: true

diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -22,7 +22,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "33.5 kB"
+      "maxSize": "34.25 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/js/dist/megamenu.js b/js/dist/megamenu.js
diff --git a/js/src/o-megamenu.js b/js/src/o-megamenu.js
@@ -96,22 +96,14 @@ class MegaMenu {
     $(element).find('> .navbar-nav').attr('role', 'menu')
     $(element).find(Selector.MEGAMENU_PANEL).attr('role', 'menu')
     $(element).find('.nav-link[data-toggle=collapse]').attr('role', 'menuitem')
-    $(element).find(Selector.NAV_LINK_BACK).attr({
-      'aria-hidden': true
-    })
+    $(element).find(Selector.NAV_LINK_BACK).attr('aria-hidden', 'true')
     $(element).find(Selector.NAV_ITEM).attr('role', 'presentation')
 
     $subNavs.each(function () {
       const navId = Util.getUID(NAME)
       const $thisNavToggler = $(this).prev(Selector.NAV_LINK)
       const $thisNav = $(this)
       const $thisNavBackLink = $thisNav.find(Selector.NAV_LINK_BACK)
-      const $topMenu = $(this).closest(Selector.NAV_MENU).parent().closest(Selector.NAV_MENU).prev(Selector.NAV_LINK)
-      let goBackLabel = `go back to ${$topMenu.text()} menu`
-
-      if (!$topMenu.length) {
-        goBackLabel = `go back to ${$(this).closest(Selector.MEGAMENU_PANEL).prev(Selector.NAV_LINK).text()} menu`
-      }
 
       $thisNav.attr({
         id: navId,
@@ -125,8 +117,7 @@ class MegaMenu {
       })
       $thisNavBackLink.attr({
         role: 'menuitem',
-        'aria-controls': navId,
-        'aria-label': goBackLabel
+        'aria-controls': navId
       })
     })
   }
@@ -141,7 +132,7 @@ class MegaMenu {
     const rootPosition = $('.mega-menu-panel .nav-link').first().parents().index($('.mega-menu'))
     const translatePercentage = -(position - rootPosition) * PERCENTAGE / 2
     const $thisNav = $target.closest(Selector.NAV_MENU)
-    const $rootNav = $(Selector.ROOT_NAV)
+    const $rootNav = $target.closest(Selector.ROOT_NAV)
 
     $rootNav.addClass(ClassName.TRANSITIONING)
 
@@ -230,7 +221,7 @@ class MegaMenu {
     const $this = $(e.target)
     const $thisNav = $this.closest(Selector.NAV_MENU)
     const $targetNav =  $this.next(Selector.NAV_MENU)
-    const $rootNav = $(Selector.ROOT_NAV)
+    const $rootNav = $this.closest(Selector.ROOT_NAV)
     const $thisNavToggler = $this
     const currentTranslatePos = parseInt($rootNav.css('transform').split(',')[SPLITLENGHT], 10)
     const navWidth = $rootNav.width()
@@ -285,7 +276,7 @@ class MegaMenu {
     const $this = $(e.target)
     const $thisNav = $this.closest(Selector.NAV_MENU)
     const $targetNav = $thisNav.parent().closest(Selector.NAV_MENU)
-    const $rootNav = $(Selector.ROOT_NAV)
+    const $rootNav = $this.closest(Selector.ROOT_NAV)
     const $targetNavToggler = $targetNav.find(Selector.NAV_LINK_EXPANDED)
     const currentTranslatePos = parseInt($rootNav.css('transform').split(',')[SPLITLENGHT], 10)
     const navWidth = $rootNav.width()
@@ -296,15 +287,15 @@ class MegaMenu {
     }
 
     $rootNav.addClass(ClassName.TRANSITIONING)
+    // reset main collapse height
+    $(Selector.MEGAMENU).height('auto')
 
     // make only visible elements focusable
     $targetNav.find(Selector.NAV_LINK).attr({
       tabindex: 0,
       'aria-hidden': false
     })
     if (currentTranslatePercentage === -PERCENTAGE) {
-      // reset main collapse height
-      $(Selector.MEGAMENU).css('height', 'auto')
       $rootNav.find('>.nav-item .nav-link').attr({
         tabindex: 0,
         'aria-hidden': false

diff --git a/scss/_badge.scss b/scss/_badge.scss
@@ -50,6 +50,13 @@
 @each $color, $value in $theme-colors {
   .badge-#{$color} {
     @include badge-variant($value);
+
+    @if $color == "info" {
+      &.badge-lg,
+      &.badge-xlg {
+        color: $white;
+      }
+    }
   }
 }
 
@@ -65,3 +72,13 @@
     }
   }
 }
+
+.badge-xlg {
+  @include font-size($badge-font-size-xlg);
+  padding: $badge-padding-y-lg $badge-padding-x-lg;
+}
+
+.badge-lg {
+  @include font-size($badge-font-size-lg);
+  padding: $badge-padding-y-lg $badge-padding-x-lg;
+}
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -151,6 +151,15 @@ fieldset:disabled a.btn {
   padding: $btn-padding-y;
   // stylelint-disable-next-line declaration-no-important
   line-height: .875 !important; // Ensure .btn-icon is squared
+
+  [class*="svg-"] {
+    display: block;
+    line-height: .75;
+  }
+
+  [class*="icon-"]::before {
+    font-size: $font-size-xlg;
+  }
 }
 
 // Boosted mod: social buttons

diff --git a/scss/_close.scss b/scss/_close.scss
@@ -1,35 +1,41 @@
 .close {
   float: right;
   // Boosted mod
-  width: $spacer;
-  height: $spacer;
-  padding: $spacer;
-  // end mod
-  @include font-size($close-font-size);
-  font-weight: $close-font-weight;
-  line-height: 1;
-  color: $close-color;
-  text-shadow: $close-text-shadow;
-  // Boosted mod
+  width: map-get($spacers, 4);
+  height: map-get($spacers, 4);
+  padding: 0;
+  margin-right: map-get($spacers, 2);
+  // @include font-size($close-font-size);
+  // font-weight: $close-font-weight;
+  // line-height: 1;
+  // color: $close-color;
+  // text-shadow: $close-text-shadow;
   @include transition($transition-focus);
-  background: escape-svg($close-icon) no-repeat center / $spacer;
+  background: escape-svg($close-icon) no-repeat center / map-get($spacers, 4);
+  border: 0;
   outline-offset: map-get($spacers, 2);
   opacity: 1;
+  appearance: none;
 
-  .bg-dark & {
+  .bg-dark &,
+  .navbar-dark & {
     background-image: escape-svg($close-icon-dark);
   }
 
   &:hover,
   &:focus {
-    outline: $border-width solid;
-    outline-offset: 0;
+    background-image: escape-svg($close-icon-hover);
 
     &:not(:disabled):not(.disabled) {
       opacity: 1;
     }
   }
 
+  &:focus {
+    outline: $border-width solid;
+    outline-offset: 0;
+  }
+
   &:hover {
     @include transition(none);
   }
@@ -41,13 +47,13 @@
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
-// stylelint-disable-next-line selector-no-qualifying-type
-button.close {
-  //padding: 0; // Boosted mod
-  //background-color: transparent; // Boosted mod
-  border: 0;
-  appearance: none;
-}
+// Boosted mod: included above ↑
+// button.close {
+//   padding: 0;
+//   background-color: transparent;
+// border: 0;
+// appearance: none;
+// }
 
 // Future-proof disabling of clicks on `<a>` elements