toggle-components-library 1.32.0 → 1.33.0-beta.1

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
         }
     }
 }

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -1,13 +1,14 @@
 <template>
     <div>
-    <h3 class="toggle-metric metric-label">{{label}}</h3>
-        <h1 class="toggle-metric metric-value">{{metricValue}}</h1>
+        <h3 class="toggle-metric metric-label">{{label}}</h3>
+        <div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
+        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}</h1>
     </div>
 </template>
 
 <script>
 
-import { mixins } from '../mixins/mixins'
+import { mixins } from '../mixins/mixins';
 
 
 export default {
@@ -20,7 +21,7 @@ export default {
             type: String,
             default: "ToggleMetricSingleMetric"
         },
-        /**
+                /**
         * Type of the value, this will affect on the format shown
         */
         type : {
@@ -63,6 +64,13 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 1
+        },
+        /**
+        * Displays badge or clock if metrics are still pending
+        */
+        metricPending: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {

package/src/components/statusbar/ToggleStatusBar.vue

@@ -0,0 +1,48 @@
+<template>
+    <div :class="['toggle-status-bar-container', statusColours, statusSize]">
+        <label class="toggle-status-bar-label">
+            <span class="toggle-status-bar-dot" v-if="showDot">&#9679;</span>
+            {{ statusName }}
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'StatusBar',
+    props: {
+        status: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['draft', 'processing', 'complete', 'inactive', 'active'].indexOf(value) !== -1;
+            }
+        },
+        size: {
+            type: String,
+            required: false,
+            validator: function (value) {
+                return ['small'].indexOf(value) !== -1;
+            }
+        }
+    },
+    computed: {
+        // Capitalise the first letter of the status
+        statusName() {
+            return this.status.charAt(0).toUpperCase() + this.status.slice(1);
+        },
+        // Add the status to the class name
+        statusColours() {
+            return 'toggle-status-bar-' + this.status;
+        },
+        // Add the size to the class name
+        statusSize() {
+            return 'toggle-status-bar-' + this.size;
+        },
+        // Show the dot if the status is active or processing
+        showDot() {
+            return this.status === 'active' || this.status === 'processing';
+        }
+    }
+}
+</script>

package/src/index.js

@@ -32,6 +32,7 @@ import ToggleInputSearch from "./components/forms/ToggleInputSearch.vue";
 import ToggleInputRadioButtonGroup from "./components/forms/ToggleInputRadioButtonGroup.vue";
 import ToggleButton from "./components/buttons/ToggleButton.vue";
 import ToggleLoginButton from "./components/buttons/ToggleLoginButton.vue";
+import ToggleMetricsButton from "./components/buttons/ToggleMetricsButton.vue";
 
 import ToggleFillLoader from "./components/loaders/ToggleFillLoader.vue";
 import ToggleProgressLoader from "./components/loaders/ToggleProgressLoader.vue";
@@ -41,6 +42,8 @@ import ToggleTable from './components/tables/ToggleTable.vue';
 import ToggleTableRow from './components/tables/ToggleTableRow.vue';
 import ToggleTableColumn from './components/tables/ToggleTableColumn.vue';
 import ToggleBadge from './components/badges/ToggleBadge.vue';
+import ToggleCalculateBadge from './components/badges/ToggleCalculateBadge.vue';
+import TogglePodiumBadge from './components/badges/TogglePodiumBadge.vue';
 
 import ToggleBreadCrumb from './components/breadcrumb/ToggleBreadCrumb.vue';
 import ToggleSideNavItem from './components/navs/sidenav/ToggleSideNavItem.vue';
@@ -80,6 +83,14 @@ import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChar
 import ToggleThreeDots from "./components/threedots/ToggleThreeDots.vue";
 import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.vue";
 
+import ToggleStatusBar from "./components/statusbar/ToggleStatusBar.vue";
+
+import ToggleCarousel from "./components/carousel/ToggleCarousel.vue";
+import ToggleCarouselSlide from "./components/carousel/ToggleCarouselSlide.vue";
+
+import ToggleEmailCard from "./components/cards/ToggleEmailCard.vue";
+import ToggleRewardsCard from "./components/cards/ToggleRewardsCard.vue";
+
 
 import './sass/main.scss';
 
@@ -88,6 +99,8 @@ const Components = {
     ToggleTable,
     ToggleTableRow,
     ToggleBadge,
+    ToggleCalculateBadge,
+    TogglePodiumBadge,
     ToggleTableColumn,
     ToggleInputText,
     ToggleInputEditableText,
@@ -107,6 +120,7 @@ const Components = {
     ToggleInputImage,
     ToggleButton,
     ToggleLoginButton,
+    ToggleMetricsButton,
     ToggleInputGroup,
     ToggleHeaderTextLarge,
     ToggleInputNumber,
@@ -145,7 +159,12 @@ const Components = {
     ToggleBoosterButton,
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
-    ToggleContactSearch
+    ToggleContactSearch,
+    ToggleStatusBar,
+    ToggleCarousel,
+    ToggleCarouselSlide,
+    ToggleEmailCard,
+    ToggleRewardsCard
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_badges.scss

@@ -32,4 +32,166 @@
     &.empty {
         background-color: $toggle-placeholder-grey;
     }
+
+    &.toggle-badge-rounded {
+        border-radius: 50px;
+        padding: 5px 11px;
+    }
+}
+
+.toggle-podium-badge {
+    @include toggle-global-font-config;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+    border-radius: 20px;
+    color: white;
+    font-size: $toggle-font-size-regular;
+    font-weight: 900;
+    padding: 5px 18px 5px 10px;
+
+    &.first {
+        background-color: #efd028;
+    }
+
+    &.second{
+        background-color: #adb4c9;
+
+    }
+
+    &.third {
+        background-color: #d99a0c;
+    }
+
+}
+
+.podium-number {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 1;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    text-align: center;
+    margin-right: 20px;
+    margin-left: -4px;
+}
+
+.first .podium-number{
+    background: transparent linear-gradient(132deg, #FFD700 0%, #F0E4A2 100%) 0% 0% no-repeat padding-box;
+    color: #CBAF15;
+}
+
+.second .podium-number{
+    background: transparent linear-gradient(132deg, #C6C9D5 0%, #DEE2EF 100%) 0% 0% no-repeat padding-box;
+    color: #8C92A3;
+}
+
+.third .podium-number{
+    background: transparent linear-gradient(132deg, #E8B33C 0%, #F8CE6E 100%) 0% 0% no-repeat padding-box;
+    color: #C18A0E;
+}
+
+.toggle-calculate-badge{
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: fit-content;
+    background-color: #E4EBED;
+    color: #6D90B4;
+    border-radius: 50px;
+    padding: 10px 20px 10px 15px;
+    font-family: $toggle-font-family;
+    font-size: 0.8rem;
+    font-weight:lighter;
+
+    .clock-icon {
+        background-image: url('../assets/icons/clock-solid.svg');
+        background-repeat:no-repeat;
+        background-size:contain;
+        height: 22px;
+        width: 22px;
+        margin-right: 15px;
+    }
+}
+
+.toggle-podium-badge {
+    @include toggle-global-font-config;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+    border-radius: 20px;
+    color: white;
+    font-size: $toggle-font-size-regular;
+    font-weight: 900;
+    padding: 5px 18px 5px 10px;
+
+    &.first {
+        background-color: #efd028;
+    }
+
+    &.second{
+        background-color: #adb4c9;
+
+    }
+
+    &.third {
+        background-color: #d99a0c;
+    }
+
+}
+
+.podium-number {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 1;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    text-align: center;
+    margin-right: 20px;
+    margin-left: -4px;
+}
+
+.first .podium-number{
+    background: transparent linear-gradient(132deg, #FFD700 0%, #F0E4A2 100%) 0% 0% no-repeat padding-box;
+    color: #CBAF15;
+}
+
+.second .podium-number{
+    background: transparent linear-gradient(132deg, #C6C9D5 0%, #DEE2EF 100%) 0% 0% no-repeat padding-box;
+    color: #8C92A3;
+}
+
+.third .podium-number{
+    background: transparent linear-gradient(132deg, #E8B33C 0%, #F8CE6E 100%) 0% 0% no-repeat padding-box;
+    color: #C18A0E;
+}
+
+.toggle-calculate-badge{
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: fit-content;
+    background-color: #E4EBED;
+    color: #6D90B4;
+    border-radius: 50px;
+    padding: 10px 20px 10px 15px;
+    font-family: $toggle-font-family;
+    font-size: 0.8rem;
+    font-weight:lighter;
+    margin-top: 11px;
+
+    .clock-icon {
+        background-image: url('../assets/icons/clock-solid.svg');
+        background-repeat:no-repeat;
+        background-size:contain;
+        height: 22px;
+        width: 22px;
+        margin-right: 15px;
+    }
 }

package/src/sass/includes/_as_buttons.scss

@@ -328,4 +328,102 @@
     top: 50%;
     margin-top: -0.5rem;
     box-sizing: content-box;
-}
+}
+
+.toggle-metrics-button {
+    display: inline-flex;
+    border-radius: 50px;
+    padding: 5px 20px;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    
+    &.heatmap{
+        background-image: linear-gradient(to right, #fbb415 0%, #f75d05 51%, #d01d2c 100%);
+        border: none;
+        color: #ffeab2;
+        height: 40px;
+        width: fit-content;
+        font-weight: 600;
+        transition: all .2s ease-in-out;
+
+        &:hover {
+            background-image: linear-gradient(to right, #ffc341 0%, #ff7b2e 51%, #d23e4a 100%);
+            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+
+            .heatmap-icon {
+                transform: scale(1.1);
+                transition: transform 0.2s ease-in-out;
+            }
+        }
+    }
+    
+    &.email {
+        background-color: #257de5;
+        color: white;
+        border: none;
+        height: 40px;
+        width: fit-content;
+        font-weight: 600;
+        transition: all 0.2s ease-in-out;
+        
+        &:hover {
+            background-color: #4196ff;
+            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+            
+            .email-icon {
+                transform: scale(1.1);
+                transition: transform 0.2s ease-in-out;
+            }
+        }
+    }
+    
+    &.mini-contacts {
+        border: 2px solid #6d90b4;
+        color: #6d90b4;
+        background-color: white;
+        padding: 7px 14px;
+        width: fit-content;
+        transition: all 0.2s ease-in-out;
+        font-weight: 600;
+        font-size: 0.7rem;
+        
+        &:hover {
+            background-color: #6d90b4;
+            color: white;
+        }
+        
+        &:hover .contacts-icon {
+            background-image: url("../assets/icons/contacts-white.svg");
+        }
+    }
+    //icons
+    .heatmap-icon {
+        background-image: url("../assets/icons/view_heatmap.svg");
+        background-repeat:no-repeat;
+        background-size:contain;
+        margin-right: 15px;
+        width: 25px;
+        height: 25px;
+    }
+    
+    .email-icon {
+        background-image: url("../assets/icons/view_email.svg");
+        background-repeat:no-repeat;
+        background-size:contain;
+        margin-right: 15px;
+        width: 30px;
+        height: 30px;
+    }
+    
+    .contacts-icon {
+        background-image: url("../assets/icons/contacts-greyblue.svg");
+        background-repeat:no-repeat;
+        background-size:contain;
+        margin-right: 6px;
+        width: 14px;
+        height: 14px;
+        transition: all 0.2s ease-in-out;
+    }
+}

package/src/sass/includes/_as_cards.scss

@@ -0,0 +1,166 @@
+.toggle-rewards-card-reward-card {
+    display: flex;
+    flex-direction: row;
+    max-width: 800px;
+    height: 300px;
+    border-radius: 18px;
+    margin: 16px;
+    font-family: $toggle-font-family;
+}
+  
+.toggle-rewards-card-reward-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width:65%;
+    padding: 10px 40px;
+    // background-color: #ABC9C0;
+    color: white;
+    border-top-left-radius: 18px;
+    border-bottom-left-radius: 18px;
+    
+    .toggle-rewards-card-card-header {
+        font-size: 2.2rem;
+        font-weight: 600;
+        margin-top: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+}
+  
+.toggle-rewards-card-card-body {
+    display: flex;
+    flex-direction: column;
+    
+    .toggle-rewards-card-body-header {
+        font-size: 1.5rem;
+        font-weight: 800;
+        color:#000000;
+        opacity: 0.4;
+    }
+}
+
+.toggle-rewards-card-body-stats {
+    display: inline-block;
+    align-items: flex-start;
+    flex-direction: column;
+    margin-bottom: 20px;
+    
+    p {
+        margin: 3px 20px 3px 0px;
+        color:#000000;
+        opacity: 0.4;
+    }
+
+    .toggle-rewards-card-metrics {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-weight: 800;
+        font-size: 1.1rem;
+        
+    }
+
+    .toggle-rewards-card-metrics:last-child {
+        margin-top: 8px;
+    }
+
+
+}
+
+
+.toggle-rewards-card-reward-redemption {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    padding-bottom: 40px;
+    width: 35%;
+    // background-color: #89A79E;
+    border-top-right-radius: 18px;
+    border-bottom-right-radius: 18px;
+  
+    p {
+    color:#000000;
+    opacity: 0.4;
+    font-size: $toggle-font-size-large;
+    font-weight: 800;
+    margin-top: 20px;
+    }
+
+    .toggle-rewards-card-percentage {
+        background-color:hsla(0, 0%, 0%, 0.4) ;
+        border-radius: 50%;
+        width: 100px;
+        height: 100px;
+        color: white;
+        font-size: 27px;
+        font-weight: 700;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+
+.toggle-email-card {
+    display: flex;
+    flex-direction: column;
+    max-width: 370px;
+    border: 1px solid #E5E5E5;
+    border-radius: 18px;
+    font-family: $toggle-font-family;
+}
+
+.toggle-email-card-body {
+    display: flex;
+    flex-direction: column;
+    border-radius: 18px;
+    padding-bottom: 20px;
+    background: white;
+    z-index: 1;
+
+    .toggle-email-card-htmlContent {
+        -webkit-mask-image: linear-gradient( to top, rgba(255,0,0,0) 35%, 50%, rgba(255,0,0,1) 55%);
+        mask-image: linear-gradient(black, transparent);
+        height: 800px;
+        zoom: 0.62;
+        border-radius: 25px;
+        z-index:-1;
+
+    }
+    .toggle-email-card-buttons {
+        margin-top: -220px;
+    }
+    
+    .toggle-email-card-button {
+        display: flex;
+        border:none;
+        margin: 10px 25px;  
+        background:transparent;
+    }
+}
+
+.toggle-email-card-info {
+    margin: 20px 35px 5px 35px;
+    p {
+        color:$toggle-blue;
+        font-family: $toggle-font-family;
+        font-size: $toggle-font-size-regular;
+        font-weight: bold;
+        margin: 0;
+    }
+
+    .toggle-email-card-slot {
+        color:#324866;
+        font-family: $toggle-font-family;
+        font-size: $toggle-font-size-large;
+        font-weight: bold;
+        word-wrap: break-word;
+    }
+
+}
+