chore(global-navigation): Move slds-has-sub-tabs to nav item rather than on top level component

Author: brandonferrua

ui/components/global-navigation/__tests__/__snapshots__/renders_a_global_navigation_with_sub_tabs.json

@@ -22,13 +22,14 @@ const { matchesMarkupAndStyle } = createHelpers(__dirname);
 it('renders a global-navigation with sub-tabs', () =>
   matchesMarkupAndStyle(
     <div className="demo-only" style={{ height: '8rem' }}>
-      <ContextTabBar className="slds-has-sub-tabs">
+      <ContextTabBar>
         <ContextTab
           title="Home"
           symbol="home"
           tabPanelId="context-tab-panel-1"
           id="context-tab-id-1"
           itemActive
+          hasSubtabs
         />
         <ContextTab
           title="Tab Item 1"

ui/components/global-navigation/__tests__/index.spec.js

@@ -400,6 +400,29 @@ $color-background-context-bar-brand-light: rgba($color-background-context-bar-br
   }
 }
 
+/**
+ * @summary Modifier that notifies a parent component that it has sub tabs inside of it
+ * @selector .slds-has-sub-tabs
+ * @restrict .slds-context-bar__item_tab
+ */
+.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active,
+.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover {
+  animation: none;
+  background-color: transparent;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: -3px;
+    height: 3px;
+    width: 100%;
+    background-color: $color-background-context-bar;
+    border: 0;
+    mix-blend-mode: unset;
+  }
+}
+
 /**
  * Unsaved indicator - This can probably be used in other locations as well
  *

ui/components/global-navigation/navigation-bar/_index.scss

@@ -64,7 +64,8 @@ export let ContextTab = props => (
         'slds-is-active': props.itemActive,
         'slds-is-unsaved': props.itemUnsaved,
         'slds-is-pinned': props.pinned,
-        'slds-has-notification': props.itemUnread
+        'slds-has-notification': props.itemUnread,
+        'slds-has-sub-tabs': props.hasSubtabs
       }
     )}
     role="presentation"
@@ -1187,13 +1188,14 @@ export let states = [
     label: 'Sub Tabs - Open',
     element: (
       <div className="demo-only" style={{ height: '8rem' }}>
-        <ContextTabBar className="slds-has-sub-tabs">
+        <ContextTabBar>
           <ContextTab
             title="Home"
             symbol="home"
             tabPanelId={tabPanelId01}
             id={tabId01}
             itemActive
+            hasSubtabs
           />
           <ContextTab
             title="Tab Item 1"

ui/components/global-navigation/navigation-bar/index.markup.md

@@ -58,29 +58,3 @@
     text-decoration: underline;
   }
 }
-
-/**
- * @summary Modifier that notifies a parent component that it has sub tabs inside of it
- * @selector .slds-has-sub-tabs
- * @restrict .slds-context-bar
- */
-.slds-has-sub-tabs {
-
-  .slds-context-bar__item_tab.slds-is-active,
-  .slds-context-bar__item_tab.slds-is-active:hover {
-    animation: none;
-    background-color: transparent;
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: -3px;
-      height: 3px;
-      width: 100%;
-      background-color: $color-background-context-bar;
-      border: 0;
-      mix-blend-mode: unset;
-    }
-  }
-}