From 3f3f9d6f88a5fb6f6f4c0c37ab61a0107a521ac4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 1 Aug 2024 17:06:31 +0300
Subject: [PATCH]  revert   default to 'none'

---
 CHANGELOG.md        | 10 ++++++++++
 lib/KCard/index.vue | 48 ++++++++++++++++++++++++---------------------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1fe6d9b5..d2ffe7f4e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,16 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+[#707]
+  - **Description:** Card Validations
+  - **Products impact:**  
+  - **Addresses:** [#695](https://github.com/learningequality/kolibri-design-system/issues/695)
+  - **Components:** `KCard`
+  - **Breaking:** No
+  - **Impacts a11y:**  No
+  - **Guidance:**
+ [#707] https://github.com/learningequality/kolibri-design-system/pull/707
+
 [#709]
   - **Description:**  Update spaces to the latest design`KCard` 
   - **Products impact:**  Card updates 
diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
index 32bf296e5..d4ee0d96a 100644
--- a/lib/KCard/index.vue
+++ b/lib/KCard/index.vue
@@ -74,23 +74,27 @@
 
   const Layouts = {
     HORIZONTAL: 'horizontal',
-    VERTICAL: 'vertical'
+    VERTICAL: 'vertical',
   };
 
   const Thumbnail_Displays = {
     NONE: 'none',
     SMALL: 'small',
-    LARGE: 'large'
+    LARGE: 'large',
   };
 
   function cardValidator(allowedValues, propName) {
-  return function(value) {
-    if (!Object.values(allowedValues).includes(value)) {
-      throw new Error(`Invalid ${propName} value: '${value}'. Allowed values are: ${Object.values(allowedValues).join(', ')}`);
-    }
-    return true;
+    return function(value) {
+      if (!Object.values(allowedValues).includes(value)) {
+        throw new Error(
+          `Invalid ${propName} value: '${value}'. Allowed values are: ${Object.values(
+            allowedValues
+          ).join(', ')}`
+        );
+      }
+      return true;
+    };
   }
-}
 
   export default {
     name: 'KCard',
@@ -127,20 +131,20 @@
        * @param {String} value - The layout value.
        * @returns {Boolean} - True if the value is not empty, false otherwise.
        */
-       layout: {
-      type: String,
-      default:  Layouts .HORIZONTAL,
-      validator: cardValidator(Layouts, 'layout')
+      layout: {
+        type: String,
+        default: 'horizontal',
+        validator: cardValidator(Layouts, 'layout'),
       },
       /**
        * Controls how the thumbnail appears in the card.
        * Expected Options: 'none' (default), 'small', or 'large'.
        * */
-       thumbnailDisplay: {
-      type: String,
-      default: Thumbnail_Displays.NONE,
-      validator: cardValidator(Thumbnail_Displays, 'thumbnailDisplay')
-    },
+      thumbnailDisplay: {
+        type: String,
+        default: 'none',
+        validator: cardValidator(Thumbnail_Displays, 'thumbnailDisplay'),
+      },
       /**
        * Sets the thumbnail path.
        * Defaults to null if not provided.
@@ -181,13 +185,13 @@
         return this.stylesAndClasses.thumbnailStyles;
       },
       /*
-        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.
+          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
+          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. 
-      */
+          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 = 24;