feat: Remove duplicate Switch Component (#4427)

app/javascript/dashboard/components/buttons/ToggleButton.vue

@@ -1,66 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="toggle-button"
-    :class="{ active }"
-    role="switch"
-    :aria-checked="active.toString()"
-    @click="onClick"
-  >
-    <span aria-hidden="true" :class="{ active }"></span>
-  </button>
-</template>
-
-<script>
-export default {
-  props: {
-    active: { type: Boolean, default: false },
-  },
-  methods: {
-    onClick(e) {
-      this.$emit('click', e);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.toggle-button {
-  --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
-    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  background-color: var(--s-200);
-  border-radius: var(--border-radius-large);
-  border: 2px solid transparent;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 19px;
-  position: relative;
-  transition-duration: 200ms;
-  transition-property: background-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  width: 34px;
-
-  &.active {
-    background-color: var(--w-500);
-  }
-
-  span {
-    --space-one-point-five: 1.5rem;
-    background-color: var(--white);
-    border-radius: 100%;
-    box-shadow: var(--toggle-button-box-shadow);
-    display: inline-block;
-    height: var(--space-one-point-five);
-    transform: translate(0, 0);
-    transition-duration: 200ms;
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    width: var(--space-one-point-five);
-
-    &.active {
-      transform: translate(var(--space-one-point-five), var(--space-zero));
-    }
-  }
-}
-</style>

app/javascript/dashboard/components/ui/Switch.vue

@@ -1,54 +1,66 @@
 <template>
-  <label class="switch" :class="classObject">
+  <button
-    <input
+    type="button"
-      :id="id"
+    class="toggle-button"
-      v-model="value"
+    :class="{ active: value }"
-      class="switch-input"
+    role="switch"
-      :name="name"
+    :aria-checked="value.toString()"
-      :disabled="disabled"
+    @click="onClick"
-      type="checkbox"
+  >
-    />
+    <span aria-hidden="true" :class="{ active: value }"></span>
-    <div class="switch-paddle" :for="name">
+  </button>
-      <span class="show-for-sr">on off</span>
-    </div>
-  </label>
 </template>
 
 <script>
 export default {
   props: {
-    disabled: Boolean,
+    value: { type: Boolean, default: false },
-    type: { type: String, default: '' },
-    size: { type: String, default: '' },
-    checked: Boolean,
-    name: { type: String, default: '' },
-    id: { type: String, default: '' },
   },
-  data() {
+  methods: {
-    return {
+    onClick() {
-      value: null,
+      this.$emit('input', !this.value);
-    };
     },
-  computed: {
-    classObject() {
-      const { type, size, value } = this;
-      return {
-        [`is-${type}`]: type,
-        [`${size}`]: size,
-        checked: value,
-      };
-    },
-  },
-  watch: {
-    value(val) {
-      this.$emit('input', val);
-    },
-  },
-  beforeMount() {
-    this.value = this.checked;
-  },
-  mounted() {
-    this.$emit('input', (this.value = !!this.checked));
   },
 };
 </script>
+<style lang="scss" scoped>
+.toggle-button {
+  --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
+    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  background-color: var(--s-200);
+  border-radius: var(--border-radius-large);
+  border: 2px solid transparent;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  height: 19px;
+  position: relative;
+  transition-duration: 200ms;
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  width: 34px;
+
+  &.active {
+    background-color: var(--w-500);
+  }
+
+  span {
+    --space-one-point-five: 1.5rem;
+    background-color: var(--white);
+    border-radius: 100%;
+    box-shadow: var(--toggle-button-box-shadow);
+    display: inline-block;
+    height: var(--space-one-point-five);
+    transform: translate(0, 0);
+    transition-duration: 200ms;
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    width: var(--space-one-point-five);
+
+    &.active {
+      transform: translate(var(--space-one-point-five), var(--space-zero));
+    }
+  }
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue

@@ -34,9 +34,9 @@
               <td>{{ automation.name }}</td>
               <td>{{ automation.description }}</td>
               <td>
-                <toggle-button
+                <woot-switch
-                  :active="automation.active"
+                  :value="automation.active"
-                  @click="toggleAutomation(automation, automation.active)"
+                  @input="toggleAutomation(automation, automation.active)"
                 />
               </td>
               <td>{{ readableTime(automation.created_on) }}</td>
@@ -131,12 +131,11 @@ import AddAutomationRule from './AddAutomationRule.vue';
 import EditAutomationRule from './EditAutomationRule.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import timeMixin from 'dashboard/mixins/time';
-import ToggleButton from 'dashboard/components/buttons/ToggleButton';
+
 export default {
   components: {
     AddAutomationRule,
     EditAutomationRule,
-    ToggleButton,
   },
   mixins: [alertMixin, timeMixin],
   data() {

app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue

@@ -62,7 +62,9 @@
       />
     </div>
     <div class="small-12 medium-3 business-hours">
-      <span class="business-hours-text">{{ $t('REPORT.BUSINESS_HOURS') }}</span>
+      <span class="business-hours-text margin-right-small">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
       <span>
         <woot-switch v-model="businessHoursSelected" />
       </span>

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue

@@ -146,10 +146,12 @@
       />
     </div>
     <div class="small-12 medium-3 business-hours">
-      <span class="business-hours-text">{{ $t('REPORT.BUSINESS_HOURS') }}</span>
+      <span class="business-hours-text margin-right-small">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
         <span>
           <woot-switch v-model="businessHoursSelected" />
         </span>
+      </span>
     </div>
   </div>
 </template>