toggle-components-library 1.32.0 → 1.33.0

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -17086,6 +17086,11 @@
         }
       }
     },
+    "swiper": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz",
+      "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ=="
+    },
     "symbol.prototype.description": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/symbol.prototype.description/-/symbol.prototype.description-1.0.5.tgz",
@@ -18469,6 +18474,11 @@
       "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.2.tgz",
       "integrity": "sha512-9HS3scJwWgKjmkcWIf+ndNDR0WytUJD8Ju0V2ZYcjYtlTLwJAf2SKUlBZaQTkDmwje/zMgulvZRi+MXmi+WkKw=="
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
+    },
     "vue-color": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",

package/package.json

@@ -1,81 +1,83 @@
 {
-  "name": "toggle-components-library",
-  "version": "1.32.0",
-  "private": false,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --target lib --name toggle-components-library src/index.js",
-    "lint": "vue-cli-service lint",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "build-publish": "vue-cli-service build --target lib --name toggle-components-library src/index.js && npm publish"
-  },
-  "main": "dist/toggle-components-library.common.js",
-  "module": "dist/toggle-components-library.esm.js",
-  "unpkg": "dist/toggle-components-library.umd.min.js",
-  "browser": {
-    "./sfc": "src/toggle-components-library.vue"
-  },
-  "files": [
-    "dist/*",
-    "src/*",
-    "public/*",
-    "*.json",
-    "*.js"
-  ],
-  "dependencies": {
-    "apexcharts": "^3.36.3",
-    "core-js": "^3.25.0",
-    "countries-list": "^2.6.1",
-    "date-fns": "^1.30.1",
-    "storybook-vue-router": "^1.0.7",
-    "vue": "^2.7.10",
-    "vue-airbnb-style-datepicker": "^2.7.1",
-    "vue-apexcharts": "^1.6.2",
-    "vue-color": "^2.7.1",
-    "vue-moment": "^4.1.0",
-    "vue-multiselect": "^2.0.8",
-    "vue-router": "^3.6.4",
-    "vue2-dropzone": "^3.6.0",
-    "vuedraggable": "^2.24.3",
-    "webfontloader": "^1.6.28"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-docs": "^6.5.10",
-    "@storybook/vue": "^6.5.10",
-    "@vue/cli-plugin-babel": "^4.5.3",
-    "@vue/cli-plugin-eslint": "^4.5.3",
-    "@vue/cli-service": "^4.5.3",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
-    "babel-preset-vue": "^2.0.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "react": "^16.13.1",
-    "react-is": "^16.13.1",
-    "sass": "^1.54.5",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.7.10"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
+    "name": "toggle-components-library",
+    "version": "1.33.0",
+    "private": false,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build --target lib --name toggle-components-library src/index.js",
+        "lint": "vue-cli-service lint",
+        "storybook": "start-storybook -p 6006",
+        "build-storybook": "build-storybook",
+        "build-publish": "vue-cli-service build --target lib --name toggle-components-library src/index.js && npm publish"
     },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
+    "main": "dist/toggle-components-library.common.js",
+    "module": "dist/toggle-components-library.esm.js",
+    "unpkg": "dist/toggle-components-library.umd.min.js",
+    "browser": {
+        "./sfc": "src/toggle-components-library.vue"
+    },
+    "files": [
+        "dist/*",
+        "src/*",
+        "public/*",
+        "*.json",
+        "*.js"
     ],
-    "parserOptions": {
-      "parser": "babel-eslint"
+    "dependencies": {
+        "apexcharts": "^3.36.3",
+        "core-js": "^3.25.0",
+        "countries-list": "^2.6.1",
+        "date-fns": "^1.30.1",
+        "storybook-vue-router": "^1.0.7",
+        "swiper": "^10.3.0",
+        "vue": "^2.7.10",
+        "vue-airbnb-style-datepicker": "^2.7.1",
+        "vue-apexcharts": "^1.6.2",
+        "vue-awesome-swiper": "^4.1.1",
+        "vue-color": "^2.7.1",
+        "vue-moment": "^4.1.0",
+        "vue-multiselect": "^2.0.8",
+        "vue-router": "^3.6.4",
+        "vue2-dropzone": "^3.6.0",
+        "vuedraggable": "^2.24.3",
+        "webfontloader": "^1.6.28"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.18.13",
+        "@storybook/addon-actions": "^6.5.10",
+        "@storybook/addon-docs": "^6.5.10",
+        "@storybook/vue": "^6.5.10",
+        "@vue/cli-plugin-babel": "^4.5.3",
+        "@vue/cli-plugin-eslint": "^4.5.3",
+        "@vue/cli-service": "^4.5.3",
+        "babel-eslint": "^10.1.0",
+        "babel-loader": "^8.1.0",
+        "babel-preset-vue": "^2.0.2",
+        "eslint": "^6.7.2",
+        "eslint-plugin-vue": "^6.2.2",
+        "react": "^16.13.1",
+        "react-is": "^16.13.1",
+        "sass": "^1.54.5",
+        "sass-loader": "^8.0.2",
+        "vue-template-compiler": "^2.7.10"
+    },
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/essential",
+            "eslint:recommended"
+        ],
+        "parserOptions": {
+            "parser": "babel-eslint"
+        },
+        "rules": {}
     },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead"
+    ]
 }

package/src/assets/icons/clock-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#6D90B4}</style><path d="M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>

package/src/assets/icons/contacts-greyblue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#6d90b4}</style><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>

package/src/assets/icons/contacts-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#fff}</style><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>

package/src/assets/icons/contacts.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#6d90b4}</style><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>

package/src/assets/icons/view_email.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="800px" height="800px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
+
+
+
+

package/src/assets/icons/view_heatmap.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#ffeab2}</style><path d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"/></svg>

package/src/components/badges/ToggleBadge.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="[ 'toggle-badge', badgeStyle]"><slot></slot></span>
+    <span :class="[ 'toggle-badge', badgeStyle, badgeType ]"><slot></slot></span>
 </template>
 
 <script>
@@ -14,6 +14,10 @@ export default {
         badgeStyle:{
             type:String,
             default:'neutral'
+        },
+        badgeType: {
+            type:String,
+            default:''
         }
     },
     computed: {

package/src/components/badges/ToggleCalculateBadge.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <h3 class="toggle-metric metric-label">{{label}}</h3>
+        <div class="toggle-calculate-badge">
+            <div class="clock-icon"></div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ToggleCalculateBadge',
+    props: {
+        label: {
+            type:String,
+            default: ''
+        }
+    }
+}
+</script>

package/src/components/badges/TogglePodiumBadge.vue

@@ -0,0 +1,32 @@
+<template>
+    <div :class="['toggle-podium-badge', position]">
+        <div class="podium-number">{{ podiumNum }}</div>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TogglePodiumBadge',
+    props: {
+        position:{
+            type:String
+        }
+    },
+    computed: {
+        podiumNum(){
+            switch (this.position) {
+                case 'first':
+                    return 1;
+                case 'second':
+                    return 2;
+                case 'third':
+                    return 3;
+                default:
+                    return 1;
+            }
+        }
+    }
+}
+</script>

package/src/components/buttons/ToggleMetricsButton.vue

@@ -0,0 +1,36 @@
+<template>
+    <button :class="['toggle-metrics-button', buttonStyle]" @click="click">
+        <div :class="icon"></div>
+        <slot>{{buttonText}}</slot>
+    </button>
+</template>
+    
+<script>
+    export default {
+      name: 'ToggleMetricButton',
+      props: {
+        buttonStyle: {
+          type: String,
+          default: "Metrics"
+        },
+        buttonText: {
+          type: String,
+          default: "Metrics text"
+        },
+        icon: {
+          type: String,
+          required: true,
+        },
+      },
+      methods: {
+        click() {
+          /**
+           * Emitted when the button is clicked.
+           * @event click
+           * @type {Event}
+           */
+          this.$emit('click');
+        },
+      },
+    };
+    </script>

package/src/components/cards/ToggleEmailCard.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="toggle-email-card">
+        <div class="toggle-email-card-body">
+            <div class="toggle-email-card-htmlContent">
+                <div v-html="htmlContent"></div>
+            </div>
+            <div class="toggle-email-card-buttons">
+                <button class="toggle-email-card-button">
+                <slot name="button_1"></slot>
+            </button>
+            <button class="toggle-email-card-button">
+                <slot name="button_2"></slot>
+            </button>
+            </div>
+            <div class="toggle-email-card-info">
+                <p>Email name</p>
+                <div class="toggle-email-card-slot">
+                    <slot name="toggle-email-card-email-name">{{ emailName }}</slot>
+                </div>
+            </div>
+            <div class="toggle-email-card-info">
+                <p>Subject line</p>
+                <div class="toggle-email-card-slot">
+                    <slot name="email-subject">{{ emailSubject }}</slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            emailName: {
+                type: String,
+                default: 'Email name'
+            },
+            emailSubject: {
+                type: String,
+                default: 'Subject line'
+            },
+            htmlContent: {
+                type: String,
+                default: null
+            },
+        }
+    }
+</script>

package/src/components/cards/ToggleRewardsCard.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="toggle-rewards-card-reward-card">
+        <div class="toggle-rewards-card-reward-info" :style="{ backgroundColor:  cardColor[0]}">
+            <div class="toggle-rewards-card-card-header">
+                <slot name="toggle-rewards-card-header">{{ reward }}</slot>
+            </div>
+            <div class="toggle-rewards-card-card-body">
+                <p class="toggle-rewards-card-body-header">Overall reward performance</p>
+                <div class="toggle-rewards-card-body-stats">
+                    <div class="toggle-rewards-card-metrics">
+                        <p>Claimed</p>
+                        <slot name="toggle-rewards-card-claimed">{{ claimed }}</slot>
+                    </div>
+                    <div class="toggle-rewards-card-metrics">
+                        <p>Redeemed</p>
+                        <slot name="toggle-rewards-card-redeemed"> {{  redeemed }}</slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="toggle-rewards-card-reward-redemption" :style="{ backgroundColor:  cardColor[1]}">
+          <div class="toggle-rewards-card-percentage">{{ redemptionRate }}</div>
+          <p>Redemption rate</p>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            cardIndex: {
+                type: Number,
+                required: true,
+            },
+            totalCards: {
+                type: Number,
+                required: true,
+            },
+            reward: {
+                type: String,
+                required: true
+            },
+            redeemed: {
+                type: Number,
+                required: true
+            },
+            claimed: {
+                type: Number,
+                required: true
+            },
+            redemptionRate: {
+                type: [String, Number],
+                required: true
+            }
+        },
+        computed: {
+            cardColor() {
+            // adjust colour palette below to change the Reward Cards colors
+            const colorPalette = [
+                [ '#eac6c7', '#b16f6f' ], // Pinks
+                [ '#9AB7D3', '#6b8093' ], // Blues
+                [ '#BDD0C4', '#849189' ], // Greens
+                [ '#eccb92', '#ce9847' ], // Yellows
+                [ '#DFCCF1', '#9c8ea8' ], // Purple
+            ];
+            // pick random number to return random index of colourPalette
+            const paletteIndex = Math.floor(
+                (this.cardIndex / this.totalCards) * colorPalette.length
+            );
+
+            return colorPalette[paletteIndex];
+            }
+        },
+    };
+</script>
+  
+<style scoped>
+
+  </style>
+  

package/src/components/carousel/ToggleCarousel.vue

@@ -0,0 +1,126 @@
+<template>
+    <swiper
+        ref="swiper"
+        class="swiper toggle-carousel"
+        :class="[
+            carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
+            carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
+        ]"
+        :options="carouselOptions"
+        @slideChangeTransitionStart="onSlideTransition"
+    >
+        <slot></slot>
+        <div v-if="carouselPrev && slidesLength > 1" 
+            class="toggle-carousel-button toggle-carousel-button--prev"
+            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': prevDisabled}]"
+            @click="slidePrev"  
+            slot="button-prev"
+        ></div>
+        <div v-if="carouselNext && slidesLength > 1" 
+            class="toggle-carousel-button toggle-carousel-button--next"
+            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': nextDisabled}]"
+            @click="$refs.swiper.swiperInstance.slideNext()"  
+            slot="button-next"
+        ></div>
+    </swiper>
+</template>
+
+<script>
+
+import { Swiper, directive } from 'vue-awesome-swiper'
+import 'swiper/swiper.css'
+import 'swiper/modules/navigation.css'
+
+export default {
+    name: 'ToggleCarousel',
+    data: function() {
+        return {
+            prevDisabled: false,
+            nextDisabled: false,
+            slidesLength: 0,
+            isEnd: false
+        };
+    },
+    props: {
+        carouselStyle:{
+            type: String,
+            default: 'default'
+        },
+        carouselNavPosition: {
+            type: String,
+            default: 'middle',
+            validator(value) {
+                return ['top', 'middle', 'bottom'].includes(value)
+            }
+        },
+        carouselPrev: {
+            type: Boolean,
+            default: true
+        },
+        carouselNext: {
+            type: Boolean,
+            default: true
+        },
+        carouselOptions: {
+            type: Object,
+            required: false,
+            default: () => {
+                return {
+                    slidesPerView: 'auto',
+                    spaceBetween: 50,
+                    navigation: {
+                        nextButton: ".toggle-carousel-button--next",
+                        prevButton: ".toggle-carousel-button--prev"
+                    }
+                }
+            }
+        }
+    },
+    components: {
+        Swiper
+    },
+    directives: {
+        swiper: directive
+    },
+    mounted(){
+        this.refreshCarousel();
+    },
+    updated() {
+        this.refreshCarousel();
+    },
+    methods: {
+        slidePrev(){
+            if(this.carouselStyle == 'voucher' && this.isEnd){
+                this.$refs.swiper.swiperInstance.slideTo(0);
+                return;
+            }
+            this.$refs.swiper.swiperInstance.slidePrev();
+        },
+        refreshCarousel(){
+            this.slidesLength = this.$refs.swiper.swiperInstance.slides.length;
+            this.onSlideTransition();
+        },
+        onSlideTransition(){
+            // if loop is enabled, don't disable buttons, unless specified in prop
+            const isLoop = this.$refs.swiper.swiperInstance.params.loop;
+            if(isLoop) return;
+
+            const isBeginning = this.$refs.swiper.swiperInstance.isBeginning;
+            this.isEnd = this.$refs.swiper.swiperInstance.isEnd;
+
+            if(isBeginning){
+                this.prevDisabled = true;
+                this.nextDisabled = false;
+            }
+            else if(this.isEnd){
+                this.prevDisabled = false;
+                this.nextDisabled = true;
+            }
+            else if(this.carouselStyle != 'voucher'){
+                this.prevDisabled = false;
+                this.nextDisabled = false;
+            }
+        }
+    }
+}
+</script>

package/src/components/carousel/ToggleCarouselSlide.vue

@@ -0,0 +1,26 @@
+<template>
+    <swiper-slide class="toggle-carousel-slide" :style="'width:' + slideWidth + '; height:' + slideHeight">
+        <slot></slot>
+    </swiper-slide>
+</template>
+
+<script>
+import { SwiperSlide } from 'vue-awesome-swiper'
+
+export default {
+    name: 'ToggleCarouselSlide',
+    components: {
+        SwiperSlide
+    },
+    props: {
+        slideWidth:{
+            type: String,
+            default: '100%'
+        },
+        slideHeight:{
+            type: String,
+            default: 'auto'
+        }
+    }
+}
+</script>

package/src/components/metrics/ToggleMetricFunnelChart.vue

@@ -3,17 +3,17 @@
         
         <div class="funnel-grid-svg"></div>
 
-         <div class="funnel-spark-line funnel-grid-1">
-            <slot name="sparkLine1"></slot>
+         <div :class="{'funnel-spark-line funnel-grid-1': true, 'increase-padding-bottom': noSparkLine}">
+            <slot :name="emailInsight ? 'metric1' : 'sparkLine1'"></slot>
         </div>
-         <div class="funnel-spark-line funnel-grid-2">
-            <slot name="sparkLine2"></slot>
+         <div :class="{'funnel-spark-line funnel-grid-2': true, 'increase-padding-bottom': noSparkLine}">
+            <slot :name="emailInsight ? 'metric2' : 'sparkLine2'"></slot>
         </div>
-         <div class="funnel-spark-line funnel-grid-3">
-            <slot name="sparkLine3"></slot>
+         <div :class="{'funnel-spark-line funnel-grid-3': true, 'increase-padding-bottom': noSparkLine}">
+            <slot :name="emailInsight ? 'metric3' : 'sparkLine3'"></slot>
         </div>
-        <div class="funnel-spark-line funnel-grid-4">
-            <slot name="sparkLine4"></slot>
+        <div :class="{'funnel-spark-line funnel-grid-4': true, 'increase-padding-bottom': noSparkLine}">
+            <slot :name="emailInsight ? 'metric4' : 'sparkLine4'"></slot>
         </div>
 
         <div class="funnel-single-metric funnel-grid-5">
@@ -56,6 +56,25 @@ export default {
         name: {
             type: String,
             default: "ToggleMetricFunnelChart"
+        },
+        /**
+         * If no SparkLine components are used in funnel
+         * set to true to increase distance between 
+         * funnel and metrics
+         */
+        noSparkLine: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * If funnel is used without SparkLine, 
+         * set prop to true 
+         * and name slots metric1, metric2 etc 
+         * for more generic use
+         */
+        emailInsight: {
+            type: Boolean,
+            default: false
         }
     }
 }