Merge branch 'main' into feat/ibmdotcom-styles-remove-react-class-2

carbon-design-system · Jan 16, 2024 · 9d3dafe · 9d3dafe
2 parents 1d17cd3 + c6a010b
commit 9d3dafe
Show file tree

Hide file tree

Showing 71 changed files with 1,130 additions and 7,229 deletions.
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip.ts b/packages/carbon-web-components/src/components/tooltip/tooltip.ts
@@ -67,6 +67,12 @@ class CDSTooltip extends HostListenerMixin(CDSPopover) {
   @property({ reflect: true })
   size = false;
 
+  /**
+   * Specify the timeout reference for the tooltip
+   */
+  @property({ reflect: true })
+  timeoutId = 0;
+
   /**
    * Specify whether the tooltip should be open when it first renders
    */
@@ -77,7 +83,8 @@ class CDSTooltip extends HostListenerMixin(CDSPopover) {
    * Handles `mouseover` event on this element.
    */
   private _handleHover = async () => {
-    setTimeout(async () => {
+    window.clearTimeout(this.timeoutId);
+    this.timeoutId = window.setTimeout(async () => {
       this.open = true;
       const { open, updateComplete } = this;
       if (open) {
@@ -93,7 +100,8 @@ class CDSTooltip extends HostListenerMixin(CDSPopover) {
    * Handles `mouseleave` event on this element.
    */
   private _handleHoverOut = async () => {
-    setTimeout(async () => {
+    window.clearTimeout(this.timeoutId);
+    this.timeoutId = window.setTimeout(async () => {
       const { open } = this;
       if (open) {
         this.open = false;

diff --git a/packages/services-store/src/actions/__tests__/translateAPI.test.ts b/packages/services-store/src/actions/__tests__/translateAPI.test.ts
@@ -38,14 +38,10 @@ const mockTranslation: Partial<Translation> = {
       },
       {
         title: 'menu-title-foo',
-        menuSections: [
+        submenu: [
           {
-            menuItems: [
-              {
-                title: 'menu-item-title-bar',
-                url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar',
-              },
-            ],
+            title: 'menu-item-title-bar',
+            url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar',
           },
         ],
       },
@@ -54,7 +50,7 @@ const mockTranslation: Partial<Translation> = {
 };
 
 const endpoint =
-  '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2';
+  '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1';
 
 describe('Redux actions for `TranslateAPI`', () => {
   it('dispatches the action to set translation data', () => {

diff --git a/packages/services-store/src/reducers/__tests__/translateAPI.test.ts b/packages/services-store/src/reducers/__tests__/translateAPI.test.ts
@@ -25,14 +25,10 @@ const mockTranslation: Partial<Translation> = {
       },
       {
         title: 'menu-title-foo',
-        menuSections: [
+        submenu: [
           {
-            menuItems: [
-              {
-                title: 'menu-item-title-bar',
-                url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar',
-              },
-            ],
+            title: 'menu-item-title-bar',
+            url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar',
           },
         ],
       },

diff --git a/packages/services-store/src/types/translateAPI.ts b/packages/services-store/src/types/translateAPI.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -29,69 +29,29 @@ export interface BasicLinkSet {
   links: BasicLink[];
 }
 
-/**
- * A feature in mega panel.
- */
-export interface MegapanelFeature {
-  heading?: string;
-  imageUrl?: string;
-  linkTitle?: string;
-  linkUrl?: string;
-}
-
-/**
- * A content in mega panel.
- */
-export interface MegapanelContent {
-  headingTitle?: string;
-  headingUrl?: string;
-  description?: string;
-  quickLinks: BasicLinkSet;
-  feature: MegapanelFeature;
+export interface L0Menu {
+  items: L0MenuItem[];
 }
 
-/**
- * A menu item in masthead.
- */
-export interface MastheadMenuItem {
-  title: string;
-  titleEnglish?: string;
-  url?: string;
-  highlighted?: boolean;
-  megaPanelViewAll?: boolean;
-  megapanelContent?: MegapanelContent;
+export interface L0MenuItem extends BasicLink {
+  submenu?: L0Megamenu | BasicLink[];
 }
 
-/**
- * A menu section in masthead.
- */
-export interface MastheadMenuSection {
-  heading?: string;
-  menuItems: MastheadMenuItem[];
+export interface L0Megamenu {
+  sections: Megapanel[];
+  highlights?: MegapanelLinkGroup[];
+  viewAll?: BasicLink;
 }
 
-/**
- * An item in masthead.
- */
-export interface MastheadLink {
-  title: string;
-  titleEnglish?: string;
-  url?: string;
-  hasMenu?: boolean;
-  hasMegapanel?: boolean;
-  megamenuLayout?: 'tab' | 'list';
-  menuSections?: MastheadMenuSection[];
+export interface Megapanel {
+  heading?: BasicLink;
+  groups: MegapanelLinkGroup[];
+  viewAll?: BasicLink;
 }
 
-/**
- * A menu section for masthead
- *
- * @deprecated
- */
-export interface LegacyMastheadL1 {
-  title: string;
-  url?: string;
-  menuItems?: MastheadLink[];
+export interface MegapanelLinkGroup {
+  heading?: BasicLink;
+  links?: BasicLink[];
 }
 
 /**
@@ -176,12 +136,13 @@ export interface MastheadLogoData {
 
 /**
  * Cloud Masthead Profile content
+ *
+ * @deprecated
  */
 export interface MastheadProfileContent {
   iconLabel: string;
   links: MastheadProfileItem[];
   ctaButtons: MastheadProfileItem[];
-  contactUsButton: string;
 }
 
 /**
@@ -194,11 +155,16 @@ export interface MiscLabels {
  * The translation data for ibm.com sites
  */
 export interface Translation {
+  /**
+   * Main masthead navigation data.
+   *
+   * @deprecated Use masthead.nav instead.
+   */
   mastheadNav: {
     /**
      * The nav links.
      */
-    links: MastheadLink[];
+    links: L0MenuItem[];
   };
 
   /**
@@ -211,8 +177,25 @@ export interface Translation {
    */
   footerThin: BasicLink[];
 
+  /**
+   * Masthead items other than main navigation
+   */
+  masthead: {
+    logo: MastheadLogoData;
+    nav: L0MenuItem[];
+    contact: MastheadProfileItem;
+    profileMenu: {
+      unauthenticated: MastheadProfileItem[];
+      authenticated: MastheadProfileItem[];
+      signedin: MastheadProfileContent;
+      signedout: MastheadProfileContent;
+    };
+  };
+
   /**
    * The profile menus.
+   *
+   * @deprecated Use masthead.profileMenu instead.
    */
   profileMenu: {
     /**
@@ -226,18 +209,6 @@ export interface Translation {
     signedout: MastheadProfileItem[];
   };
 
-  /**
-   * Cloud masthead items
-   */
-  masthead: {
-    logo: MastheadLogoData;
-    contact: MastheadProfileContent;
-    profileMenu: {
-      signedout: MastheadProfileContent;
-      signedin: MastheadProfileContent;
-    };
-  };
-
   /**
    * Miscellaneous translations
    */
@@ -296,29 +267,3 @@ export interface TranslateAPIState {
    */
   errorsRequestTranslation?: { [language: string]: Error };
 }
-
-// New for v2.1.0
-export interface L0Menu {
-  items: L0MenuItem[];
-}
-
-export interface L0MenuItem extends BasicLink {
-  submenu?: L0Megamenu | BasicLink[];
-}
-
-export interface L0Megamenu {
-  sections: Megapanel[];
-  highlights?: MegapanelLinkGroup[];
-  viewAll?: BasicLink;
-}
-
-export interface Megapanel {
-  heading?: BasicLink;
-  groups: MegapanelLinkGroup[];
-  viewAll?: BasicLink;
-}
-
-export interface MegapanelLinkGroup {
-  heading?: BasicLink;
-  links?: BasicLink[];
-}
diff --git a/packages/styles/scss/components/masthead/_masthead-l1.scss b/packages/styles/scss/components/masthead/_masthead-l1.scss
@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/button/tokens' as *;
 @use '../../globals/vars' as *;
 @use 'vars' as *;

diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu.scss b/packages/styles/scss/components/masthead/_masthead-megamenu.scss
@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 
@@ -78,7 +79,6 @@
     .#{$prefix}--header__menu-title[aria-expanded='false']
       + .#{$prefix}--header__menu {
       ::slotted(#{$c4d-prefix}-megamenu),
-      ::slotted(#{$c4d-prefix}-cloud-megamenu),
       .#{$prefix}--masthead__megamenu {
         animation: $transition-expansion motion(standard, expressive) collapse;
       }
@@ -99,7 +99,6 @@
       visibility: visible;
 
       ::slotted(#{$c4d-prefix}-megamenu),
-      ::slotted(#{$c4d-prefix}-cloud-megamenu),
       .#{$prefix}--masthead__megamenu {
         animation: $transition-expansion motion(standard, expressive) expand;
       }
@@ -121,7 +120,6 @@
   }
 
   :host(#{$c4d-prefix}-megamenu),
-  :host(#{$c4d-prefix}-cloud-megamenu),
   .#{$prefix}--masthead__megamenu {
     @include box-shadow;
     --#{$c4d-prefix}-masthead-max-height: calc(

diff --git a/packages/styles/scss/components/masthead/_masthead.scss b/packages/styles/scss/components/masthead/_masthead.scss
@@ -17,7 +17,9 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/layout' as layout;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../link-with-icon';
 @use 'vars' as *;
@@ -266,8 +268,9 @@
   }
 
   :host(#{$c4d-prefix}-masthead-composite),
-  :host(#{$c4d-prefix}-masthead-container),
-  :host(#{$c4d-prefix}-cloud-masthead-container) {
+  :host(#{$c4d-prefix}-masthead-container) {
+    @include layout.emit-layout-tokens();
+
     position: relative;
     z-index: 900;
     display: block;

diff --git a/packages/utilities/src/utilities/StickyHeader/StickyHeader.js b/packages/utilities/src/utilities/StickyHeader/StickyHeader.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/web-components/.env.example b/packages/web-components/.env.example
@@ -19,4 +19,3 @@ KALTURA_UICONF_ID=<Kaltura uiconf id, e.g. 12905712>
 
 # Feature Flags
 C4D_FLAGS_ALL=<Boolean flag to turn on all feature flags>
-C4D_CLOUD_MASTHEAD=<Boolean flag to turn on/off cloud masthead>
diff --git a/packages/web-components/IMPLEMENTATION_NOTES.md b/packages/web-components/IMPLEMENTATION_NOTES.md
@@ -202,6 +202,12 @@ There are some common behaviors in CTA components that are implemented by
   attribute of `<a>` for `external` CTA types.
 - [Use a hash link](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0-rc.0/packages/web-components/src/component-mixins/cta/cta.ts#L113-L122)
   for `video` CTA types.
+- Trigger a CTA video on page load using a `#cta-video-[video-id]` URL fragment.
+  For any page that includes a CTA component composed with `CTAMixin`, the CTA
+  will look for a URL fragment following the pattern `#cta-video-[video-id]`,
+  where `[video-id]` is the video id configured for the component. If there is a
+  match, the CTA will automatically be triggered, which in most cases will open
+  a lightbox and begin video playback (subject to browser auto-play policies).
 
 ### Video CTA
 

diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/.gitignore b/packages/web-components/examples/stackblitz/components/cloud-masthead/.gitignore
diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/.sassrc b/packages/web-components/examples/stackblitz/components/cloud-masthead/.sassrc
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,4 +19,3 @@ KALTURA_UICONF_ID=<Kaltura uiconf id, e.g. 12905712>

		# Feature Flags
		C4D_FLAGS_ALL=<Boolean flag to turn on all feature flags>
		C4D_CLOUD_MASTHEAD=<Boolean flag to turn on/off cloud masthead>