toggle-components-library 1.34.0-beta.8 → 1.34.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.34.0-beta.8",
+    "version": "1.34.0-beta.9",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/cards/ToggleCommentCard.vue

@@ -1,66 +1,63 @@
 <template>
-    <div class="toggle-comment-card">
-        <div class="toggle-comment-card-info" :style="{ backgroundColor:  cardColor}">
-            <div class="toggle-comment-card-text">
-                <p>"{{ comment }}"</p>
-            </div>
-            <div class="toggle-comment-card-name">
-                <ToggleMetricsButton 
-                buttonStyle="mini-contacts" 
-                :buttonText="name" 
-                icon="contacts-icon"
-                :styles="{ backgroundColor: 'transparent', borderColor: 'white', color: 'white'}"
-                />
-            </div>
-        </div>
+  <div class="toggle-comment-card">
+    <div class="toggle-comment-card-info" :style="{ backgroundColor: cardColor }">
+      <div class="toggle-comment-card-text">
+        <p>"{{ commentLength }}"</p>
+      </div>
+      <div class="toggle-comment-card-name">
+        <slot name="button_contacts"></slot>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-import ToggleMetricsButton from '../buttons/ToggleMetricsButton.vue';
-    export default {
-        components:{ToggleMetricsButton},
-        props: {
-            cardIndex: {
-                type: Number,
-                required: true,
-            },
-            totalCards: {
-                type: Number,
-                required: true,
-            },
-            comment: {
-                type: String,
-                required: true
-            },
-            name: {
-                type: String,
-                required: true
-            }
-        },
-        computed: {
-            cardColor() {
-                // adjust colour palette below to change the Reward Cards colors
-                const colorPalette = [
-                    '#2c7da0',
-                    '#f3c570',
-                    '#8bbcbe',
-                    '#a0a789',
-                    '#cbae78',
-                    '#a284b6',
-                    '#d39999',
-                    '#9b7361',
-                    '#64aaa8',
-                    '#799194',
-                ];
-                
-                // pick random number to return random index of colourPalette
-                const paletteIndex = Math.floor(
-                    (this.cardIndex / this.totalCards) * colorPalette.length
-                );
-                return colorPalette[paletteIndex];
-            }
-        },
-    };
-</script>
-  
-  
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    cardIndex: {
+      type: Number,
+      required: true,
+    },
+    totalCards: {
+      type: Number,
+      required: true,
+    },
+    comment: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    cardColor() {
+      // adjust colour palette below to change the Reward Cards colors
+      const colorPalette = [
+        "#2c7da0",
+        "#f3c570",
+        "#8bbcbe",
+        "#a0a789",
+        "#cbae78",
+        "#a284b6",
+        "#d39999",
+        "#9b7361",
+        "#64aaa8",
+        "#799194",
+      ];
+
+      // pick random number to return random index of colourPalette
+      const paletteIndex = Math.floor(
+        (this.cardIndex / this.totalCards) * colorPalette.length
+      );
+      return colorPalette[paletteIndex];
+    },
+    commentLength() {
+        return this.comment.length > 420 ? this.comment.substring(0, 420) + "..." : this.comment;
+    },
+  }
+};
+</script>

package/src/sass/includes/_as_cards.scss

@@ -168,9 +168,8 @@
     display: flex;
     flex-direction: row;
     width: 100%;
-    height: 200px;
+    height: 250px;
     border-radius: 18px;
-    margin: 16px;
     padding-right: 20px;
     font-size: $toggle-font-size-regular;
     font-family: $toggle-font-family;
@@ -180,13 +179,13 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 40px 20px 20px 20px;
+    padding: 30px 70px 20px 30px;
     color: white;
     border-radius: 30px;
     width: 100%;
 
     .toggle-comment-card-text {
-        text-align: left;
+        text-align: justify;
         line-height: 1.5rem;
 
         p {