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

package/src/assets/icons/view_heatmap.svg

@@ -1 +0,0 @@
-<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/ToggleCalculateBadge.vue

@@ -1,13 +0,0 @@
-<template>
-    <div class="toggle-calculate-badge">
-        <div class="clock-icon"></div>
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-
-export default {
-    name: 'ToggleCalculateBadge',
-}
-</script>

package/src/components/badges/TogglePodiumBadge.vue

@@ -1,32 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-<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/ToggleRewardsCard.vue

@@ -1,80 +0,0 @@
-<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 voucher 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">{{ redepmtionRate }}%</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
-            }
-        },
-        computed: {
-            redepmtionRate(){
-                let rate = (Number(this.redeemed)*100)/Number(this.claimed);
-                return rate;
-            },
-
-            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

@@ -1,94 +0,0 @@
-<template>
-    <swiper
-        ref="swiper"
-        class="swiper toggle-carousel"
-        :class="carouselStyle == 'voucher' ? 'toggle-carousel--voucher' : ''"
-        :options="carouselOptions"
-        @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>
-        <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>
-    </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,
-        };
-    },
-    props: {
-        carouselStyle:{
-            type: String,
-            default: 'default'
-        },
-        carouselNavigation: {
-            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.onSlideTransition();
-    },
-    methods: {
-        onSlideTransition(){
-            // if loop is enabled, don't disable buttons
-            const isLoop = this.$refs.swiper.swiperInstance.params.loop;
-            if(isLoop) return;
-
-            const isBeginning = this.$refs.swiper.swiperInstance.isBeginning;
-            const isEnd = this.$refs.swiper.swiperInstance.isEnd;
-
-            if(isBeginning){
-                this.prevDisabled = true;
-                this.nextDisabled = false;
-            }
-            else if(isEnd){
-                this.prevDisabled = false;
-                this.nextDisabled = true;
-            }
-            else{
-                this.prevDisabled = false;
-                this.nextDisabled = false;
-            }
-        }
-    }
-}
-</script>

package/src/components/carousel/ToggleCarouselSlide.vue

@@ -1,26 +0,0 @@
-<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/sass/includes/_as_cards.scss

@@ -1,103 +0,0 @@
-.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;
-    }
-}
-  
-.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: 1.7em;
-        font-weight: 700;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-}
-
-

package/src/sass/includes/_as_carousels.scss

@@ -1,83 +0,0 @@
-.toggle-carousel{
-    cursor: grab;
-    &: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;
-        }
-    }
-    .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;
-        top: 50%;
-        transform: translate(0,-50%);
-        cursor: pointer;
-        z-index: 50;
-        &:hover{
-            background-color: #3487ec;
-        }
-        &:before, &:after{
-            content: '';
-            width: 4px;
-            height: 15px;
-            background-color: #FFF;
-            position: relative;
-        }
-        &:before{
-            border-radius: 0 0 5px 5px;
-        }
-        &:after{
-            border-radius: 5px 5px 0 ;
-        }
-        &--prev{
-            left: 20px;
-            &:before{
-                top: 6px;
-                transform: rotate(-45deg);
-                top: 4px;
-            }
-            &:after{
-                transform: rotate(45deg);
-                top: -4px;
-                left: -4px;
-            }
-        }
-        &--next{
-            right: 20px;
-            &:before{
-                top: 6px;
-                transform: rotate(45deg);
-                top: 4px;
-                left: 4px;
-            }
-            &:after{
-                transform: rotate(-45deg);
-                top: -4px;
-            }
-        }
-        &--disabled{
-            display: none;
-        }
-    }
-}