toggle-components-library 1.34.0-beta.6 → 1.34.0-beta.8

package/package.json

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

package/src/assets/icons/airship-feedback-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
+    <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-feedback.svg

@@ -0,0 +1,10 @@
+<svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
+    <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/components/boosters/ToggleBoosterButton.vue

@@ -1,25 +1,19 @@
 <template>
-  <div :class="[{'toggle-booster-button-tooltip-container': !!tooltipText }]">
-    <button :class="['toggle-booster-button-container', boosterType, {'toggle-booster-button-disabled': disabled}]" :disabled="disabled" @click="click">
-  
-      <img
-        :src="logo.src"
-        :alt="logo.alt"
-        class="toggle-booster-button-logo"
-      >
-  
-      <div :class="['toggle-booster-button', boosterType]" >
-        <p class="plus">+</p>
-        <div v-if="buttonText" class="toggle-booster-button-button-text">
-          <slot>{{buttonText}}</slot>
-        </div>
-      </div>
-    </button>
+  <button :class="['toggle-booster-button-container', boosterType]" @click="click">
+
+    <img
+      :src="logo.src"
+      :alt="logo.alt"
+      class="toggle-booster-button-logo"
+    >
 
-    <div class="toggle-booster-button-tooltip-text" v-if="tooltipText">
-      <div >{{ tooltipText }}</div>
+    <div :class="['toggle-booster-button', boosterType]" >
+      <p class="plus">+</p>
+      <div v-if="buttonText" class="toggle-booster-button-button-text">
+        <slot>{{buttonText}}</slot>
+      </div>
     </div>
-  </div>
+  </button>
 </template>
   
   <script>
@@ -42,14 +36,6 @@
         type: Object,
         required: true,
       },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      tooltipText: {
-        type: String,
-        required: false
-      }
     },
     methods: {
       click() {

package/src/components/buttons/ToggleButton.vue

@@ -1,29 +1,22 @@
 <template>
-    <div :class="[ 'toggle-button-container', {'toggle-button-container-mini':isMini, 'toggle-button-tooltip-container': !!tooltipText }]">
+    <div :class="[ 'toggle-button-container', {'toggle-button-container-mini':isMini}]">
         <button
             v-if="!$slots.default"
             :type="type"
-            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading, 'toggle-button-subscribed': !subscribed, 'toggle-button-booster-badge': boosterImageProperties}]"
+            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading, 'toggle-button-subscribed': !subscribed}]"
             :disabled="(loading || disabled)"
             @click="click"
             >
             <div class="toggle-button-loader" v-if="loading" ></div>
             <span v-html="buttonText" v-if="!isMini"/>
-
-            <div v-if="boosterImageProperties" :class="['toggle-button-booster-image-badge', {'shimmer': boosterShimmer && !disabled, 'toggle-button-loading': loading, 'toggle-button-disabled': disabled}]" :style="'background-color: ' + boosterImageProperties.bgColor">
-              <img class="toggle-button-booster-image" :src="boosterImageProperties.src" :alt="boosterImageProperties.alt">
-            </div>
         </button>
         <div v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled, 'toggle-button-subscribed': !subscribed}]">
-          <div class="toggle-button-loader" v-if="loading" ></div>
-          <div class="toggle-button-a-border" />
-          <!--
-              @slot String of button text
-          -->
-          <slot>{{buttonText}}</slot>
-        </div>
-        <div class="toggle-button-tooltip-text" v-if="tooltipText">
-          <div >{{ tooltipText }}</div>
+            <div class="toggle-button-loader" v-if="loading" ></div>
+            <div class="toggle-button-a-border" />
+            <!-- 
+                @slot String of button text
+            -->
+            <slot>{{buttonText}}</slot>
         </div>
     </div>
 </template>
@@ -74,33 +67,10 @@ export default {
             type:String,
             default:'confirm'
         },
-        /* 
-        * Grey out button if booster not enabled
-        */
+        /* Grey out button if booster not enabled*/
         subscribed: {
           type: Boolean,
           default: true
-        },
-        /*
-        * Booster badge image properties, image, alt text, background colour
-        */
-        boosterImageProperties: {
-          type: Object,
-          required: false,
-        },
-        /*
-        * Turns the shimmer animation on and off for the booster badge
-        */
-        boosterShimmer: {
-          type: Boolean,
-          default: true
-        },
-        /*
-        * Text displayed in tooltip
-        */
-        tooltipText: {
-          type: String,
-          required: false
         }
     },
     computed: {

package/src/components/buttons/ToggleMetricsButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <button :class="['toggle-metrics-button', buttonStyle]" @click="click">
-        <div :class="icon"></div>
+    <button :class="['toggle-metrics-button', buttonStyle, 'toggle-metrics-button-' + size]" :style="styles" @click="click">
+        <div :class="icon" :style="'background-color:' + styles.color"></div>
         <slot>{{buttonText}}</slot>
     </button>
 </template>
@@ -19,7 +19,23 @@
         },
         icon: {
           type: String,
-          required: true,
+          required: false,
+          validator: function(value) {
+            return ["heatmap-icon", "email-icon", "contacts-icon"].indexOf(value) !== -1;
+          }
+        },
+        size: {
+          type: String,
+          default: "medium",
+          required: false,
+          validator: function(value) {
+            return ["small", "medium", "large"].indexOf(value) !== -1;
+          }
+        },
+        styles: {
+          type: Object,
+          default: () => ({}),
+          required: false,
         },
       },
       methods: {

package/src/components/cards/ToggleCommentCard.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="toggle-comment-card">
+        <div class="toggle-comment-card-info" :style="{ backgroundColor:  cardColor}">
+            <div class="toggle-comment-card-text">
+                <p>"{{ comment }}"</p>
+            </div>
+            <div class="toggle-comment-card-name">
+                <ToggleMetricsButton 
+                buttonStyle="mini-contacts" 
+                :buttonText="name" 
+                icon="contacts-icon"
+                :styles="{ backgroundColor: 'transparent', borderColor: 'white', color: 'white'}"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import ToggleMetricsButton from '../buttons/ToggleMetricsButton.vue';
+    export default {
+        components:{ToggleMetricsButton},
+        props: {
+            cardIndex: {
+                type: Number,
+                required: true,
+            },
+            totalCards: {
+                type: Number,
+                required: true,
+            },
+            comment: {
+                type: String,
+                required: true
+            },
+            name: {
+                type: String,
+                required: true
+            }
+        },
+        computed: {
+            cardColor() {
+                // adjust colour palette below to change the Reward Cards colors
+                const colorPalette = [
+                    '#2c7da0',
+                    '#f3c570',
+                    '#8bbcbe',
+                    '#a0a789',
+                    '#cbae78',
+                    '#a284b6',
+                    '#d39999',
+                    '#9b7361',
+                    '#64aaa8',
+                    '#799194',
+                ];
+                
+                // pick random number to return random index of colourPalette
+                const paletteIndex = Math.floor(
+                    (this.cardIndex / this.totalCards) * colorPalette.length
+                );
+                return colorPalette[paletteIndex];
+            }
+        },
+    };
+</script>
+  
+  

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -2,7 +2,7 @@
     <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>
+        <h1 class="toggle-metric metric-value" :class="{ 'toggle-metric-score': score}" v-else>{{metricValue}} {{ symbol }}</h1>
     </div>
 </template>
 
@@ -27,7 +27,7 @@ export default {
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**
@@ -92,9 +92,10 @@ export default {
                     return this.value.toLocaleString();
 
             }
-        }
-
-       
+        },
+        score() {
+            return this.type === 'score';
+        },     
     }
 }
 

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -54,7 +54,7 @@ export default {
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**

package/src/components/tables/ToggleTableRow.vue

@@ -1,23 +1,5 @@
 <template>
-    <tr :class="['toggle-tablee-tr',{'tr-disabled':disabled }]" @click="handleClick" >
+    <tr class="toggle-tablee-tr" @click="$emit('click')" >
         <slot></slot>
     </tr>
-</template>
-
-<script>
-export default {
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    handleClick() {
-      if(!this.disabled) {
-        this.$emit('click')
-      }
-    }
-  }
-}
-</script>
+</template>

package/src/index.js

@@ -88,6 +88,7 @@ import ToggleCarouselSlide from "./components/carousel/ToggleCarouselSlide.vue";
 
 import ToggleEmailCard from "./components/cards/ToggleEmailCard.vue";
 import ToggleRewardsCard from "./components/cards/ToggleRewardsCard.vue";
+import ToggleCommentCard from "./components/cards/ToggleCommentCard.vue";
 
 
 import './sass/main.scss';
@@ -161,7 +162,8 @@ const Components = {
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,
-    ToggleRewardsCard
+    ToggleRewardsCard,
+    ToggleCommentCard
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_boosters.scss

@@ -219,37 +219,3 @@ margin:1rem
   
   }
 
-.toggle-booster-button-disabled {
-    opacity: 0.3;
-}
-
-/* Tooltip container */
-.toggle-booster-button-tooltip-container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-}
-
-/* Tooltip text */
-.toggle-booster-button-tooltip-container .toggle-booster-button-tooltip-text {
-    visibility: hidden;
-    width: 120px;
-    height: fit-content;
-    background-color: black;
-    color: #fff;
-    text-align: center;
-    padding: 5px;
-    border-radius: 6px;
-    position: absolute;
-    z-index: 999;
-    top: 100%;
-}
-
-.toggle-booster-button-tooltip-text {
-    font-family: $toggle-font-family;
-    padding: 10px;
-}
-
-.toggle-booster-button-tooltip-container:hover .toggle-booster-button-tooltip-text {
-    visibility: visible;
-}

package/src/sass/includes/_as_buttons.scss

@@ -395,7 +395,7 @@
         }
         
         &:hover .contacts-icon {
-            background-image: url("../assets/icons/contacts-white.svg");
+            background-color: white;
         }
     }
     //icons
@@ -418,9 +418,11 @@
     }
     
     .contacts-icon {
-        background-image: url("../assets/icons/contacts-greyblue.svg");
-        background-repeat:no-repeat;
-        background-size:contain;
+        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='.9em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23fff%7D%3C/style%3E%3Cpath 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'/%3E%3C/svg%3E");
+        background-color: #6d90b4;
+        -webkit-mask: var(--svg);
+        mask: var(--svg);
+        mask-repeat: no-repeat;
         margin-right: 6px;
         width: 14px;
         height: 14px;
@@ -428,82 +430,34 @@
     }
 }
 
-.toggle-button-booster-badge {
-    display: flex;
-    align-items: center;
-    padding: 0.2rem 0.2rem 0.2rem 1rem !important;
-}
-
-.shimmer {
-    color: grey;
-    display: inline-block;
-    mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/400% 100%;
-    background-repeat: no-repeat;
-    animation: shimmer 4s infinite;
-}
-
-.toggle-button-booster-image-badge {
-    width: 6rem;
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    margin: 0 0 0 20px;
-    padding: 0px 8px 0px 8px;
-    width: 6rem;
-    height: 1.8rem;
-    .toggle-button-booster-image {
-        width: 100%;
-        height: 100%;
+.toggle-metrics-button-small {
+    padding: 0px 13px;
+    font-size: 12px;
+    &.mini-contacts {
+        font-size: 0.65rem;
+        padding: 5px 12px;
+    }
+    .heatmap-icon {
+        width: 21px;
+        height: 21px;
     }
-    &.toggle-button-loading {
-      opacity: 0
+    .email-icon {
+        width: 25px;
+        height: 25px;
     }
-    &.toggle-button-disabled {
-      opacity: 0.3;
+    .contacts-icon {
+        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='.8em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23fff%7D%3C/style%3E%3Cpath 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'/%3E%3C/svg%3E");
+        -webkit-mask: var(--svg);
+        mask: var(--svg);
+        mask-repeat: no-repeat;
     }
 }
 
-/* Tooltip container */
-.toggle-button-tooltip-container {
-  position: relative;
-  justify-content: center;
-  display: flex;
-}
-
-/* Tooltip text */
-.toggle-button-tooltip-container .toggle-button-tooltip-text {
-  visibility: hidden;
-  width: 120px;
-  height: fit-content;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  padding: 5px;
-  border-radius: 6px;
-  position: absolute;
-  z-index: 999;
-  top: 100%;
-}
-
-.toggle-button-tooltip-text {
-  font-family: $toggle-font-family;
-}
-
-.toggle-button-tooltip-container:hover .toggle-button-tooltip-text {
-    visibility: visible;
-}
-
-// Shimmer animation for booster badge
-@keyframes shimmer {
-    0% {
-        mask-position: right;
-    }
-    30% {
-        mask-position: left;
-    }
-    100% {
-        mask-position: left;
+.toggle-metrics-button-large {
+    padding: 23px 27px;
+    font-size: 17px;
+    &.mini-contacts {
+        font-size: .92rem;
+        padding: 10px 25px;
     }
 }

package/src/sass/includes/_as_cards.scss

@@ -164,3 +164,33 @@
 
 }
 
+.toggle-comment-card {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 200px;
+    border-radius: 18px;
+    margin: 16px;
+    padding-right: 20px;
+    font-size: $toggle-font-size-regular;
+    font-family: $toggle-font-family;
+}
+
+.toggle-comment-card-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 40px 20px 20px 20px;
+    color: white;
+    border-radius: 30px;
+    width: 100%;
+
+    .toggle-comment-card-text {
+        text-align: left;
+        line-height: 1.5rem;
+
+        p {
+            margin: 0
+        }
+    }
+}

package/src/sass/includes/_as_metrics.scss

@@ -134,4 +134,10 @@
 
 .increase-padding-bottom {
     padding-bottom: 3rem !important;
+}
+
+.toggle-metric-score::after {
+    content: '/5';
+    font-size: 27px;
+    margin-left: -8px;
 }

package/src/sass/includes/_as_navs.scss

@@ -342,6 +342,11 @@
             &.airship-hat-icon span::before {
               background-image: url("../assets/icons/airship-hat-hover.svg");
             }
+
+            &.airship-feedback-icon a::before,
+            &.airship-feedback-icon span::before {
+              background-image: url("../assets/icons/airship-feedback-hover.svg");
+            }
         }
     }
 
@@ -506,6 +511,17 @@
                   animation: tilt-shake 0.4s;
                   background-image: url("../assets/icons/airship-audiences-hover.svg");
                 }
+        // add feedbacl
+        &.airship-feedback-icon a::before,
+        &.airship-feedback-icon span::before {
+          background-image: url("../assets/icons/airship-feedback.svg");
+        }
+
+                &.airship-feedback-icon a:hover::before,
+                &.airship-feedback-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-feedback-hover.svg");
+                }
 
       }
     }

package/src/sass/includes/_as_table.scss

@@ -117,7 +117,9 @@ table.toggle-table {
         }
     }
 
+
     tr.toggle-tablee-tr {
+
         &:hover {
             background-color: #FFF;
             .arrow-order {
@@ -144,10 +146,6 @@ table.toggle-table {
 
 
     }
-    tr.toggle-tablee-tr.tr-disabled * {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
    
   }
 

package/dist/img/contacts-greyblue.ef6f8a9a.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:#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/dist/img/contacts-white.95d07c7a.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:#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>