Add color swatchers on color picker component

lib/vue/src/components/Tour/Tour.vue

@@ -42,6 +42,7 @@
               <b-button
                 data-test-id="button-stop-tour"
                 variant="primary"
+                class="text-light"
                 @click="onStop"
               >
                 <template v-if="tour.isLast && !(callbacks || {}).onNextRedirect">
@@ -55,6 +56,7 @@
                 data-test-id="button-previous"
                 v-if="tour.isFirst && (callbacks || {}).onPrevRedirect"
                 variant="primary"
+                class="text-light"
                 :href="callbacks.onPrevRedirect"
               >
                 {{ $t('buttons.previous') }}
@@ -63,6 +65,7 @@
                 data-test-id="button-previous"
                 v-else-if="!tour.isFirst"
                 variant="primary"
+                class="text-light"
                 @click="tour.previousStep"
               >
                 {{ $t('buttons.previous') }}
@@ -71,6 +74,7 @@
                 data-test-id="button-next"
                 v-if="tour.isLast && (callbacks || {}).onNextRedirect"
                 variant="primary"
+                class="text-light"
                 :href="callbacks.onNextRedirect"
               >
                 {{ $t('buttons.next') }}
@@ -78,7 +82,7 @@
               <b-button
                 data-test-id="button-next"
                 v-else-if="!tour.isLast"
-                variant="primary"
+                variant="light"
                 @click="tour.nextStep"
               >
                 {{ $t('buttons.next') }}
@@ -154,7 +158,7 @@ export default {
 
 <style lang="scss">
 .v-step {
-  background: #5C5C5C;
+  background: var(--primary);
   max-width: 320px;
   z-index: 10000;
   border-radius: 1.1rem;
@@ -180,7 +184,7 @@ export default {
   visibility: hidden;
 }
 .v-step__arrow--dark:before {
-  background: #5C5C5C;
+  background: var(--primary);
 }
 .v-step__arrow:before {
   visibility: visible;

lib/vue/src/components/input/CInputColorPicker.vue

@@ -67,11 +67,33 @@
         @input="updateColor"
       />
 
+      <hr/>
+      <div 
+        v-for="swatcher in swatchers"
+        :key="swatcher.id"
+        class="d-flex flex-nowrap p-2"
+      >
+          <div 
+            v-for="key in swatcherLabels"
+            :key="key"
+            class="mb-2"
+          >
+          <b-button 
+            squared 
+            class="swatcher" 
+            v-b-tooltip.hover="{ title: colorToolTip(swatcher.id,key), container: '#body' }"
+            :style="{ backgroundColor: swatcher.values[key], borderColor: swatcher.values[key] }"
+            @click="setColor(swatcher.values[key])"
+          >
+          </b-button>
+        </div>
+      </div>
+
       <template #modal-footer>
         <b-button
           v-if="defaultValue"
           variant="light"
-          @click="resetColor()"
+          @click="setColor()"
         >
           {{ translations.defaultBtnLabel }}
         </b-button>
@@ -135,7 +157,21 @@ export default {
     showText: {
       type: Boolean,
       default: true,
-    }
+    },
+
+    swatchers: {
+      type: Array,
+      default: [],
+    },
+
+    swatcherLabels: {
+      type: Array,
+      default: [],
+    },
+
+    colorTooltips: {
+      type: Object,
+    },
   },
 
   data () {
@@ -159,8 +195,8 @@ export default {
       this.currentColor = hex8
     }, 300),
 
-    resetColor () {
-      this.currentColor = this.defaultValue
+    setColor (defaultColor = this.defaultValue) {
+      this.currentColor = defaultColor
     },
 
     saveColor () {
@@ -176,6 +212,11 @@ export default {
       }
     },
 
+    saveColor () {
+      this.$emit('input', this.currentColor || this.value)
+      this.closeMenu()
+    },
+
     openMenu () {
       this.showModal = true
     },
@@ -183,11 +224,19 @@ export default {
     closeMenu () {
       this.showModal = false
     },
+
+    colorToolTip (themeID, label) {
+      return `${this.translations[themeID]} - ${this.colorTooltips[label]}`
+    },
   },
 }
 </script>
 
 <style lang="scss">
+.swatcher {
+  width: 32px;
+  height: 32px;
+}
 .vc-chrome {
   font-family: var(--font-medium) !important;