Merge branch 'feat/carbon-for-ibm-dotcom-v2' into feat/toc-v2

ariellalgilmore · Sep 13, 2023 · 1401fc1 · 1401fc1
2 parents b4aa738 + 90ee979
commit 1401fc1
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 128 deletions.
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
@@ -679,124 +679,63 @@
 
     &[pictogram-placement='top'] .#{$prefix}--card,
     &[pictogram-placement='bottom'] .#{$prefix}--card {
-      .#{$prefix}--card__motion {
-        ::slotted(#{$c4d-prefix}-card-heading) {
-          padding-top: 0;
-
-          @include breakpoint(md) {
-            /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 3;
-            /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
-            overflow: hidden;
-            max-width: calc(100% - #{$spacing-10});
-            opacity: 1;
-            transform: translate3d(0, 0, 0);
-            transition: all $duration-moderate-01 motion(standard, productive)
-              0.25s;
-          }
-        }
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-top: 0;
+      }
 
-        ::slotted(svg[slot='pictogram']) {
-          margin-left: 0;
-        }
+      ::slotted(svg[slot='pictogram']) {
+        margin-left: 0;
+      }
 
-        .#{$prefix}--card__content {
-          position: relative;
-        }
+      .#{$prefix}--card__content {
+        position: relative;
+      }
 
-        .#{$prefix}--card__copy {
-          margin-top: $spacing-07;
-          margin-bottom: 0;
+      .#{$prefix}--card__copy {
+        margin-top: $spacing-07;
+        margin-bottom: 0;
 
-          @include breakpoint(md) {
-            margin-top: 0;
-            visibility: hidden;
-            opacity: 0;
-            transform: translate3d(0, -16px, 0);
-            transition: all $duration-moderate-01 motion(standard, productive);
-          }
+        &[hidden] {
+          margin: 0;
         }
       }
 
-      &:hover,
-      &:focus {
-        .#{$prefix}--card__motion {
-          ::slotted(#{$c4d-prefix}-card-heading) {
-            @include breakpoint(md) {
-              opacity: 0;
-              transform: translate3d(0, $spacing-05, 0);
-              transition-delay: 0s;
-            }
-          }
-
-          .#{$prefix}--card__copy {
-            @include breakpoint(md) {
-              display: block;
-              overflow: hidden;
-              visibility: visible;
-              opacity: 1;
-              transform: translate3d(0, 0, 0);
-              transition-delay: 0.2s;
-            }
-          }
-        }
+      svg {
+        position: absolute;
+        right: $spacing-05;
+        bottom: $spacing-05;
+        color: $link-primary;
       }
     }
 
     &[pictogram-placement='top'] .#{$prefix}--card {
-      .#{$prefix}--card__motion {
-        ::slotted(#{$c4d-prefix}-card-heading) {
-          align-items: flex-end;
-          margin-bottom: 0;
-          margin-top: auto;
-
-          @include breakpoint(md) {
-            position: absolute;
-            bottom: $spacing-05;
-          }
-        }
-
-        .#{$prefix}--card__copy {
-          @include breakpoint(md) {
-            margin-top: auto;
-          }
-        }
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        align-items: flex-end;
+        margin-bottom: 0;
+        margin-top: auto;
+      }
 
-        ::slotted(svg[slot='pictogram']) {
-          margin-bottom: $spacing-10;
+      .#{$prefix}--card__copy {
+        margin-top: $spacing-07;
+      }
 
-          @include breakpoint(md) {
-            margin-bottom: $spacing-07;
-          }
-        }
+      ::slotted(svg[slot='pictogram']) {
+        margin-bottom: $spacing-07;
       }
     }
 
     &[pictogram-placement='bottom'] .#{$prefix}--card {
-      .#{$prefix}--card__motion {
-        ::slotted(#{$c4d-prefix}-card-heading) {
-          align-items: flex-start;
-
-          @include breakpoint(md) {
-            position: absolute;
-            top: $spacing-05;
-          }
-        }
-
-        .#{$prefix}--card__copy {
-          margin-bottom: $spacing-10;
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        align-items: flex-start;
+      }
 
-          @include breakpoint(md) {
-            margin-bottom: $spacing-07;
-          }
-        }
+      .#{$prefix}--card__copy {
+        margin-bottom: $spacing-07;
+      }
 
-        ::slotted(svg[slot='pictogram']) {
-          margin-top: auto;
-          align-items: flex-end;
-        }
+      ::slotted(svg[slot='pictogram']) {
+        margin-top: auto;
+        align-items: flex-end;
       }
     }
 

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
@@ -128,7 +128,7 @@ Pictogram.story = {
         const pictogramPlacement = select(
           'Pictogram position:',
           pictogramPlacements,
-          pictogramPlacements.top
+          pictogramPlacements.bottom
         );
         const copy = textNullable(
           'Body copy:',

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -213,7 +213,7 @@ Pictogram.story = {
         const pictogramPlacement = select(
           'Pictogram position:',
           pictogramPlacements,
-          pictogramPlacements.top,
+          pictogramPlacements.bottom,
           'pictogram'
         );
         const copy = textNullable(

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 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';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
@@ -139,17 +140,14 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
    * @returns The inner content.
    */
   protected _renderInner() {
-    const {
-      _handleSlotChange: handleSlotChange,
-      _hasPictogram: hasPictogram,
-      _hasCopy: hasCopy,
-    } = this;
+    const { _handleSlotChange: handleSlotChange, _hasPictogram: hasPictogram } =
+      this;
     return html`
       ${this._renderImage()}
       <div
         class="${prefix}--card__wrapper ${hasPictogram
           ? `${prefix}--card__pictogram`
-          : ''} ${hasPictogram && hasCopy ? `${prefix}--card__motion` : ''}">
+          : ''}">
         <div class="${prefix}--card__content">
           ${hasPictogram ? '' : html` <slot name="eyebrow"></slot> `}
           ${this.pictogramPlacement === PICTOGRAM_PLACEMENT.TOP
@@ -206,7 +204,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
    * Pictogram placement
    */
   @property({ attribute: 'pictogram-placement', reflect: true })
-  pictogramPlacement = '';
+  pictogramPlacement = PICTOGRAM_PLACEMENT.BOTTOM;
 
   /**
    * Whether or not to apply the logo style.
@@ -367,7 +365,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
             aria-live="polite"
             aria-describedby="${prefix}--card__copy"
             role="button">
-            ${this._renderInner()}
+            ${this._renderInner()} ${ArrowRight20()}
           </div>
         `
       : html` <div>${this._renderInner()}</div> `;

diff --git a/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts b/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts
@@ -97,7 +97,7 @@ export const Default = (args) => {
 };
 
 export default {
-  title: 'Components/Notice Choice',
+  title: 'IBM components/Notice Choice',
   decorators: [
     (story) => html`
       <div class="cds--grid">

diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js
@@ -211,36 +211,20 @@ const _tests = {
   pictogramPosition: (position, groupId) => {
     if (position === 'top') {
       it('should check for pictogram at the top', () => {
+        cy.visit(`/${_pathPictogram}&knob-Pictogram%20position:${groupId}=bottom`);
         cy.get('cds-card').should('have.attr', 'pictogram-placement', 'top');
         cy.get('cds-card svg').then($content => {
           expect($content[0].getBoundingClientRect().top).to.equal(32);
           expect($content[0].getBoundingClientRect().bottom).to.equal(80);
         });
       });
     } else {
-      it('should check for pictogram at the bottom with text showing on hover', () => {
-        cy.visit(`/${_pathPictogram}&knob-Pictogram%20position:${groupId}=bottom`);
-
+      it('should check for pictogram at the bottom', () => {
         cy.get('cds-card').should('have.attr', 'pictogram-placement', 'bottom');
         cy.get('cds-card svg').then($content => {
           expect($content[0].getBoundingClientRect().top).to.equal(186);
           expect($content[0].getBoundingClientRect().bottom).to.equal(234);
         });
-
-        cy.get('cds-card').then($el => {
-          const sheets = $el[0].shadowRoot.adoptedStyleSheets;
-
-          if (sheets) {
-            const hover = getCssPropertyForRule(
-              ':host(cds-card[pictogram-placement="bottom"]:hover) .bx--card__copy',
-              'display',
-              sheets
-            );
-            expect(hover).to.not.equal('none');
-          }
-        });
-        cy.get('cds-card p').should('not.be.empty');
-        cy.takeSnapshots();
       });
     }
   },