feat(megamenu): megamenu web component HC & AI updates (#5016)

### Related Ticket(s)

Web Component: Change Mega Menu to accommodate HC + AI updates component #4641

### Description

*** NOTE: The React mobile version looks broken, another PR coming to address that so I would recommend waiting for that PR before we merge this one ****

Megamenu Web Components Hybrid Cloud and AI updates

<img width="1642" alt="Screen Shot 2021-01-29 at 11 46 45 AM" src="https://user-images.githubusercontent.com/54281166/106303051-b1226500-6227-11eb-9e84-689665728cfe.png">

<img width="352" alt="Screen Shot 2021-01-27 at 2 04 18 PM" src="https://user-images.githubusercontent.com/54281166/106045183-a3959f80-60ae-11eb-90c0-243c740c31e0.png">

<img width="348" alt="Screen Shot 2021-01-27 at 2 04 25 PM" src="https://user-images.githubusercontent.com/54281166/106045163-9e385500-60ae-11eb-9e35-ce033a9a3d01.png">

Also created "With Custom Data" separate story for masthead so we can view how the design updates look with the expected data.

### Changelog

**New**

- `dds-left-nav-menu-category-heading` for the heading text (ie. The essentials)
- `dds-left-nav-menu-highlighted` and `dds-left-nav-menu-item-highlighted` for highlighted mobile menu items so we can target when to add the darker bottom border
- `dds-megamenu-category-group-copy` for the heading and description text in the megamenu


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/services-store/src/types/translateAPI.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -14,6 +14,7 @@
 export interface BasicLink {
   title: string;
   titleEnglish?: string;
+  highlightedLink?: boolean;
   url?: string;
 }
 

packages/styles/scss/components/masthead/_masthead-leftnav.scss

@@ -143,6 +143,21 @@
   }
 
   .#{$prefix}--side-nav__submenu {
+    display: flex;
+    flex-direction: column;
+
+    .#{$prefix}--side-nav__submenu-content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+    }
+
+    &::after {
+      content: '';
+      width: 100%;
+      border-bottom: 1px solid $ui-03;
+    }
+
     &[aria-expanded='true'] {
       + .#{$prefix}--side-nav__menu[role='menu'] {
         position: absolute;
@@ -176,7 +191,7 @@
           color: $text-01;
           padding: 0 $carbon--spacing-05;
           height: $container-04;
-          border-bottom: 1px solid $ui-03;
+          border-bottom: 1px solid $ui-04;
           align-items: center;
         }
 
@@ -225,6 +240,7 @@
       @include carbon--type-style(body-short-02);
 
       color: $text-01;
+      align-self: center;
     }
 
     &[aria-haspopup='true'] {
@@ -239,6 +255,31 @@
     }
   }
 
+  :host(#{$dds-prefix}-left-nav-menu-category-heading) {
+    @include type-style('body-long-01');
+
+    display: block;
+    color: $text-02;
+    padding: $spacing-02 0;
+    margin: 0 $spacing-05;
+    border-bottom: 1px solid $ui-03;
+  }
+
+  :host(#{$dds-prefix}-left-nav-menu-item[last-highlighted]),
+  :host(#{$dds-prefix}-left-nav-menu[last-highlighted]) {
+    border-bottom: 1px solid $ui-04;
+  }
+
+  :host(#{$dds-prefix}-left-nav-menu-item[last-highlighted])
+    .#{$prefix}--side-nav__link[role='menuitem']::after {
+    border-bottom: none;
+  }
+
+  :host(#{$dds-prefix}-left-nav-menu[last-highlighted])
+    .#{$prefix}--side-nav__submenu::after {
+    content: none;
+  }
+
   .#{$prefix}--masthead__side-nav--submemu--selected {
     border-left: 3px solid $interactive-01;
 

packages/styles/scss/components/masthead/_masthead-megamenu.scss

@@ -127,7 +127,7 @@
   .#{$prefix}--masthead__megamenu__categories-section {
     display: flex;
     flex-direction: column;
-    padding-top: $spacing-06;
+    padding-top: rem(18px);
     width: 100%;
 
     .#{$prefix}--masthead__megamenu__categories {
@@ -147,6 +147,15 @@
     }
   }
 
+  :host(#{$dds-prefix}-megamenu-category-group-copy) {
+    display: block;
+    @include use-carbon-productive-tokens();
+    @include type-style('body-short-01');
+
+    color: $text-02;
+    padding: rem(6px) $spacing-05 rem(10px);
+  }
+
   :host(#{$dds-prefix}-megamenu-category-group),
   .#{$prefix}--masthead__megamenu__category-group {
     display: inline;
@@ -156,6 +165,12 @@
       display: inline-block;
       padding-bottom: $spacing-07;
     }
+
+    ::slotted(#{$dds-prefix}-megamenu-category-group-copy) {
+      color: $text-01;
+      margin-top: rem(-6px);
+      padding: 0 $spacing-05 1px $spacing-05;
+    }
   }
 
   :host(#{$dds-prefix}-megamenu-link-with-icon)[style-scheme='category-headline'],
@@ -165,7 +180,7 @@
     p,
     a,
     .#{$prefix}--link-with-icon {
-      padding: 7px $spacing-05;
+      padding: 6px $spacing-05;
       text-decoration: none;
       width: 100%;
     }
@@ -174,7 +189,7 @@
     p {
       color: $text-01;
       @include use-carbon-productive-tokens();
-      @include type-style('productive-heading-01');
+      @include type-style('expressive-heading-01');
     }
 
     svg {
@@ -191,11 +206,11 @@
   :host(#{$dds-prefix}-megamenu-category-link) a,
   .#{$prefix}--masthead__megamenu__category-sublink {
     @include use-carbon-productive-tokens();
-    @include type-style('body-short-01');
+    @include type-style('body-long-01');
 
     color: $text-02;
     text-decoration: none;
-    padding: 7px $spacing-05;
+    padding: 6px $spacing-05;
     display: block;
 
     &:hover,
@@ -204,6 +219,15 @@
     }
   }
 
+  :host(#{$dds-prefix}-megamenu-link-with-icon)[style-scheme='category-sublink'] {
+    @include use-carbon-productive-tokens();
+    @include type-style('body-short-01');
+
+    a {
+      padding: 7px $spacing-05;
+    }
+  }
+
   :host(#{$dds-prefix}-megamenu-link-with-icon)[style-scheme='view-all'],
   .#{$prefix}--masthead__megamenu__view-all-cta {
     margin-top: auto;
@@ -258,7 +282,7 @@
   :host(#{$dds-prefix}-megamenu-left-navigation),
   .#{$prefix}--masthead__megamenu__highlight-section {
     min-height: 100%;
-    padding-top: $spacing-06;
+    padding-top: rem(18px);
     border-right: carbon--rem(1px) solid $ui-03;
     @include carbon--make-col(4, 16);
   }
@@ -273,6 +297,7 @@
       border-right: none;
       border-bottom: carbon--rem(1px) solid $ui-03;
       column-count: 2;
+      column-gap: 0;
       @include carbon--make-col(8, 8);
     }