Merge branch 'main' into fix/modal-focus-trap-issue-v2

carbon-design-system · Dec 19, 2023 · bc2a90b · bc2a90b
2 parents d428985 + ed01bcd
commit bc2a90b
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 31 deletions.
diff --git a/.github/workflows/publish-v2alpha-cdn.yml b/.github/workflows/publish-v2alpha-cdn.yml
@@ -0,0 +1,45 @@
+name: publish-v2alpha-cdn (Publish to CDN)
+
+on:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  publish:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --ignore '@carbon/react' build
+      - name: Create CDN artifacts
+        run: yarn build:sass:cdn && yarn build:components
+        working-directory: packages/web-components
+      - name: Publish to COS (Carbon for IBM.com Web Components)
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks
+        env:
+          AWS_S3_BUCKET: ${{ secrets.COS_BUCKET_COMMON }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.COS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.COS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.COS_REGION }}
+          AWS_S3_ENDPOINT: https://${{ secrets.COS_ENDPOINT }}
+          SOURCE_DIR: 'packages/web-components/dist'
+          DEST_DIR: 'common/carbon-for-ibm-dotcom/version/2.0.0.alpha.${{ github.run_id }}'
+      - uses: act10ns/slack@v2
+        with:
+          status: ${{ job.status }}
+        if: failure()
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
@@ -148,6 +148,12 @@
     .#{$prefix}--card__img {
       transition: $duration-moderate-01 motion(standard, productive);
     }
+
+    .#{$prefix}--card__link::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
   }
 
   // Card with pictogram placement style

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -28,6 +28,7 @@ import {
   typeOptions,
   types,
 } from '../../cta/__stories__/ctaTypeConfig';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const tagGroupContent = html`
   <div>
@@ -185,17 +186,13 @@ export const Pictogram = (args) => {
   const { href, heading, copy, tagGroup, pictogramPlacement, cardStyles } =
     args?.PictogramCard ?? {};
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
   return html`
     <c4d-card
       pictogram-placement="${pictogramPlacement}"
       href=${ifDefined(href || undefined)}
       color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}>
       <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html` <p></p> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       <svg
         slot="pictogram"
@@ -283,11 +280,6 @@ export const Static = (args) => {
     ctaCopy,
   } = args?.Card ?? {};
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
-
   return html`
     <c4d-card>
       ${image
@@ -300,7 +292,7 @@ export const Static = (args) => {
         : ``}
       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
       <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html` <p></p> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       ${cta
         ? html`
@@ -382,11 +374,6 @@ export const Link = (args) => {
     card.querySelector('c4d-card-footer')!.innerHTML = duration ?? '';
   }
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
-
   return html`
     <c4d-video-cta-container>
       <c4d-card
@@ -396,7 +383,7 @@ export const Link = (args) => {
         cta-type=${ctaType}
         href=${ifDefined(href || undefined)}>
         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
-        ${copy ? html` <p></p> ` : ``}
+        ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
         <c4d-card-footer></c4d-card-footer>
       </c4d-card>
     </c4d-video-cta-container>
@@ -446,11 +433,6 @@ export const Logo = (args) => {
   const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
     args?.Card ?? {};
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
-
   return html`
     <c4d-card logo href=${ifDefined(href || undefined)}>
       <c4d-image-logo
@@ -459,7 +441,7 @@ export const Logo = (args) => {
         default-src="${ifDefined(defaultSrc)}"></c4d-image-logo>
       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
       ${heading ? html` <c4d-card-heading>${heading}</c4d-card-heading> ` : ``}
-      ${copy ? html` <p></p> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
 
       <c4d-card-footer></c4d-card-footer>

diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
@@ -9,6 +9,7 @@
 
 import { TemplateResult, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
 import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml.js';
@@ -395,14 +396,15 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
   render() {
     return this._hasPictogram
       ? html`
-          <div
-            tabindex="0"
-            aria-label="${this.querySelector(`${c4dPrefix}-card-heading`)
-              ?.textContent || ''}"
-            aria-live="polite"
-            aria-describedby="${prefix}--card__copy"
-            role="button">
-            ${this._renderInner()} ${ArrowRight20()}
+          <div>
+            ${this._renderInner()}
+            <a
+              class="${`${prefix}--card__link`}"
+              href="${ifDefined(this.href)}"
+              aria-label="${this.querySelector(`${c4dPrefix}-card-heading`)
+                ?.textContent || ''}"
+              >${ArrowRight20()}</a
+            >
           </div>
         `
       : html` <div>${this._renderInner()}</div> `;