Prettify background overview (#10078)

* Bring buy bg set button in line with title

* Make background sets pretty

* Add checkbox to filter backgrounds

* Review: replace background filter checkbox with toggle

* Remove dashed line from toggle-switch label

* Test: add comma to make es-lint happy

* Move toggle tooltip into toggle-switch template

* Make toggle-switch label optional

* Review: Remove toggle-switch margin

website/client/components/ui/toggleSwitch.vue

@@ -1,25 +1,30 @@
 <template lang="pug">
-.clearfix.toggle-switch-container
-  .float-left.toggle-switch-description {{ label }}
-  .toggle-switch.float-left
-    input.toggle-switch-checkbox(
-      type='checkbox', :id="id",
-      @change="handleChange",
-      :checked="isChecked",
-      :value="value",
-    )
-    label.toggle-switch-label(:for="id")
-      span.toggle-switch-inner
-      span.toggle-switch-switch
+.popover-box
+  .clearfix(:id="containerId")
+    .float-left.toggle-switch-description(v-if="label", :class="hoverText ? 'hasPopOver' : ''") {{ label }}
+    .toggle-switch.float-left
+      input.toggle-switch-checkbox(
+        type='checkbox', :id="toggleId",
+        @change="handleChange",
+        :checked="isChecked",
+        :value="value",
+      )
+      label.toggle-switch-label(:for="toggleId")
+        span.toggle-switch-inner
+        span.toggle-switch-switch
+
+  b-popover(
+    v-if="hoverText"
+    :target="containerId"
+    triggers="hover",
+    placement="top"
+  )
+    .popover-content-text {{ hoverText }}
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
-  .toggle-switch-container {
-    margin-top: 6px;
-  }
-
   .toggle-switch {
     position: relative;
     width: 40px;
@@ -29,7 +34,10 @@
 
   .toggle-switch-description {
     height: 20px;
-    border-bottom: 1px dashed $gray-200;
+
+    &.hasPopOver {
+      border-bottom: 1px dashed $gray-200;
+    }
   }
 
   .toggle-switch-checkbox {
@@ -102,8 +110,10 @@
 export default {
   data () {
     return {
-      // A value is required for the required for the for and id attributes
-      id: Math.random(),
+      // The toggle requires a unique id to link it to the label
+      toggleId: this.generateId(),
+      // The container requires a unique id to link it to the pop-over
+      containerId: this.generateId(),
     };
   },
   model: {
@@ -116,12 +126,14 @@ export default {
     },
     label: {
       type: String,
-      required: true,
     },
     checked: {
       type: Boolean,
       default: false,
     },
+    hoverText: {
+      type: String,
+    },
   },
   computed: {
     isChecked () {
@@ -132,6 +144,10 @@ export default {
     handleChange ({ target: { checked } }) {
       this.$emit('change', checked);
     },
+    generateId () {
+      return `id-${Math.random().toString(36).substr(2, 16)}`;
+    },
   },
 };
 </script>
+