Merge branch 'dev' into style-docs-preventing-horizontally-scrolling-pages

Author: sghoweri

packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss

@@ -24,6 +24,7 @@ $pl-color-trans-white-25: rgba(255, 255, 255, 0.25);
 $pl-color-state-info: #02a4d5;
 $pl-color-state-complete: #03790f;
 $pl-color-state-inreview: #c7a118;
+$pl-color-state-inprogress: #b00b02;
 $pl-color-state-deprecated: #b00b02;
 
 // Font Family

packages/uikit-workshop/src/sass/scss/02-base/_reset.scss

@@ -16,7 +16,7 @@
   box-sizing: border-box;
 }
 
-button {
+button[class|="pl-c"] {
   font-size: inherit;
   background-color: transparent;
 }

packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss

@@ -22,6 +22,10 @@
     background-color: $pl-color-state-inreview;
   }
 
+  &--inprogress {
+    background-color: $pl-color-state-inprogress;
+  }
+
   &--deprecated {
     background-color: $pl-color-state-deprecated;
   }

packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss

@@ -586,7 +586,7 @@ pl-nav {
   opacity: 1;
 
   .pl-c-body--theme-horizontal & {
-    overflow: auto;
+    overflow-y: auto;
   }
 
   @media all and (min-width: $pl-bp-med) {

packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js

@@ -36,7 +36,7 @@ export const NavList = props => {
                 aria-controls={category}
                 onClick={elem.toggleSpecialNavPanel}
               >
-                {category}
+                Expand / Collapse {category} Panel
               </NavToggle>
             )}
           </div>

packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js

@@ -7,7 +7,7 @@ export const NavToggle = props => {
       role="tab"
       {...props}
     >
-      {props.children}
+      <span class="is-vishidden">{props.children}</span>
       <span
         class="pl-c-nav__link-icon"
         dangerouslySetInnerHTML={{

packages/uikit-workshop/src/scripts/utils/iframe-msg-data-extraction.js

@@ -2,14 +2,14 @@
  * Does the origin sending the message match the current host?
  * if not dev/null the request
  *
- * @param {MessageEvent} e A message received by a target object.
+ * @param {MessageEvent} event A message received by a target object.
  */
-export function iframeMsgDataExtraction(e) {
+export function iframeMsgDataExtraction(event) {
   if (
     window.location.protocol !== 'file:' &&
     event.origin !== window.location.protocol + '//' + window.location.host
   ) {
-    return;
+    return {};
   }
 
   try {