Merge branch 'master' into 7433-test/pictogram-item-e2e

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -3,7 +3,7 @@ description:
   Something isn't working as expected? Here is the right place to report.
 title: '[YOUR TITLE]: Brief description'
 assignees:
-  - jeffchew,ljcarot,shixiedesign,RobertaJHahn,photodow,andysherman2121,annawen1
+  - jeffchew,ljcarot,shixiedesign,RobertaJHahn,RichKummer,kennylam,BrunnoM7
 labels: ['bug']
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/contribution_request.yaml

@@ -3,7 +3,7 @@ description:
   Contribute things large and small — code, design, ideas, and guidance.
 title: '[YOUR TITLE]: Brief description'
 assignees:
-  - jeffchew,ljcarot,shixiedesign,RobertaJHahn,photodow,andysherman2121,annawen1
+  - jeffchew,ljcarot,shixiedesign,RobertaJHahn,RichKummer,kennylam,BrunnoM7
 labels: ['contribution']
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -3,7 +3,7 @@ description:
   Suggest a new idea for the project.
 title: '[YOUR TITLE]: Brief description'
 assignees:
-  - jeffchew,ljcarot,shixiedesign,RobertaJHahn,photodow,andysherman2121,annawen1
+  - jeffchew,ljcarot,shixiedesign,RobertaJHahn,RichKummer,kennylam,BrunnoM7
 labels: ['Feature request']
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/question.yaml

@@ -3,7 +3,7 @@ description:
   Usage question or discussion about Carbon for IBM.com.
 title: '[YOUR TITLE]: Brief description'
 assignees:
-  - jeffchew,ljcarot,shixiedesign,RobertaJHahn,photodow,andysherman2121,annawen1
+  - jeffchew,ljcarot,shixiedesign,RobertaJHahn,RichKummer,kennylam,BrunnoM7
 labels: ['question']
 body:
   - type: markdown

packages/react/src/components/Masthead/Masthead.js

@@ -148,7 +148,7 @@ const Masthead = ({
     [`${prefix}--masthead__header--search-active`]: isSearchActive,
   });
 
-  const [scrollOffset, setScrollOffset] = useState(window.scrollY);
+  const [scrollOffset, setScrollOffset] = useState(root.scrollY);
 
   useEffect(() => {
     /**

packages/react/src/components/TableOfContents/TOCDesktop.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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.

packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss

@@ -100,20 +100,18 @@
     }
 
     .#{$prefix}--content-item-horizontal__col {
+      text-align: left;
+      grid-column: 1 / span 4;
+
       &:first-of-type {
-        grid-column: 1 / span 4;
-        text-align: left;
         margin-inline-end: $carbon--spacing-07;
       }
 
       &:last-of-type {
-        grid-column: 1 / span 4;
-        margin-top: 1rem;
+        margin-block-start: $carbon--spacing-05;
+
         @include carbon--breakpoint(lg) {
-          margin-top: 0;
-          grid-column: 5 / span 6;
-        }
-        @include carbon--breakpoint(max) {
+          margin-block-start: 0;
           grid-column: 5 / span 6;
         }
       }
@@ -122,19 +120,14 @@
     &.#{$prefix}--content-item-horizontal-media__align-left {
       .#{$prefix}--content-item-horizontal__col {
         &:first-of-type {
-          grid-column: 1 / span 4;
-
           @include carbon--breakpoint(lg) {
-            grid-column: 5 / span 6;
+            margin-inline-end: 0;
           }
         }
 
         &:last-of-type {
-          grid-column: 1 / span 4;
-          margin-top: 1rem;
-
           @include carbon--breakpoint(lg) {
-            margin-top: 0;
+            margin-inline-end: $carbon--spacing-07;
           }
         }
       }
@@ -144,11 +137,11 @@
   :host(#{$dds-prefix}-content-item-horizontal-media-featured) {
     display: block;
     position: relative;
-    padding-top: $carbon--spacing-07;
-    margin-bottom: $carbon--spacing-07;
+    padding-block-start: $carbon--spacing-07;
+    margin-block-end: $carbon--spacing-07;
 
     @include carbon--breakpoint(md) {
-      margin-bottom: $carbon--spacing-10;
+      margin-block-end: $carbon--spacing-10;
     }
 
     &::before {
@@ -163,17 +156,17 @@
 
     .#{$prefix}--content-item-horizontal__row {
       + .#{$prefix}--content-item-horizontal__row {
-        margin-top: $carbon--spacing-05;
+        margin-block-start: $carbon--spacing-05;
 
         @include carbon--breakpoint(md) {
-          margin-top: $carbon--spacing-07;
+          margin-block-start: $carbon--spacing-07;
         }
       }
 
       .#{$prefix}--content-item-horizontal__col {
         &:last-of-type {
           @include carbon--breakpoint-down(md) {
-            margin-top: 0;
+            margin-block-start: 0;
           }
         }
       }

packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts

@@ -7,9 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { customElement, html, property } from 'lit-element';
+import { customElement, html, internalProperty, property, TemplateResult } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { baseFontSize, breakpoints } from '@carbon/layout';
+import HostListener from 'carbon-web-components/es/globals/decorators/host-listener.js';
+import HostListenerMixin from 'carbon-web-components/es/globals/mixins/host-listener.js';
 import DDSContentItem from '../content-item/content-item';
 import styles from './content-item-horizontal-media.scss';
 
@@ -18,30 +21,71 @@ import { MEDIA_ALIGN } from './defs';
 const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
+const breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
+
 /**
  * A component to present content in a horizontal orientation with media.
  *
  * @element dds-content-item-horizontal-media
  */
 @customElement(`${ddsPrefix}-content-item-horizontal-media`)
-class DDSContentItemHorizontalMedia extends DDSContentItem {
+class DDSContentItemHorizontalMedia extends HostListenerMixin(DDSContentItem) {
   /**
    * Defines the alignment of the media: `left` or `right`
    */
   @property({ reflect: true })
   align = MEDIA_ALIGN.RIGHT;
 
+  /**
+   * Identifies whether the window width is below the breakpoint or not.
+   */
+  @internalProperty()
+  _isOneColumn: boolean = window.innerWidth < breakpoint;
+
+  @HostListener('window:resize')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleWindowResize = (): void => {
+    this._isOneColumn = window.innerWidth < breakpoint;
+  };
+
+  /**
+   * @returns The text column content.
+   */
+  protected _renderTextCol(): TemplateResult | string | void {
+    return html`
+      <div class="${prefix}--content-item-horizontal__col">
+        <slot name="eyebrow" @slotchange="${this._handleSlotChange}"></slot>
+        <slot name="heading"></slot>
+        ${this._renderBody()} ${this._renderFooter()}
+      </div>
+    `;
+  }
+
+  /**
+   * @returns The component content in the appropriate tabbing order.
+   */
+  protected _renderContent(): TemplateResult | string | void {
+    const alignedRight = this._isOneColumn || this.align === MEDIA_ALIGN.RIGHT;
+
+    return alignedRight
+      ? html`
+          ${this._renderTextCol()}
+          <div class="${prefix}--content-item-horizontal__col">
+            <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
+          </div>
+        `
+      : html`
+          <div class="${prefix}--content-item-horizontal__col">
+            <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
+          </div>
+          ${this._renderTextCol()}
+        `;
+  }
+
   render() {
     return html`
       <div class="${prefix}--content-item-horizontal__row ${prefix}--content-item-horizontal-media__align-${this.align}">
-        <div class="${prefix}--content-item-horizontal__col">
-          <slot name="eyebrow" @slotchange="${this._handleSlotChange}"></slot>
-          <slot name="heading"></slot>
-          ${this._renderBody()}${this._renderFooter()}
-        </div>
-        <div class="${prefix}--content-item-horizontal__col">
-          <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
-        </div>
+        ${this._renderContent()}
       </div>
     `;
   }