Merge pull request #173 from adobecom/MWPW-157435

feat(mwpw-157435): alternative cta links/text for live & upcoming
adobecom · Sep 9, 2024 · 741f196 · 741f196
2 parents 11f1e66 + 39ab8db
commit 741f196
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 16 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.19.0 (9/6/2024, 12:44:32)
+ * Chimera UI Libraries - Build 0.20.0 (9/9/2024, 13:21:45)
  *         
  */
 /******/ (function(modules) { // webpackBootstrap
@@ -47244,6 +47244,7 @@ var CardFooter = function CardFooter(props) {
      */
 
     var isLive = (0, _general.isDateWithinInterval)((0, _general.getCurrentDate)(), startDate, endDate);
+    var isUpcoming = (0, _general.isDateBeforeInterval)((0, _general.getCurrentDate)(), startDate);
 
     /**
      * Class name for the card footer:
@@ -47290,13 +47291,38 @@ var CardFooter = function CardFooter(props) {
      * Whether the right footer infobits should render
      * @type {Boolean}
      */
-    var shouldRenderRight = right && right.length > 0 && (!isLive || altRight.length === 0);
+    var shouldRenderRight = right && right.length > 0 && (!isLive || altRight.length === 0) && (!isUpcoming || altRight.length === 0);
 
     /**
-     * Whether an alternate right footer infobits should render
+     * Whether an alternate right footer infobits should render for upcoming
      * @type {Boolean}
      */
-    var shouldRenderAltRight = altRight && altRight.length > 0 && isLive;
+    var shouldRenderAltRightUpcoming = altRight && altRight.length > 0 && isUpcoming;
+
+    /**
+     * Whether an alternate right footer infobets should render for live events
+     */
+    var shouldRenderAltRightLive = altRight && altRight.length > 0 && isLive;
+
+    /**
+     * This is some franken logic to make one alt cta space work for two different card states
+     */
+    var altRightUpcoming = []; // isUpcoming
+    var altRightLive = []; // isLive
+    if (altRight && altRight.length > 0 && right && right.length > 0) {
+        var upcoming = {
+            href: right[0].href,
+            text: altRight[0].text,
+            type: right[0].type
+        };
+        var live = {
+            href: altRight[0].href,
+            text: right[0].text,
+            type: altRight[0].type
+        };
+        altRightUpcoming.push(upcoming);
+        altRightLive.push(live);
+    }
 
     return _react2.default.createElement(
         'div',
@@ -47326,11 +47352,17 @@ var CardFooter = function CardFooter(props) {
                     className: 'consonant-CardFooter-cell consonant-CardFooter-cell--right' },
                 _react2.default.createElement(_Group2.default, { renderList: right, onFocus: onFocus })
             ),
-            shouldRenderAltRight && _react2.default.createElement(
+            shouldRenderAltRightUpcoming && _react2.default.createElement(
+                'div',
+                {
+                    className: 'consonant-CardFooter-cell consonant-CardFooter-cell--right' },
+                _react2.default.createElement(_Group2.default, { renderList: altRightUpcoming, onFocus: onFocus })
+            ),
+            shouldRenderAltRightLive && _react2.default.createElement(
                 'div',
                 {
                     className: 'consonant-CardFooter-cell consonant-CardFooter-cell--right' },
-                _react2.default.createElement(_Group2.default, { renderList: altRight, onFocus: onFocus })
+                _react2.default.createElement(_Group2.default, { renderList: altRightLive, onFocus: onFocus })
             )
         )
     );

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/react/src/js/components/Consonant/Cards/CardFooter/CardFooter.jsx b/react/src/js/components/Consonant/Cards/CardFooter/CardFooter.jsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import Group from '../../Infobit/Group';
 import { footerType } from '../../types/card';
 import { INFOBIT_TYPE } from '../../Helpers/constants';
-import { isDateWithinInterval, getCurrentDate } from '../../Helpers/general';
+import { isDateWithinInterval, getCurrentDate, isDateBeforeInterval } from '../../Helpers/general';
 
 const defaultProps = {
     left: [],
@@ -49,6 +49,7 @@ const CardFooter = (props) => {
      * @type {Boolean}
      */
     const isLive = isDateWithinInterval(getCurrentDate(), startDate, endDate);
+    const isUpcoming = isDateBeforeInterval(getCurrentDate(), startDate);
 
     /**
      * Class name for the card footer:
@@ -93,13 +94,38 @@ const CardFooter = (props) => {
      * @type {Boolean}
      */
     const shouldRenderRight = right && right.length > 0 &&
-        (!isLive || altRight.length === 0);
+        (!isLive || altRight.length === 0) && (!isUpcoming || altRight.length === 0);
 
     /**
-     * Whether an alternate right footer infobits should render
+     * Whether an alternate right footer infobits should render for upcoming
      * @type {Boolean}
      */
-    const shouldRenderAltRight = altRight && altRight.length > 0 && isLive;
+    const shouldRenderAltRightUpcoming = altRight && altRight.length > 0 && isUpcoming;
+
+    /**
+     * Whether an alternate right footer infobets should render for live events
+     */
+    const shouldRenderAltRightLive = altRight && altRight.length > 0 && isLive;
+
+    /**
+     * This is some franken logic to make one alt cta space work for two different card states
+     */
+    const altRightUpcoming = []; // isUpcoming
+    const altRightLive = []; // isLive
+    if (altRight && altRight.length > 0 && right && right.length > 0) {
+        const upcoming = {
+            href: right[0].href,
+            text: altRight[0].text,
+            type: right[0].type,
+        };
+        const live = {
+            href: altRight[0].href,
+            text: right[0].text,
+            type: altRight[0].type,
+        };
+        altRightUpcoming.push(upcoming);
+        altRightLive.push(live);
+    }
 
     return (
         <div
@@ -126,10 +152,16 @@ const CardFooter = (props) => {
                     <Group renderList={right} onFocus={onFocus} />
                 </div>
                 }
-                {shouldRenderAltRight &&
+                {shouldRenderAltRightUpcoming &&
+                <div
+                    className="consonant-CardFooter-cell consonant-CardFooter-cell--right">
+                    <Group renderList={altRightUpcoming} onFocus={onFocus} />
+                </div>
+                }
+                {shouldRenderAltRightLive &&
                 <div
                     className="consonant-CardFooter-cell consonant-CardFooter-cell--right">
-                    <Group renderList={altRight} onFocus={onFocus} />
+                    <Group renderList={altRightLive} onFocus={onFocus} />
                 </div>
                 }
             </div>