Merge branch 'master' into static-prop-selector

packages/react/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2020-12-08)
+
+### Bug Fixes
+
+- **locale-modal:** replaced href target to avoid storybook refresh
+  ([#4647](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4647))
+  ([9ba076e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9ba076e))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [1.14.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2020-12-04)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-react

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-react",
   "description": "Carbon for IBM.com React Components",
-  "version": "1.14.0-rc.0",
+  "version": "1.14.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -169,12 +169,14 @@ const MastheadSearch = ({
     /**
      * Close search when click detected outside of component.
      * This is necessary otherwise search stays open even when
-     * elements other than the close button are clicked.
+     * elements other than the close button and the
+     * profile button are clicked.
      *
-     * @param {*} event Click event outside search component
+     * @param {*} event Click event outside masthead component
      */
     const handleClickOutside = event => {
-      if (ref.current && !ref.current.contains(event.target)) {
+      let mastheadRef = ref.current?.closest('.bx--masthead');
+      if (mastheadRef && !mastheadRef.contains(event.target)) {
         // If a click was detected outside the Search ref but there is a text value in state, don't hide the Search.
         if (state.val.length === 0) {
           dispatch({ type: 'setSearchClosed' });

packages/styles/scss/components/layout/_layout.scss

@@ -19,7 +19,7 @@
 
 @mixin layout {
   .#{$prefix}--layout--sticky-mobile {
-    @include carbon--breakpoint-down('lg') {
+    @include carbon--breakpoint('lg') {
       position: sticky;
       top: 0;
       z-index: 1;

packages/web-components/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/compare/@carbon/[email protected]...@carbon/[email protected]) (2020-12-08)
+
+### Bug Fixes
+
+- **footer:** added label to locale button for better description ([#4669](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/issues/4669)) ([051a08e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/commit/051a08e)), closes [#4667](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/issues/4667)
+- **locale-modal:** remove listbox role for accessibility ([#4670](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/issues/4670)) ([f6b0c5e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/commit/f6b0c5e)), closes [#4668](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/issues/4668)
+- **locale-modal:** replaced href target to avoid storybook refresh ([#4647](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/issues/4647)) ([9ba076e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/commit/9ba076e))
+- **LocaleModale:** region card layout ([#4637](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/issues/4637)) ([fc785a0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/commit/fc785a0)), closes [#4628](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/issues/4628)
+
 # [0.7.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/compare/@carbon/[email protected]...@carbon/[email protected]) (2020-12-04)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-web-components

packages/web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "0.7.0-rc.0",
+  "version": "0.7.0-rc.1",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {

packages/web-components/src/components/feature-card-block-large/__stories__/README.stories.mdx

@@ -39,4 +39,13 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-large/
 
 <Props of="dds-feature-card-block-large" />
 
+## Stable selectors
+
+See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector          | Compatibility selector                      | Description |
+| -------------------------------- | ------------------------------------------- | ----------- |
+| `<dds-feature-card-block-large>` | data-autoid="dds--feature-card-block-large" | Component   |
+
+
 <Description markdown={contributing} />

packages/web-components/src/components/feature-card-block-large/feature-card-block-large.ts

@@ -13,6 +13,7 @@ import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/setti
 import DDSFeatureCard from '../feature-card/feature-card';
 import '../image/image';
 import styles from './feature-card-block-large.scss';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
 
 const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
@@ -23,7 +24,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  * @element dds-feature-card-block-large
  */
 @customElement(`${ddsPrefix}-feature-card-block-large`)
-class DDSFeatureCardBlockLarge extends DDSFeatureCard {
+class DDSFeatureCardBlockLarge extends StableSelectorMixin(DDSFeatureCard) {
   render() {
     return html`
       <div class="${prefix}--feature-card-block-large__container">

packages/web-components/src/components/footer/footer-composite.ts

@@ -91,6 +91,12 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
    */
   _setLanguage?: (language: string) => void;
 
+  /**
+   * The aria-label to use for the locale-button
+   */
+  @property()
+  buttonLabel?: string;
+
   /**
    * The g11n collator to use for sorting contry names.
    */
@@ -187,7 +193,7 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
   }
 
   renderLightDOM() {
-    const { langDisplay, size, links, legalLinks, _handleClickLocaleButton: handleClickLocaleButton } = this;
+    const { buttonLabel, langDisplay, size, links, legalLinks, _handleClickLocaleButton: handleClickLocaleButton } = this;
     return html`
       <dds-footer size="${ifNonNull(size)}">
         <dds-footer-logo></dds-footer-logo>
@@ -206,7 +212,9 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
         </dds-footer-nav>
         ${size !== FOOTER_SIZE.MICRO
           ? html`
-              <dds-locale-button @click="${handleClickLocaleButton}">${langDisplay}</dds-locale-button>
+              <dds-locale-button buttonLabel="${ifNonNull(buttonLabel)}" @click="${handleClickLocaleButton}"
+                >${langDisplay}</dds-locale-button
+              >
             `
           : html``}
         <dds-legal-nav size="${ifNonNull(size)}">
@@ -218,7 +226,11 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
           <dds-legal-nav-cookie-preferences-placeholder></dds-legal-nav-cookie-preferences-placeholder>
           ${size === FOOTER_SIZE.MICRO
             ? html`
-                <dds-locale-button size="${size}" slot="locale" @click="${handleClickLocaleButton}"
+                <dds-locale-button
+                  buttonLabel="${ifNonNull(buttonLabel)}"
+                  size="${size}"
+                  slot="locale"
+                  @click="${handleClickLocaleButton}"
                   >${langDisplay}</dds-locale-button
                 >
               `

packages/web-components/src/components/footer/locale-button.ts

@@ -12,6 +12,7 @@ import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import FocusMixin from 'carbon-web-components/es/globals/mixins/focus.js';
 import EarthFilled20 from 'carbon-web-components/es/icons/earth--filled/20.js';
+import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null';
 import { FOOTER_SIZE } from './footer';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './footer.scss';
@@ -26,6 +27,12 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-locale-button`)
 class DDSLocaleButton extends StableSelectorMixin(FocusMixin(LitElement)) {
+  /**
+   * Button label for accessibility.
+   */
+  @property()
+  buttonLabel = 'Select geographic area';
+
   /**
    * Size property to apply different styles.
    */
@@ -46,8 +53,13 @@ class DDSLocaleButton extends StableSelectorMixin(FocusMixin(LitElement)) {
   }
 
   render() {
+    const { buttonLabel } = this;
     return html`
-      <button id="button" class="${prefix}--btn ${prefix}--btn--secondary ${prefix}--locale-btn">
+      <button
+        id="button"
+        class="${prefix}--btn ${prefix}--btn--secondary ${prefix}--locale-btn"
+        aria-label="${ifNonNull(buttonLabel)}"
+      >
         <slot></slot>
         ${EarthFilled20()}
       </button>

packages/web-components/src/components/image-with-caption/__stories__/README.stories.mdx

@@ -43,4 +43,14 @@ import '@carbon/ibmdotcom-web-components/es/components/image-with-caption/image-
 ## Props
 
 <Props of="dds-image-with-caption" />
+
+## Stable selectors
+
+See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector         | Compatibility selector                | Description |
+| ------------------------------- | ------------------------------------- | ----------- |
+| `<dds-image-with-caption`       | data-autoid="dds--image-with-caption" | Component   |
+
+
 <Description markdown={contributing} />

packages/web-components/src/components/image-with-caption/image-with-caption.ts

@@ -22,6 +22,7 @@ import ZoomIn20 from 'carbon-web-components/es/icons/zoom--in/20';
 import styles from './image-with-caption.scss';
 import ModalRenderMixin from '../../globals/mixins/modal-render';
 import Handle from '../../globals/internal/handle';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
 
 const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
@@ -33,7 +34,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 
 @customElement(`${ddsPrefix}-image-with-caption`)
-class DDSImageWithCaption extends ModalRenderMixin(FocusMixin(LitElement)) {
+class DDSImageWithCaption extends StableSelectorMixin(ModalRenderMixin(FocusMixin(LitElement))) {
   /**
    * `true` handles re-opening after model is closed
    *
@@ -169,6 +170,10 @@ class DDSImageWithCaption extends ModalRenderMixin(FocusMixin(LitElement)) {
     return `${ddsPrefix}-expressive-modal-closed`;
   }
 
+  static get stableSelector() {
+    return `${ddsPrefix}--image-with-caption`;
+  }
+
   static styles = styles;
 }
 

packages/web-components/src/components/locale-modal/locale-search.ts

@@ -205,7 +205,7 @@ class DDSLocaleSearch extends ThrottedInputMixin(LitElement) {
             ${hasAvailableItem ? availabilityLabelText : unavailabilityLabelText}
           </p>
         </div>
-        <div role="listbox" class="${prefix}--locale-modal__list">
+        <div class="${prefix}--locale-modal__list">
           <slot></slot>
         </div>
       </div>

packages/web-components/src/components/locale-modal/region-item.ts

@@ -64,11 +64,13 @@ class DDSRegionItem extends HostListenerMixin(DDSLink) {
     const { invalid, name } = this;
     return html`
       <div class="${prefix}--card__wrapper">
-        <h3 class="${prefix}--card__heading">
-          <slot>${name}</slot>
-        </h3>
-        <div class="${prefix}--card__footer">
-          ${(invalid ? Error20 : ArrowRight20)({ class: `${prefix}--card__cta` })}
+        <div class="${prefix}--card__content">
+          <h3 class="${prefix}--card__heading">
+            <slot>${name}</slot>
+          </h3>
+          <div class="${prefix}--card__footer">
+            ${(invalid ? Error20 : ArrowRight20)({ class: `${prefix}--card__cta` })}
+          </div>
         </div>
       </div>
     `;

packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx

@@ -57,4 +57,17 @@ import '@carbon/ibmdotcom-web-components/es/components/pictogram-item/pictogram-
 
 <Description markdown={markdownContents} />
 
+## Props
+
+<Props of="dds-pictogram-item" />
+
+## Stable selectors
+
+See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector      | Compatibility selector                 | Description |
+| ---------------------------- | -------------------------------------- | ----------- |
+| `<dds-pictogram-item>`       | data-autoid="dds--pictogram-item" | Component   |
+
+
 <Description markdown={contributing} />

packages/web-components/src/components/pictogram-item/pictogram-item.ts

@@ -12,6 +12,7 @@ import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/setti
 import settings from 'carbon-components/es/globals/js/settings';
 import DDSContentItem from '../content-item/content-item';
 import styles from './pictogram-item.scss';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
 
 const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
@@ -25,7 +26,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  * @slot footer - The footer (CTA) content.
  */
 @customElement(`${ddsPrefix}-pictogram-item`)
-class DDSPictogramItem extends DDSContentItem {
+class DDSPictogramItem extends StableSelectorMixin(DDSContentItem) {
   render() {
     return html`
       <div class="${prefix}--pictogram-item__row">
@@ -41,6 +42,10 @@ class DDSPictogramItem extends DDSContentItem {
     `;
   }
 
+  static get stableSelector() {
+    return `${ddsPrefix}--pictogram-item`;
+  }
+
   static styles = styles;
 }
 

packages/web-components/src/components/quote/quote.ts

@@ -18,29 +18,29 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
 
 export enum QUOTE_TYPES {
   /**
-   * Default - doubleCurved
+   * Default - double-curved
    */
-  DEFAULT = 'doubleCurved',
+  DEFAULT = 'double-curved',
 
   /**
-   * singleCurved
+   * single-curved
    */
-  SINGLE_CURVED = 'singleCurved',
+  SINGLE_CURVED = 'single-curved',
 
   /**
-   * singleAngle
+   * single-angle
    */
-  SINGLE_ANGLE = 'singleAngle',
+  SINGLE_ANGLE = 'single-angle',
 
   /**
-   * doubleAngle
+   * double-angle
    */
-  DOUBLE_ANGLE = 'doubleAngle',
+  DOUBLE_ANGLE = 'double-angle',
 
   /**
-   * lowHighReversedDoubleCurved
+   * low-high-reversed-double-curved
    */
-  LOW_HIGH_REVERSED_DOUBLE_CURVED = 'lowHighReversedDoubleCurved',
+  LOW_HIGH_REVERSED_DOUBLE_CURVED = 'low-high-reversed-double-curved',
 
   /**
    * cornerBracket
@@ -67,11 +67,11 @@ class DDSQuote extends StableSelectorMixin(LitElement) {
   /**
    * Defines rendered quote mark style
    * styles:
-   * `doubleCurved`: `“ ”`;
-   * `singleCurved`: `‘ ’`;
-   * `singleAngle`: `‹ ›`;
-   * `doubleAngle`: `« »`;
-   * `lowHighReversedDoubleCurved`: `„ “`;
+   * `double-curved`: `“ ”`;
+   * `single-curved`: `‘ ’`;
+   * `single-angle`: `‹ ›`;
+   * `double-angle`: `« »`;
+   * `low-high-reversed-double-curved`: `„ “`;
    * `cornerBracket`: `「 」`;
    */
   @property({ reflect: true, attribute: 'mark-type' })

packages/web-components/tests/snapshots/dds-locale-search.md

@@ -21,10 +21,7 @@
       This page is available in the following locations and languages
     </p>
   </div>
-  <div
-    class="bx--locale-modal__list"
-    role="listbox"
-  >
+  <div class="bx--locale-modal__list">
     <slot>
     </slot>
   </div>
@@ -51,10 +48,7 @@
       availability-label-text-foo
     </p>
   </div>
-  <div
-    class="bx--locale-modal__list"
-    role="listbox"
-  >
+  <div class="bx--locale-modal__list">
     <slot>
     </slot>
   </div>