fix(micro-journeys): fixes for no shadow dom, mostly icons

Author: glassdimly

docs-site/src/index.scss

@@ -17,4 +17,3 @@
 @import './pages/pattern-lab/_patterns/01-visual-styles/15-breakpoints/_breakpoints';
 @import './components/pattern-lab-utils/_sassdoc.scss';
 @import './pages/pattern-lab/_patterns/04-pages/35-d8-events/_event-sponsors-with-action-block';
-

packages/micro-journeys/src/character.js

@@ -90,9 +90,9 @@ class BoltCharacter extends withLitHtml() {
           ${useIcon
             ? html`
                 <span
-                  class="c-bolt-character__slot c-bolt-character__slot--icon"
+                  class="c-bolt-character__slot c-bolt-character__slot--icon--wrapper"
                 >
-                  <bolt-icon></bolt-icon>
+                  <bolt-icon class="c-bolt-character__slot--icon"></bolt-icon>
                 </span>
               `
             : html`

packages/micro-journeys/src/character.scss

@@ -8,19 +8,19 @@
 
   &--small,
   &--small &__main-image-wrapper,
-  &--small bolt-icon {
+  &--small &__slot--icon {
     width: 60px;
     height: 60px;
   }
   &--medium,
   &--medium &__main-image-wrapper,
-  &--medium bolt-icon {
+  &--medium &__slot--icon {
     width: 80px;
     height: 80px;
   }
   &--large,
   &--large &__main-image-wrapper,
-  &--large bolt-icon {
+  &--large &__slot--icon {
     width: 120px;
     height: 120px;
   }

packages/micro-journeys/src/nav-shared.scss

@@ -15,6 +15,7 @@ $nav-circle-border-size: 2px;
   }
 
   @else {
+    box-sizing: content-box;
     content: '';
     display: inline-block;
     z-index: 1;
@@ -52,8 +53,11 @@ $nav-circle-border-size: 2px;
     padding-bottom: 1.65rem;
     white-space: nowrap;
     line-height: $header-text-line-height;
-    cursor: pointer;
     font-size: $header-text-size;
     transition: color 0.5s ease, transform 0.5s ease;
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 }

packages/micro-journeys/src/no-shadow-dom.scss

@@ -32,6 +32,7 @@ $bolt-tooltip-bubble-triangle-width: 8px;
 
   &__icon{
     @include bolt-padding-right(small);
+    box-sizing: content-box;
   }
 
   &__slot {