From 058e7b8964db2ae60c7d55c63ac1b576b579d1dc Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Mon, 7 Dec 2020 22:15:36 +0900 Subject: [PATCH 01/25] fix(link-list): add missing mixin (#4632) * fix(link-list): add missing mixin Ensures `` extends `StableSelectorMixin` so the static property that defines that stable selector works. Refs #4366. * docs(link-list): unify the format --- .../link-list/__stories__/README.stories.mdx | 24 +++++++++++++++---- .../src/components/link-list/link-list.ts | 3 ++- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/web-components/src/components/link-list/__stories__/README.stories.mdx b/packages/web-components/src/components/link-list/__stories__/README.stories.mdx index 1d0c803fe42..ac943d7adb1 100644 --- a/packages/web-components/src/components/link-list/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/link-list/__stories__/README.stories.mdx @@ -26,12 +26,20 @@ import '@carbon/ibmdotcom-web-components/es/components/card-link/card-link.js'; ```html - - - +

Copy text

- @@ -42,4 +50,12 @@ import '@carbon/ibmdotcom-web-components/es/components/card-link/card-link.js'; +## 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 | +| ----------------------- | ---------------------------- | ----------- | +| `` | data-autoid="dds--link-list" | Component | + diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts index 977e52af5d9..19c18b2abf6 100644 --- a/packages/web-components/src/components/link-list/link-list.ts +++ b/packages/web-components/src/components/link-list/link-list.ts @@ -10,6 +10,7 @@ import { customElement, html, LitElement, property } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings'; import sameHeight from '@carbon/ibmdotcom-utilities/es/utilities/sameHeight/sameHeight'; +import StableSelectorMixin from '../../globals/mixins/stable-selector'; import styles from './link-list.scss'; const { prefix } = settings; @@ -47,7 +48,7 @@ export enum LINK_LIST_TYPE { * @slot heading - The heading content. */ @customElement(`${ddsPrefix}-link-list`) -class DDSLinkList extends LitElement { +class DDSLinkList extends StableSelectorMixin(LitElement) { static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader private childItems; From be18e710862ba1205ef01716c0ee0ba49939affc Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 8 Dec 2020 00:24:20 +0900 Subject: [PATCH 02/25] docs(video-player): add documentation of stable selector (#4631) Adds the documentation of stable selector for our video player component. React `` has one `data-autoid` in its inner content `
`. Web Components versions renders the corresponding element in Shadow DOM and thus analytics, etc. cannot access the element via `data-autoid`. So the instruction is using `` tag to find the video player. Refs #4369. --- .../video-player/__stories__/README.stories.mdx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/components/video-player/__stories__/README.stories.mdx b/packages/web-components/src/components/video-player/__stories__/README.stories.mdx index eac5f5368f5..9005c451c23 100644 --- a/packages/web-components/src/components/video-player/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/video-player/__stories__/README.stories.mdx @@ -15,8 +15,7 @@ import '@carbon/ibmdotcom-web-components/es/components/video-player/video-player ### HTML ```html - - + ``` ## Manual usage of Kaltura API @@ -55,4 +54,12 @@ VideoPlayerAPI.checkScript().then(() => { +## 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 | +| ----------------------- | ---------------------- | ----------- | +| `` | N/A | Component | + From 55ac0c65b9910c5ff28f233e2b439804d1d87e2e Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 8 Dec 2020 00:51:59 +0900 Subject: [PATCH 03/25] chore(components): unify slot names (#4635) ### Related Ticket(s) Refs #4112. ### Description Changes all `` occurrences to `` to neutralize the purpose of the ``. The only exception is one in `` where there is a CTA in the middle and one in the footer. Used `` for the former. ### Changelog **Changed** - All `` occurrences to `` to neutralize the purpose of the ``. --- .../components/content-block-cards/index.html | 2 +- .../content-block-headlines/index.html | 8 ++--- .../content-block-segmented/index.html | 2 +- .../content-block-simple/index.html | 2 +- .../content-group-horizontal/index.html | 2 +- .../content-group-pictograms/index.html | 2 +- .../content-item-horizontal/index.html | 2 +- .../components/cta-section/index.html | 16 ++++----- .../components/pictogram-item/index.html | 2 +- .../usage/markdown-handlebars/index.hbs | 2 +- .../__stories__/callout-quote.stories.ts | 2 +- .../__stories__/README.stories.mdx | 2 +- .../content-block-cards.stories.ts | 6 ++-- .../__tests__/content-block-cards.test.ts | 2 +- .../__stories__/README.stories.mdx | 8 ++--- .../content-block-headlines.stories.ts | 4 +-- .../content-block-headlines-item.ts | 2 +- .../__stories__/README.stories.mdx | 4 +-- .../content-block-mixed.stories.ts | 2 +- .../__stories__/README.stories.mdx | 2 +- .../content-block-segmented.stories.ts | 12 +++---- .../__tests__/content-block-segmented.test.ts | 2 +- .../__stories__/README.stories.mdx | 2 +- .../content-block-simple.stories.ts | 8 ++--- .../components/content-block/content-block.ts | 14 ++++---- .../__stories__/README.stories.mdx | 2 +- .../content-group-horizontal.stories.ts | 2 +- .../content-group-horizontal.test.ts | 2 +- .../__stories__/README.stories.mdx | 2 +- .../content-group-pictograms.stories.js | 2 +- .../__stories__/README.stories.mdx | 2 +- .../content-item-horizontal.stories.ts | 2 +- .../__tests__/content-item-horizontal.test.ts | 2 +- .../content-item-horizontal.ts | 10 +++--- .../__tests__/content-item.test.ts | 2 +- .../components/content-item/content-item.ts | 29 +++++++++------ .../__stories__/cta-section.stories.ts | 14 ++++---- .../cta-section/__tests__/cta-section.test.ts | 2 +- .../cta-section/cta-section-item.ts | 10 ++++-- .../components/cta-section/cta-section.scss | 2 +- .../src/components/cta-section/cta-section.ts | 35 ++++++++++--------- ...egal-nav-cookie-preferences-placeholder.ts | 4 +-- .../components/logo-grid/logo-grid-link.ts | 11 +++--- .../__stories__/README.stories.mdx | 2 +- .../__stories__/pictogram-item.stories.ts | 2 +- .../pictogram-item/pictogram-item.ts | 2 +- .../quote/__stories__/README.stories.mdx | 2 +- .../quote/__stories__/quote.stories.ts | 2 +- .../src/components/quote/quote.ts | 16 ++++----- .../tests/snapshots/dds-callout-quote.md | 2 +- .../tests/snapshots/dds-callout-with-media.md | 6 ++-- .../snapshots/dds-content-block-cards.md | 4 +-- .../snapshots/dds-content-block-headlines.md | 2 +- .../snapshots/dds-content-block-media.md | 4 +-- .../snapshots/dds-content-block-segmented.md | 4 +-- .../snapshots/dds-content-block-simple.md | 4 +-- .../snapshots/dds-content-group-horizontal.md | 4 +-- .../snapshots/dds-content-item-horizontal.md | 4 +-- .../tests/snapshots/dds-content-item.md | 4 +-- .../tests/snapshots/dds-cta-section.md | 8 ++--- .../tests/snapshots/dds-logo-grid.md | 2 +- .../tests/snapshots/dds-pictogram-item.md | 2 +- .../tests/snapshots/dds-quote.md | 2 +- 63 files changed, 172 insertions(+), 153 deletions(-) diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html index fef7ffc69fd..769ee608f01 100644 --- a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html +++ b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html @@ -63,7 +63,7 @@ - +

Lorem ipsum dolor sit ametttt

diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html index 1832e7a8d83..bfcad68d276 100644 --- a/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html +++ b/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html @@ -29,7 +29,7 @@ Lorem ipsum Aliquam condimentum Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. - + Aliquam condimentum interdum diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html index 92a53cd7872..29d46ac5f11 100644 --- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html +++ b/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html @@ -27,7 +27,7 @@

Hello World! ๐Ÿ‘‹

Lorem ipsum Aliquam condimentum Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Curabitur malesuada varius mi eu posuere Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs. - - - Primary Button - - - Primary button - - + + + Primary Button + + + Primary button + + diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/index.html b/packages/web-components/examples/codesandbox/components/pictogram-item/index.html index d20a2191118..db88b586b39 100644 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/index.html +++ b/packages/web-components/examples/codesandbox/components/pictogram-item/index.html @@ -69,7 +69,7 @@

Hello World! ๐Ÿ‘‹

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam - + Lorem ipsum dolor - Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts index ee5ea8f21dd..a87bd45b8c6 100644 --- a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts +++ b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts @@ -29,7 +29,7 @@ export const Default = ({ parameters }) => { ${sourceBottomCopy} - + Link with Icon ${ArrowRight20({ slot: 'icon' })} diff --git a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx index aae9f5578ff..99e45fae191 100644 --- a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx @@ -71,7 +71,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j - +

Lorem ipsum dolor sit ametttt

${ctaCopy}

${ArrowRight20({ slot: 'footer' })} @@ -91,7 +91,7 @@ export const withImages = ({ parameters }) => { ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages} - +

${ctaCopy}

${ArrowRight20({ slot: 'footer' })} @@ -108,7 +108,7 @@ export const withVideos = ({ parameters }) => { ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} - +

${ctaCopy}

${ArrowRight20({ slot: 'footer' })} diff --git a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts index 4813bab77f4..98bbbcc15b2 100644 --- a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts +++ b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts @@ -18,7 +18,7 @@ const template = (props?) => { ${heading} ${children} - +

ctaCopy-foo

${ArrowRight20({ slot: 'footer' })} diff --git a/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx index 037d0ba4f1e..4e316192487 100755 --- a/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx @@ -41,7 +41,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent faster. - + Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent faster. - + Save 1.34M per year by optimizing your time and IT expenses. - + Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent faster. - + Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent faster. - + Link text @@ -35,7 +35,7 @@ const contentItemRow2 = html` 1.34M Save 1.34M per year by optimizing your time and IT expenses. - + Link text diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts b/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts index fa6a2e345cd..f1ce5d398b2 100755 --- a/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts +++ b/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts @@ -32,7 +32,7 @@ class DDSContentBlockHeadlinesItem extends StableSelectorMixin(DDSContentItem) { return html`

- + `; } diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx index d78840ab185..52ebd69395b 100644 --- a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx @@ -80,7 +80,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js'; - +

Lorem ipsum dolor sit ametttt

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet - + Link text ... diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts index 398209168c6..6968323ba52 100644 --- a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts +++ b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts @@ -166,7 +166,7 @@ export const Default = ({ parameters }) => { ${itemHeading} ${itemCopy} - + ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })} diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx index d9eebe228c6..9abacb5f945 100644 --- a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx @@ -62,7 +62,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-segmented/c Lorem Ipsum dolor sit - + Lorem ipsum dolor diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts index c230581523f..2689871b159 100644 --- a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts +++ b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts @@ -112,12 +112,12 @@ export const Default = ({ parameters }) => { ${ctaStyle === 'text' ? html` - Lorem ipsum dolor ` : html` - + Lorem ipsum dolor @@ -150,12 +150,12 @@ export const withVideo = ({ parameters }) => { ${ctaStyle === 'text' ? html` - Lorem ipsum dolor ` : html` - + Lorem ipsum dolor @@ -201,12 +201,12 @@ export const withAsideElements = ({ parameters }) => { ${ctaStyle === 'text' ? html` - Lorem ipsum dolor ` : html` - + Lorem ipsum dolor diff --git a/packages/web-components/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts b/packages/web-components/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts index 23255a60781..01df615cd40 100644 --- a/packages/web-components/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts +++ b/packages/web-components/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts @@ -47,7 +47,7 @@ describe('dds-content-block-segmented', function() { ${image} - + Lorem ipsum dolor `, diff --git a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx index 381e83e2850..c22b4e69599 100644 --- a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx @@ -45,7 +45,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-simple/cont - Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet ``` diff --git a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts index 69f9a208cb0..7a23c69208c 100644 --- a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts +++ b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts @@ -85,7 +85,7 @@ export const Default = ({ parameters }) => { ${heading} ${copy} - ${ctaCopy} + ${ctaCopy} `; }; @@ -98,7 +98,7 @@ export const WithImage = ({ parameters }) => { ${heading} ${image} ${copy} - ${ctaCopy} + ${ctaCopy} `; }; @@ -111,7 +111,7 @@ export const WithVideo = ({ parameters }) => { ${heading} ${copy} - ${ctaCopy} + ${ctaCopy} `; }; @@ -137,7 +137,7 @@ export const WithAsideElements = ({ parameters }) => { - ${ctaCopy} + ${ctaCopy} `; }; diff --git a/packages/web-components/src/components/content-block/content-block.ts b/packages/web-components/src/components/content-block/content-block.ts index 823aaa4d4d0..e77a335186f 100644 --- a/packages/web-components/src/components/content-block/content-block.ts +++ b/packages/web-components/src/components/content-block/content-block.ts @@ -21,7 +21,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ const slotExistencePropertyNames = { complementary: '_hasComplementary', - cta: '_hasCTA', + footer: '_haFooter', }; /** @@ -44,7 +44,7 @@ export enum CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME { * Content block. * * @slot heading - The heading content. - * @slot cta - The footer (CTA) content. + * @slot footer - The footer (CTA) content. * @slot complementary - The complementary (aside) content. * @abstract */ @@ -56,10 +56,10 @@ class DDSContentBlock extends LitElement { protected _hasComplementary = false; /** - * `true` if there is CTA content. + * `true` if there is footer content. */ @internalProperty() - protected _hasCTA = false; + protected _haFooter = false; /** * Handles `slotchange` event. @@ -78,12 +78,12 @@ class DDSContentBlock extends LitElement { * @returns The content, that may be wrapped in a Carbon grid. */ protected _renderBody(): TemplateResult | string | void { - const { _hasCTA: hasCTA } = this; + const { _haFooter: hasFooter } = this; return html` ${this._renderCopy()}${this._renderContent()} -
+
- +
`; diff --git a/packages/web-components/src/components/content-group-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-horizontal/__stories__/README.stories.mdx index 2e8f6078c02..ba93abc97d1 100644 --- a/packages/web-components/src/components/content-group-horizontal/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-group-horizontal/__stories__/README.stories.mdx @@ -35,7 +35,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/c Lorem ipsum Aliquam condimentum Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Lorem ipsum Aliquam condimentum ${copy} - + Link text diff --git a/packages/web-components/src/components/content-group-horizontal/__tests__/content-group-horizontal.test.ts b/packages/web-components/src/components/content-group-horizontal/__tests__/content-group-horizontal.test.ts index 274c0d39f8b..8a2d0612b3e 100644 --- a/packages/web-components/src/components/content-group-horizontal/__tests__/content-group-horizontal.test.ts +++ b/packages/web-components/src/components/content-group-horizontal/__tests__/content-group-horizontal.test.ts @@ -39,7 +39,7 @@ describe('dds-content-group-horizontal', function() { eyebrow-foo heading-foo copy-foo - + Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet - + Link text ... diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.js b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.js index 7c35f4da797..49beb38741a 100644 --- a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.js +++ b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.js @@ -103,7 +103,7 @@ export const Default = ({ parameters }) => { ${heading} ${copy} - + ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })} diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx index 9517fc02e3d..04b6711d320 100644 --- a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx @@ -31,7 +31,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/link-list-item-cta'; Lorem ipsum Aliquam condimentum Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + { ${eyebrow} ${heading} ${copy} - + eyebrow-foo heading-foo copy-foo - +

- +

- ${this._renderBody()} + ${this._renderBody()}${this._renderFooter()}
`; diff --git a/packages/web-components/src/components/content-item/__tests__/content-item.test.ts b/packages/web-components/src/components/content-item/__tests__/content-item.test.ts index 4d7ca414b2b..4f94bd14afc 100644 --- a/packages/web-components/src/components/content-item/__tests__/content-item.test.ts +++ b/packages/web-components/src/components/content-item/__tests__/content-item.test.ts @@ -37,7 +37,7 @@ describe('dds-content-item', function() { children: html` copy-foo - copy-foo + copy-foo `, }), document.body diff --git a/packages/web-components/src/components/content-item/content-item.ts b/packages/web-components/src/components/content-item/content-item.ts index 0e38dc26ffd..d2d825aa113 100644 --- a/packages/web-components/src/components/content-item/content-item.ts +++ b/packages/web-components/src/components/content-item/content-item.ts @@ -20,7 +20,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * The table mapping slot name with the private property name that indicates the existence of the slot content. */ const slotExistencePropertyNames = { - cta: '_hasCTA', + footer: '_hasFooter', }; /** @@ -29,22 +29,22 @@ const slotExistencePropertyNames = { * @element dds-content-item * @slot media - The media content. * @slot heading - The heading content. - * @slot cta - The footer (CTA) content. + * @slot footer - The footer (CTA) content. */ @customElement(`${ddsPrefix}-content-item`) class DDSContentItem extends StableSelectorMixin(LitElement) { /** - * `true` if there is a CTA content. + * `true` if there is a footer content. */ @internalProperty() - _hasCTA = false; + _hasFooter = false; /** - * Handles `slotchange` event on the CTA slot. + * Handles `slotchange` event. * * @param event The event. */ - protected _handleSlotchange({ target }: Event) { + protected _handleSlotChange({ target }: Event) { const { name } = target as HTMLSlotElement; const hasContent = (target as HTMLSlotElement) .assignedNodes() @@ -55,12 +55,21 @@ class DDSContentItem extends StableSelectorMixin(LitElement) { /** * @returns The body content. */ + // eslint-disable-next-line class-methods-use-this protected _renderBody(): TemplateResult | string | void { - const { _hasCTA: hasCTA } = this; return html` -
- + `; + } + + /** + * @returns The footer content. + */ + protected _renderFooter(): TemplateResult | string | void { + const { _hasFooter: hasFooter } = this; + return html` +
+
`; } @@ -71,7 +80,7 @@ class DDSContentItem extends StableSelectorMixin(LitElement) {
- ${this._renderBody()} + ${this._renderBody()}${this._renderFooter()} `; } diff --git a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts index 9786325b05a..b2d9e28076b 100644 --- a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts +++ b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts @@ -39,7 +39,7 @@ export const Default = ({ parameters }) => { ${ifNonNull(heading)} ${copy} - + Secondary Button ${renderIcon} @@ -58,7 +58,7 @@ export const WithContentItems = ({ parameters }) => { ${ifNonNull(heading)} ${ifNonNull(copy)} - + Secondary Button ${renderIcon} @@ -67,19 +67,19 @@ export const WithContentItems = ({ parameters }) => { - + Get connected IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you. - Find a partner + Find a partner - + Learn how IBM DevOps partners have a wide range of expertise - Browse tutorials + Browse tutorials `; @@ -92,7 +92,7 @@ export const WithLinkList = ({ parameters }) => { ${ifNonNull(heading)} ${ifNonNull(copy)} - + Secondary Button ${renderIcon} diff --git a/packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts b/packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts index 6b5fb339a44..359bc00b6c2 100644 --- a/packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts +++ b/packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts @@ -36,7 +36,7 @@ describe('dds-cta-section', function() { heading: 'heading-foo', copy: 'copy-foo', children: html` -
cta-foo
+
action-foo
footer-foo
`, }), diff --git a/packages/web-components/src/components/cta-section/cta-section-item.ts b/packages/web-components/src/components/cta-section/cta-section-item.ts index 529be45da9b..5ecbfc5873c 100644 --- a/packages/web-components/src/components/cta-section/cta-section-item.ts +++ b/packages/web-components/src/components/cta-section/cta-section-item.ts @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -import { html, css, customElement } from 'lit-element'; +import { html, property, css, customElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import styles from './cta-section.scss'; @@ -22,11 +22,17 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-cta-section-item`) class DDSCTASectionItem extends StableSelectorMixin(DDSContentItem) { + /** + * The shadow slot this CTA section item should be in. + */ + @property({ reflect: true }) + slot = 'items'; + render() { return html` - + `; } diff --git a/packages/web-components/src/components/cta-section/cta-section.scss b/packages/web-components/src/components/cta-section/cta-section.scss index f24fe0bdc8c..a7f3bdd5703 100644 --- a/packages/web-components/src/components/cta-section/cta-section.scss +++ b/packages/web-components/src/components/cta-section/cta-section.scss @@ -17,7 +17,7 @@ padding-top: $carbon--layout-03; } - ::slotted([slot='cta']) { + ::slotted([slot='action']) { margin-top: $carbon--layout-01; padding-bottom: $carbon--layout-03; diff --git a/packages/web-components/src/components/cta-section/cta-section.ts b/packages/web-components/src/components/cta-section/cta-section.ts index c028ebcdb6d..f916515d24a 100644 --- a/packages/web-components/src/components/cta-section/cta-section.ts +++ b/packages/web-components/src/components/cta-section/cta-section.ts @@ -22,8 +22,8 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * The table mapping slot name with the private property name that indicates the existence of the slot content. */ const slotExistencePropertyNames = { - contentItems: '_hasContentItems', - linkList: '_hasLinkList', + action: '_hasAction', + items: '_hasItems', }; /** @@ -31,15 +31,21 @@ const slotExistencePropertyNames = { * * @element dds-cta-section * @slot heading - The text heading. - * @slot buttons - The CTA Buttons. + * @slot action - The CTA Buttons. */ @customElement(`${ddsPrefix}-cta-section`) class DDSCTASection extends StableSelectorMixin(DDSContentItem) { /** - * `true` if there is CTA content. + * `true` if there are CTA action in the content item area. */ @internalProperty() - protected _hasFooter = false; + protected _hasAction = false; + + /** + * `true` if there are CTA section items. + */ + @internalProperty() + protected _hasItems = false; /** * Applies section attribute @@ -56,35 +62,32 @@ class DDSCTASection extends StableSelectorMixin(DDSContentItem) { * * @param event The event. */ - private _handleSlotChange({ target }: Event) { + protected _handleSlotChange({ target }: Event) { const { name } = target as HTMLSlotElement; const hasContent = (target as HTMLSlotElement) .assignedNodes() .some(node => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()); - this[slotExistencePropertyNames[name] || '_hasFooter'] = hasContent; + this[slotExistencePropertyNames[name] || '_hasDefaultContent'] = hasContent; } /** * @returns The footer content. */ protected _renderFooter(): TemplateResult | string | void { - const { _hasFooter: hasFooter } = this; + const { _hasAction: hasAction, _hasItems: hasItems } = this; return html` +
+ +
-
+
- +
`; } - render() { - return html` - ${super.render()} ${this._renderFooter()} - `; - } - static get stableSelector() { return `${ddsPrefix}--cta-section`; } diff --git a/packages/web-components/src/components/footer/legal-nav-cookie-preferences-placeholder.ts b/packages/web-components/src/components/footer/legal-nav-cookie-preferences-placeholder.ts index f1c98fccc3a..fffe17d3b54 100644 --- a/packages/web-components/src/components/footer/legal-nav-cookie-preferences-placeholder.ts +++ b/packages/web-components/src/components/footer/legal-nav-cookie-preferences-placeholder.ts @@ -26,7 +26,7 @@ class DDSLegalNavCookiePreferencesPlaceholder extends StableSelectorMixin(LitEle /** * Handles `slotchange` event. */ - private _handleSlotchange(event: Event) { + private _handleSlotChange(event: Event) { // Finds new injected links const linkNodes = (event.target as HTMLSlotElement) .assignedNodes() @@ -41,7 +41,7 @@ class DDSLegalNavCookiePreferencesPlaceholder extends StableSelectorMixin(LitEle } render() { - const { _handleSlotchange: handleSlotchange } = this; + const { _handleSlotChange: handleSlotchange } = this; return html` `; diff --git a/packages/web-components/src/components/logo-grid/logo-grid-link.ts b/packages/web-components/src/components/logo-grid/logo-grid-link.ts index 68fc13ff9e1..ced17287564 100644 --- a/packages/web-components/src/components/logo-grid/logo-grid-link.ts +++ b/packages/web-components/src/components/logo-grid/logo-grid-link.ts @@ -6,7 +6,7 @@ * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ -import { css, customElement } from 'lit-element'; +import { css, property, customElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings'; import styles from './logo-grid.scss'; import DDSCardLink from '../card-link/card-link'; @@ -21,10 +21,11 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-logo-grid-link`) class DDSLogoGridLink extends StableSelectorMixin(DDSCardLink) { - connectedCallback() { - this.setAttribute('slot', 'cta'); - super.connectedCallback(); - } + /** + * The shadow slot this link should be in. + */ + @property({ reflect: true }) + slot = 'footer'; static get stableSelector() { return `${ddsPrefix}--logo-grid-link`; diff --git a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx b/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx index 071912f2471..9c88c48b25d 100644 --- a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx @@ -37,7 +37,7 @@ import '@carbon/ibmdotcom-web-components/es/components/pictogram-item/pictogram- Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam - + Lorem ipsum dolor { ${heading} ${copy} - + ${linkCopy} ${ArrowRight20({ slot: 'icon' })} diff --git a/packages/web-components/src/components/pictogram-item/pictogram-item.ts b/packages/web-components/src/components/pictogram-item/pictogram-item.ts index 58c684bd0be..76375bd2863 100644 --- a/packages/web-components/src/components/pictogram-item/pictogram-item.ts +++ b/packages/web-components/src/components/pictogram-item/pictogram-item.ts @@ -22,7 +22,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-pictogram-item * @slot pictogram - The pictogram content. * @slot heading - The heading content. - * @slot cta - The footer (CTA) content. + * @slot footer - The footer (CTA) content. */ @customElement(`${ddsPrefix}-pictogram-item`) class DDSPictogramItem extends DDSContentItem { diff --git a/packages/web-components/src/components/quote/__stories__/README.stories.mdx b/packages/web-components/src/components/quote/__stories__/README.stories.mdx index 5b1500a73e1..9169b2f317f 100644 --- a/packages/web-components/src/components/quote/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/quote/__stories__/README.stories.mdx @@ -37,7 +37,7 @@ import '@carbon/ibmdotcom-web-components/es/components/link-with-icon/link-with- This is the third line of source - + Link with Icon { ${sourceBottomCopy} - + Link with Icon ${ArrowRight20({ slot: 'icon' })} diff --git a/packages/web-components/src/components/quote/quote.ts b/packages/web-components/src/components/quote/quote.ts index 6a54e0b2b5d..952417fc228 100644 --- a/packages/web-components/src/components/quote/quote.ts +++ b/packages/web-components/src/components/quote/quote.ts @@ -52,7 +52,7 @@ const slotExistencePropertyNames = { sourceHeading: '_hasSourceHeading', sourceCopy: '_hasSourceCopy', sourceBottomCopy: '_hasSourceBottomCopy', - cta: '_hasCTA', + footer: '_hasFooter', }; /** @@ -60,7 +60,7 @@ const slotExistencePropertyNames = { * * @element dds-quote * @slot copy - The copy content. - * @slot cta - The footer (CTA) content. + * @slot footer - The footer (CTA) content. */ @customElement(`${ddsPrefix}-quote`) class DDSQuote extends StableSelectorMixin(LitElement) { @@ -101,7 +101,7 @@ class DDSQuote extends StableSelectorMixin(LitElement) { /** * `true` if there is cta. */ - protected _hasCTA = false; + protected _hasFooter = false; /** * Handles `slotchange` event. @@ -184,12 +184,12 @@ class DDSQuote extends StableSelectorMixin(LitElement) { `; } - protected _renderCTA() { - const { _hasCTA: hasCTA, _handleSlotChange: handleSlotChange } = this; + protected _renderFooter() { + const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; return html` -
+
- +
`; } @@ -205,7 +205,7 @@ class DDSQuote extends StableSelectorMixin(LitElement) { return html`
- ${this._renderQuote()} ${this._renderSource()} ${this._renderCTA()} + ${this._renderQuote()}${this._renderSource()}${this._renderFooter()}
`; diff --git a/packages/web-components/tests/snapshots/dds-callout-quote.md b/packages/web-components/tests/snapshots/dds-callout-quote.md index 75cdb72e953..fe9235807ac 100644 --- a/packages/web-components/tests/snapshots/dds-callout-quote.md +++ b/packages/web-components/tests/snapshots/dds-callout-quote.md @@ -43,7 +43,7 @@ > - +
diff --git a/packages/web-components/tests/snapshots/dds-callout-with-media.md b/packages/web-components/tests/snapshots/dds-callout-with-media.md index 46d7282b9b5..01739d2fcfb 100644 --- a/packages/web-components/tests/snapshots/dds-callout-with-media.md +++ b/packages/web-components/tests/snapshots/dds-callout-with-media.md @@ -26,7 +26,7 @@ hidden="" >
- +
@@ -61,7 +61,7 @@ hidden="" >
- +
@@ -96,7 +96,7 @@ hidden="" >
- +
diff --git a/packages/web-components/tests/snapshots/dds-content-block-cards.md b/packages/web-components/tests/snapshots/dds-content-block-cards.md index e381b59ecdc..7b665e18af1 100644 --- a/packages/web-components/tests/snapshots/dds-content-block-cards.md +++ b/packages/web-components/tests/snapshots/dds-content-block-cards.md @@ -18,7 +18,7 @@ hidden="" >
- +
@@ -43,7 +43,7 @@ hidden="" >
- +
diff --git a/packages/web-components/tests/snapshots/dds-content-block-headlines.md b/packages/web-components/tests/snapshots/dds-content-block-headlines.md index 418bac292e6..42f88a4adc6 100644 --- a/packages/web-components/tests/snapshots/dds-content-block-headlines.md +++ b/packages/web-components/tests/snapshots/dds-content-block-headlines.md @@ -26,7 +26,7 @@ hidden="" >
- +
diff --git a/packages/web-components/tests/snapshots/dds-content-block-media.md b/packages/web-components/tests/snapshots/dds-content-block-media.md index 0a1d0ec6219..f17787a7f76 100644 --- a/packages/web-components/tests/snapshots/dds-content-block-media.md +++ b/packages/web-components/tests/snapshots/dds-content-block-media.md @@ -18,7 +18,7 @@ hidden="" >
- +
@@ -43,7 +43,7 @@ hidden="" >
- +
diff --git a/packages/web-components/tests/snapshots/dds-content-block-segmented.md b/packages/web-components/tests/snapshots/dds-content-block-segmented.md index 653be2d686b..9d617d53461 100644 --- a/packages/web-components/tests/snapshots/dds-content-block-segmented.md +++ b/packages/web-components/tests/snapshots/dds-content-block-segmented.md @@ -28,7 +28,7 @@ hidden="" >
- +
@@ -63,7 +63,7 @@ hidden="" >
- +
diff --git a/packages/web-components/tests/snapshots/dds-content-block-simple.md b/packages/web-components/tests/snapshots/dds-content-block-simple.md index e4c148bb349..9d3ecea8ad5 100644 --- a/packages/web-components/tests/snapshots/dds-content-block-simple.md +++ b/packages/web-components/tests/snapshots/dds-content-block-simple.md @@ -24,7 +24,7 @@ hidden="" >
- +
@@ -63,7 +63,7 @@ hidden="" >
- +
diff --git a/packages/web-components/tests/snapshots/dds-content-group-horizontal.md b/packages/web-components/tests/snapshots/dds-content-group-horizontal.md index 22825f0e608..bec9afad1a4 100644 --- a/packages/web-components/tests/snapshots/dds-content-group-horizontal.md +++ b/packages/web-components/tests/snapshots/dds-content-group-horizontal.md @@ -18,7 +18,7 @@ hidden="" >
- +
@@ -43,7 +43,7 @@ hidden="" >
- +
diff --git a/packages/web-components/tests/snapshots/dds-content-item-horizontal.md b/packages/web-components/tests/snapshots/dds-content-item-horizontal.md index 5b5e3490a62..3cfd87d4401 100644 --- a/packages/web-components/tests/snapshots/dds-content-item-horizontal.md +++ b/packages/web-components/tests/snapshots/dds-content-item-horizontal.md @@ -24,7 +24,7 @@ class="bx--content-item__cta" hidden="" > - + @@ -54,7 +54,7 @@ class="bx--content-item__cta" hidden="" > - + diff --git a/packages/web-components/tests/snapshots/dds-content-item.md b/packages/web-components/tests/snapshots/dds-content-item.md index 47ba0915784..f07f3ebd2d0 100644 --- a/packages/web-components/tests/snapshots/dds-content-item.md +++ b/packages/web-components/tests/snapshots/dds-content-item.md @@ -17,7 +17,7 @@ class="bx--content-item__cta" hidden="" > - + @@ -35,7 +35,7 @@
- +
diff --git a/packages/web-components/tests/snapshots/dds-cta-section.md b/packages/web-components/tests/snapshots/dds-cta-section.md index d62d1a19a8e..ce318ebda07 100644 --- a/packages/web-components/tests/snapshots/dds-cta-section.md +++ b/packages/web-components/tests/snapshots/dds-cta-section.md @@ -17,7 +17,7 @@ class="bx--content-item__cta" hidden="" > - + @@ -27,7 +27,7 @@ hidden="" >
- +
@@ -46,7 +46,7 @@
- +
@@ -56,7 +56,7 @@ hidden="" >
- +
diff --git a/packages/web-components/tests/snapshots/dds-logo-grid.md b/packages/web-components/tests/snapshots/dds-logo-grid.md index 4558c9067dd..d1454fa2bd5 100644 --- a/packages/web-components/tests/snapshots/dds-logo-grid.md +++ b/packages/web-components/tests/snapshots/dds-logo-grid.md @@ -16,7 +16,7 @@ hidden="" >
- +
diff --git a/packages/web-components/tests/snapshots/dds-pictogram-item.md b/packages/web-components/tests/snapshots/dds-pictogram-item.md index ce32509be09..20a3d3d2e11 100644 --- a/packages/web-components/tests/snapshots/dds-pictogram-item.md +++ b/packages/web-components/tests/snapshots/dds-pictogram-item.md @@ -25,7 +25,7 @@ class="bx--content-item__cta" hidden="" > - + diff --git a/packages/web-components/tests/snapshots/dds-quote.md b/packages/web-components/tests/snapshots/dds-quote.md index be401e40c48..bf274646b0f 100644 --- a/packages/web-components/tests/snapshots/dds-quote.md +++ b/packages/web-components/tests/snapshots/dds-quote.md @@ -41,7 +41,7 @@ > - + From 9aae51a15413d174302459aca543ed6b9ba513d5 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 8 Dec 2020 01:37:49 +0900 Subject: [PATCH 04/25] fix(card): add missing mixin (#4633) ### Related Ticket(s) Refs #4357. Refs #4361. ### Description Ensures that `` extends `StableSelectorMixin` so the static property that defines the stable selector works. ### Changelog **Changed** - A change to ensure that `` extends `StableSelectorMixin`. --- .../card/__stories__/README.stories.mdx | 20 ++++++++++++++++++- .../src/components/card/card.ts | 5 +++-- .../__stories__/README.stories.mdx | 20 ++++++++++++++++++- 3 files changed, 41 insertions(+), 4 deletions(-) diff --git a/packages/web-components/src/components/card/__stories__/README.stories.mdx b/packages/web-components/src/components/card/__stories__/README.stories.mdx index df25df145d7..f4f9b874803 100644 --- a/packages/web-components/src/components/card/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card/__stories__/README.stories.mdx @@ -28,7 +28,17 @@ import '@carbon/ibmdotcom-web-components/es/components/card/card.js'; Lorem ipsum dolor sit amet Card cta text - @@ -39,4 +49,12 @@ import '@carbon/ibmdotcom-web-components/es/components/card/card.js'; +## 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 | +| ----------------------- | ------------------------- | ----------- | +| `` | `data-autoid="dds--card"` | Component | + diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts index 9bedcac5cbb..ab81034867f 100644 --- a/packages/web-components/src/components/card/card.ts +++ b/packages/web-components/src/components/card/card.ts @@ -11,6 +11,7 @@ import { html, property, internalProperty, customElement, TemplateResult } from import settings from 'carbon-components/es/globals/js/settings'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import { BASIC_COLOR_SCHEME } from '../../globals/shared-enums'; +import StableSelectorMixin from '../../globals/mixins/stable-selector'; import DDSLink from '../../globals/internal/link'; import DDSCardFooter from './card-footer'; import styles from './card.scss'; @@ -37,7 +38,7 @@ const slotExistencePropertyNames = { * @slot footer - The footer content. */ @customElement(`${ddsPrefix}-card`) -class DDSCard extends DDSLink { +class DDSCard extends StableSelectorMixin(DDSLink) { /** * `true` if there is eyebrow content. */ @@ -163,7 +164,7 @@ class DDSCard extends DDSLink { * A selector that will return the child footer. */ static get selectorFooter() { - return `${ddsPrefix}-card-footer`; + return `${ddsPrefix}-card`; } static styles = styles; diff --git a/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx index b687f4ddbd2..63f40662c5d 100644 --- a/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx @@ -28,7 +28,17 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card

Copy text

- @@ -39,4 +49,12 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card +## 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 | +| ----------------------- | --------------------------------- | ----------- | +| `` | `data-autoid="dds--feature-card"` | Component | + From 5eb2353f5e8bed96e3f7fa7acc3b77ba5901353e Mon Sep 17 00:00:00 2001 From: Jeff Chew Date: Mon, 7 Dec 2020 13:31:44 -0500 Subject: [PATCH 05/25] chore(support): updating support roster for sprint 25 --- .github/ISSUE_TEMPLATE/bug_report.md | 2 +- .github/ISSUE_TEMPLATE/feature_request.md | 2 +- .github/ISSUE_TEMPLATE/question.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 94bf662ea0d..b3ca6359c1c 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -2,7 +2,7 @@ name: Bug Report ๐Ÿ› about: Something isn't working as expected? Here is the right place to report. labels: bug -assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, RaphaelAmadeu, JennySanchez, IgnacioBecerra +assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, andysherman2121, IgnacioBecerra --- diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md index f9bbfab67a3..f83b1017d98 100644 --- a/.github/ISSUE_TEMPLATE/question.md +++ b/.github/ISSUE_TEMPLATE/question.md @@ -2,7 +2,7 @@ name: Question ๐Ÿค” about: Usage question or discussion about Carbon for IBM.com. labels: question -assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, RaphaelAmadeu, JennySanchez, IgnacioBecerra +assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, andysherman2121, IgnacioBecerra --- --- .../react/src/components/LocaleModal/LocaleModalRegions.js | 4 +++- .../src/components/locale-modal/locale-modal.ts | 5 +++-- packages/web-components/tests/snapshots/dds-locale-modal.md | 1 - 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/LocaleModal/LocaleModalRegions.js b/packages/react/src/components/LocaleModal/LocaleModalRegions.js index 9b765107d0e..5b95b16a8ae 100755 --- a/packages/react/src/components/LocaleModal/LocaleModalRegions.js +++ b/packages/react/src/components/LocaleModal/LocaleModalRegions.js @@ -150,14 +150,16 @@ export const addLocaleBackBtnListeners = ( : returnButtonLabel ); - btn.addEventListener('click', function click() { + btn.addEventListener('click', function click(e) { localeBackActive(btn, setIsFiltering, setClearResults); btn.removeEventListener('click', click); + e.preventDefault(); }); btn.addEventListener('keyup', function keyup(e) { if (e.keyCode === 32 || e.keyCode === 13) { localeBackActive(btn, setIsFiltering, setClearResults); btn.removeEventListener('keyup', keyup); + e.preventDefault(); } }); }); diff --git a/packages/web-components/src/components/locale-modal/locale-modal.ts b/packages/web-components/src/components/locale-modal/locale-modal.ts index fdcd2dbf1ad..5880286814f 100644 --- a/packages/web-components/src/components/locale-modal/locale-modal.ts +++ b/packages/web-components/src/components/locale-modal/locale-modal.ts @@ -45,8 +45,9 @@ class DDSLocaleModal extends DDSExpressiveModal { /** * Handles `click` event on the back button. */ - private _handleClickBackButton() { + private _handleClickBackButton(e) { this._currentRegion = undefined; + e.preventDefault(); } /** @@ -92,7 +93,7 @@ class DDSLocaleModal extends DDSExpressiveModal { private _renderLocaleSelectorHeading() { const { headerTitle, _currentRegion: currentRegion, _handleClickBackButton: handleClickBackButton } = this; return html` - + ${headerTitle}${ArrowLeft20({ slot: 'icon', class: `${prefix}--locale-modal__label-arrow` })}

${currentRegion}

diff --git a/packages/web-components/tests/snapshots/dds-locale-modal.md b/packages/web-components/tests/snapshots/dds-locale-modal.md index 60992225895..833dd473515 100644 --- a/packages/web-components/tests/snapshots/dds-locale-modal.md +++ b/packages/web-components/tests/snapshots/dds-locale-modal.md @@ -113,7 +113,6 @@ Date: Mon, 7 Dec 2020 18:51:20 -0500 Subject: [PATCH 07/25] fix(ToC): fix mobile styles (#4636) ### Related Ticket(s) #2545 ### Description This fixes an issue where the section navigation dropdown is incorrectly positioned, allowing contents of the page to be seen behind it when scrolling. ### Changelog **Changed** - top positioning of section navigation dropdown **Removed** - {{removed thing}} --- packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss index 7422c42bbe5..c78485550ab 100644 --- a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss +++ b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss @@ -19,7 +19,7 @@ padding-top: $carbon--layout-04; .#{$prefix}--tableofcontents__sidebar { - top: 49px; + top: 48px; } } From aa579c125fe2784da170e241b4147db35459cef7 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 8 Dec 2020 22:12:20 +0900 Subject: [PATCH 08/25] fix(card-group): same height by CSS grid (#4657) ### Related Ticket(s) Refs #4375. ### Description Switches flex-box-bassed Carbon grid layout system to native CSS grid so we can apply same height to all cards upon card contents. ### Changelog **Changed** - Switches flex-box-bassed Carbon grid layout for `` to native CSS grid. --- .../components/card-group/_card-group.scss | 10 +++++----- .../__stories__/card-group.stories.scss | 20 +++++++++++++++++++ .../__stories__/card-group.stories.ts | 12 +++++------ .../src/components/card-group/card-group.scss | 14 +++++++++++++ 4 files changed, 44 insertions(+), 12 deletions(-) create mode 100644 packages/web-components/src/components/card-group/__stories__/card-group.stories.scss diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index 534781bc103..60037169109 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -77,15 +77,13 @@ } } - :host(#{$dds-prefix}-card-group), - .#{$prefix}--card-group__row { + .#{$prefix}--card-group__row, + .#{$prefix}--card-group__cards__row { @include carbon--make-row; } :host(#{$dds-prefix}-card-group), .#{$prefix}--card-group__cards__row { - @include carbon--make-row; - position: relative; &::after { @@ -101,7 +99,6 @@ } } - :host(#{$dds-prefix}-card-group-item), .#{$prefix}--card-group__cards__col { @include carbon--make-col-ready; @@ -111,7 +108,10 @@ @include carbon--breakpoint('lg') { @include carbon--make-col(1, 3); } + } + :host(#{$dds-prefix}-card-group-item), + .#{$prefix}--card-group__cards__col { padding-left: $carbon--grid-gutter--condensed / 2; padding-right: $carbon--grid-gutter--condensed / 2; diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.scss b/packages/web-components/src/components/card-group/__stories__/card-group.stories.scss new file mode 100644 index 00000000000..f3218998fb4 --- /dev/null +++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.scss @@ -0,0 +1,20 @@ +// +// Copyright IBM Corp. 2020 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint'; + +.dds-ce-demo-devenv--container { + @include carbon--breakpoint('md') { + margin-left: calc(#{$carbon--grid-gutter} / 2); + margin-right: calc(#{$carbon--grid-gutter} / 2); + } + + @include carbon--breakpoint('lg') { + margin-left: 12.5%; + margin-right: 12.5%; + } +} diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts index 0e0ebe67d96..bd94845f3ce 100644 --- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts +++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts @@ -13,6 +13,7 @@ import { number } from '@storybook/addon-knobs'; import readme from './README.stories.mdx'; import '../card-group'; import '../card-group-item'; +import styles from './card-group.stories.scss'; const defaultCardGroupItem = html` @@ -117,13 +118,10 @@ export default { title: 'Components/Card Group', decorators: [ story => html` -
-
-
- ${story()} -
-
-
+ + ${story()} `, ], parameters: { diff --git a/packages/web-components/src/components/card-group/card-group.scss b/packages/web-components/src/components/card-group/card-group.scss index 18582132484..e020bff5112 100644 --- a/packages/web-components/src/components/card-group/card-group.scss +++ b/packages/web-components/src/components/card-group/card-group.scss @@ -9,3 +9,17 @@ @import '@carbon/ibmdotcom-styles/scss/components/card/index'; @import '@carbon/ibmdotcom-styles/scss/components/card-group/card-group'; + +:host(#{$dds-prefix}-card-group) { + display: grid; + grid-template-columns: 1fr; + grid-auto-rows: 1fr; + + @include carbon--breakpoint('md') { + grid-template-columns: repeat(2, 1fr); + } + + @include carbon--breakpoint('lg') { + grid-template-columns: repeat(3, 1fr); + } +} From aa04b2fb087c5350fc2ac149123bb2d0baa211a8 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 8 Dec 2020 22:57:30 +0900 Subject: [PATCH 09/25] chore(masthead-icon): extend from base link component (#4661) Makes `` extend `DDSLink` instead of ``, and removes ``. The purpose of `` can be achieved by ``. Refs #4124. --- .../components/icon/__tests__/icon.test.ts | 39 ---------------- .../src/components/icon/icon.ts | 46 ------------------- .../src/components/masthead/masthead-logo.ts | 33 +++++++------ .../tests/snapshots/dds-icon.md | 26 ----------- .../tests/snapshots/dds-masthead-logo.md | 2 + 5 files changed, 18 insertions(+), 128 deletions(-) delete mode 100644 packages/web-components/src/components/icon/__tests__/icon.test.ts delete mode 100644 packages/web-components/src/components/icon/icon.ts delete mode 100644 packages/web-components/tests/snapshots/dds-icon.md diff --git a/packages/web-components/src/components/icon/__tests__/icon.test.ts b/packages/web-components/src/components/icon/__tests__/icon.test.ts deleted file mode 100644 index d091713c999..00000000000 --- a/packages/web-components/src/components/icon/__tests__/icon.test.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html, render } from 'lit-html'; -import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js'; -import '../icon'; - -const template = (props?) => { - const { href } = props ?? {}; - return html` - - `; -}; - -describe('dds-icon', function() { - describe('Misc attributes', function() { - it('should render with minimum attributes', async function() { - render(template(), document.body); - await Promise.resolve(); // Update cycle for `` - expect(document.body.querySelector('dds-icon')).toMatchSnapshot({ mode: 'shadow' }); - }); - - it('should render with various attributes', async function() { - render(template({ href: 'https://cloud.ibm.com/' }), document.body); - await Promise.resolve(); // Update cycle for `` - expect(document.body.querySelector('dds-icon')).toMatchSnapshot({ mode: 'shadow' }); - }); - }); - - afterEach(async function() { - await render(undefined!, document.body); - }); -}); diff --git a/packages/web-components/src/components/icon/icon.ts b/packages/web-components/src/components/icon/icon.ts deleted file mode 100644 index 9618f01a5fa..00000000000 --- a/packages/web-components/src/components/icon/icon.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { ifDefined } from 'lit-html/directives/if-defined'; -import { html, property, customElement, LitElement } from 'lit-element'; -import IBM8BarLogoH23 from '@carbon/ibmdotcom-styles/icons/svg/IBM-8bar-logo--h23.svg'; -import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import FocusMixin from 'carbon-web-components/es/globals/mixins/focus.js'; - -const { stablePrefix: ddsPrefix } = ddsSettings; - -/** - * The IBM Logo - * - * @element dds-masthead-logo - */ -@customElement(`${ddsPrefix}-icon`) -class DDSIcon extends FocusMixin(LitElement) { - /** - * Link `href`. - */ - @property() - href = 'https://www.ibm.com/'; - - createRenderRoot() { - return this.attachShadow({ - mode: 'open', - delegatesFocus: Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <= 537, - }); - } - - render() { - const { href } = this; - return html` - ${IBM8BarLogoH23()} - `; - } -} - -export default DDSIcon; diff --git a/packages/web-components/src/components/masthead/masthead-logo.ts b/packages/web-components/src/components/masthead/masthead-logo.ts index d6aefd1325b..4048679447f 100644 --- a/packages/web-components/src/components/masthead/masthead-logo.ts +++ b/packages/web-components/src/components/masthead/masthead-logo.ts @@ -7,17 +7,17 @@ * LICENSE file in the root directory of this source tree. */ -import { classMap } from 'lit-html/directives/class-map'; import { html, internalProperty, property, customElement } from 'lit-element'; -import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js'; 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 settings from 'carbon-components/es/globals/js/settings.js'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import FocusMixin from 'carbon-web-components/es/globals/mixins/focus.js'; import IBM8BarLogoH23 from '@carbon/ibmdotcom-styles/icons/svg/IBM-8bar-logo--h23.svg'; -import DDSIcon from '../icon/icon'; +import DDSLink from '../../globals/internal/link'; import styles from './masthead.scss'; +const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; /** @@ -26,7 +26,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-masthead-logo */ @customElement(`${ddsPrefix}-masthead-logo`) -class DDSMastheadLogo extends FocusMixin(HostListenerMixin(DDSIcon)) { +class DDSMastheadLogo extends FocusMixin(HostListenerMixin(DDSLink)) { /** * Search bar opened flag. */ @@ -56,23 +56,22 @@ class DDSMastheadLogo extends FocusMixin(HostListenerMixin(DDSIcon)) { @property({ reflect: true }) slot = 'brand'; - createRenderRoot() { - return this.attachShadow({ - mode: 'open', - delegatesFocus: Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <= 537, - }); - } - - render() { - const { href, _hasSearchActive: hasSearchActive } = this; - const classes = classMap({ - [`${ddsPrefix}-ce--header__logo--has-search-active`]: hasSearchActive, - }); + // eslint-disable-next-line class-methods-use-this + protected _renderInner() { return html` - ${IBM8BarLogoH23()} + ${IBM8BarLogoH23()} `; } + updated() { + const { _linkNode: linkNode, _hasSearchActive: hasSearchActive } = this; + if (linkNode) { + linkNode.setAttribute('aria-label', 'IBM logo'); + linkNode.classList.remove(`${prefix}--link`); + linkNode.classList.toggle(`${ddsPrefix}-ce--header__logo--has-search-active`, hasSearchActive); + } + } + /** * The name of the custom event fired after the seach is toggled. */ diff --git a/packages/web-components/tests/snapshots/dds-icon.md b/packages/web-components/tests/snapshots/dds-icon.md deleted file mode 100644 index 7b08e66f3af..00000000000 --- a/packages/web-components/tests/snapshots/dds-icon.md +++ /dev/null @@ -1,26 +0,0 @@ -# `dds-icon` - -## `Misc attributes` - -#### `should render with minimum attributes` - -``` - - - -``` - -#### `should render with various attributes` - -``` - - - -``` - diff --git a/packages/web-components/tests/snapshots/dds-masthead-logo.md b/packages/web-components/tests/snapshots/dds-masthead-logo.md index 7348602030e..4c618b14fa5 100644 --- a/packages/web-components/tests/snapshots/dds-masthead-logo.md +++ b/packages/web-components/tests/snapshots/dds-masthead-logo.md @@ -8,6 +8,7 @@ @@ -21,6 +22,7 @@ From 457164a553a3f9868381f2388ac2a4e17b0a00be Mon Sep 17 00:00:00 2001 From: Raphael Amadeu <30945011+RaphaelAmadeu@users.noreply.github.com> Date: Tue, 8 Dec 2020 12:39:02 -0300 Subject: [PATCH 10/25] fix(feature-card-block-medium): added data-autoid (#4663) --- .../__stories__/README.stories.mdx | 10 ++++++++++ .../feature-card-block-medium.ts | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/web-components/src/components/feature-card-block-medium/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-card-block-medium/__stories__/README.stories.mdx index 373c17fab0c..6c5d102c5e9 100644 --- a/packages/web-components/src/components/feature-card-block-medium/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/feature-card-block-medium/__stories__/README.stories.mdx @@ -60,4 +60,14 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium ## Props + +## 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 | +| --------------------------------- | -------------------------------------------- | ----------- | +| `` | data-autoid="dds--feature-card-block-medium" | Component | + + diff --git a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts b/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts index 123b0242af4..48df4ed595e 100644 --- a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts +++ b/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.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 DDSFeatureCard from '../feature-card/feature-card'; import styles from './feature-card-block-medium.scss'; +import StableSelectorMixin from '../../globals/mixins/stable-selector'; const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; @@ -23,7 +24,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @slot heading - The heading content. */ @customElement(`${ddsPrefix}-feature-card-block-medium`) -class DDSFeatureCardBlockMedium extends DDSFeatureCard { +class DDSFeatureCardBlockMedium extends StableSelectorMixin(DDSFeatureCard) { protected _renderInner() { const { _hasEyebrow: hasEyebrow, _handleSlotChange: handleSlotChange } = this; return html` From fc785a09ec982854dd738274be6b34a9f4593dd5 Mon Sep 17 00:00:00 2001 From: kennylam Date: Tue, 8 Dec 2020 11:49:33 -0500 Subject: [PATCH 11/25] fix(LocaleModale): region card layout (#4637) ### Related Ticket(s) #4628 ### Description Add missing markup structure of `region-item` that was affecting layout of region cards ### Changelog **Changed** - add missing `content` div --- .../components/locale-modal/region-item.ts | 12 ++++---- .../tests/snapshots/dds-region-item.md | 28 +++++++++++-------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/web-components/src/components/locale-modal/region-item.ts b/packages/web-components/src/components/locale-modal/region-item.ts index 7c82b3b9f4c..77a009f168d 100644 --- a/packages/web-components/src/components/locale-modal/region-item.ts +++ b/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`
-

- ${name} -

-
- ${(invalid ? Error20 : ArrowRight20)({ class: `${prefix}--card__cta` })} +
+

+ ${name} +

+
+ ${(invalid ? Error20 : ArrowRight20)({ class: `${prefix}--card__cta` })} +
`; diff --git a/packages/web-components/tests/snapshots/dds-region-item.md b/packages/web-components/tests/snapshots/dds-region-item.md index 50bf7a21f05..15d7336de15 100644 --- a/packages/web-components/tests/snapshots/dds-region-item.md +++ b/packages/web-components/tests/snapshots/dds-region-item.md @@ -11,12 +11,14 @@ id="link" >
-

- - name-foo - -

-
+
+

+ + name-foo + +

+
+
@@ -32,12 +34,14 @@ id="link" >
-

- - name-foo - -

-
+
+

+ + name-foo + +

+
+
From f6b0c5eb3b2116625bef575ed41497e8079f4fff Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Tue, 8 Dec 2020 12:42:34 -0500 Subject: [PATCH 12/25] fix(locale-modal): remove listbox role for accessibility (#4670) ### Related Ticket(s) Web component: Locale selector - list of options (locations and languages) are not identified by the screen reader. Only a "List box" is identified #4668 ### Description Remove the "listbox" role from the locale modal options as screen reader user will think it is a dropdown and try to navigate using up/down arrow keys. ### Changelog **Removed** - remove "listbox" role from locale modal language options list --- .../src/components/locale-modal/locale-search.ts | 2 +- .../tests/snapshots/dds-locale-search.md | 10 ++-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/web-components/src/components/locale-modal/locale-search.ts b/packages/web-components/src/components/locale-modal/locale-search.ts index 4d1742117bc..e580a95d93b 100644 --- a/packages/web-components/src/components/locale-modal/locale-search.ts +++ b/packages/web-components/src/components/locale-modal/locale-search.ts @@ -205,7 +205,7 @@ class DDSLocaleSearch extends ThrottedInputMixin(LitElement) { ${hasAvailableItem ? availabilityLabelText : unavailabilityLabelText}

-
+
diff --git a/packages/web-components/tests/snapshots/dds-locale-search.md b/packages/web-components/tests/snapshots/dds-locale-search.md index 0a57e326557..91c98a17c78 100644 --- a/packages/web-components/tests/snapshots/dds-locale-search.md +++ b/packages/web-components/tests/snapshots/dds-locale-search.md @@ -21,10 +21,7 @@ This page is available in the following locations and languages

-
+
@@ -51,10 +48,7 @@ availability-label-text-foo

-
+
From 08c02fcf07ab2a4e0605b14ddca75ac73286f552 Mon Sep 17 00:00:00 2001 From: Raphael Amadeu <30945011+RaphaelAmadeu@users.noreply.github.com> Date: Tue, 8 Dec 2020 15:15:03 -0300 Subject: [PATCH 13/25] fix(pictogram-item): added prop table and data-autoid (#4666) ### Related Ticket(s) #4367 ### Description Added data-auto id to `dds-pictogram-item` and added prop table to it's documentation. ### Changelog **New** - Added data-autoid - Added prop table --- .../pictogram-item/__stories__/README.stories.mdx | 13 +++++++++++++ .../src/components/pictogram-item/pictogram-item.ts | 7 ++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx b/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx index 9c88c48b25d..e0e77b6efee 100644 --- a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx +++ b/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- +## Props + + + +## 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 | +| ---------------------------- | -------------------------------------- | ----------- | +| `` | data-autoid="dds--pictogram-item" | Component | + + diff --git a/packages/web-components/src/components/pictogram-item/pictogram-item.ts b/packages/web-components/src/components/pictogram-item/pictogram-item.ts index 76375bd2863..74a9dc9cdb9 100644 --- a/packages/web-components/src/components/pictogram-item/pictogram-item.ts +++ b/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`
@@ -41,6 +42,10 @@ class DDSPictogramItem extends DDSContentItem { `; } + static get stableSelector() { + return `${ddsPrefix}--pictogram-item`; + } + static styles = styles; } From 051a08e8d4b9a68b917d8692d1eee443f8ae25d1 Mon Sep 17 00:00:00 2001 From: Ignacio Becerra Date: Tue, 8 Dec 2020 11:13:05 -0800 Subject: [PATCH 14/25] fix(footer): added label to locale button for better description (#4669) ### Related Ticket(s) #4667 ### Description Added `aria-label` to the locale button in order to provide an accessible description of its purpose in Web Components. ### Changelog **New** - added `aria-label="Select geographic area"` to `locale-button` --- .../src/components/footer/footer-composite.ts | 18 +++++++++++++++--- .../src/components/footer/locale-button.ts | 14 +++++++++++++- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts index 8883e130be9..9a009318ef4 100644 --- a/packages/web-components/src/components/footer/footer-composite.ts +++ b/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` @@ -206,7 +212,9 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener ${size !== FOOTER_SIZE.MICRO ? html` - ${langDisplay} + ${langDisplay} ` : html``} @@ -218,7 +226,11 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener ${size === FOOTER_SIZE.MICRO ? html` - ${langDisplay} ` diff --git a/packages/web-components/src/components/footer/locale-button.ts b/packages/web-components/src/components/footer/locale-button.ts index 43811ebb323..731bbdf2787 100644 --- a/packages/web-components/src/components/footer/locale-button.ts +++ b/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` - From 46f2af8356525057e2ce3e583353bc1b05081f3d Mon Sep 17 00:00:00 2001 From: Raphael Amadeu <30945011+RaphaelAmadeu@users.noreply.github.com> Date: Tue, 8 Dec 2020 16:43:39 -0300 Subject: [PATCH 15/25] fix(feature-card-block-large): added data-autoid (#4664) ### Related Ticket(s) #4359 ### Description Added data-autoid to `dds-feature-card-block-large`. ### Changelog **New** - Added data-autoid - Updated documentation --- .../__stories__/README.stories.mdx | 9 +++++++++ .../feature-card-block-large/feature-card-block-large.ts | 3 ++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/web-components/src/components/feature-card-block-large/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-card-block-large/__stories__/README.stories.mdx index df2b54769fd..9b9d3d995e6 100644 --- a/packages/web-components/src/components/feature-card-block-large/__stories__/README.stories.mdx +++ b/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/ +## 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 | +| -------------------------------- | ------------------------------------------- | ----------- | +| `` | data-autoid="dds--feature-card-block-large" | Component | + + diff --git a/packages/web-components/src/components/feature-card-block-large/feature-card-block-large.ts b/packages/web-components/src/components/feature-card-block-large/feature-card-block-large.ts index c90733b3ef5..0c9f9233371 100644 --- a/packages/web-components/src/components/feature-card-block-large/feature-card-block-large.ts +++ b/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`
From 6910f9caffc75f42ffbed8abc890e54b6a4fd074 Mon Sep 17 00:00:00 2001 From: Kenny Lam Date: Tue, 8 Dec 2020 15:00:55 -0500 Subject: [PATCH 16/25] chore(release): publish - @carbon/ibmdotcom-react@1.14.0-rc.1 - @carbon/ibmdotcom-web-components@0.7.0-rc.1 --- packages/react/CHANGELOG.md | 13 +++++++++++++ packages/react/package.json | 2 +- packages/web-components/CHANGELOG.md | 9 +++++++++ packages/web-components/package.json | 2 +- 4 files changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 9b26a74f48d..9e1b00dd841 100644 --- a/packages/react/CHANGELOG.md +++ b/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/ibmdotcom-react@1.14.0-rc.0...@carbon/ibmdotcom-react@1.14.0-rc.1) (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/ibmdotcom-react@1.12.0-beta.48.54...@carbon/ibmdotcom-react@1.14.0-rc.0) (2020-12-04) **Note:** Version bump only for package @carbon/ibmdotcom-react diff --git a/packages/react/package.json b/packages/react/package.json index 49f7a1cc936..cf55ede37f8 100644 --- a/packages/react/package.json +++ b/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", diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md index cd32cd9f8cc..0354492abd3 100644 --- a/packages/web-components/CHANGELOG.md +++ b/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/ibmdotcom-web-components@0.7.0-rc.0...@carbon/ibmdotcom-web-components@0.7.0-rc.1) (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/ibmdotcom-web-components@0.5.0-beta.48.54...@carbon/ibmdotcom-web-components@0.7.0-rc.0) (2020-12-04) **Note:** Version bump only for package @carbon/ibmdotcom-web-components diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 9d73be86939..e8b7e1683af 100644 --- a/packages/web-components/package.json +++ b/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": { From c8af77eb59286ed2baa49dcade79fe8eee23b7a8 Mon Sep 17 00:00:00 2001 From: Raphael Amadeu <30945011+RaphaelAmadeu@users.noreply.github.com> Date: Tue, 8 Dec 2020 17:33:30 -0300 Subject: [PATCH 17/25] fix(image-with-caption): added data-autoid (#4665) ### Related Ticket(s) #4363 ### Description Added data-autoid to `dds-image-with-caption`. ### Changelog **New** - Added data-autoid - Updated documentation --- .../image-with-caption/__stories__/README.stories.mdx | 10 ++++++++++ .../image-with-caption/image-with-caption.ts | 7 ++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/web-components/src/components/image-with-caption/__stories__/README.stories.mdx b/packages/web-components/src/components/image-with-caption/__stories__/README.stories.mdx index cc3971c8b54..ada1b10582b 100644 --- a/packages/web-components/src/components/image-with-caption/__stories__/README.stories.mdx +++ b/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 + +## 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 | +| ------------------------------- | ------------------------------------- | ----------- | +| ` diff --git a/packages/web-components/src/components/image-with-caption/image-with-caption.ts b/packages/web-components/src/components/image-with-caption/image-with-caption.ts index 0b07d2955c3..df238f8b2da 100644 --- a/packages/web-components/src/components/image-with-caption/image-with-caption.ts +++ b/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; } From 513066572ec03f71e0f75fc48f27fe6dcb2361ba Mon Sep 17 00:00:00 2001 From: "Guilherme L. Moraes" <42848561+guilhermelMoraes@users.noreply.github.com> Date: Tue, 8 Dec 2020 18:03:11 -0300 Subject: [PATCH 18/25] style(layout): setting sticky property only for lg and above breakpoints (#4649) ### Description The `position: sticky` property set at the 'md' and below was causing the columns to overlap each other. --- packages/styles/scss/components/layout/_layout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/scss/components/layout/_layout.scss b/packages/styles/scss/components/layout/_layout.scss index e63bff93401..0b4a8447208 100644 --- a/packages/styles/scss/components/layout/_layout.scss +++ b/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; From fcf4ed5923f8a805bee6c16d9f6f6ddacbe5a775 Mon Sep 17 00:00:00 2001 From: Ignacio Becerra Date: Tue, 8 Dec 2020 13:30:49 -0800 Subject: [PATCH 19/25] fix(masthead): allow search to remain open when profile button is clicked (#4652) ### Related Ticket(s) #4215 ### Description The previous code only allowed clicks within the `MastheadSearch` component. With this update it now allows clicks anywhere on the `Masthead` component (which includes `MastheadProfile`) and have the search box remain open. ### Changelog **Changed** - conditional to allow `MastheadSearch` to be open if user clicks anywhere within parent component --- packages/react/src/components/Masthead/MastheadSearch.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Masthead/MastheadSearch.js b/packages/react/src/components/Masthead/MastheadSearch.js index 11aff2ddd21..517369651b2 100755 --- a/packages/react/src/components/Masthead/MastheadSearch.js +++ b/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' }); From 468e9aaa39c007a58842630623579535817cd3c6 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Wed, 9 Dec 2020 07:24:50 +0900 Subject: [PATCH 20/25] chore(quote): make enums dash-cased (#4658) ### Related Ticket(s) Refs #4160. ### Description Changes the enums for quote choices dash-cased to align it to how the corresponding attribute is named. ### Changelog **Changed** - The enums for quote choices to dash-cased. --- .../src/components/quote/quote.ts | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/web-components/src/components/quote/quote.ts b/packages/web-components/src/components/quote/quote.ts index 952417fc228..3f9e5ccaac5 100644 --- a/packages/web-components/src/components/quote/quote.ts +++ b/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' }) From 747d9231ba83caf38007e670935e476ca753507d Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Wed, 9 Dec 2020 09:01:09 +0900 Subject: [PATCH 21/25] chore(components): unify static property for CSS selectors (#4660) ### Related Ticket(s) Refs #4193. Refs #4144. ### Description Change the static properties for the CSS selectors, so it aligns to the rest of the codebase (except `stableSelector` for name-compatibility reasons with React). Also removes `sameHeight()` JavaScript code as it'll be replaced with #4657. ### Changelog **Changed** - Change the static properties for the CSS selectors, so it aligns to the rest of the codebase (except `stableSelector` for name-compatibility reasons with React). **Removed** - `sameHeight()` JavaScript code as it'll be replaced with #4657. --- .../components/button-group/button-group.ts | 43 ++++---- .../src/components/card-group/card-group.ts | 7 -- .../link-list/__tests__/link-list.test.ts | 7 -- .../src/components/link-list/link-list.ts | 97 ++++++++----------- 4 files changed, 64 insertions(+), 90 deletions(-) diff --git a/packages/web-components/src/components/button-group/button-group.ts b/packages/web-components/src/components/button-group/button-group.ts index e1453ce75c5..5a42708250c 100644 --- a/packages/web-components/src/components/button-group/button-group.ts +++ b/packages/web-components/src/components/button-group/button-group.ts @@ -32,25 +32,6 @@ export enum BUTTON_TYPES { */ @customElement(`${ddsPrefix}-button-group`) class DDSButtonGroup extends LitElement { - static get stableSelector() { - return `${ddsPrefix}--button-group`; - } - - static get buttonGroupItemSelector() { - return `${ddsPrefix}-button-group-item`; - } - - render() { - return html` - - `; - } - - connectedCallback() { - super.connectedCallback(); - this.setAttribute('role', 'list'); - } - /** * Handler for @slotchange, set the first button-group-item to kind tertiary and primary for the remaining ones * @@ -61,7 +42,7 @@ class DDSButtonGroup extends LitElement { .assignedNodes() .filter(elem => (elem as HTMLElement).matches !== undefined - ? (elem as HTMLElement).matches((this.constructor as typeof DDSButtonGroup).buttonGroupItemSelector) + ? (elem as HTMLElement).matches((this.constructor as typeof DDSButtonGroup).selectorItem) : false ); @@ -74,6 +55,28 @@ class DDSButtonGroup extends LitElement { }); } + render() { + return html` + + `; + } + + connectedCallback() { + super.connectedCallback(); + this.setAttribute('role', 'list'); + } + + /** + * A selector that will return the child items. + */ + static get selectorItem() { + return `${ddsPrefix}-button-group-item`; + } + + static get stableSelector() { + return `${ddsPrefix}--button-group`; + } + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } diff --git a/packages/web-components/src/components/card-group/card-group.ts b/packages/web-components/src/components/card-group/card-group.ts index 74a9539ab55..d0ada84a85e 100644 --- a/packages/web-components/src/components/card-group/card-group.ts +++ b/packages/web-components/src/components/card-group/card-group.ts @@ -26,13 +26,6 @@ class DDSCardGroup extends LitElement { `; } - /** - * A selector that will return card group items. - */ - static get cardGroupItemSelector() { - return `${ddsPrefix}-card-group-item`; - } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } diff --git a/packages/web-components/src/components/link-list/__tests__/link-list.test.ts b/packages/web-components/src/components/link-list/__tests__/link-list.test.ts index ccbbd41fc2c..5dd835a2eac 100644 --- a/packages/web-components/src/components/link-list/__tests__/link-list.test.ts +++ b/packages/web-components/src/components/link-list/__tests__/link-list.test.ts @@ -8,7 +8,6 @@ */ import { render } from 'lit-html'; -import DDSLinkList from '../link-list'; import { Default, Horizontal, Vertical, VerticalWithCards, EndOfSection } from '../__stories__/link-list.stories'; describe('dds-link-list', function() { @@ -75,12 +74,6 @@ describe('dds-link-list', function() { expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({ mode: 'shadow' }); }); - it('Tests the get methods', function() { - expect((DDSLinkList as typeof DDSLinkList).stableSelector).toBe('dds--link-list'); - expect((DDSLinkList as typeof DDSLinkList).splitLayoutClass).toBe('bx--link-list__split'); - expect((DDSLinkList as typeof DDSLinkList).linkListItemSelector).toBe('dds-link-list-item'); - }); - afterEach(async function() { await render(undefined!, document.body); }); diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts index 19c18b2abf6..323234a5259 100644 --- a/packages/web-components/src/components/link-list/link-list.ts +++ b/packages/web-components/src/components/link-list/link-list.ts @@ -9,7 +9,6 @@ import { customElement, html, LitElement, property } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings'; -import sameHeight from '@carbon/ibmdotcom-utilities/es/utilities/sameHeight/sameHeight'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import styles from './link-list.scss'; @@ -49,59 +48,10 @@ export enum LINK_LIST_TYPE { */ @customElement(`${ddsPrefix}-link-list`) class DDSLinkList extends StableSelectorMixin(LitElement) { - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader - - private childItems; - - @property({ reflect: true }) - type = LINK_LIST_TYPE.DEFAULT; - - static get splitLayoutClass() { - return `${prefix}--link-list__split`; - } - - static get linkListItemSelector() { - return `${ddsPrefix}-link-list-item`; - } - - static get stableSelector() { - return `${ddsPrefix}--link-list`; - } - - protected render() { - return html` -

-
    - -
- `; - } - - connectedCallback() { - super.connectedCallback(); - window.addEventListener('resize', this._handleResize); - } - - disconnectedCallback() { - super.disconnectedCallback(); - window.removeEventListener('resize', this._handleResize); - } - - /** - * Method called on resize, triggers the sameHeight utility - * - * @private - */ - private _handleResize() { - if (this.childItems) window.requestAnimationFrame(() => sameHeight(this.childItems, 'md')); - } - /** * Returns a class-name based on the parameter type - * - * @protected */ - protected ulClasses() { + private ulClasses() { switch (this.type) { case LINK_LIST_TYPE.HORIZONTAL: return `${prefix}--link-list__list--horizontal`; @@ -120,14 +70,49 @@ class DDSLinkList extends StableSelectorMixin(LitElement) { * @private */ private _handleSlotChange(event: Event) { - this.childItems = (event.target as HTMLSlotElement) + const { selectorItem } = this.constructor as typeof DDSLinkList; + const childItems = (event.target as HTMLSlotElement) .assignedNodes({ flatten: true }) - .filter(elem => (elem as HTMLElement).localName === (this.constructor as typeof DDSLinkList).linkListItemSelector); - if (this.childItems.length > 3 && this.type === LINK_LIST_TYPE.END) { - this.classList.add((this.constructor as typeof DDSLinkList).splitLayoutClass); + .filter(node => node.nodeType === Node.ELEMENT_NODE && (node as Element)?.matches(selectorItem)) as Element[]; + if (childItems.length > 3 && this.type === LINK_LIST_TYPE.END) { + this.classList.add((this.constructor as typeof DDSLinkList).classSplitLayout); } - sameHeight(this.childItems, 'md'); } + + /** + * The link list type. + */ + @property({ reflect: true }) + type = LINK_LIST_TYPE.DEFAULT; + + render() { + return html` +

+
    + +
+ `; + } + + /** + * The CSS class for the "split layout". + */ + static get classSplitLayout() { + return `${prefix}--link-list__split`; + } + + /** + * A selector selecting the child items. + */ + static get selectorItem() { + return `${ddsPrefix}-link-list-item`; + } + + static get stableSelector() { + return `${ddsPrefix}--link-list`; + } + + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } export default DDSLinkList; From 980d01903d82670663319271d8603c4f9b758cc0 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Wed, 9 Dec 2020 09:47:28 +0900 Subject: [PATCH 22/25] chore(link-list): use CSS for same height (#4659) Switches the "same height" feature to one based on CSS grid for better performance and fix FOUC. Refs #4375. --- .../src/components/card-link/card-link.scss | 7 +++++++ .../src/components/link-list/link-list.scss | 13 +++++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/components/card-link/card-link.scss b/packages/web-components/src/components/card-link/card-link.scss index 8223a872652..065e1b7c4a7 100644 --- a/packages/web-components/src/components/card-link/card-link.scss +++ b/packages/web-components/src/components/card-link/card-link.scss @@ -20,3 +20,10 @@ } } } + +:host(#{$dds-prefix}-link-list-item-card), +:host(#{$dds-prefix}-link-list-item-card-cta) { + ::slotted(#{$dds-prefix}-card-footer) { + margin-bottom: auto; + } +} diff --git a/packages/web-components/src/components/link-list/link-list.scss b/packages/web-components/src/components/link-list/link-list.scss index 6963738ecb9..59478ed11ec 100644 --- a/packages/web-components/src/components/link-list/link-list.scss +++ b/packages/web-components/src/components/link-list/link-list.scss @@ -55,10 +55,19 @@ :host(#{$dds-prefix}-link-list) { padding-bottom: 0; + .#{$prefix}--link-list__list--card, + .#{$prefix}--link-list__list--vertical, .#{$dds-prefix}-ce--link-list__list--end { - display: flex; - flex-direction: column; + display: grid; + grid-auto-rows: 1fr; + ::slotted(#{$dds-prefix}-link-list-item), + ::slotted(#{$dds-prefix}-link-list-item-cta) { + display: grid; + } + } + + .#{$dds-prefix}-ce--link-list__list--end { ::slotted(#{$dds-prefix}-link-list-item), ::slotted(#{$dds-prefix}-link-list-item-cta) { padding: $carbon--layout-01; From a50ad84464deaa19c8fd4a60a7290a5ba99dedf3 Mon Sep 17 00:00:00 2001 From: Jeffrey Chew Date: Wed, 9 Dec 2020 04:34:32 -0500 Subject: [PATCH 23/25] chore(slack): adding slack notifications from github actions (#4673) --- .github/workflows/automerge.yml | 6 +++ .github/workflows/deploy-canary.yml | 54 +++++++++++++++++++++++++++ .github/workflows/deploy-staging.yml | 12 ++++++ .github/workflows/publish-canary.yml | 6 +++ .github/workflows/publish-nightly.yml | 6 +++ 5 files changed, 84 insertions(+) diff --git a/.github/workflows/automerge.yml b/.github/workflows/automerge.yml index 68200938270..738d70fb292 100644 --- a/.github/workflows/automerge.yml +++ b/.github/workflows/automerge.yml @@ -7,6 +7,8 @@ on: jobs: automerge: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Merge to master @@ -16,3 +18,7 @@ jobs: target_branch: 'master' env: GITHUB_TOKEN: ${{secrets.MERGE_ACTION}} + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() diff --git a/.github/workflows/deploy-canary.yml b/.github/workflows/deploy-canary.yml index 6f43e6936f3..d03b6017150 100644 --- a/.github/workflows/deploy-canary.yml +++ b/.github/workflows/deploy-canary.yml @@ -8,6 +8,8 @@ on: jobs: react: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -38,8 +40,14 @@ jobs: cf-app: ibmdotcom-react-canary cf-manifest: manifest-canary.yml deploy-dir: packages/react + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() react-experimental: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -71,8 +79,14 @@ jobs: cf-app: ibmdotcom-react-experimental cf-manifest: manifest-experimental.yml deploy-dir: packages/react + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() react-rtl: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -104,8 +118,14 @@ jobs: cf-app: ibmdotcom-react-rtl cf-manifest: manifest-rtl.yml deploy-dir: packages/react + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() web-components: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -136,8 +156,14 @@ jobs: cf-app: ibmdotcom-web-components-canary cf-manifest: manifest-canary.yml deploy-dir: packages/web-components + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() web-components-rtl: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -169,8 +195,14 @@ jobs: cf-app: ibmdotcom-web-components-rtl cf-manifest: manifest-rtl.yml deploy-dir: packages/web-components + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() web-components-experimental: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -202,8 +234,14 @@ jobs: cf-app: ibmdotcom-web-components-experimental cf-manifest: manifest-experimental.yml deploy-dir: packages/web-components + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() services: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -234,8 +272,14 @@ jobs: cf-app: ibmdotcom-services cf-manifest: manifest.yml deploy-dir: packages/services + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() utilities: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -266,8 +310,14 @@ jobs: cf-app: ibmdotcom-utilities cf-manifest: manifest.yml deploy-dir: packages/utilities + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() carbon-expressive: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -298,3 +348,7 @@ jobs: cf-app: carbon-expressive cf-manifest: manifest.yml deploy-dir: packages/styles + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml index aff18801d30..06aa7675020 100644 --- a/.github/workflows/deploy-staging.yml +++ b/.github/workflows/deploy-staging.yml @@ -8,6 +8,8 @@ on: jobs: react: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -38,8 +40,14 @@ jobs: cf-app: ibmdotcom-react-staging cf-manifest: manifest-staging.yml deploy-dir: packages/react + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() web-components: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -70,3 +78,7 @@ jobs: cf-app: ibmdotcom-web-components-staging cf-manifest: manifest-staging.yml deploy-dir: packages/web-components + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() diff --git a/.github/workflows/publish-canary.yml b/.github/workflows/publish-canary.yml index eda29126e06..a398375f1e2 100644 --- a/.github/workflows/publish-canary.yml +++ b/.github/workflows/publish-canary.yml @@ -8,6 +8,8 @@ on: jobs: publish: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -34,3 +36,7 @@ jobs: repository: carbon-design-system/carbon-for-ibm-dotcom-web-components-test token: ${{ secrets.GH_DISPATCH_TOKEN }} event-type: deploy-canary + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() diff --git a/.github/workflows/publish-nightly.yml b/.github/workflows/publish-nightly.yml index f12407fa9f8..ec52cbd1dbd 100644 --- a/.github/workflows/publish-nightly.yml +++ b/.github/workflows/publish-nightly.yml @@ -7,6 +7,8 @@ on: jobs: publish: runs-on: ubuntu-16.04 + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} steps: - uses: actions/checkout@master - name: Use Node.js 12.x @@ -23,3 +25,7 @@ jobs: run: echo "//registry.npmjs.org/:_authToken=$NPM_API_KEY" >> .npmrc - name: Run Lerna run: yarn lerna publish --canary minor --dist-tag nightly --preid nightly.${{github.run_id}} --no-push --no-git-tag-version --yes + - uses: act10ns/slack@v1 + with: + status: ${{ job.status }} + if: failure() From 19ab722247fe99af4a1328bfc8827ea7d96936ee Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Wed, 9 Dec 2020 05:04:47 -0500 Subject: [PATCH 24/25] chore(doc): add stable selector to documentation (#4654) --- .../__stories__/README.stories.mdx | 19 +++++++++++++++--- .../components/callout-quote/callout-quote.ts | 4 ++++ .../card-link/__stories__/README.stories.mdx | 20 ++++++++++++++++++- .../__stories__/README.stories.mdx | 9 +++++++++ .../horizontal-rule/horizontal-rule.ts | 4 ++++ .../image/__stories__/README.stories.mdx | 10 ++++++++++ .../src/components/image/image.ts | 7 ++++++- .../leadspace/__stories__/README.stories.mdx | 9 +++++++++ .../src/components/leadspace/leadspace.ts | 4 ++++ .../quote/__stories__/README.stories.mdx | 8 ++++++++ .../tests/snapshots/dds-callout-quote.md | 2 +- .../tests/snapshots/dds-card-cta.md | 1 + .../snapshots/dds-content-group-horizontal.md | 4 ++-- .../tests/snapshots/dds-image-with-caption.md | 2 ++ .../tests/snapshots/dds-leadspace-block.md | 8 ++++---- .../tests/snapshots/dds-quote.md | 2 +- .../tests/snapshots/dds-video-player.md | 1 + 17 files changed, 101 insertions(+), 13 deletions(-) diff --git a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx index ff5ff9d1919..810f3b7edb7 100644 --- a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx @@ -25,10 +25,11 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-quote/callout-quo ```html - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. + Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna. - Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet consectetur adipiscing elit @@ -39,4 +40,16 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-quote/callout-quo ``` - \ No newline at end of file +## Props + + + +## 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 | +| ----------------------- | ---------------------------------- | ----------- | +| `` | `data-autoid="dds--callout-quote"` | Component | + + diff --git a/packages/web-components/src/components/callout-quote/callout-quote.ts b/packages/web-components/src/components/callout-quote/callout-quote.ts index b89575d3feb..baee3249dee 100644 --- a/packages/web-components/src/components/callout-quote/callout-quote.ts +++ b/packages/web-components/src/components/callout-quote/callout-quote.ts @@ -22,6 +22,10 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-callout-quote`) class DDSCalloutQuote extends DDSCalloutMixin(DDSQuote) { + static get stableSelector() { + return `${ddsPrefix}--callout-quote`; + } + static styles = styles; } diff --git a/packages/web-components/src/components/card-link/__stories__/README.stories.mdx b/packages/web-components/src/components/card-link/__stories__/README.stories.mdx index 663836ef1b3..e31b075fb81 100644 --- a/packages/web-components/src/components/card-link/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card-link/__stories__/README.stories.mdx @@ -25,7 +25,17 @@ import '@carbon/ibmdotcom-web-components/es/components/card-link/card-link.js'; ```html

Copy text

- @@ -35,4 +45,12 @@ import '@carbon/ibmdotcom-web-components/es/components/card-link/card-link.js'; +## 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 | +| ----------------------- | ------------------------------ | ----------- | +| `` | `data-autoid="dds--card-link"` | Component | + diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx index cc0d9e42858..49ee65ce1c7 100644 --- a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx @@ -29,4 +29,13 @@ import '@carbon/ibmdotcom-web-components/es/components/horizontal-rule/horizonta ## Props + +## 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 | +| ----------------------- | ----------------------- | ----------- | +| `` | `data-autoid="dds--hr"` | Component | + diff --git a/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts b/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts index a220c48db0f..72d1a944699 100644 --- a/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts +++ b/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts @@ -123,6 +123,10 @@ class DDSHorizontalRule extends StableSelectorMixin(LitElement) { @property({ attribute: 'weight', reflect: true }) weight = HR_WEIGHT.THIN; + static get stableSelector() { + return `${ddsPrefix}--hr`; + } + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } diff --git a/packages/web-components/src/components/image/__stories__/README.stories.mdx b/packages/web-components/src/components/image/__stories__/README.stories.mdx index 9cb1da4d39b..82817864959 100644 --- a/packages/web-components/src/components/image/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/image/__stories__/README.stories.mdx @@ -46,4 +46,14 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image.js'; ## Props + +## 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 | +| ----------------------- | ------------------------------- | ----------- | +| `` | `data-autoid="dds--image"` | Component | +| `` | `data-autoid="dds--image-item"` | Interactive | + diff --git a/packages/web-components/src/components/image/image.ts b/packages/web-components/src/components/image/image.ts index 4f647168135..ab8990a9733 100644 --- a/packages/web-components/src/components/image/image.ts +++ b/packages/web-components/src/components/image/image.ts @@ -10,6 +10,7 @@ import { html, property, internalProperty, customElement, LitElement } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; +import StableSelectorMixin from '../../globals/mixins/stable-selector'; import styles from './image.scss'; const { prefix } = settings; @@ -23,7 +24,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @slot icon - The icon content. */ @customElement(`${ddsPrefix}-image`) -class DDSImage extends LitElement { +class DDSImage extends StableSelectorMixin(LitElement) { /** * The image data, harvested from ``. */ @@ -85,6 +86,10 @@ class DDSImage extends LitElement { return `${ddsPrefix}-image-item`; } + static get stableSelector() { + return `${ddsPrefix}--image`; + } + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } diff --git a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx index 891a2040065..deb4187fa86 100644 --- a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx @@ -45,4 +45,13 @@ import '@carbon/ibmdotcom-web-components/es/components/button-group/button-group ## Props + +## 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 | +| ----------------------- | ------------------------------ | ----------- | +| `` | `data-autoid="dds--leadspace"` | Component | + diff --git a/packages/web-components/src/components/leadspace/leadspace.ts b/packages/web-components/src/components/leadspace/leadspace.ts index e10f6f341e8..8a0d946ed47 100644 --- a/packages/web-components/src/components/leadspace/leadspace.ts +++ b/packages/web-components/src/components/leadspace/leadspace.ts @@ -217,6 +217,10 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) { `; } + static get stableSelector() { + return `${ddsPrefix}--leadspace`; + } + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } diff --git a/packages/web-components/src/components/quote/__stories__/README.stories.mdx b/packages/web-components/src/components/quote/__stories__/README.stories.mdx index 9169b2f317f..adf336a4ee3 100644 --- a/packages/web-components/src/components/quote/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/quote/__stories__/README.stories.mdx @@ -59,4 +59,12 @@ import '@carbon/ibmdotcom-web-components/es/components/link-with-icon/link-with- +## 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 | +| ----------------------- | -------------------------- | ----------- | +| `` | `data-autoid="dds--quote"` | Component | + diff --git a/packages/web-components/tests/snapshots/dds-callout-quote.md b/packages/web-components/tests/snapshots/dds-callout-quote.md index fe9235807ac..c21ca1c292c 100644 --- a/packages/web-components/tests/snapshots/dds-callout-quote.md +++ b/packages/web-components/tests/snapshots/dds-callout-quote.md @@ -41,7 +41,7 @@ class="bx--quote__footer" hidden="" > - + diff --git a/packages/web-components/tests/snapshots/dds-card-cta.md b/packages/web-components/tests/snapshots/dds-card-cta.md index 201a9325dc5..f16fb096f7e 100644 --- a/packages/web-components/tests/snapshots/dds-card-cta.md +++ b/packages/web-components/tests/snapshots/dds-card-cta.md @@ -44,6 +44,7 @@ diff --git a/packages/web-components/tests/snapshots/dds-content-group-horizontal.md b/packages/web-components/tests/snapshots/dds-content-group-horizontal.md index bec9afad1a4..12c77f7f0ca 100644 --- a/packages/web-components/tests/snapshots/dds-content-group-horizontal.md +++ b/packages/web-components/tests/snapshots/dds-content-group-horizontal.md @@ -22,7 +22,7 @@
- + ``` @@ -47,7 +47,7 @@
- + ``` diff --git a/packages/web-components/tests/snapshots/dds-image-with-caption.md b/packages/web-components/tests/snapshots/dds-image-with-caption.md index 11f4d26a933..32aa391d2d6 100644 --- a/packages/web-components/tests/snapshots/dds-image-with-caption.md +++ b/packages/web-components/tests/snapshots/dds-image-with-caption.md @@ -7,6 +7,7 @@ ``` @@ -26,6 +27,7 @@ > diff --git a/packages/web-components/tests/snapshots/dds-leadspace-block.md b/packages/web-components/tests/snapshots/dds-leadspace-block.md index 908f7fa25d8..09a975704b9 100644 --- a/packages/web-components/tests/snapshots/dds-leadspace-block.md +++ b/packages/web-components/tests/snapshots/dds-leadspace-block.md @@ -16,7 +16,7 @@ - + ``` @@ -35,7 +35,7 @@ - + ``` @@ -56,7 +56,7 @@ - + ``` @@ -75,7 +75,7 @@ - + ``` diff --git a/packages/web-components/tests/snapshots/dds-quote.md b/packages/web-components/tests/snapshots/dds-quote.md index bf274646b0f..abff9af38ab 100644 --- a/packages/web-components/tests/snapshots/dds-quote.md +++ b/packages/web-components/tests/snapshots/dds-quote.md @@ -39,7 +39,7 @@ class="bx--quote__footer" hidden="" > - + diff --git a/packages/web-components/tests/snapshots/dds-video-player.md b/packages/web-components/tests/snapshots/dds-video-player.md index 2f9a2d37b27..6c1a155c60f 100644 --- a/packages/web-components/tests/snapshots/dds-video-player.md +++ b/packages/web-components/tests/snapshots/dds-video-player.md @@ -8,6 +8,7 @@