feat(toggle): add centered and reversed props

lecoueyl · Aug 23, 2021 · c3cd549 · c3cd549
1 parent 3ccce7f
commit c3cd549
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/src/components/toggle/Toggle.vue b/src/components/toggle/Toggle.vue
@@ -2,15 +2,19 @@
   <label
     :class="[
       !disabled ? 'cursor-pointer' : 'cursor-not-allowed',
-      $slots.default ? 'flex items-center' : 'inline-block',
+      $slots.default ? 'inline-flex' : 'inline-block',
+      {
+        'items-center': centered,
+        'flex-row-reverse': reversed,
+      },
     ]"
   >
     <div
       class="rounded-full transition-colors duration-300"
       :class="[
         {
-          'w-6': size === 'sm',
-          'w-10 p-1': size === 'base',
+          'w-6 h-3 my-2': size === 'sm',
+          'w-10 h-6 p-1': size === 'base',
           'bg-gray-300 dark:bg-gray-600': disabled && !checked,
           'bg-gray-400 dark:bg-gray-400': disabled && checked,
           'bg-gray-200 dark:bg-gray-600': !disabled && !checked,
@@ -46,7 +50,7 @@
     </div>
     <span
       v-if="$slots.default"
-      class="pl-2"
+      :class="reversed ? 'pr-2' : 'pl-2'"
     >
       <slot />
     </span>
@@ -72,6 +76,11 @@ export default {
   },
 
   props: {
+    centered: {
+      type: Boolean,
+      default: false,
+    },
+
     disabled: {
       type: Boolean,
       default: false,
@@ -97,6 +106,11 @@ export default {
       default: false,
     },
 
+    reversed: {
+      type: Boolean,
+      default: false,
+    },
+
     size: {
       default: 'base',
       type: String,

diff --git a/src/components/toggle/toggle.unit.test.js b/src/components/toggle/toggle.unit.test.js
@@ -33,6 +33,24 @@ describe('Toggle', () => {
     expect(wrapper.text()).toBe('foobar');
   });
 
+  it('accepts centered property', () => {
+    const wrapper = shallowMount(Toggle, {
+      propsData: {
+        centered: true,
+      },
+    });
+    expect(wrapper.classes('items-center')).toBe(true);
+  });
+
+  it('accepts reversed property', () => {
+    const wrapper = shallowMount(Toggle, {
+      propsData: {
+        reversed: true,
+      },
+    });
+    expect(wrapper.classes('flex-row-reverse')).toBe(true);
+  });
+
   it('has attribute disabled when disabled set', () => {
     const wrapper = shallowMount(Toggle, {
       propsData: {