Merge branch 'feat/carbon-for-ibm-dotcom-v2' into feat/link-with-icon…

…-v2-10859

.github/workflows/e2e-integration.yml

@@ -2,7 +2,7 @@ name: e2e-integration
 
 on:
   push:
-    branches: [ main, release/* ]
+    branches: [ main, release/*, feat/masthead-v2, feat/masthead-v2-dev ]
   schedule:
     - cron: '0 20 * * 1-5'
 

.github/workflows/e2e-tests.yml

@@ -43,4 +43,4 @@ jobs:
       - name: Run e2e tests (chromium)
         if: matrix.browser == 'chromium'
         working-directory: packages/web-components
-        run: yarn test:e2e-storybook:test:no-percy
+        run: yarn test:e2e-storybook:test:no-percy

docs/dotcom-v2-migration.md

@@ -38,6 +38,7 @@ For Carbon v11 migration guidance, see their
 | content-group-cards       | This component is deprecated in v2 in favor for content-section/block & card-group components                                                  |
 | content-group-pictograms  | This component is deprecated in v2 in favor for content-section/block content-item (pictogram variant) components                              |
 | content-group-simple      | This component is deprecated in v2 in favor for content-group, image, & content-item components                                                |
+| content-item-horizontal   | View changes [here](#content-item-horizontal)                                                                                           |
 | cta                       | View changes [here](#cta)                                                                                                                      |
 | cta-block                 | This component is deprecated in v2 in favor for content-section/block & content-item components                                                |
 | cta-section               | This component is deprecated in v2 in favor for content-section/block & content-item components                                                |
@@ -49,6 +50,7 @@ For Carbon v11 migration guidance, see their
 | image                     | View changes [here](#image)                                                                                                                    |
 | image-with-caption        | This component is deprecated in v1 and has been removed in v2 in favor of the image component                                                  |
 | leadspace                 | View changes [here](#leadspace)                                                                                                                |
+| leadspace-with-search     | View changes [here](#leadspace-with-search)                                                                                                    |
 | link-list-section         | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components                            |
 | link-with-icon            | No API changes.                                                                                                                                |
 | logo-grid                 | This component is deprecated in v2 in favor for content-section/block & image-group components                                                 |
@@ -73,13 +75,18 @@ For Carbon v11 migration guidance, see their
 
 ### Card
 
-- `<dds-card-footer>` has `icon-placement` property has been removed
+- `<c4d-card-footer>`'s `icon-placement` property has been removed
 - Removed `border` property, clickable cards inherit the Carbon v11 experimental
   tile border style
 - New `aspect-ratio` property with '1:1', '2:1', '3:2', '4:3', and '16:9' as
   options
 - New `link` property which takes the place of the deprecated `card-link`
 
+### Content item horizontal
+
+- `content-item-horizontal` changed names to `content-item-row`
+- All components with `content-item-horizontal-*` also changed to `content-item-row-*`
+
 ### CTA
 
 In Carbon for IBM.com v2, the CTA component (and all of its subcomponents) have
@@ -110,6 +117,15 @@ information.
 
 - New `highlight` and `type-style` attributes for `leadspace-heading`
 
+### Leadspace with Search
+
+- `<dds-leadspace-with-search-heading>` has been replaced with `<dds-leadspace-heading>`
+- `<dds-leadspace-with-search-content-copy>` has been replaced with `<dds-leadspace-with-search-copy>`
+- New highlight attribute in `dds-leadspace-heading`
+- Deprecated background-media image variant
+- Removed `<dds-leadspace-with-search-heading>`, `<dds-leadspace-with-search-content>`, 
+`<dds-leadspace-with-search-content-heading>`, `<dds-leadspace-with-search-content-copy>`
+
 ### Universal banner
 
-- `universal-banner` changed names to `global-banner`
+- `universal-banner` changed names to `global-banner`

packages/carbon-web-components/src/components/modal/modal-story.scss

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2020, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable selector-type-no-unknown */
+bx-modal[open] {
+  // `@extend` usage in the corresponding rule in `modal.scss` causes the ruleset defined after `:host(bx-modal)`,
+  // which itself is OK, but it causes an adverse effect in Playwright WebKit environment
+  // TODO: Upgrade Playwright soon
+  opacity: 1;
+  visibility: inherit;
+}

packages/carbon-web-components/src/components/tabs/tabs.ts

@@ -9,7 +9,6 @@
 
 import { html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
@@ -310,7 +309,7 @@ export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {
   };
 
   /**
-   * Cleans-up and creats the intersection observer for the scrolling container.
+   * Cleans-up and creates the intersection observer for the scrolling container.
    *
    * @param [options] The options.
    * @param [options.create] `true` to create the new intersection observer.
@@ -411,42 +410,64 @@ export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {
     }
   }
 
-  render() {
+  /**
+   * Render the previous button if tablist is wider than container.
+   */
+  protected renderPreviousButton() {
     const {
       _isIntersectionLeftTrackerInContent: isIntersectionLeftTrackerInContent,
+    } = this;
+
+    return isIntersectionLeftTrackerInContent
+      ? html`
+          <button
+            part="prev-button"
+            tabindex="-1"
+            aria-hidden="true"
+            class="${prefix}--tab--overflow-nav-button ${prefix}--tabs__nav-caret-left ${prefix}--tab--overflow-nav-button--previous"
+            @click=${(_) =>
+              this._handleScrollButtonClick(_, {
+                direction: NAVIGATION_DIRECTION.Left,
+              })}>
+            ${ChevronLeft16()}
+          </button>
+        `
+      : null;
+  }
+
+  /**
+   * Render the next button if tablist is wider than container.
+   */
+  protected renderNextButton() {
+    const {
       _isIntersectionRightTrackerInContent: isIntersectionRightTrackerInContent,
+    } = this;
+
+    return isIntersectionRightTrackerInContent
+      ? html`
+          <button
+            part="next-button"
+            tabindex="-1"
+            aria-hidden="true"
+            class="${prefix}--tab--overflow-nav-button ${prefix}--tabs__nav-caret-right ${prefix}--tab--overflow-nav-button--next"
+            @click=${(_) =>
+              this._handleScrollButtonClick(_, {
+                direction: NAVIGATION_DIRECTION.Right,
+              })}>
+            ${ChevronRight16()}
+          </button>
+        `
+      : null;
+  }
+
+  render() {
+    const {
       _assistiveStatusText: assistiveStatusText,
       _handleSlotchange: handleSlotchange,
     } = this;
 
-    const previousButtonClasses = classMap({
-      [`${prefix}--tab--overflow-nav-button`]: true,
-      [`${prefix}--tabs__nav-caret-left`]: true,
-      [`${prefix}--tab--overflow-nav-button--previous`]: true,
-      [`${prefix}--tab--overflow-nav-button--hidden`]:
-        isIntersectionLeftTrackerInContent,
-    });
-    const nextButtonClasses = classMap({
-      [`${prefix}--tab--overflow-nav-button`]: true,
-      [`${prefix}--tabs__nav-caret-right`]: true,
-      [`${prefix}--tab--overflow-nav-button--next`]: true,
-      [`${prefix}--tab--overflow-nav-button--hidden`]:
-        isIntersectionRightTrackerInContent,
-    });
-
     return html`
-      <button
-        part="prev-button"
-        tabindex="-1"
-        aria-hidden="true"
-        class="${previousButtonClasses}"
-        @click=${(_) =>
-          this._handleScrollButtonClick(_, {
-            direction: NAVIGATION_DIRECTION.Left,
-          })}>
-        ${ChevronLeft16()}
-      </button>
-
+      ${this.renderPreviousButton()}
       <div class="${prefix}--tabs-nav-content-container">
         <div class="${prefix}--tabs-nav-content">
           <div class="${prefix}--tabs-nav">
@@ -458,18 +479,7 @@ export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {
           </div>
         </div>
       </div>
-
-      <button
-        part="next-button"
-        tabindex="-1"
-        aria-hidden="true"
-        class="${nextButtonClasses}"
-        @click=${(_) =>
-          this._handleScrollButtonClick(_, {
-            direction: NAVIGATION_DIRECTION.Right,
-          })}>
-        ${ChevronRight16()}
-      </button>
+      ${this.renderNextButton()}
       <div
         class="${prefix}--assistive-text"
         role="status"

packages/carbon-web-components/src/components/tile/defs.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

packages/carbon-web-components/src/components/toggle/index.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

packages/carbon-web-components/tools/deploy.sh

@@ -0,0 +1,23 @@
+#!/bin/sh
+
+set -e
+
+git clean -f
+mv storybook-static ../storybook-static
+cd ../storybook-static
+echo "web-components.carbondesignsystem.com" > CNAME
+touch .nojekyll
+
+git init
+git config user.name "carbon-bot"
+git config user.email "[email protected]"
+git fetch "https://git:${GH_TOKEN}@github.com/carbon-design-system/carbon-web-components.git" gh-pages
+
+set +e
+
+git add .
+git commit -m "Deploy to GitHub Pages"
+
+if [ $? -eq 0 ]; then
+  git push --force "https://git:${GH_TOKEN}@github.com/carbon-design-system/carbon-web-components.git" main:gh-pages > /dev/null 2>&1
+fi

packages/services-store/src/actions/__tests__/profileAPI.test.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,6 +15,7 @@ import {
   UNAUTHENTICATED_STATUS,
   PROFILE_API_ACTION,
   ProfileAPIState,
+  MASTHEAD_AUTH_METHOD,
 } from '../../types/profileAPI';
 import convertValue from '../../../tests/utils/convert-value';
 import { loadUserStatus, setUserStatus } from '../profileAPI';
@@ -43,7 +44,7 @@ describe('Redux actions for `ProfileAPI`', () => {
       user: UNAUTHENTICATED_STATUS,
     });
     const store = mockStore();
-    await store.dispatch(loadUserStatus());
+    await store.dispatch(loadUserStatus(MASTHEAD_AUTH_METHOD.DEFAULT));
     expect(convertValue(store.getActions())).toEqual([
       {
         type: PROFILE_API_ACTION.SET_REQUEST_USER_STATUS_IN_PROGRESS,
@@ -63,7 +64,7 @@ describe('Redux actions for `ProfileAPI`', () => {
     const store = mockStore();
     let caught;
     try {
-      await store.dispatch(loadUserStatus());
+      await store.dispatch(loadUserStatus(MASTHEAD_AUTH_METHOD.DEFAULT));
     } catch (error) {
       caught = error;
     }

packages/services-store/src/actions/__tests__/translateAPI.test.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -53,15 +53,21 @@ const mockTranslation: Partial<Translation> = {
   },
 };
 
+const endpoint =
+  '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2';
+
 describe('Redux actions for `TranslateAPI`', () => {
   it('dispatches the action to set translation data', () => {
     const store = mockStore();
-    store.dispatch(setTranslation('lang-foo', mockTranslation as Translation));
+    store.dispatch(
+      setTranslation('lang-foo', mockTranslation as Translation, endpoint)
+    );
     expect(store.getActions()).toEqual([
       {
         type: TRANSLATE_API_ACTION.SET_TRANSLATION,
         language: 'lang-foo',
         translation: mockTranslation,
+        endpoint,
       },
     ]);
   });

packages/services-store/src/actions/cloudAccountAuthAPI.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.