MWPW-146940: Adds footer divider at the collection level (#151)

* fix (MWPW-146940): Adds footer divider option at the collection level * fix (MWPW-146940): Removes unrelated file
adobecom · Apr 26, 2024 · bb285a7 · bb285a7
1 parent 043932f
commit bb285a7
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 121 deletions.
diff --git a/caas/mock-json/smoke.json b/caas/mock-json/smoke.json
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.11.27 (4/24/2024, 07:30:18)
+ * Chimera UI Libraries - Build 0.11.28 (4/26/2024, 09:55:40)
  *         
  */
 /******/ (function(modules) { // webpackBootstrap
@@ -7840,6 +7840,7 @@ var Grid = function Grid(props) {
     var cardsGridLayout = getConfig('collection', 'layout.type');
     var cardsGridGutter = getConfig('collection', 'layout.gutter');
     var renderCardsBorders = getConfig('collection', 'setCardBorders');
+    var renderFooterDivider = getConfig('collection', 'showFooterDivider');
     var renderCardsOverlay = getConfig('collection', 'useOverlayLinks');
     var dateFormat = getConfig('collection', 'i18n.prettyDateIntervalFormat');
     var locale = getConfig('language', '');
@@ -7996,6 +7997,7 @@ var Grid = function Grid(props) {
                         dateFormat: dateFormat,
                         locale: locale,
                         renderBorder: renderCardsBorders,
+                        renderDivider: renderFooterDivider,
                         renderOverlay: renderCardsOverlay,
                         hideCTA: hideCTA,
                         onFocus: function onFocus() {
@@ -46400,6 +46402,7 @@ var CardType = {
     footer: (0, _propTypes.arrayOf)((0, _propTypes.shape)(_card.footerType)),
     contentArea: (0, _propTypes.shape)(_card.contentAreaType),
     renderBorder: _propTypes.bool,
+    renderDivider: _propTypes.bool,
     renderOverlay: _propTypes.bool,
     overlayLink: _propTypes.string,
     hideCTA: _propTypes.bool,
@@ -46422,6 +46425,7 @@ var defaultProps = {
     isBookmarked: false,
     disableBookmarkIco: false,
     renderBorder: true,
+    renderDivider: false,
     renderOverlay: false,
     overlayLink: '',
     hideCTA: false,
@@ -46485,6 +46489,7 @@ var Card = function Card(props) {
         logoBorderBg = _props$overlays$logo.borderColor,
         badgeText = _props$overlays.label.description,
         renderBorder = props.renderBorder,
+        renderDivider = props.renderDivider,
         renderOverlay = props.renderOverlay,
         overlayLink = props.overlayLink,
         hideCTA = props.hideCTA,
@@ -46753,7 +46758,7 @@ var Card = function Card(props) {
             ),
             showFooter && !hideCTA && footer.map(function (footerItem) {
                 return _react2.default.createElement(_CardFooter2.default, {
-                    divider: footerItem.divider,
+                    divider: renderDivider || footerItem.divider,
                     isFluid: footerItem.isFluid,
                     key: (0, _cuid2.default)(),
                     left: showFooterLeft ? extendFooterData(footerItem.left) : [],

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/html/test-page.html b/html/test-page.html
@@ -2,72 +2,44 @@
 <html lang="en">
 
 <head>
-
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="robots" content="noodp" />
-
     <meta name="template" content="" />
-
     <link rel="stylesheet" href="../dist/app.css" type="text/css">
     <link rel="stylesheet" href="../dependencies/typekit.css" type="text/css">
     <link rel="stylesheet" href="../dependencies/dexter/publish.css" type="text/css">
-    <title>CaaS</title>
-
-</head>
-
-<body class="page basicpage spectrum spectrum--lightest">
-    <div class="root responsivegrid">
-        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12">
-            <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
-                <div class="position aem-GridColumn aem-GridColumn--default--12">
-                    <div id="root_content_position"
-                         class="dexter-Position mobile-place-static mobile-place-left mobile-place-top mobile-padding-top-0 mobile-padding-right-0 mobile-padding-bottom-0 mobile-padding-left-0 mobile-margin-top-0 mobile-margin-right-0 mobile-margin-bottom-0 mobile-margin-left-0 is-Editor-false"
-                         style="background-color: transparent; background-position: 50% 50%;">
-                        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
-                            <div class="cardcollection aem-GridColumn aem-GridColumn--default--12">
-                                <section id="create-app" class="create-app consonant">
-                                    <div class="collection-Container  create-card-collection">
-                                        <div class="container create-card-collection__outer-wrapper">
-                                            <consonant-card-collection id="foo" data-config=""></consonant-card-collection>
-                                        </div>
-                                    </div>
-                                </section>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
+    <title>CaaS Test Page</title>
     <style>
+        .container {
+            margin-top: 50px;
+        }
         .help {
             border-top: solid 1px #666;
             width: 80%;
             margin: 60px auto;
             padding: 30px;
             font-family: Arial, Helvetica, sans-serif;
         }
-
     </style>
+</head>
+
+<body class="page basicpage spectrum spectrum--lightest">
+    <div class="container">
+        <consonant-card-collection id="output" data-config=""></consonant-card-collection>
+    </div>
+
     <div class="help">
         <p><b>Testing Tips</b></p>
         <p>URLParam State examples:</p>
         <ol>
-            <li>Hide filter Panel: <a href="./carlos-test-page?state=filterPanel.enabled:false"><code>filterPanel.enabled:false</code></a></li>
-            <li>Results per Page: <a href="./carlos-test-page?state=collection.resultsPerPage:3"><code>collection.resultsPerPage:3</code></a></li>
-            <li>Combined statements: <a href="./carlos-test-page?state=filterPanel.enabled:false,collection.resultsPerPage:3"><code>filterPanel.enabled:false,collection.resultsPerPage:3</code></a></li>
+            <li>Hide filter Panel: <a href="?state=filterPanel.enabled:false"><code>filterPanel.enabled:false</code></a></li>
+            <li>Results per Page: <a href="?state=collection.resultsPerPage:3"><code>collection.resultsPerPage:3</code></a></li>
+            <li>Show Footer Divider: <a href="?state=collection.showFooterDivider:true"><code>collection.showFooterDivider:true</code></a></li>
+            <li>Combined statements: <a href="?state=filterPanel.enabled:false,collection.resultsPerPage:3"><code>filterPanel.enabled:false,collection.resultsPerPage:3</code></a></li>
         </ol>
-
     </div>
 
-
-
-
-
-
-
     <script>
         let config = {
             "collection": {
@@ -90,7 +62,7 @@
                 "i18n": {
                     "prettyDateIntervalFormat": "{ddd}, {LLL} {dd} | {timeRange} {timeZone}",
                     "totalResultsText": "{total} results",
-                    "title": "Sessions",
+                    "title": "CaaS Test Collection",
                     "titleHeadingLevel": "h2",
                     "cardTitleAccessibilityLevel": "6",
                     "onErrorTitle": "Sorry there was a system error.",
@@ -244,7 +216,6 @@
             "customCard": ["return `<div>Please author a valid custom card key<\/div>`"]
         };
 
-
         const searchParams = new URLSearchParams(location.search);
         const newState = searchParams?.get('state');
         const newProps = newState?.split(",");
@@ -262,20 +233,13 @@
             });
             config = newConfig;
         }
-
-        document.getElementById('foo').setAttribute('data-config', JSON.stringify(config))
+        document.getElementById('output').setAttribute('data-config', JSON.stringify(config))
     </script>
-
-
     <script type="text/javascript" src="../dist/main.source.js"></script>
-
 </body>
 
-
-<div class="modalContainer parsys">
-</div>
+<div class="modalContainer parsys"></div>
 
 <script type="text/javascript" src="../dependencies/dexter/head.js"></script>
 <script type="text/javascript" src="../dependencies/dexter/publish.js"></script>
-
 </html>
diff --git a/react/src/js/components/Consonant/Cards/Card.jsx b/react/src/js/components/Consonant/Cards/Card.jsx
@@ -38,6 +38,7 @@ const CardType = {
     footer: arrayOf(shape(footerType)),
     contentArea: shape(contentAreaType),
     renderBorder: bool,
+    renderDivider: bool,
     renderOverlay: bool,
     overlayLink: string,
     hideCTA: bool,
@@ -60,6 +61,7 @@ const defaultProps = {
     isBookmarked: false,
     disableBookmarkIco: false,
     renderBorder: true,
+    renderDivider: false,
     renderOverlay: false,
     overlayLink: '',
     hideCTA: false,
@@ -134,6 +136,7 @@ const Card = (props) => {
             },
         },
         renderBorder,
+        renderDivider,
         renderOverlay,
         overlayLink,
         hideCTA,
@@ -419,7 +422,7 @@ const Card = (props) => {
                 !hideCTA &&
                 footer.map(footerItem => (
                     <CardFooter
-                        divider={footerItem.divider}
+                        divider={renderDivider || footerItem.divider}
                         isFluid={footerItem.isFluid}
                         key={cuid()}
                         left={showFooterLeft ? extendFooterData(footerItem.left) : []}

diff --git a/react/src/js/components/Consonant/Grid/Grid.jsx b/react/src/js/components/Consonant/Grid/Grid.jsx
@@ -80,6 +80,7 @@ const Grid = (props) => {
     const cardsGridLayout = getConfig('collection', 'layout.type');
     const cardsGridGutter = getConfig('collection', 'layout.gutter');
     const renderCardsBorders = getConfig('collection', 'setCardBorders');
+    const renderFooterDivider = getConfig('collection', 'showFooterDivider');
     const renderCardsOverlay = getConfig('collection', 'useOverlayLinks');
     const dateFormat = getConfig('collection', 'i18n.prettyDateIntervalFormat');
     const locale = getConfig('language', '');
@@ -229,6 +230,7 @@ const Grid = (props) => {
                                 dateFormat={dateFormat}
                                 locale={locale}
                                 renderBorder={renderCardsBorders}
+                                renderDivider={renderFooterDivider}
                                 renderOverlay={renderCardsOverlay}
                                 hideCTA={hideCTA}
                                 onFocus={() => scrollCardIntoView(card.id)} />