From cbd105e57e4ecb1399aff338566ac0079dd5e228 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 1 Aug 2024 21:14:36 +0300
Subject: [PATCH] centralizing the card content display logic

---
 lib/KCard/index.vue | 450 +++++++++++++++++---------------------------
 1 file changed, 170 insertions(+), 280 deletions(-)

diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
index 5ff4e1461..5c618c074 100644
--- a/lib/KCard/index.vue
+++ b/lib/KCard/index.vue
@@ -5,7 +5,7 @@
     :title="title"
     :headingLevel="headingLevel"
     :titleLines="titleLines"
-    :class="['k-card', rootClass, thumbnailAlignClass]"
+    :class="rootClasses"
     :headingStyles="headingStyles"
   >
     <template v-if="$slots.title" #title>
@@ -14,10 +14,6 @@
     </template>
     <template #default>
       <div class="thumbnail">
-        <!-- 
-          Render KImg even if thumbnailSrc is not provided since in that case
-          KImg takes care of showing the gray placeholder area.
-        -->
         <KImg
           :src="thumbnailSrc"
           :scaleType="thumbnailScaleType"
@@ -25,14 +21,6 @@
           :isDecorative="true"
           :appearanceOverrides="thumbnailStyles"
         />
-        <!--
-          This is a duplicate of the same slot in KImg. I didn't find a way to utilize
-          KImg's placeholder slot from here, likely because this part of code is nested
-          in one slot already
-
-          Show it even when thumbnail source is provided - then the placeholder serves
-          as progressive loading experience.
-        -->
         <span
           v-if="$slots.thumbnailPlaceholder"
           class="thumbnail-placeholder"
@@ -67,98 +55,65 @@
 
 </template>
 
-
 <script>
 
+  import KImg from '../KImg';
   import BaseCard from './BaseCard.vue';
 
+  const ThumbnailAlign = {
+    LEFT: 'left',
+    RIGHT: 'right',
+  };
+
+  const SPACER = 12; // in px. Needs to be the same as $spacer variable in styles part
+
   export default {
     name: 'KCard',
-    components: { BaseCard },
+    components: { BaseCard, KImg },
     props: {
-      /**
-       * Sets card title if provided. The title should be
-       * unique and descriptive to aid searching through list of links.
-       */
       title: {
         type: String,
         required: false,
         default: null,
       },
-      /**
-       * Sets the HTML heading level in range (h2 - h6) for the title .
-       */
       headingLevel: {
         type: Number,
         required: true,
       },
-      /**
-       * An object containing the route definition for the link.
-       * Required and cannot be empty.
-       */
       to: {
         type: Object,
         required: true,
       },
-      /**
-       * Controls card orientation. Required and cannot be empty.
-       * Expected Options: 'horizontal' (default) or 'vertical'.
-       *
-       * @param {String} value - The layout value.
-       * @returns {Boolean} - True if the value is not empty, false otherwise.
-       */
       layout: {
         type: String,
         default: 'horizontal',
+        validator: value => ['horizontal', 'vertical'].includes(value),
       },
-      /**
-       * Controls how the thumbnail appears in the card.
-       * Expected Options: 'none' (default), 'small', or 'large'.
-       * */
       thumbnailDisplay: {
         type: String,
         required: false,
         default: 'none',
+        validator: value => ['none', 'small', 'large'].includes(value),
       },
-      /**
-       * Sets the thumbnail path.
-       * Defaults to null if not provided.
-       *
-       * @type {String}
-       * @default null
-       * */
       thumbnailSrc: {
         type: String,
         required: false,
         default: null,
       },
-      /**
-       * Specifies how the thumbnail scales in the card.
-       * Options: 'centerInside', 'contain', 'fitXY'.
-       * @type {String}
-       * @default 'centerInside'
-       */
       thumbnailScaleType: {
         type: String,
         default: 'centerInside',
+        validator: value => ['centerInside', 'contain', 'fitXY'].includes(value),
       },
-      /**
-       * Controls the alignment of the thumbnail area in horizontal layouts.
-       * Only applies to horizontal layouts with 'small' or 'large' thumbnail display.
-       * Ignored in other layouts.
-       * @type {String}
-       * @values 'left', 'right'
-       * @default 'left'
-       */
       thumbnailAlign: {
         type: String,
-        default: 'left',
-        validator: value => ['left', 'right'].includes(value),
+        default: ThumbnailAlign.LEFT,
+        validator: value => Object.values(ThumbnailAlign).includes(value),
       },
     },
     computed: {
-      rootClass() {
-        return this.stylesAndClasses.rootClass;
+      rootClasses() {
+        return ['k-card', `thumbnail-${this.thumbnailAlign}`, ...this.stylesAndClasses.rootClasses];
       },
       titleLines() {
         return this.stylesAndClasses.titleLines;
@@ -172,25 +127,8 @@
       thumbnailStyles() {
         return this.stylesAndClasses.thumbnailStyles;
       },
-
-      thumbnailAlignClass() {
-        if (this.layout === 'horizontal' && this.thumbnailDisplay === 'large') {
-          return `thumbnail-align-${this.thumbnailAlign}`;
-        }
-        return '';
-      },
-      /*
-        Returns dynamic classes and few style-like data that CSS was cumbersome/impossible to use for ,or are in need of using theme, grouped by all possible combinations of layouts.
-
-        New styles and classes are meant to be added to this single-source-of-truth object so
-        that we can easily locate all styling being applied to a particular layout
-
-        Could be further simplified by using solely dynamic styles, but that would have detrimental effects on our auto RTL machinery and we would need to take care manually of more places. 
-      */
       stylesAndClasses() {
-        /* In px. Needs to be the same as $spacer variable in styles part */
-        const SPACER = 12;
-
+        const baseClasses = [];
         const headingCommonStyles = {
           order: 3,
           margin: `${SPACER}px ${SPACER}px ${SPACER / 2}px ${SPACER}px`,
@@ -200,132 +138,85 @@
           height: '100%',
         };
 
-        if (this.layout === 'vertical' && this.thumbnailDisplay === 'large') {
-          return {
-            rootClass: 'vertical-with-large-thumbnail',
-            titleLines: 3,
-            thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-            },
-            thumbnailStyles: {
-              ...thumbnailCommonStyles,
-              borderRadius: '8px 8px 0 0',
-            },
-          };
-        }
-        if (this.layout === 'vertical' && this.thumbnailDisplay === 'small') {
-          return {
-            rootClass: 'vertical-with-small-thumbnail',
-            titleLines: 3,
-            thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-            },
-            thumbnailStyles: {
-              ...thumbnailCommonStyles,
-              borderRadius: '4px',
-            },
-          };
-        }
-        if (this.layout === 'vertical' && this.thumbnailDisplay === 'none') {
-          return {
-            rootClass: 'vertical-with-no-thumbnail',
-            titleLines: 2,
-            thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-            },
-            thumbnailStyles: {
-              ...thumbnailCommonStyles,
-            },
-          };
-        }
-        if (
-          this.layout === 'horizontal' &&
-          this.thumbnailDisplay === 'large' &&
-          this.thumbnailAlign === 'right'
-        ) {
-          return {
-            rootClass: 'horizontal-with-large-thumbnail-and-right-alignment',
-            titleLines: 2,
-            thumbnailAspectRatio: '1:1',
-            headingStyles: {
-              ...headingCommonStyles,
-              width: `calc(70% - ${SPACER * 3}px)` /* same as slots width defined in styles */,
-            },
-            thumbnailStyles: {
-              ...thumbnailCommonStyles,
-              borderRadius: '0 8px 8px 0',
-            },
-          };
-        }
-        if (this.layout === 'horizontal' && this.thumbnailDisplay === 'large') {
-          return {
-            rootClass: 'horizontal-with-large-thumbnail',
-            titleLines: 3,
-            thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-              width: `calc(60% - ${SPACER * 2}px)` /* same as slots width defined in styles */,
-            },
-            thumbnailStyles: {
-              ...thumbnailCommonStyles,
-              borderRadius: '8px 0 0 8px',
-            },
-          };
-        }
-        if (this.layout === 'horizontal' && this.thumbnailDisplay === 'small') {
-          return {
-            rootClass: 'horizontal-with-small-thumbnail',
-            titleLines: 2,
-            thumbnailAspectRatio: '1:1',
-            headingStyles: {
-              ...headingCommonStyles,
-              width: `calc(70% - ${SPACER * 3}px)` /* same as slots width defined in styles */,
-            },
-            thumbnailStyles: {
-              ...thumbnailCommonStyles,
-              borderRadius: '8px',
-            },
-          };
-        }
-        if (this.layout === 'horizontal' && this.thumbnailDisplay === 'none') {
-          return {
-            rootClass: 'horizontal-with-no-thumbnail',
-            titleLines: 2,
-            thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-            },
-            thumbnailStyles: {
-              ...thumbnailCommonStyles,
-            },
-          };
+        if (this.layout === 'vertical') {
+          baseClasses.push('vertical');
+          if (this.thumbnailDisplay === 'large') {
+            return {
+              rootClasses: [...baseClasses, 'with-large-thumbnail'],
+              titleLines: 3,
+              thumbnailAspectRatio: undefined,
+              headingStyles: { ...headingCommonStyles },
+              thumbnailStyles: {
+                ...thumbnailCommonStyles,
+                borderRadius: '8px 8px 0 0',
+              },
+            };
+          } else if (this.thumbnailDisplay === 'small') {
+            return {
+              rootClasses: [...baseClasses, 'with-small-thumbnail'],
+              titleLines: 3,
+              thumbnailAspectRatio: undefined,
+              headingStyles: { ...headingCommonStyles },
+              thumbnailStyles: {
+                ...thumbnailCommonStyles,
+                borderRadius: '4px',
+              },
+            };
+          }
+        } else if (this.layout === 'horizontal') {
+          baseClasses.push('horizontal');
+          if (this.thumbnailDisplay === 'large') {
+            return {
+              rootClasses: [...baseClasses, 'with-large-thumbnail'],
+              titleLines: 3,
+              thumbnailAspectRatio: undefined,
+              headingStyles: {
+                ...headingCommonStyles,
+                width: `calc(60% - ${SPACER * 2}px)`,
+              },
+              thumbnailStyles: {
+                ...thumbnailCommonStyles,
+                borderRadius:
+                  this.thumbnailAlign === ThumbnailAlign.LEFT ? '8px 0 0 8px' : '0 8px 8px 0',
+              },
+            };
+          } else if (this.thumbnailDisplay === 'small') {
+            return {
+              rootClasses: [...baseClasses, 'with-small-thumbnail'],
+              titleLines: 2,
+              thumbnailAspectRatio: '1:1',
+              headingStyles: {
+                ...headingCommonStyles,
+                width: `calc(70% - ${SPACER * 3}px)`,
+              },
+              thumbnailStyles: {
+                ...thumbnailCommonStyles,
+                borderRadius: '8px',
+              },
+            };
+          }
         }
-        return {};
+
+        // Default case (no thumbnail)
+        return {
+          rootClasses: [...baseClasses, 'with-no-thumbnail'],
+          titleLines: 2,
+          thumbnailAspectRatio: undefined,
+          headingStyles: { ...headingCommonStyles },
+          thumbnailStyles: { ...thumbnailCommonStyles },
+        };
       },
     },
   };
 
 </script>
 
-
 <style lang="scss" scoped>
 
-  /* Needs to be the same as SPACER constant in JavaScript part */
   $spacer: 12px;
 
-  /*
-        Just couple of comments that are referenced from several places:
-        - (1) Intentionally fixed. Cards on the same row of a grid should have the same overall height and their sections too should have the same height so that information is placed consistently. As documented, consumers need to ensure that contents provided via slots fits well or is truncated.
-        - (2) Solves issues with fixed height in a flex item
-      */
-
-  /************* Common styles **************/
-
   .k-card {
-    position: relative; /* basis for absolute positioning of thumbnail images */
+    position: relative;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -334,32 +225,32 @@
   }
 
   .thumbnail {
-    position: relative; /* basis for absolute positioning of 'thumbnailPlaceholder' slot content */
+    position: relative;
     order: 1;
   }
 
   .above-title {
     order: 2;
-    height: 24px; /* (1) */
-    min-height: 24px; /* (2) */
+    height: 24px;
+    min-height: 24px;
     margin: $spacer $spacer 0;
-    overflow: hidden; /* (1) */
+    overflow: hidden;
   }
 
   .below-title {
     order: 4;
-    height: 18px; /* (1) */
-    min-height: 18px; /* (2) */
+    height: 18px;
+    min-height: 18px;
     margin: 0 $spacer $spacer;
-    overflow: hidden; /* (1) */
+    overflow: hidden;
   }
 
   .footer {
     order: 5;
-    height: 58px; /* (1) */
-    min-height: 58px; /* (2) */
+    height: 58px;
+    min-height: 58px;
     margin: auto $spacer $spacer;
-    overflow: hidden; /* (1) */
+    overflow: hidden;
   }
 
   .thumbnail-placeholder {
@@ -368,111 +259,110 @@
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 0; /* <img> in KImg with z-index 1 should cover the placeholder after loaded */
+    z-index: 0;
   }
 
-  /************* Layout-specific styles *************/
-
-  .vertical-with-large-thumbnail {
-    height: 480px; /* (1) */
+  .vertical {
+    &.with-large-thumbnail {
+      height: 480px;
 
-    .thumbnail {
-      height: 45%;
-      min-height: 45%; /* (2) */
+      .thumbnail {
+        height: 45%;
+        min-height: 45%;
+      }
     }
-  }
 
-  .vertical-with-small-thumbnail {
-    /* stylelint-disable scss/at-extend-no-missing-placeholder */
-    @extend .vertical-with-large-thumbnail;
-    /* stylelint-enable scss/at-extend-no-missing-placeholder */
+    &.with-small-thumbnail {
+      height: 480px;
 
-    .thumbnail {
-      margin: $spacer $spacer 0;
+      .thumbnail {
+        margin: $spacer $spacer 0;
+      }
     }
   }
-  .horizontal-with-large-thumbnail {
-    position: relative;
-    align-items: flex-end;
-    height: 240px; /* (1) */
 
-    .thumbnail {
-      position: absolute;
-      width: 40%;
-      height: 100%;
-    }
+  .horizontal {
+    &.with-large-thumbnail {
+      position: relative;
+      align-items: flex-end;
+      height: 240px;
 
-    .above-title,
-    .below-title,
-    .footer {
-      width: calc(60% - 2 * #{$spacer}); /* same as heading width defined in script */
-    }
-
-    &.thumbnail-align-left {
       .thumbnail {
-        left: 0;
+        position: absolute;
+        width: 40%;
+        height: 100%;
       }
 
       .above-title,
       .below-title,
       .footer {
-        margin-right: $spacer;
-        margin-left: calc(40% + #{$spacer});
+        width: calc(60% - 2 * #{$spacer});
       }
-    }
 
-    &.thumbnail-align-right {
-      .thumbnail {
-        right: 0;
+      &.thumbnail-left {
+        .thumbnail {
+          left: 0;
+        }
+
+        .above-title,
+        .below-title,
+        .footer {
+          margin-right: $spacer;
+          margin-left: calc(40% + #{$spacer});
+        }
       }
 
-      .above-title,
-      .below-title,
-      .footer {
-        margin-right: calc(40% + #{$spacer});
-        margin-left: $spacer;
+      &.thumbnail-right {
+        .thumbnail {
+          right: 0;
+        }
+
+        .above-title,
+        .below-title,
+        .footer {
+          margin-right: calc(40% + #{$spacer});
+          margin-left: $spacer;
+        }
       }
     }
-  }
 
-  .horizontal-with-small-thumbnail {
-    align-items: flex-start;
-    height: 220px; /* (1) */
+    &.with-small-thumbnail {
+      align-items: flex-start;
+      height: 220px;
 
-    .thumbnail {
-      position: absolute;
-      top: $spacer;
-      right: $spacer;
-      width: 30%; /* square dimension achieved via KImgs's aspect-ratio 1:1 */
-      min-width: 80px;
-    }
+      .thumbnail {
+        position: absolute;
+        top: $spacer;
+        width: 30%;
+        min-width: 80px;
+      }
 
-    .above-title,
-    .below-title {
-      width: calc(70% - 3 * #{$spacer}); /* same as heading width defined in script */
-    }
+      .above-title,
+      .below-title {
+        width: calc(70% - 3 * #{$spacer});
+      }
 
-    .footer {
-      width: calc(100% - 2 * #{$spacer});
-    }
-  }
+      .footer {
+        width: calc(100% - 2 * #{$spacer});
+      }
 
-  .horizontal-with-large-thumbnail-and-right-alignment {
-    align-items: flex-start;
-    height: 220px; /* (1) */
+      &.thumbnail-left {
+        .thumbnail {
+          left: $spacer;
+        }
 
-    .thumbnail {
-      position: absolute;
-      right: 0;
-      width: 35%;
-      min-width: 80px;
-      height: 100%;
-    }
+        .above-title,
+        .below-title,
+        .footer {
+          margin-left: calc(30% + 2 * #{$spacer});
+        }
+      }
 
-    .above-title,
-    .below-title,
-    .footer {
-      width: calc(60% - 2 * #{$spacer});
+      &.thumbnail-right {
+        .thumbnail {
+          right: $spacer;
+        }
+      }
     }
   }