fix(MWPW-138354): adds support for custom cards and fixes CSS (#115)

* fix(MWPW-138354): adds support for custom cards and fixes CSS * fix(MWPW-138354): fixes unit test errors * build(MWPW-138354): updates dist files * fix(MWPW-138007): sets padding around one-half 4&5up to 16px * fix(MWPW-138354): fixes halfHeigh width issues
adobecom · Nov 2, 2023 · e626487 · e626487
1 parent e222a18
commit e626487
Show file tree

Hide file tree

Showing 21 changed files with 858 additions and 869 deletions.
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/main.js b/dist/main.js
@@ -1,5 +1,5 @@
 /*!
- * Chimera UI Libraries - Build 0.10.0 (10/30/2023, 13:50:49)
+ * Chimera UI Libraries - Build 0.11.0 (11/2/2023, 14:45:22)
  *         
  */
 /******/ (function(modules) { // webpackBootstrap
@@ -7903,7 +7903,7 @@ var Grid = function Grid(props) {
             ref: forwardedRef,
             'data-card-style': collectionStyleOverride,
             'data-testid': 'consonant-CardsGrid',
-            className: collectionStyleOverride + ' ' + gridClass,
+            className: gridClass,
             'aria-live': isAriaLiveActive ? 'polite' : 'off' },
         cardsToshow.map(function (card, index) {
             var cardStyleOverride = (0, _general.getByPath)(card, 'styles.typeOverride');
@@ -46563,7 +46563,7 @@ var Card = function Card(props) {
         'div',
         {
             'daa-lh': lh,
-            className: cardClassName,
+            className: cardStyle + ' ' + cardClassName,
             'aria-label': ariaText,
             'data-testid': 'consonant-Card',
             id: id },
@@ -48622,8 +48622,8 @@ var VideoButton = function VideoButton(_ref) {
         _react2.default.createElement(
             'button',
             {
-                className: 'consonant-videoButton-wrapper',
-                'data-testid': 'consonant-videoButton-wrapper',
+                className: 'consonant-Card-videoButton-wrapper',
+                'data-testid': 'consonant-Card-videoButton-wrapper',
                 'daa-ll': 'play',
                 'aria-label': 'Play',
                 onClick: handleShowModal },

diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/dist/main.source.js b/dist/main.source.js
diff --git a/less/components/consonant/cards-grid.less b/less/components/consonant/cards-grid.less
@@ -77,15 +77,6 @@
                     max-width: 100%;
                 }
             }
-
-            &.one-half .consonant-Card {
-                height: auto;
-
-                .consonant-Card-header {
-                    min-height: @consonant-CardsGrid-smallerCardImgOneHalfHeight;
-                    max-height: @consonant-CardsGrid-smallerCardImgOneHalfHeight;
-                }
-            }
         }
 
         &--5up {
@@ -102,7 +93,7 @@
                 }
             }
 
-            &.one-half .consonant-Card {
+            .one-half.consonant-Card {
                 height: auto;
 
                 .consonant-Card-header {
@@ -115,18 +106,6 @@
         @media @consonant-680px-up {
             &--2up {
                 grid-template-columns: repeat(auto-fit, minmax(@consonant-DoubleWideCard-desktopMinWidth, max-content));
-
-                .consonant-Card {
-                    min-width: @consonant-DoubleWideCard-desktopMinWidth;
-                }
-            }
-
-            &--3up,
-            &--4up,
-            &--5up {
-                &.double-wide {
-                    grid-template-columns: repeat(auto-fit, minmax(@consonant-DoubleWideCard-desktopMinWidth, max-content));
-                }
             }
         }
     }

diff --git a/less/components/consonant/cards/double-wide.less b/less/components/consonant/cards/double-wide.less
@@ -4,171 +4,185 @@
 */
 
 .consonant-CardsGrid {
-    &.double-wide {
-        .consonant-Card {
-            min-width: @consonant-DoubleWideCard-mobileMinWidth;
-            max-width: @consonant-DoubleWideCard-maxWidth;
-            height: @consonantCardHeight;
-
-            &-header {
-                position: relative;
-                height: @consonant-DoubleWideCard-imgHeight;
-                overflow: hidden;
-                background-color: @consonantGray300;
-                background-position: 50% 0;
-                background-repeat: no-repeat;
-                background-size: cover;
-            }
+    .consonant-Card.double-wide {
+        min-width: @consonant-DoubleWideCard-mobileMinWidth;
+        max-width: @consonant-DoubleWideCard-maxWidth;
+        height: @consonantCardHeight;
+
+        .consonant-Card-header {
+            position: relative;
+            height: @consonant-DoubleWideCard-imgHeight;
+            overflow: hidden;
+            background-color: @consonantGray300;
+            background-position: 50% 0;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
 
-            &-videoIco {
-                .video-button-styles;
-            }
+        .consonant-Card-videoIco {
+            .video-button-styles;
+        }
 
-            &-content {
-                flex-grow: 1;
-                display: flex;
-                flex-direction: column;
-                padding: 16px 24px 28px;
+        .consonant-Card-content {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            padding: 16px 24px 28px;
+            text-decoration: none;
+            background-color: @consonantBaseColor;
+            outline: 0;
+            width: 100%;
+
+            &:hover,
+            &:active {
                 text-decoration: none;
-                background-color: @consonantBaseColor;
-                outline: 0;
-                width: 100%;
-
-                &:hover,
-                &:active {
-                    text-decoration: none;
-                }
+            }
 
-                &:empty {
-                    display: none;
-                }
+            &:empty {
+                display: none;
             }
+        }
 
-            &-title {
-                margin: 0 0 5px;
-                padding: 0;
+        .consonant-Card-title {
+            margin: 0 0 5px;
+            padding: 0;
 
-                .font(1.125rem, 1.375rem, 700, @consonantGray900);
-                .line-clamp(1);
+            .font(1.125rem, 1.375rem, 700, @consonantGray900);
+            .line-clamp(1);
 
-                :only-child {
-                    margin-bottom: 0;
-                }
+            :only-child {
+                margin-bottom: 0;
             }
+        }
 
-            &-logo {
-                position: absolute;
-                display: block;
-                bottom: 16px;
-                left: 0;
-                padding: 7px 24px;
-                border: 1px solid transparent;
-                border-top-right-radius: 4px;
-                border-bottom-right-radius: 4px;
-                background-color: @consonantWhite;
-                z-index: 1;
+        .consonant-Card-logo {
+            position: absolute;
+            display: block;
+            bottom: 16px;
+            left: 0;
+            padding: 7px 24px;
+            border: 1px solid transparent;
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+            background-color: @consonantWhite;
+            z-index: 1;
+
+            .no-font;
+
+            img {
+                width: auto;
+                height: auto;
+                max-width: @consonantCardLogoImgMaxWidth;
+                max-height: @consonant-cardLogoImgMaxHeight;
+                object-fit: contain;
+                user-select: none;
+            }
+        }
 
-                .no-font;
+        .consonant-Card-label {
+            display: block;
+            margin-bottom: 8px;
 
-                img {
-                    width: auto;
-                    height: auto;
-                    max-width: @consonantCardLogoImgMaxWidth;
-                    max-height: @consonant-cardLogoImgMaxHeight;
-                    object-fit: contain;
-                    user-select: none;
-                }
-            }
+            .font(0.875rem, 1.3125rem, 400, @consonantGray800);
+            .line-clamp(1);
 
-            &-label {
-                display: block;
-                margin-bottom: 8px;
+            :only-child {
+                margin-bottom: 0;
+            }
+        }
 
-                .font(0.875rem, 1.3125rem, 400, @consonantGray800);
-                .line-clamp(1);
+        .consonant-Card-banner {
+            position: absolute;
+            display: flex;
+            justify-content: flex-start;
+            max-width: 56%;
+            max-height: 70%;
+            top: 24px;
+            right: 0;
+            padding: 8px 13px;
+
+            .font(0.75rem, 1.0625rem, 700, @consonantBaseColor);
+
+            letter-spacing: 0.72px;
+            text-transform: uppercase;
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+            z-index: 1;
+            background-color: @consonantBlue600;
+            user-select: none;
+            overflow-y: auto;
+
+            &IconWrapper {
+                margin-right: 4px;
 
-                :only-child {
-                    margin-bottom: 0;
+                img {
+                    width: 8px;
+                    height: 8px;
                 }
             }
+        }
 
-            &-banner {
-                position: absolute;
-                display: flex;
-                justify-content: flex-start;
-                max-width: 56%;
-                max-height: 70%;
-                top: 24px;
-                right: 0;
-                padding: 8px 13px;
-
-                .font(0.75rem, 1.0625rem, 700, @consonantBaseColor);
-
-                letter-spacing: 0.72px;
-                text-transform: uppercase;
-                border-top-left-radius: 4px;
-                border-bottom-left-radius: 4px;
-                z-index: 1;
-                background-color: @consonantBlue600;
-                user-select: none;
-                overflow-y: auto;
+        .consonant-Card-text {
+            .no-margin;
 
-                &IconWrapper {
-                    margin-right: 4px;
+            padding: 0;
 
-                    img {
-                        width: 8px;
-                        height: 8px;
-                    }
-                }
-            }
+            .font(0.875rem, 1.3125rem, 400, @consonantGray700);
+            .line-clamp(2);
+        }
 
-            &-text {
-                .no-margin;
+        .consonant-Card--contentTop {
+            flex-direction: column-reverse;
+        }
 
-                padding: 0;
+        .consonant-Card--contentTop &-img {
+            flex-grow: 1;
+        }
 
-                .font(0.875rem, 1.3125rem, 400, @consonantGray700);
-                .line-clamp(2);
-            }
+        .consonant-Card--contentTop &-content {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding-top: 24px;
+            background-color: transparent;
+            z-index: 1;
+        }
 
-            &--contentTop {
-                flex-direction: column-reverse;
-            }
+        .consonant-Card--noTextInfo &-img {
+            height: 100%;
+        }
 
-            &--contentTop &-img {
-                flex-grow: 1;
-            }
+        .consonant-Card--noTextInfo &-content {
+            display: none;
+        }
 
-            &--contentTop &-content {
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                padding-top: 24px;
-                background-color: transparent;
-                z-index: 1;
-            }
+        .consonant-Card.consonant-u-noBorders {
+            border: 0;
+        }
 
-            &--noTextInfo &-img {
-                height: 100%;
-            }
+        @media @consonant-desktop-up {
+            min-width: @consonant-DoubleWideCard-desktopMinWidth;
 
-            &--noTextInfo &-content {
-                display: none;
-            }
+            .consonant-Card-content {
+                outline: 0;
 
-            &.consonant-u-noBorders {
-                border: 0;
+                .focus-pseudo-element;
             }
+        }
 
-            @media @consonant-desktop-up {
-                min-width: @consonant-DoubleWideCard-desktopMinWidth;
-
-                &-content {
-                    outline: 0;
+        @media @consonant-680px-up {
+            &--2up {
+                .consonant-Card.double-wide {
+                    min-width: @consonant-DoubleWideCard-desktopMinWidth;
+                }
+            }
 
-                    .focus-pseudo-element;
+            &--3up,
+            &--4up,
+            &--5up {
+                .consonant-Card.double-wide {
+                    grid-template-columns: repeat(auto-fit, minmax(@consonant-DoubleWideCard-desktopMinWidth, max-content));
                 }
             }
         }