feat(icons): migrate icons to composition API

EMP-4438
empathyco · Jul 10, 2024 · 3a31d56 · 3a31d56
1 parent 6b7729f
commit 3a31d56
Show file tree

Hide file tree

Showing 76 changed files with 312 additions and 804 deletions.
diff --git a/packages/_vue3-migration-test/src/components/icons/test-icons.vue b/packages/_vue3-migration-test/src/components/icons/test-icons.vue
@@ -0,0 +1,158 @@
+<template>
+  <ArrowDownIcon class="test-icons" />
+  <ArrowLeftIcon class="test-icons" />
+  <ArrowRightIcon class="test-icons" />
+  <ArrowUpIcon class="test-icons" />
+  <BagIcon class="test-icons" />
+  <BarCodeIcon class="test-icons" />
+  <BarcodeTinyIcon class="test-icons" />
+  <CartFilledIcon class="test-icons" />
+  <CartIcon class="test-icons" />
+  <CheckIcon class="test-icons" />
+  <CheckTinyIcon class="test-icons" />
+  <CheckboxSelectedFilledIcon class="test-icons" />
+  <CheckboxSelectedIcon class="test-icons" />
+  <CheckboxUnselectedFilledIcon class="test-icons" />
+  <CheckboxUnselectedIcon class="test-icons" />
+  <ChevronDownIcon class="test-icons" />
+  <ChevronLeftIcon class="test-icons" />
+  <ChevronRightIcon class="test-icons" />
+  <ChevronTinyDownIcon class="test-icons" />
+  <ChevronTinyLeftIcon class="test-icons" />
+  <ChevronTinyRightIcon class="test-icons" />
+  <ChevronTinyUpIcon class="test-icons" />
+  <ChevronUpIcon class="test-icons" />
+  <CornerArrowLeft class="test-icons" />
+  <CornerArrowRight class="test-icons" />
+  <CrossIcon class="test-icons" />
+  <CrossTinyIcon class="test-icons" />
+  <CuratedCheckFilledIcon class="test-icons" />
+  <CuratedCheckIcon class="test-icons" />
+  <CuratedCheckTinyFilledIcon class="test-icons" />
+  <CuratedCheckTinyIcon class="test-icons" />
+  <DiagonalArrowLeftDownIcon class="test-icons" />
+  <DiagonalArrowLeftTopIcon class="test-icons" />
+  <DiagonalArrowRightDownIcon class="test-icons" />
+  <DiagonalArrowRightTopIcon class="test-icons" />
+  <FiltersIcon class="test-icons" />
+  <Grid1ColIcon class="test-icons" />
+  <Grid2ColIcon class="test-icons" />
+  <Grid2RowsIcon class="test-icons" />
+  <Grid4ColIcon class="test-icons" />
+  <HeartIcon class="test-icons" />
+  <HeartIconFilled class="test-icons" />
+  <HideIcon class="test-icons" />
+  <HistoryIcon class="test-icons" />
+  <HistoryTinyIcon class="test-icons" />
+  <LightBulbOff class="test-icons" />
+  <LightBulbOn class="test-icons" />
+  <MenuIcon class="test-icons" />
+  <MinusIcon class="test-icons" />
+  <MinusTinyIcon class="test-icons" />
+  <PlusIcon class="test-icons" />
+  <PlusTinyIcon class="test-icons" />
+  <RadioButtonSelectedIcon class="test-icons" />
+  <RadioButtonUnselectedIcon class="test-icons" />
+  <SearchIcon class="test-icons" />
+  <SearchTinyIcon class="test-icons" />
+  <SettingsIcon class="test-icons" />
+  <ShowIcon class="test-icons" />
+  <SortAZIcon class="test-icons" />
+  <SortPriceDownIcon class="test-icons" />
+  <SortPriceUpIcon class="test-icons" />
+  <SortRelevancyIcon class="test-icons" />
+  <SortZAIcon class="test-icons" />
+  <StarFilledIcon class="test-icons" />
+  <StarIcon class="test-icons" />
+  <TagFilledIcon class="test-icons" />
+  <TagIcon class="test-icons" />
+  <TrashIcon class="test-icons" />
+  <TrashOpenIcon class="test-icons" />
+  <TrendingIcon class="test-icons" />
+  <TrendingTinyIcon class="test-icons" />
+  <UserFilledIcon class="test-icons" />
+  <UserIcon class="test-icons" />
+</template>
+<script setup lang="ts">
+  import {
+    ArrowDownIcon,
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    ArrowUpIcon,
+    BagIcon,
+    BarCodeIcon,
+    BarcodeTinyIcon,
+    CartFilledIcon,
+    CartIcon,
+    CheckIcon,
+    CheckTinyIcon,
+    CheckboxSelectedFilledIcon,
+    CheckboxSelectedIcon,
+    CheckboxUnselectedFilledIcon,
+    CheckboxUnselectedIcon,
+    ChevronDownIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ChevronTinyDownIcon,
+    ChevronTinyLeftIcon,
+    ChevronTinyRightIcon,
+    ChevronTinyUpIcon,
+    ChevronUpIcon,
+    CornerArrowLeft,
+    CornerArrowRight,
+    CrossIcon,
+    CrossTinyIcon,
+    CuratedCheckFilledIcon,
+    CuratedCheckIcon,
+    CuratedCheckTinyFilledIcon,
+    CuratedCheckTinyIcon,
+    DiagonalArrowLeftDownIcon,
+    DiagonalArrowLeftTopIcon,
+    DiagonalArrowRightDownIcon,
+    DiagonalArrowRightTopIcon,
+    FiltersIcon,
+    Grid1ColIcon,
+    Grid2ColIcon,
+    Grid2RowsIcon,
+    Grid4ColIcon,
+    HeartIcon,
+    HeartIconFilled,
+    HideIcon,
+    HistoryIcon,
+    HistoryTinyIcon,
+    LightBulbOff,
+    LightBulbOn,
+    MenuIcon,
+    MinusIcon,
+    MinusTinyIcon,
+    PlusIcon,
+    PlusTinyIcon,
+    RadioButtonSelectedIcon,
+    RadioButtonUnselectedIcon,
+    SearchIcon,
+    SearchTinyIcon,
+    SettingsIcon,
+    ShowIcon,
+    SortAZIcon,
+    SortPriceDownIcon,
+    SortPriceUpIcon,
+    SortRelevancyIcon,
+    SortZAIcon,
+    StarFilledIcon,
+    StarIcon,
+    TagFilledIcon,
+    TagIcon,
+    TrashIcon,
+    TrashOpenIcon,
+    TrendingIcon,
+    TrendingTinyIcon,
+    UserFilledIcon,
+    UserIcon
+  } from '../../../../x-components/src/components/icons';
+</script>
+<style scoped lang="scss">
+  .test-icons {
+    height: 40px;
+    width: 40px;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
@@ -18,3 +18,4 @@ export { default as TestExtraParams } from './extra-params/test-extra-params.vue
 export { default as TestSearch } from './test-search.vue';
 export { default as TestTagging } from './tagging/test-tagging.vue';
 export { default as TestRenderlessExtraParam } from './extra-params/test-renderless-extra-param.vue';
+export { default as TestIcons } from './icons/test-icons.vue';
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -47,7 +47,8 @@ import {
   TestSearch,
   TestExperienceControls,
   TestTagging,
-  TestRenderlessExtraParam
+  TestRenderlessExtraParam,
+  TestIcons
 } from './';
 
 const routes = [
@@ -290,6 +291,11 @@ const routes = [
     path: '/renderless-extra-param',
     name: 'RenderlessExtraParam',
     component: TestRenderlessExtraParam
+  },
+  {
+    path: '/icons',
+    name: 'Icons',
+    component: TestIcons
   }
 ];
 

diff --git a/packages/x-components/src/components/icons/arrow-down.vue b/packages/x-components/src/components/icons/arrow-down.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 1.5L4 6.24683"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/arrow-left.vue b/packages/x-components/src/components/icons/arrow-left.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.5 4H1.75317"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/arrow-right.vue b/packages/x-components/src/components/icons/arrow-right.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.5 4H6.24683"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/arrow-up.vue b/packages/x-components/src/components/icons/arrow-up.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 6.5L4 1.75317"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/bag.vue b/packages/x-components/src/components/icons/bag.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.8 2.29995H6.29995M2.33333 1.19995L1.5 2.29995V6.42561C2.61092 6.42561 4.85446 6.42561 6.5 6.42561V2.29995L5.66667 1.19995H2.33333Z"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/bar-code.vue b/packages/x-components/src/components/icons/bar-code.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2.75 2V6M3.8501 2V6M4.25 2V6M5.25 2V6M1 1H7V7H1V1Z"
       stroke="currentColor"
@@ -13,7 +8,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/barcode-tiny.vue b/packages/x-components/src/components/icons/barcode-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.16667 2.67202V5.33869M3.83334 2.67202V5.33869M4.16667 2.67202V5.33869M4.83334 2.67202V5.33869M2 2.00537H6V6.00537H2V2.00537Z"
       stroke="currentColor"
@@ -13,7 +8,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/cart-filled.vue b/packages/x-components/src/components/icons/cart-filled.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.13059 6.84466C3.38158 6.84466 3.62037 6.6564 3.62037 6.38275C3.62037 6.10911 3.38158 5.92085 3.13059 5.92085C2.87961 5.92085 2.64082 6.10911 2.64082 6.38275C2.64082 6.6564 2.87961 6.84466 3.13059 6.84466ZM5.83506 6.84466C6.08605 6.84466 6.32483 6.6564 6.32483 6.38275C6.32483 6.10911 6.08605 5.92085 5.83506 5.92085C5.58407 5.92085 5.34529 6.10911 5.34529 6.38275C5.34529 6.6564 5.58407 6.84466 5.83506 6.84466Z"
       fill="currentColor"
@@ -23,7 +18,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/cart.vue b/packages/x-components/src/components/icons/cart.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.13059 6.84466C3.38158 6.84466 3.62037 6.6564 3.62037 6.38275C3.62037 6.10911 3.38158 5.92085 3.13059 5.92085C2.87961 5.92085 2.64082 6.10911 2.64082 6.38275C2.64082 6.6564 2.87961 6.84466 3.13059 6.84466ZM5.83506 6.84466C6.08605 6.84466 6.32483 6.6564 6.32483 6.38275C6.32483 6.10911 6.08605 5.92085 5.83506 5.92085C5.58407 5.92085 5.34529 6.10911 5.34529 6.38275C5.34529 6.6564 5.58407 6.84466 5.83506 6.84466Z"
       stroke="currentColor"
@@ -21,7 +16,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/icons/check-tiny.vue b/packages/x-components/src/components/icons/check-tiny.vue
@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6 2.50537C5.08333 3.50537 4.16667 4.50537 3.25 5.50537L2 4.14173"
       stroke="currentColor"
@@ -14,7 +9,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>