toggle-components-library 1.32.0 → 1.33.0

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/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,12 @@ import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChar
 import ToggleThreeDots from "./components/threedots/ToggleThreeDots.vue";
 import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.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 +97,8 @@ const Components = {
     ToggleTable,
     ToggleTableRow,
     ToggleBadge,
+    ToggleCalculateBadge,
+    TogglePodiumBadge,
     ToggleTableColumn,
     ToggleInputText,
     ToggleInputEditableText,
@@ -107,6 +118,7 @@ const Components = {
     ToggleInputImage,
     ToggleButton,
     ToggleLoginButton,
+    ToggleMetricsButton,
     ToggleInputGroup,
     ToggleHeaderTextLarge,
     ToggleInputNumber,
@@ -145,7 +157,11 @@ const Components = {
     ToggleBoosterButton,
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
-    ToggleContactSearch
+    ToggleContactSearch,
+    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;
+    }
+
+}
+

package/src/sass/includes/_as_carousels.scss

@@ -0,0 +1,131 @@
+.toggle-carousel{
+    cursor: grab;
+    font-size: 0;
+    &:active {
+        cursor: grabbing;
+    }
+    &--voucher{
+        &:after{
+            content: '';
+            position: absolute;
+            width: 15%;
+            background: linear-gradient(90deg, rgba(241, 245, 246, 0) 0%, rgba(241, 245, 246, 0.7) 50%, rgba(241, 245, 246, 1) 100%);
+            right: 0;
+            top: 0;
+            height: 100%;
+            z-index: 25;
+        }
+        &-end{
+            &:after{
+                right: auto;
+                left: 0;
+                background: linear-gradient(-90deg, rgba(241, 245, 246, 0) 0%, rgba(241, 245, 246, 0.7) 50%, rgba(241, 245, 246, 1) 100%);
+            }
+        }
+    }
+    .toggle-carousel-slide{
+        img{
+            max-width: 100%;
+        }
+    }
+    .toggle-carousel-button{
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #FFF;
+        background-color: #2680EB;
+        border-radius: 100%;
+        position: absolute;
+        cursor: pointer;
+        z-index: 50;
+        @media only screen and (max-width:768px){
+            width: 24px;
+            height: 24px;
+        }
+        &:hover{
+            background-color: #3487ec;
+        }
+        &--top{
+            top: 20px;
+            @media only screen and (max-width:768px){
+                top: 12px;
+            }
+        }
+        &--middle{
+            top: 50%;
+            transform: translate(0,-50%);
+        }
+        &--bottom{
+            bottom: 20px;
+            @media only screen and (max-width:768px){
+                bottom: 12px;
+            }
+        }
+        &:before, &:after{
+            content: '';
+            width: 4px;
+            height: 15px;
+            background-color: #FFF;
+            position: relative;
+            @media only screen and (max-width:768px){
+                width: 2px;
+                height: 8px;
+            }
+        }
+        &:before{
+            border-radius: 0 0 5px 5px;
+        }
+        &:after{
+            border-radius: 5px 5px 0 ;
+        }
+        &--prev{
+            left: 20px;
+            @media only screen and (max-width:768px){
+                left: 12px;
+            }
+            &:before{
+                transform: rotate(-45deg);
+                top: 4px;
+                @media only screen and (max-width:768px){
+                    top: 2px;
+                }
+            }
+            &:after{
+                transform: rotate(45deg);
+                top: -4px;
+                left: -4px;
+                @media only screen and (max-width:768px){
+                    top: -2px;
+                    left: -2px;
+                }
+            }
+        }
+        &--next{
+            right: 20px;
+            @media only screen and (max-width:768px){
+                right: 12px;
+            }
+            &:before{
+                transform: rotate(45deg);
+                top: 4px;
+                left: 4px;
+                @media only screen and (max-width:768px){
+                    top: 2px;
+                    left: 2px;
+                }
+            }
+            &:after{
+                transform: rotate(-45deg);
+                top: -4px;
+                @media only screen and (max-width:768px){
+                    top: -2px;
+                }
+            }
+        }
+        &--disabled{
+            display: none;
+        }
+    }
+}

package/src/sass/includes/_as_metrics.scss

@@ -16,6 +16,7 @@
         font-size: 275%;
         color: $toggle-metric-label-black;
     }
+
 }
 
 
@@ -25,7 +26,7 @@
     grid-template-columns: 1fr 1fr 1fr 1fr;
     display: grid;
     grid-auto-flow: column;
-
+    
 }
 
 .funnel-grid-svg {
@@ -79,7 +80,7 @@
     grid-column-start: 2;
     grid-row-end: 3;
     grid-column-end: 3;
-     display: flex;
+    display: flex;
 }
 
 .funnel-grid-7 {
@@ -101,7 +102,7 @@
 .funnel-spark-line, .funnel-single-metric  {
     margin-right: 1rem;
     border-right: 1px solid #BCDBEE;
-
+    
     &:nth-child(5),  &:last-child {
         border: 0;
     }
@@ -117,4 +118,20 @@
     align-items: center;
     justify-content: center;
     width: 100%;
+}
+
+.single-metric-badge {
+    margin-top: 0.6rem;
+}
+
+.single-metric-icon {
+    background-image: url('../assets/icons/clock-solid.svg');
+    background-repeat:no-repeat;
+    background-size:contain;
+    height: 25px;
+    width: 25px;
+}
+
+.increase-padding-bottom {
+    padding-bottom: 3rem !important;
 }