toggle-components-library 1.32.0-beta.2 → 1.32.0-beta.4

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.32.0-beta.2",
+  "version": "1.32.0-beta.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.32.0-beta.2",
+    "version": "1.32.0-beta.4",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

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

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

package/src/components/carousel/ToggleCarousel.vue

@@ -7,15 +7,17 @@
         @slideChangeTransitionStart="onSlideTransition"
     >
         <slot></slot>
-        <div v-if="carouselNavigation" class="toggle-carousel-button toggle-carousel-button--prev"
-             :class="{'toggle-carousel-button--disabled': prevDisabled}"
-             @click="$refs.swiper.swiperInstance.slidePrev()"  
-             slot="button-prev"
+        <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="$refs.swiper.swiperInstance.slidePrev()"  
+            slot="button-prev"
         ></div>
-        <div v-if="carouselNavigation" class="toggle-carousel-button toggle-carousel-button--next"
-             :class="{'toggle-carousel-button--disabled': nextDisabled}"
-             @click="$refs.swiper.swiperInstance.slideNext()"  
-             slot="button-next"
+        <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>
@@ -32,6 +34,7 @@ export default {
         return {
             prevDisabled: false,
             nextDisabled: false,
+            slidesLength: 0
         };
     },
     props: {
@@ -39,7 +42,18 @@ export default {
             type: String,
             default: 'default'
         },
-        carouselNavigation: {
+        carouselNavPosition: {
+            type: String,
+            default: 'middle',
+            validator(value) {
+                return ['top', 'middle', 'bottom'].includes(value)
+            }
+        },
+        carouselPrev: {
+            type: Boolean,
+            default: true
+        },
+        carouselNext: {
             type: Boolean,
             default: true
         },
@@ -65,11 +79,12 @@ export default {
         swiper: directive
     },
     mounted() {
-      this.onSlideTransition();
+        this.slidesLength = this.$refs.swiper.swiperInstance.slides.length;
+        this.onSlideTransition();
     },
     methods: {
         onSlideTransition(){
-            // if loop is enabled, don't disable buttons
+            // if loop is enabled, don't disable buttons, unless specified in prop
             const isLoop = this.$refs.swiper.swiperInstance.params.loop;
             if(isLoop) return;
 

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -1,8 +1,7 @@
 <template>
     <div>
-    <h3 class="toggle-metric metric-label">{{label}}</h3>
-        <ToggleCalculateBadge v-if="pendingBadge && label.length" class="single-metric-badge"> 14 days until spend is calculated</ToggleCalculateBadge>
-        <div class="single-metric-icon" v-else-if="pendingBadge && label.length == 0"></div>
+        <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>
@@ -10,14 +9,10 @@
 <script>
 
 import { mixins } from '../mixins/mixins';
-import ToggleCalculateBadge from '../badges/ToggleCalculateBadge.vue';
 
 
 export default {
     mixins:[mixins],
-    components: {
-        ToggleCalculateBadge,
-    },
     props: {
         /**
         * Component's name
@@ -26,7 +21,7 @@ export default {
             type: String,
             default: "ToggleMetricSingleMetric"
         },
-        /**
+                /**
         * Type of the value, this will affect on the format shown
         */
         type : {
@@ -73,7 +68,7 @@ export default {
         /**
         * Displays badge or clock if metrics are still pending
         */
-        pendingBadge: {
+        metricPending: {
             type: Boolean,
             default: false
         }

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';
@@ -83,6 +86,9 @@ import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.
 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';
 
@@ -91,6 +97,8 @@ const Components = {
     ToggleTable,
     ToggleTableRow,
     ToggleBadge,
+    ToggleCalculateBadge,
+    TogglePodiumBadge,
     ToggleTableColumn,
     ToggleInputText,
     ToggleInputEditableText,
@@ -110,6 +118,7 @@ const Components = {
     ToggleInputImage,
     ToggleButton,
     ToggleLoginButton,
+    ToggleMetricsButton,
     ToggleInputGroup,
     ToggleHeaderTextLarge,
     ToggleInputNumber,
@@ -150,7 +159,9 @@ const Components = {
     ToggleBoosterModal,
     ToggleContactSearch,
     ToggleCarousel,
-    ToggleCarouselSlide
+    ToggleCarouselSlide,
+    ToggleEmailCard,
+    ToggleRewardsCard
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_badges.scss

@@ -32,6 +32,89 @@
     &.empty {
         background-color: $toggle-placeholder-grey;
     }
+
+    &.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 {
@@ -101,6 +184,7 @@
     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');

package/src/sass/includes/_as_carousels.scss

@@ -1,5 +1,6 @@
 .toggle-carousel{
     cursor: grab;
+    font-size: 0;
     &:active {
         cursor: grabbing;
     }
@@ -30,19 +31,41 @@
         background-color: #2680EB;
         border-radius: 100%;
         position: absolute;
-        top: 50%;
-        transform: translate(0,-50%);
         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;
@@ -52,28 +75,46 @@
         }
         &--prev{
             left: 20px;
+            @media only screen and (max-width:768px){
+                left: 12px;
+            }
             &:before{
-                top: 6px;
                 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{
-                top: 6px;
                 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{