Removing hover, focus and active from tags

Author: kvisca

src/components/ChecTag.vue

@@ -88,10 +88,6 @@ export default {
     top: 2px;
   }
 
-  &--active {
-    @extend %active;
-  }
-
   &--disabled {
     @apply opacity-40 bg-white text-gray-500 cursor-not-allowed;
 
@@ -120,32 +116,8 @@ export default {
     }
   }
 
-  // All colours share the same active, hover/focus, and disabled styles
-  &:not(.chec-tag--disabled) {
-    &:active {
-      @extend %active;
-    }
-
-    &:hover,
-    &:focus {
-      @apply bg-gray-500 text-white border-gray-500;
-
-      .chec-tag__dismiss {
-        @apply bg-white text-gray-500;
-      }
-    }
-  }
-
   &__dismiss {
     @apply ml-1 w-3 h-3 rounded-full;
   }
 }
-
-%active {
-  @apply bg-gray-400 text-white border-gray-400;
-
-  .chec-tag__dismiss {
-    @apply bg-white text-gray-400;
-  }
-}
 </style>

src/stories/components/ChecTag.stories.mdx

@@ -58,62 +58,6 @@ import ChecTagGroup from '../../components/ChecTagGroup';
   </Story>
 </Preview>
 
-# Tag
-
-<Props of={ChecTag} />
-
-<Preview>
-  <Story name="States">
-    {{
-      components: {
-        ChecTag,
-      },
-      props: {
-        tagText: {
-          default: text('Tag text', 'I am tag')
-        },
-        active: {
-          type: Boolean,
-          default: () => boolean('Active', false),
-        },
-        disabled: {
-          type: Boolean,
-          default: () => boolean('Disabled', false),
-        },
-        background: {
-          default: select('Background Color', ['light', 'dark']),
-        },
-        undismissible: {
-          type: Boolean,
-          default: () => boolean('Undismissible', false),
-        },
-      },
-      computed: {
-        colors() {
-          return ['dark-grey', 'white'];
-        }
-      },
-      methods: {
-        handleDismiss: action('dismiss'),
-      },
-      template: `
-        <div class="py-16 w-full flex justify-around" :class="{'bg-gray-600': background === 'dark'}">
-          <div v-for="color in colors" class="mb-4">
-            <ChecTag
-              :color="color"
-              :active="active"
-              :disabled="disabled"
-              :undismissible="undismissible"
-              @dismiss="handleDismiss"
-            >
-              {{ tagText }}
-            </ChecTag>
-          </div>
-        </div>`
-    }}
-  </Story>
-</Preview>
-
 ## Group
 
 <Preview>