fix: Warpified and refactored the Pill component, adding component-classes

components/pill/w-pill.vue

@@ -1,41 +1,47 @@
+<script setup>
+import { computed } from 'vue';
+import { pill as ccPill } from '@warp-ds/component-classes';
+
+const p = defineProps({
+  label: String,
+  canClose: Boolean,
+  suggestion: Boolean,
+  openSRLabel: String,
+  closeSRLabel: String
+});
+
+const labelClasses = computed(() => [
+  ccPill.button,
+  ccPill.label,
+  p.suggestion ? ccPill.suggestion : ccPill.filter,
+  p.canClose ? ccPill.labelWithClose : ccPill.labelWithoutClose
+]);
+
+const closeClasses = computed(() => [
+  ccPill.button,
+  ccPill.close,
+  p.suggestion ? ccPill.suggestion : ccPill.filter
+]);
+</script>
+
 <template>
-  <div class="flex items-center">
-    <button type="button" :class="{ [c.pill]: true, [suggestion ? c.pillSuggestion : c.pillFilter]: true, [c.label]: true, [canClose ? c.labelWithClose : c.labelWithoutClose]: true }" v-bind="$attrs">
-      <span class="sr-only">Åpne filter </span>
+  <div :class="ccPill.pill">
+    <button type="button" :class="labelClasses" v-bind="$attrs">
+      <span v-if="!p.suggestion" :class="ccPill.a11y">{{ p.openSRLabel || 'Åpne filter' }} </span>
       <span>{{ label }}</span>
     </button>
-    <button type="button" :class="{ [c.pill]: true, [suggestion ? c.pillSuggestion : c.pillFilter]: true, [c.close]: true }" v-if="canClose" @click="$emit('close')">
-      <span class="sr-only">Fjern filter {{ label }}</span>
-      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M4.03 2.97a.75.75 0 00-1.06 1.06L6.94 8l-3.97 3.97a.75.75 0 101.06 1.06L8 9.06l3.97 3.97a.75.75 0 101.06-1.06L9.06 8l3.97-3.97a.75.75 0 00-1.06-1.06L8 6.94 4.03 2.97z"></path></svg>
+    <button v-if="p.canClose" type="button" :class="closeClasses" @click="$emit('close')">
+      <span v-if="!p.suggestion" :class="ccPill.a11y">{{ p.closeSRLabel || 'Fjern filter' }} {{ label }}</span>
+      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 16 16" aria-hidden="true">
+        <path fill="currentColor" d="M4.03 2.97a.75.75 0 00-1.06 1.06L6.94 8l-3.97 3.97a.75.75 0 101.06 1.06L8 9.06l3.97 3.97a.75.75 0 101.06-1.06L9.06 8l3.97-3.97a.75.75 0 00-1.06-1.06L8 6.94 4.03 2.97z" />
+      </svg>
     </button>
   </div>
 </template>
 
 <script>
-import { computed } from 'vue'
-
-const c = {
-  pill: 'inline-flex items-center py-8 focus-ring text-12 transition-all',
-  pillSuggestion: 'bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 font-bold',
-  pillFilter: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white',
-  label: 'pl-12 rounded-l-full',
-  labelSuggestion: '',
-  labelFilter: '',
-  labelWithoutClose: 'pr-12 rounded-r-full',
-  labelWithClose: 'pr-2',
-  close: 'pr-12 pl-4 py-10 rounded-r-full'
-}
-
 export default {
   name: 'wPill',
-  inheritAttrs: false,
-  props: {
-    label: String,
-    canClose: Boolean,
-    suggestion: Boolean
-  },
-  setup: (props, { emit }) => ({
-    c,
-  })
-}
+  inheritAttrs: false
+};
 </script>

dev/pages/Pill.vue

@@ -15,7 +15,7 @@ const modifiers = reactive(buildCheckboxState({ controls: modifierControls }))
     <component-title title="Pill" />
 
     <token :state="modifiers">
-      <w-pill label="Hello Warp" :suggestion="modifiers.Suggestion" :canClose="modifiers.Closeable" />
+      <w-pill label="Hello Warp" :suggestion="modifiers.Suggestion" :can-close="modifiers.Closeable" />
     </token>
 
     <demo-controls>

package.json

@@ -48,8 +48,8 @@
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
     "@warp-ds/core": "^1.0.0",
-    "@warp-ds/component-classes": "^1.0.0-alpha.46",
-    "@warp-ds/uno": "1.0.0-alpha.8",
+    "@warp-ds/component-classes": "^1.0.0-alpha.50",
+    "@warp-ds/uno": "1.0.0-alpha.19",
     "cleave-lite": "^1.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "drnm": "^0.9.0",