From badff7a75e9bb5e88f5eaa30653959e0431e3209 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Tue, 3 Sep 2024 08:49:08 +0200
Subject: [PATCH 01/13] feat: implement select

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  59 ++++-
 src/components/Select/WSelect.spec.ts         |  61 +++++
 src/components/Select/WSelect.stories.ts      |  59 +++++
 src/components/Select/WSelect.ts              |   6 +
 src/components/Select/WSelect.vue             | 209 +++++++++++++++++
 .../Select/__snapshots__/WSelect.spec.ts.snap | 215 ++++++++++++++++++
 svgComponent.d.ts                             |   5 +-
 8 files changed, 612 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Select/WSelect.spec.ts
 create mode 100644 src/components/Select/WSelect.stories.ts
 create mode 100644 src/components/Select/WSelect.ts
 create mode 100644 src/components/Select/WSelect.vue
 create mode 100644 src/components/Select/__snapshots__/WSelect.spec.ts.snap

diff --git a/package.json b/package.json
index a4b9b0f..41b62cb 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "gsap": "^3.12.5",
     "postcss-cli": "^11.0.0",
     "sass": "^1.77.8",
-    "vite-svg-loader": "^5.1.0"
+    "vite-svg-loader": "^5.1.0",
+    "vue-select": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
@@ -49,6 +50,7 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.5",
+    "@types/vue-select": "^3.16.8",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 28ebf69..be808bd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       vue:
         specifier: 3.4.38
         version: 3.4.38(typescript@5.4.5)
+      vue-select:
+        specifier: ^4.0.0-beta.3
+        version: 4.0.0-beta.6(vue@3.4.38(typescript@5.4.5))
     devDependencies:
       '@chromatic-com/storybook':
         specifier: ^1.6.1
@@ -63,6 +66,9 @@ importers:
       '@types/node':
         specifier: ^20.14.5
         version: 20.16.2
+      '@types/vue-select':
+        specifier: ^3.16.8
+        version: 3.16.8
       '@vitejs/plugin-vue':
         specifier: ^5.0.5
         version: 5.1.2(vite@5.4.2(@types/node@20.16.2)(sass@1.77.8))(vue@3.4.38(typescript@5.4.5))
@@ -1369,6 +1375,9 @@ packages:
   '@types/uuid@9.0.8':
     resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
 
+  '@types/vue-select@3.16.8':
+    resolution: {integrity: sha512-ZBovlBrWf/wnPqCmMw24ryIC7ghQLfIBmkl1qssqBGONdx7yOmi/GLwtPxll/6UwXWGNWMeokleOgVAZPis+Ag==}
+
   '@typescript-eslint/eslint-plugin@7.18.0':
     resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -1494,6 +1503,9 @@ packages:
   '@vue/compiler-dom@3.4.38':
     resolution: {integrity: sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==}
 
+  '@vue/compiler-sfc@2.7.16':
+    resolution: {integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==}
+
   '@vue/compiler-sfc@3.4.38':
     resolution: {integrity: sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==}
 
@@ -3222,6 +3234,11 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
+  prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
   prettier@3.3.3:
     resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
     engines: {node: '>=14'}
@@ -3952,12 +3969,24 @@ packages:
     peerDependencies:
       vue: '>=2'
 
-  vue-tsc@2.1.4:
-    resolution: {integrity: sha512-XTzMXQcsixAvNbpou/9qngEsZawaiJRZH3Ja+lfgRfv2A1TJv9vnZ/Kyv7XxPqv/TaZVFSnjGpM87VbWIg6yQg==}
+  vue-select@4.0.0-beta.6:
+    resolution: {integrity: sha512-K+zrNBSpwMPhAxYLTCl56gaMrWZGgayoWCLqe5rWwkB8aUbAUh7u6sXjIR7v4ckp2WKC7zEEUY27g6h1MRsIHw==}
+    peerDependencies:
+      vue: 3.x
+
+  vue-template-compiler@2.7.16:
+    resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
+
+  vue-tsc@2.0.21:
+    resolution: {integrity: sha512-E6x1p1HaHES6Doy8pqtm7kQern79zRtIewkf9fiv7Y43Zo4AFDS5hKi+iHi2RwEhqRmuiwliB1LCEFEGwvxQnw==}
     hasBin: true
     peerDependencies:
       typescript: '>=5.0.0'
 
+  vue@2.7.16:
+    resolution: {integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==}
+    deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
+
   vue@3.4.38:
     resolution: {integrity: sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==}
     peerDependencies:
@@ -5561,6 +5590,10 @@ snapshots:
 
   '@types/uuid@9.0.8': {}
 
+  '@types/vue-select@3.16.8':
+    dependencies:
+      vue: 2.7.16
+
   '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -5744,6 +5777,14 @@ snapshots:
       '@vue/compiler-core': 3.4.38
       '@vue/shared': 3.4.38
 
+  '@vue/compiler-sfc@2.7.16':
+    dependencies:
+      '@babel/parser': 7.25.6
+      postcss: 8.4.41
+      source-map: 0.6.1
+    optionalDependencies:
+      prettier: 2.8.8
+
   '@vue/compiler-sfc@3.4.38':
     dependencies:
       '@babel/parser': 7.25.6
@@ -7520,6 +7561,9 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
+  prettier@2.8.8:
+    optional: true
+
   prettier@3.3.3: {}
 
   pretty-format@27.5.1:
@@ -8354,13 +8398,22 @@ snapshots:
     dependencies:
       vue: 3.4.38(typescript@5.4.5)
 
-  vue-tsc@2.1.4(typescript@5.4.5):
+  vue-select@4.0.0-beta.6(vue@3.4.38(typescript@5.4.5)):
+    dependencies:
+      vue: 3.4.38(typescript@5.4.5)
+
+  vue-template-compiler@2.7.16:
     dependencies:
       '@volar/typescript': 2.4.1
       '@vue/language-core': 2.1.4(typescript@5.4.5)
       semver: 7.6.3
       typescript: 5.4.5
 
+  vue@2.7.16:
+    dependencies:
+      '@vue/compiler-sfc': 2.7.16
+      csstype: 3.1.3
+
   vue@3.4.38(typescript@5.4.5):
     dependencies:
       '@vue/compiler-dom': 3.4.38
diff --git a/src/components/Select/WSelect.spec.ts b/src/components/Select/WSelect.spec.ts
new file mode 100644
index 0000000..2ca7ec1
--- /dev/null
+++ b/src/components/Select/WSelect.spec.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import WSelect from './WSelect.vue'
+import { DropdownPosition } from './WSelect'
+import Icon from '@/assets/svg/navigation-cursor.svg?component'
+
+describe('WSelect', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WSelect, {
+      emits: ['update:modelValue'],
+      props: {
+        dropdownPosition: DropdownPosition.bottom,
+        modelValue: {
+          key: 'en',
+          label: 'English',
+          icon: null
+        },
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        options: [{
+            key: 'en',
+            label: 'English',
+            icon: null
+          },{
+            key: 'es',
+            label: 'Español',
+            icon: null,
+          }
+        ]
+      },
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('renders properly an icon when provided', () => {
+    const wrapper = mount(WSelect, {
+      emits: ['update:modelValue'],
+      props: {
+        dropdownPosition: DropdownPosition.bottom,
+        modelValue: {
+          key: 'en',
+          label: 'English',
+          icon: Icon
+        },
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        options: [{
+            key: 'en',
+            label: 'English',
+            icon: Icon
+          },{
+            key: 'es',
+            label: 'Español',
+            icon: Icon,
+          }
+        ]
+      },
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
diff --git a/src/components/Select/WSelect.stories.ts b/src/components/Select/WSelect.stories.ts
new file mode 100644
index 0000000..1736629
--- /dev/null
+++ b/src/components/Select/WSelect.stories.ts
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WSelect from './WSelect.vue'
+import { dropdownPostions } from './WSelect'
+import { ref } from 'vue'
+import 'vue-select/dist/vue-select.css'
+import Icon from '@/assets/svg/navigation-cursor.svg?component'
+
+const meta: any = {
+  title: 'Example/WSelect',
+  component: WSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    dropdownPosition: { control: 'select', options: dropdownPostions },
+  },
+  args: {
+    options: [{
+      key: 'en',
+      label: 'English',
+      icon: null,
+    },{
+      key: 'es',
+      label: 'Español',
+      icon: null,
+    }]}
+} satisfies Meta<typeof WSelect>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { WSelect },
+    setup() {
+      const model = ref({
+        key: 'en',
+        label: 'English',
+        icon: null,
+      });
+
+      function update($event: any) {
+        model.value = $event
+      }
+  
+      return { args, model, update };
+    },
+    template: `<WSelect v-bind="args" v-model="model" @update:model-value="update" />`,
+    args: {
+      options: [{
+        key: 'en',
+        label: 'English',
+        icon: null,
+      },{
+        key: 'es',
+        label: 'Español',
+        icon: Icon,
+      }]
+    }
+  })
+}
\ No newline at end of file
diff --git a/src/components/Select/WSelect.ts b/src/components/Select/WSelect.ts
new file mode 100644
index 0000000..2dca31b
--- /dev/null
+++ b/src/components/Select/WSelect.ts
@@ -0,0 +1,6 @@
+export type Option = {key: string, label: string, icon: string | null}
+export enum DropdownPosition {
+  top = 'top',
+  bottom = 'bottom'
+}
+export const dropdownPostions = Object.values(DropdownPosition)
\ No newline at end of file
diff --git a/src/components/Select/WSelect.vue b/src/components/Select/WSelect.vue
new file mode 100644
index 0000000..6ffefcf
--- /dev/null
+++ b/src/components/Select/WSelect.vue
@@ -0,0 +1,209 @@
+<template>
+  <vSelect
+    v-model="model"
+    transition="dropdown"
+    ref="select"
+    :options="options"
+    :clearable="false"
+    :filterable="false"
+    :searchable="false"
+    class="language-selector"
+  >
+    <template #selected-option-container="{ option }">
+      <span class="vs__selected">
+        <component
+          :is="(option as Option).icon"
+          v-if="(option as Option).icon"
+          class="dropdown-items"
+        />
+        {{ (option as Option).label }}
+      </span>
+    </template>
+
+    <template #option="option">
+      <div class="option">
+        <component
+          :is="(option as Option).icon"
+          v-if="(option as Option).icon"
+          class="dropdown-items"
+        />
+        <span>{{ (option as Option).label }}</span>
+      </div>
+    </template>
+  </vSelect>
+</template>
+<script setup lang="ts">
+import vSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
+import { dropdownPostions, DropdownPosition} from './WSelect'
+import { PropType, computed, DefineComponent, SVGAttributes } from 'vue'
+
+type Option = { key: string; label: string; icon: DefineComponent<SVGAttributes> | null }
+
+const model = defineModel()
+const props = defineProps({
+  options: {
+    type: Array as PropType<Array<Option>>,
+    required: true,
+  },
+  dropdownPosition: {
+    type: String as PropType<DropdownPosition>,
+    default: DropdownPosition.bottom,
+    validator(value: DropdownPosition) {
+      return dropdownPostions.includes(value)
+    }
+  },
+  hexPrimaryColor: {
+    type: String,
+    default: '#000000'
+  },
+  hexSecondaryColor: {
+    type: String,
+    default: '#ffffff'
+  }
+})
+
+const position = computed(() => props.dropdownPosition === DropdownPosition.top ? '-210%' : '110%')
+</script>
+
+<style lang="scss">
+
+.dropdown-enter {
+  transform: translateY(-8px);
+}
+
+.dropdown-enter-to {
+  transform: translateY(0px);
+}
+.dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.dropdown-leave {
+    transform: translateY(0px);
+}
+
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.dropdown-leave-from {
+    transform: translateY(0);
+}
+
+.dropdown-leave-active {
+    transition: all .2s cubic-bezier(.42,0,.58,1);
+    transition-delay: .5s;
+}
+
+.dropdown-enter-active {
+    transition: all .2s cubic-bezier(.42,0,.58,1);
+    transition-delay: .5s;
+}
+.vs--open {
+  .vs__open-indicator {
+    transform: rotate(180deg) scale(0.5) !important;
+  }
+}
+.language-selector {
+  @apply bg-[v-bind(hexPrimaryColor)] w-min px-md py-xs rounded-full flex justify-center;
+  .option {
+    @apply grid grid-cols-[max-content_max-content] justify-start items-center h-max;
+  }
+  .vs__dropdown-toggle {
+    @apply grid grid-flow-col gap-xs justify-center items-center;
+    padding: 0;
+    .vs__selected-options {
+      padding: 0;
+    }
+  }
+  .vs__dropdown-toggle,
+  .vs__dropdown-menu {
+    @apply rounded-lg;
+    background: v-bind(hexPrimaryColor);
+    box-shadow: none;
+    border: none;
+    color: v-bind(hexSecondaryColor);
+    min-width: max-content;
+    .dropdown-items {
+      margin-right: 8px;
+    }
+  }
+  .vs__dropdown-menu {
+    z-index: -10;
+    top: v-bind(position);
+    left: 0px;
+    background: v-bind(hexSecondaryColor);
+    border: 2px solid v-bind(hexPrimaryColor);
+    border-radius: 16px;
+  }
+  .vs__open-indicator {
+    font-size: 8px;
+  }
+
+  .vs__dropdown-option {
+    font-family: 'NeueMachina-Regular', sans-serif;
+    color: v-bind(hexPrimaryColor)
+  }
+
+  .vs__dropdown-option--highlight {
+    z-index: 10;
+    color: v-bind(hexSecondaryColor);
+    background: v-bind(hexPrimaryColor)
+  }
+
+  .vs__clear,
+  .vs__open-indicator {
+    fill: v-bind(hexSecondaryColor);
+    transform: scale(0.5);
+    transition: transform 150ms cubic-bezier(1, -0.115, 0.975, 0.855);
+    transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
+  }
+
+  .vs__selected {
+    color: v-bind(hexSecondaryColor);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  &:hover {
+    .vs__selected {
+      color: v-bind(hexSecondaryColor);
+    }
+    .vs__open-indicator {
+      color: v-bind(hexSecondaryColor);
+    }
+  }
+  // remove extra space
+  .vs__search {
+    padding: 0 !important;
+  }
+  .vs__actions {
+    padding: 0;
+  }
+}
+
+// avoid decrease size on open
+.vs--single.vs--open .vs__selected {
+  opacity: 1 !important;
+  position: inherit !important;
+}
+
+// @media (max-width: 706px) {
+//   .language-selector {
+//     padding: 8px 8px;
+//     .vs__selected {
+//       width: 100px;
+//     }
+//     .vs__dropdown-menu {
+//       top: -80px;
+//       left: 24px;
+//     }
+//   }
+// }
+</style>
+
diff --git a/src/components/Select/__snapshots__/WSelect.spec.ts.snap b/src/components/Select/__snapshots__/WSelect.spec.ts.snap
new file mode 100644
index 0000000..81f9184
--- /dev/null
+++ b/src/components/Select/__snapshots__/WSelect.spec.ts.snap
@@ -0,0 +1,215 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`WSelect > renders properly 1`] = `
+<div
+  class="v-select vs--single vs--unsearchable language-selector"
+  dir="auto"
+>
+  
+  
+  <div
+    aria-expanded="false"
+    aria-label="Search for option"
+    aria-owns="vs1__listbox"
+    class="vs__dropdown-toggle"
+    id="vs1__combobox"
+    role="combobox"
+  >
+    <div
+      class="vs__selected-options"
+    >
+      
+      
+      <span
+        class="vs__selected"
+      >
+        <!--v-if-->
+         English
+      </span>
+      
+      
+      
+      <input
+        aria-autocomplete="list"
+        aria-controls="vs1__listbox"
+        aria-labelledby="vs1__combobox"
+        autocomplete="off"
+        class="vs__search"
+        readonly=""
+        type="search"
+        value=""
+      />
+      
+    </div>
+    <div
+      class="vs__actions"
+    >
+      <button
+        aria-label="Clear Selected"
+        class="vs__clear"
+        style="display: none;"
+        title="Clear Selected"
+        type="button"
+      >
+        <svg
+          height="10"
+          width="10"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
+          />
+        </svg>
+      </button>
+      
+      <svg
+        class="vs__open-indicator"
+        height="10"
+        role="presentation"
+        width="14"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
+        />
+      </svg>
+      
+      
+      <div
+        class="vs__spinner"
+        style="display: none;"
+      >
+        Loading...
+      </div>
+      
+    </div>
+  </div>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="dropdown"
+    persisted="false"
+  >
+    <ul
+      id="vs1__listbox"
+      role="listbox"
+      style="display: none; visibility: hidden;"
+    />
+  </transition-stub>
+  
+  
+</div>
+`;
+
+exports[`WSelect > renders properly an icon when provided 1`] = `
+<div
+  class="v-select vs--single vs--unsearchable language-selector"
+  dir="auto"
+>
+  
+  
+  <div
+    aria-expanded="false"
+    aria-label="Search for option"
+    aria-owns="vs2__listbox"
+    class="vs__dropdown-toggle"
+    id="vs2__combobox"
+    role="combobox"
+  >
+    <div
+      class="vs__selected-options"
+    >
+      
+      
+      <span
+        class="vs__selected"
+      >
+        <svg
+          class="dropdown-items"
+          fill="none"
+          height="13"
+          viewBox="0 0 12 13"
+          width="12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11.17 6.39 5.89 9.44.61 12.48V.29l5.28 3.05z"
+            fill="#00E2ED"
+          />
+        </svg>
+         English
+      </span>
+      
+      
+      
+      <input
+        aria-autocomplete="list"
+        aria-controls="vs2__listbox"
+        aria-labelledby="vs2__combobox"
+        autocomplete="off"
+        class="vs__search"
+        readonly=""
+        type="search"
+        value=""
+      />
+      
+    </div>
+    <div
+      class="vs__actions"
+    >
+      <button
+        aria-label="Clear Selected"
+        class="vs__clear"
+        style="display: none;"
+        title="Clear Selected"
+        type="button"
+      >
+        <svg
+          height="10"
+          width="10"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
+          />
+        </svg>
+      </button>
+      
+      <svg
+        class="vs__open-indicator"
+        height="10"
+        role="presentation"
+        width="14"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
+        />
+      </svg>
+      
+      
+      <div
+        class="vs__spinner"
+        style="display: none;"
+      >
+        Loading...
+      </div>
+      
+    </div>
+  </div>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="dropdown"
+    persisted="false"
+  >
+    <ul
+      id="vs2__listbox"
+      role="listbox"
+      style="display: none; visibility: hidden;"
+    />
+  </transition-stub>
+  
+  
+</div>
+`;
diff --git a/svgComponent.d.ts b/svgComponent.d.ts
index c4712d5..b2dcc09 100644
--- a/svgComponent.d.ts
+++ b/svgComponent.d.ts
@@ -1,5 +1,6 @@
 declare module '*.svg?component' {
-  const value: string;
-  export default value;
+  import { DefineComponent, SVGAttributes } from 'vue'
+  const src: DefineComponent<SVGAttributes>
+  export default src
 }
 declare module '*.vue';
\ No newline at end of file

From 9d4554c5bd6141eb1de0c9a6042d37b36a5b24dc Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Tue, 3 Sep 2024 18:27:55 +0200
Subject: [PATCH 02/13] feat: implement tooltip

---
 src/components/Select/WSelect.spec.ts         |   6 +-
 .../Select/__snapshots__/WSelect.spec.ts.snap | 282 +++++-------------
 src/components/Tooltip/WTooltip.spec.ts       |  19 ++
 src/components/Tooltip/WTooltip.stories.ts    |  30 ++
 src/components/Tooltip/WTooltip.vue           |  25 ++
 .../__snapshots__/WTooltip.spec.ts.snap       |  26 ++
 6 files changed, 179 insertions(+), 209 deletions(-)
 create mode 100644 src/components/Tooltip/WTooltip.spec.ts
 create mode 100644 src/components/Tooltip/WTooltip.stories.ts
 create mode 100644 src/components/Tooltip/WTooltip.vue
 create mode 100644 src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap

diff --git a/src/components/Select/WSelect.spec.ts b/src/components/Select/WSelect.spec.ts
index 2ca7ec1..75104af 100644
--- a/src/components/Select/WSelect.spec.ts
+++ b/src/components/Select/WSelect.spec.ts
@@ -1,12 +1,12 @@
 import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import WSelect from './WSelect.vue'
 import { DropdownPosition } from './WSelect'
 import Icon from '@/assets/svg/navigation-cursor.svg?component'
 
 describe('WSelect', () => {
   it('renders properly', () => {
-    const wrapper = mount(WSelect, {
+    const wrapper = shallowMount(WSelect, {
       emits: ['update:modelValue'],
       props: {
         dropdownPosition: DropdownPosition.bottom,
@@ -33,7 +33,7 @@ describe('WSelect', () => {
   })
 
   it('renders properly an icon when provided', () => {
-    const wrapper = mount(WSelect, {
+    const wrapper = shallowMount(WSelect, {
       emits: ['update:modelValue'],
       props: {
         dropdownPosition: DropdownPosition.bottom,
diff --git a/src/components/Select/__snapshots__/WSelect.spec.ts.snap b/src/components/Select/__snapshots__/WSelect.spec.ts.snap
index 81f9184..8611945 100644
--- a/src/components/Select/__snapshots__/WSelect.spec.ts.snap
+++ b/src/components/Select/__snapshots__/WSelect.spec.ts.snap
@@ -1,215 +1,85 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`WSelect > renders properly 1`] = `
-<div
-  class="v-select vs--single vs--unsearchable language-selector"
+<anonymous-stub
+  appendtobody="false"
+  autocomplete="off"
+  calculateposition="[Function]"
+  class="language-selector"
+  clearable="false"
+  clearsearchonblur="[Function]"
+  clearsearchonselect="true"
+  closeonselect="true"
+  components="[object Object]"
+  createoption="[Function]"
+  deselectfromdropdown="false"
   dir="auto"
->
-  
-  
-  <div
-    aria-expanded="false"
-    aria-label="Search for option"
-    aria-owns="vs1__listbox"
-    class="vs__dropdown-toggle"
-    id="vs1__combobox"
-    role="combobox"
-  >
-    <div
-      class="vs__selected-options"
-    >
-      
-      
-      <span
-        class="vs__selected"
-      >
-        <!--v-if-->
-         English
-      </span>
-      
-      
-      
-      <input
-        aria-autocomplete="list"
-        aria-controls="vs1__listbox"
-        aria-labelledby="vs1__combobox"
-        autocomplete="off"
-        class="vs__search"
-        readonly=""
-        type="search"
-        value=""
-      />
-      
-    </div>
-    <div
-      class="vs__actions"
-    >
-      <button
-        aria-label="Clear Selected"
-        class="vs__clear"
-        style="display: none;"
-        title="Clear Selected"
-        type="button"
-      >
-        <svg
-          height="10"
-          width="10"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
-          />
-        </svg>
-      </button>
-      
-      <svg
-        class="vs__open-indicator"
-        height="10"
-        role="presentation"
-        width="14"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
-        />
-      </svg>
-      
-      
-      <div
-        class="vs__spinner"
-        style="display: none;"
-      >
-        Loading...
-      </div>
-      
-    </div>
-  </div>
-  <transition-stub
-    appear="false"
-    css="true"
-    name="dropdown"
-    persisted="false"
-  >
-    <ul
-      id="vs1__listbox"
-      role="listbox"
-      style="display: none; visibility: hidden;"
-    />
-  </transition-stub>
-  
-  
-</div>
+  disabled="false"
+  dropdownshouldopen="[Function]"
+  filter="[Function]"
+  filterable="false"
+  filterby="[Function]"
+  getoptionkey="[Function]"
+  getoptionlabel="[Function]"
+  label="label"
+  mapkeydown="[Function]"
+  modelvalue="[object Object]"
+  multiple="false"
+  nodrop="false"
+  options="[object Object],[object Object]"
+  placeholder=""
+  pushtags="false"
+  reduce="[Function]"
+  resetonoptionschange="false"
+  searchable="false"
+  searchinputqueryselector="[type=search]"
+  selectable="[Function]"
+  selectonkeycodes="13"
+  selectontab="false"
+  taggable="false"
+  transition="dropdown"
+  uid="1"
+/>
 `;
 
 exports[`WSelect > renders properly an icon when provided 1`] = `
-<div
-  class="v-select vs--single vs--unsearchable language-selector"
+<anonymous-stub
+  appendtobody="false"
+  autocomplete="off"
+  calculateposition="[Function]"
+  class="language-selector"
+  clearable="false"
+  clearsearchonblur="[Function]"
+  clearsearchonselect="true"
+  closeonselect="true"
+  components="[object Object]"
+  createoption="[Function]"
+  deselectfromdropdown="false"
   dir="auto"
->
-  
-  
-  <div
-    aria-expanded="false"
-    aria-label="Search for option"
-    aria-owns="vs2__listbox"
-    class="vs__dropdown-toggle"
-    id="vs2__combobox"
-    role="combobox"
-  >
-    <div
-      class="vs__selected-options"
-    >
-      
-      
-      <span
-        class="vs__selected"
-      >
-        <svg
-          class="dropdown-items"
-          fill="none"
-          height="13"
-          viewBox="0 0 12 13"
-          width="12"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11.17 6.39 5.89 9.44.61 12.48V.29l5.28 3.05z"
-            fill="#00E2ED"
-          />
-        </svg>
-         English
-      </span>
-      
-      
-      
-      <input
-        aria-autocomplete="list"
-        aria-controls="vs2__listbox"
-        aria-labelledby="vs2__combobox"
-        autocomplete="off"
-        class="vs__search"
-        readonly=""
-        type="search"
-        value=""
-      />
-      
-    </div>
-    <div
-      class="vs__actions"
-    >
-      <button
-        aria-label="Clear Selected"
-        class="vs__clear"
-        style="display: none;"
-        title="Clear Selected"
-        type="button"
-      >
-        <svg
-          height="10"
-          width="10"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
-          />
-        </svg>
-      </button>
-      
-      <svg
-        class="vs__open-indicator"
-        height="10"
-        role="presentation"
-        width="14"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
-        />
-      </svg>
-      
-      
-      <div
-        class="vs__spinner"
-        style="display: none;"
-      >
-        Loading...
-      </div>
-      
-    </div>
-  </div>
-  <transition-stub
-    appear="false"
-    css="true"
-    name="dropdown"
-    persisted="false"
-  >
-    <ul
-      id="vs2__listbox"
-      role="listbox"
-      style="display: none; visibility: hidden;"
-    />
-  </transition-stub>
-  
-  
-</div>
+  disabled="false"
+  dropdownshouldopen="[Function]"
+  filter="[Function]"
+  filterable="false"
+  filterby="[Function]"
+  getoptionkey="[Function]"
+  getoptionlabel="[Function]"
+  label="label"
+  mapkeydown="[Function]"
+  modelvalue="[object Object]"
+  multiple="false"
+  nodrop="false"
+  options="[object Object],[object Object]"
+  placeholder=""
+  pushtags="false"
+  reduce="[Function]"
+  resetonoptionschange="false"
+  searchable="false"
+  searchinputqueryselector="[type=search]"
+  selectable="[Function]"
+  selectonkeycodes="13"
+  selectontab="false"
+  taggable="false"
+  transition="dropdown"
+  uid="2"
+/>
 `;
diff --git a/src/components/Tooltip/WTooltip.spec.ts b/src/components/Tooltip/WTooltip.spec.ts
new file mode 100644
index 0000000..291b2da
--- /dev/null
+++ b/src/components/Tooltip/WTooltip.spec.ts
@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import WTooltip from './WTooltip.vue'
+
+describe('WTooltip', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WTooltip, {
+      props: {
+        bgColor: '#000',
+      },
+      slots: {
+        main: `<p>Text</p>`,
+        tooltip: `<p class="text-white-50">Text info</p>`
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
diff --git a/src/components/Tooltip/WTooltip.stories.ts b/src/components/Tooltip/WTooltip.stories.ts
new file mode 100644
index 0000000..02c25a3
--- /dev/null
+++ b/src/components/Tooltip/WTooltip.stories.ts
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WTooltip from './WTooltip.vue'
+
+const meta: any = {
+  title: 'Example/WTooltip',
+  component: WTooltip,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    bgColor: '#000',
+  },
+} satisfies Meta<typeof WTooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { WTooltip },
+    setup() {
+      return { args }
+    },
+    template: `<WTooltip v-bind="args"><template #tooltip><p class="text-white-50 w-[200px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></template><template #main>
+              <span class="text-xs ml-xs">ⓘ</span>
+            </template></WTooltip>`,
+    args: {
+      bgColor: 'black-950',
+    }
+  })
+}
diff --git a/src/components/Tooltip/WTooltip.vue b/src/components/Tooltip/WTooltip.vue
new file mode 100644
index 0000000..7b5c6d2
--- /dev/null
+++ b/src/components/Tooltip/WTooltip.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="group inline relative p-[4px] -p-[4px]">
+    <slot name="main"></slot>
+    <div
+      class="tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline hover:inline transition-opacity text-sm rounded-md absolute bottom-md -translate-x-[50%] mb-sm"
+    >
+      <slot name="tooltip"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  bgColor: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.tooltip-container {
+  @apply bg-[v-bind(bgColor)];
+}
+</style>
diff --git a/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap b/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap
new file mode 100644
index 0000000..acbf789
--- /dev/null
+++ b/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap
@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`WTooltip > renders properly 1`] = `
+<div
+  class="group inline relative p-[4px] -p-[4px]"
+  data-v-38c68585=""
+>
+  
+  <p>
+    Text
+  </p>
+  
+  <div
+    class="tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline hover:inline transition-opacity text-sm rounded-md absolute bottom-md -translate-x-[50%] mb-sm"
+    data-v-38c68585=""
+  >
+    
+    <p
+      class="text-white-50"
+    >
+      Text info
+    </p>
+    
+  </div>
+</div>
+`;

From 228022eea0a50e57fa6d0a76a13c99c230808e90 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Wed, 4 Sep 2024 10:34:16 +0200
Subject: [PATCH 03/13] feat: export select and tooltip components

---
 src/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 9fbe31c..de5d888 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,8 +26,9 @@ import WNavbar from './components/Navbar/WNavbar.vue'
 import WPagination from './components/pagination/WPagination.vue'
 
 import WSection from './components/Section/WSection.vue'
-
+import WSelect from './components/Select/WSelect.vue'
 import WSpinner from './components/Spinner/WSpinner.vue'
+import WTooltip from './components/Tooltip/WTooltip.vue'
 
 import WSocialsBar from './components/SocialsBar/WSocialsBar.vue'
 export { SOCIAL_URLS } from './components/SocialsBar/WSocialsBar'
@@ -46,6 +47,7 @@ export {
   WNavbar,
   WPagination,
   WSection,
+  WSelect,
   WSocialsBar,
   WSpinner
 }
@@ -63,7 +65,9 @@ export type WNavbar = typeof WNavbar
 export type WPagination = typeof WPagination
 export type WSection = typeof WSection
 export type WSocialsBar = typeof WSocialsBar
+export type WSelect = typeof WSelect
 export type WSpinner = typeof WSpinner
+export type WTooltip = typeof WTooltip
 
 import type { App } from 'vue'
 
@@ -83,7 +87,9 @@ const WComponents = {
     app.component('WPagination', WPagination)
     app.component('WSection', WSection)
     app.component('WSocialsBar', WSocialsBar)
+    app.component('WSelect', WSelect)
     app.component('WSpinner', WSpinner)
+    app.component('WTooltip', WTooltip)
   }
 }
 

From 2945a62ae7d5aa4afaf4e0da898ee12507307808 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Wed, 4 Sep 2024 11:19:26 +0200
Subject: [PATCH 04/13] refactor: update enums

---
 src/components/Select/WSelect.spec.ts | 4 ++--
 src/components/Select/WSelect.ts      | 4 ++--
 src/components/Select/WSelect.vue     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Select/WSelect.spec.ts b/src/components/Select/WSelect.spec.ts
index 75104af..fa8017b 100644
--- a/src/components/Select/WSelect.spec.ts
+++ b/src/components/Select/WSelect.spec.ts
@@ -9,7 +9,7 @@ describe('WSelect', () => {
     const wrapper = shallowMount(WSelect, {
       emits: ['update:modelValue'],
       props: {
-        dropdownPosition: DropdownPosition.bottom,
+        dropdownPosition: DropdownPosition.Bottom,
         modelValue: {
           key: 'en',
           label: 'English',
@@ -36,7 +36,7 @@ describe('WSelect', () => {
     const wrapper = shallowMount(WSelect, {
       emits: ['update:modelValue'],
       props: {
-        dropdownPosition: DropdownPosition.bottom,
+        dropdownPosition: DropdownPosition.Bottom,
         modelValue: {
           key: 'en',
           label: 'English',
diff --git a/src/components/Select/WSelect.ts b/src/components/Select/WSelect.ts
index 2dca31b..e5b0cd4 100644
--- a/src/components/Select/WSelect.ts
+++ b/src/components/Select/WSelect.ts
@@ -1,6 +1,6 @@
 export type Option = {key: string, label: string, icon: string | null}
 export enum DropdownPosition {
-  top = 'top',
-  bottom = 'bottom'
+  Top = 'top',
+  Bottom = 'bottom'
 }
 export const dropdownPostions = Object.values(DropdownPosition)
\ No newline at end of file
diff --git a/src/components/Select/WSelect.vue b/src/components/Select/WSelect.vue
index 6ffefcf..0a88bfc 100644
--- a/src/components/Select/WSelect.vue
+++ b/src/components/Select/WSelect.vue
@@ -48,7 +48,7 @@ const props = defineProps({
   },
   dropdownPosition: {
     type: String as PropType<DropdownPosition>,
-    default: DropdownPosition.bottom,
+    default: DropdownPosition.Bottom,
     validator(value: DropdownPosition) {
       return dropdownPostions.includes(value)
     }
@@ -63,7 +63,7 @@ const props = defineProps({
   }
 })
 
-const position = computed(() => props.dropdownPosition === DropdownPosition.top ? '-210%' : '110%')
+const position = computed(() => props.dropdownPosition === DropdownPosition.Top ? '-210%' : '110%')
 </script>
 
 <style lang="scss">

From 953f7d17c2a5c5e3cfd5aab1b8d3170d7fb41f6a Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Wed, 4 Sep 2024 11:26:55 +0200
Subject: [PATCH 05/13] fix: svg type error

---
 src/components/icon/WIcon.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/icon/WIcon.vue b/src/components/icon/WIcon.vue
index 4d676b2..7a99551 100644
--- a/src/components/icon/WIcon.vue
+++ b/src/components/icon/WIcon.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, DefineComponent, PropType, SVGAttributes } from 'vue'
 
 import AdoIcon from '@/assets/svg/ado.svg?component'
 import AppleIcon from '@/assets/svg/apple.svg?component'
@@ -48,7 +48,7 @@ const internalColor = computed(() => {
   return props.color || '#232323'
 })
 
-const icons: Record<IconName, string> = {
+const icons: Record<IconName, DefineComponent<SVGAttributes>> = {
   [IconName.Ado]: AdoIcon,
   [IconName.Apple]: AppleIcon,
   [IconName.Bitmart]: BitmartIcon,

From cabfe5e1b5a5b355f09b039a0d0f5804a372afa9 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Wed, 4 Sep 2024 11:31:41 +0200
Subject: [PATCH 06/13] fix: update select test

---
 src/components/Select/WSelect.spec.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Select/WSelect.spec.ts b/src/components/Select/WSelect.spec.ts
index fa8017b..381a92f 100644
--- a/src/components/Select/WSelect.spec.ts
+++ b/src/components/Select/WSelect.spec.ts
@@ -7,7 +7,6 @@ import Icon from '@/assets/svg/navigation-cursor.svg?component'
 describe('WSelect', () => {
   it('renders properly', () => {
     const wrapper = shallowMount(WSelect, {
-      emits: ['update:modelValue'],
       props: {
         dropdownPosition: DropdownPosition.Bottom,
         modelValue: {
@@ -15,7 +14,6 @@ describe('WSelect', () => {
           label: 'English',
           icon: null
         },
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
         options: [{
             key: 'en',
             label: 'English',
@@ -34,7 +32,6 @@ describe('WSelect', () => {
 
   it('renders properly an icon when provided', () => {
     const wrapper = shallowMount(WSelect, {
-      emits: ['update:modelValue'],
       props: {
         dropdownPosition: DropdownPosition.Bottom,
         modelValue: {
@@ -42,7 +39,6 @@ describe('WSelect', () => {
           label: 'English',
           icon: Icon
         },
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
         options: [{
             key: 'en',
             label: 'English',

From 7ba0e5ec4cb28f7eb5106c4d0cd1cb37b991664c Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Thu, 5 Sep 2024 09:59:40 +0200
Subject: [PATCH 07/13] feat: add position options to tooltip

---
 src/components/Select/WSelect.spec.ts      | 20 ++++----
 src/components/Select/WSelect.stories.ts   | 55 ++++++++++++----------
 src/components/Select/WSelect.ts           |  4 +-
 src/components/Select/WSelect.vue          | 26 +++++-----
 src/components/Tooltip/WTooltip.spec.ts    |  2 +-
 src/components/Tooltip/WTooltip.stories.ts | 14 ++++--
 src/components/Tooltip/WTooltip.ts         |  9 ++++
 src/components/Tooltip/WTooltip.vue        | 32 +++++++++++--
 8 files changed, 104 insertions(+), 58 deletions(-)
 create mode 100644 src/components/Tooltip/WTooltip.ts

diff --git a/src/components/Select/WSelect.spec.ts b/src/components/Select/WSelect.spec.ts
index 381a92f..ceadc11 100644
--- a/src/components/Select/WSelect.spec.ts
+++ b/src/components/Select/WSelect.spec.ts
@@ -14,17 +14,19 @@ describe('WSelect', () => {
           label: 'English',
           icon: null
         },
-        options: [{
+        options: [
+          {
             key: 'en',
             label: 'English',
             icon: null
-          },{
+          },
+          {
             key: 'es',
             label: 'Español',
-            icon: null,
+            icon: null
           }
         ]
-      },
+      }
     })
 
     expect(wrapper.element).toMatchSnapshot()
@@ -39,17 +41,19 @@ describe('WSelect', () => {
           label: 'English',
           icon: Icon
         },
-        options: [{
+        options: [
+          {
             key: 'en',
             label: 'English',
             icon: Icon
-          },{
+          },
+          {
             key: 'es',
             label: 'Español',
-            icon: Icon,
+            icon: Icon
           }
         ]
-      },
+      }
     })
 
     expect(wrapper.element).toMatchSnapshot()
diff --git a/src/components/Select/WSelect.stories.ts b/src/components/Select/WSelect.stories.ts
index 1736629..f364038 100644
--- a/src/components/Select/WSelect.stories.ts
+++ b/src/components/Select/WSelect.stories.ts
@@ -10,18 +10,22 @@ const meta: any = {
   component: WSelect,
   tags: ['autodocs'],
   argTypes: {
-    dropdownPosition: { control: 'select', options: dropdownPostions },
+    dropdownPosition: { control: 'select', options: dropdownPostions }
   },
   args: {
-    options: [{
-      key: 'en',
-      label: 'English',
-      icon: null,
-    },{
-      key: 'es',
-      label: 'Español',
-      icon: null,
-    }]}
+    options: [
+      {
+        key: 'en',
+        label: 'English',
+        icon: null
+      },
+      {
+        key: 'es',
+        label: 'Español',
+        icon: null
+      }
+    ]
+  }
 } satisfies Meta<typeof WSelect>
 
 export default meta
@@ -34,26 +38,29 @@ export const Default: Story = {
       const model = ref({
         key: 'en',
         label: 'English',
-        icon: null,
-      });
+        icon: null
+      })
 
       function update($event: any) {
         model.value = $event
       }
-  
-      return { args, model, update };
+
+      return { args, model, update }
     },
     template: `<WSelect v-bind="args" v-model="model" @update:model-value="update" />`,
     args: {
-      options: [{
-        key: 'en',
-        label: 'English',
-        icon: null,
-      },{
-        key: 'es',
-        label: 'Español',
-        icon: Icon,
-      }]
+      options: [
+        {
+          key: 'en',
+          label: 'English',
+          icon: null
+        },
+        {
+          key: 'es',
+          label: 'Español',
+          icon: Icon
+        }
+      ]
     }
   })
-}
\ No newline at end of file
+}
diff --git a/src/components/Select/WSelect.ts b/src/components/Select/WSelect.ts
index e5b0cd4..a9ef07c 100644
--- a/src/components/Select/WSelect.ts
+++ b/src/components/Select/WSelect.ts
@@ -1,6 +1,6 @@
-export type Option = {key: string, label: string, icon: string | null}
+export type Option = { key: string; label: string; icon: string | null }
 export enum DropdownPosition {
   Top = 'top',
   Bottom = 'bottom'
 }
-export const dropdownPostions = Object.values(DropdownPosition)
\ No newline at end of file
+export const dropdownPostions = Object.values(DropdownPosition)
diff --git a/src/components/Select/WSelect.vue b/src/components/Select/WSelect.vue
index 0a88bfc..25e249c 100644
--- a/src/components/Select/WSelect.vue
+++ b/src/components/Select/WSelect.vue
@@ -35,7 +35,7 @@
 <script setup lang="ts">
 import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
-import { dropdownPostions, DropdownPosition} from './WSelect'
+import { dropdownPostions, DropdownPosition } from './WSelect'
 import { PropType, computed, DefineComponent, SVGAttributes } from 'vue'
 
 type Option = { key: string; label: string; icon: DefineComponent<SVGAttributes> | null }
@@ -44,7 +44,7 @@ const model = defineModel()
 const props = defineProps({
   options: {
     type: Array as PropType<Array<Option>>,
-    required: true,
+    required: true
   },
   dropdownPosition: {
     type: String as PropType<DropdownPosition>,
@@ -63,11 +63,12 @@ const props = defineProps({
   }
 })
 
-const position = computed(() => props.dropdownPosition === DropdownPosition.Top ? '-210%' : '110%')
+const position = computed(() =>
+  props.dropdownPosition === DropdownPosition.Top ? '-210%' : '110%'
+)
 </script>
 
 <style lang="scss">
-
 .dropdown-enter {
   transform: translateY(-8px);
 }
@@ -81,7 +82,7 @@ const position = computed(() => props.dropdownPosition === DropdownPosition.Top
 }
 
 .dropdown-leave {
-    transform: translateY(0px);
+  transform: translateY(0px);
 }
 
 .dropdown-leave-to {
@@ -90,17 +91,17 @@ const position = computed(() => props.dropdownPosition === DropdownPosition.Top
 }
 
 .dropdown-leave-from {
-    transform: translateY(0);
+  transform: translateY(0);
 }
 
 .dropdown-leave-active {
-    transition: all .2s cubic-bezier(.42,0,.58,1);
-    transition-delay: .5s;
+  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
+  transition-delay: 0.5s;
 }
 
 .dropdown-enter-active {
-    transition: all .2s cubic-bezier(.42,0,.58,1);
-    transition-delay: .5s;
+  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
+  transition-delay: 0.5s;
 }
 .vs--open {
   .vs__open-indicator {
@@ -145,13 +146,13 @@ const position = computed(() => props.dropdownPosition === DropdownPosition.Top
 
   .vs__dropdown-option {
     font-family: 'NeueMachina-Regular', sans-serif;
-    color: v-bind(hexPrimaryColor)
+    color: v-bind(hexPrimaryColor);
   }
 
   .vs__dropdown-option--highlight {
     z-index: 10;
     color: v-bind(hexSecondaryColor);
-    background: v-bind(hexPrimaryColor)
+    background: v-bind(hexPrimaryColor);
   }
 
   .vs__clear,
@@ -206,4 +207,3 @@ const position = computed(() => props.dropdownPosition === DropdownPosition.Top
 //   }
 // }
 </style>
-
diff --git a/src/components/Tooltip/WTooltip.spec.ts b/src/components/Tooltip/WTooltip.spec.ts
index 291b2da..b632b8f 100644
--- a/src/components/Tooltip/WTooltip.spec.ts
+++ b/src/components/Tooltip/WTooltip.spec.ts
@@ -6,7 +6,7 @@ describe('WTooltip', () => {
   it('renders properly', () => {
     const wrapper = mount(WTooltip, {
       props: {
-        bgColor: '#000',
+        bgColor: '#000'
       },
       slots: {
         main: `<p>Text</p>`,
diff --git a/src/components/Tooltip/WTooltip.stories.ts b/src/components/Tooltip/WTooltip.stories.ts
index 02c25a3..79ac600 100644
--- a/src/components/Tooltip/WTooltip.stories.ts
+++ b/src/components/Tooltip/WTooltip.stories.ts
@@ -1,14 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import WTooltip from './WTooltip.vue'
+import { TooltipPosition, tooltipPostions } from './WTooltip'
 
 const meta: any = {
   title: 'Example/WTooltip',
   component: WTooltip,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    position: { control: 'select', options: tooltipPostions }
+  },
   args: {
     bgColor: '#000',
-  },
+    position: TooltipPosition.CenterTop
+  }
 } satisfies Meta<typeof WTooltip>
 
 export default meta
@@ -20,11 +24,11 @@ export const Default: Story = {
     setup() {
       return { args }
     },
-    template: `<WTooltip v-bind="args"><template #tooltip><p class="text-white-50 w-[200px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></template><template #main>
+    template: `<div class="h-[200px] w-auto flex justify-center items-center"><WTooltip v-bind="args"><template #tooltip><p class="text-white-50 w-[200px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></template><template #main>
               <span class="text-xs ml-xs">ⓘ</span>
-            </template></WTooltip>`,
+            </template></WTooltip></div>`,
     args: {
-      bgColor: 'black-950',
+      bgColor: 'black-950'
     }
   })
 }
diff --git a/src/components/Tooltip/WTooltip.ts b/src/components/Tooltip/WTooltip.ts
new file mode 100644
index 0000000..0ba88d9
--- /dev/null
+++ b/src/components/Tooltip/WTooltip.ts
@@ -0,0 +1,9 @@
+export enum TooltipPosition {
+  CenterTop = 'center-top',
+  RightTop = 'right-top',
+  LeftTop = 'left-top',
+  CenterBottom = 'center-bottom',
+  RightBottom = 'right-bottom',
+  LeftBottom = 'left-bottom'
+}
+export const tooltipPostions = Object.values(TooltipPosition)
diff --git a/src/components/Tooltip/WTooltip.vue b/src/components/Tooltip/WTooltip.vue
index 7b5c6d2..cba96f2 100644
--- a/src/components/Tooltip/WTooltip.vue
+++ b/src/components/Tooltip/WTooltip.vue
@@ -1,20 +1,42 @@
 <template>
-  <div class="group inline relative p-[4px] -p-[4px]">
+  <div class="group inline relative p-sm -m-sm">
     <slot name="main"></slot>
     <div
-      class="tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline hover:inline transition-opacity text-sm rounded-md absolute bottom-md -translate-x-[50%] mb-sm"
+      :class="tooltipPosition"
+      class="tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline group-hover:opacity-100 text-sm rounded-md absolute"
     >
       <slot name="tooltip"></slot>
     </div>
   </div>
 </template>
 
-<script setup>
-defineProps({
+<script setup lang="ts">
+import { TooltipPosition, tooltipPostions } from './WTooltip'
+import { PropType, computed } from 'vue'
+
+const props = defineProps({
   bgColor: {
     type: String,
-    required: true,
+    required: true
   },
+  position: {
+    type: String as PropType<TooltipPosition>,
+    default: TooltipPosition.CenterTop,
+    validation(value: TooltipPosition) {
+      tooltipPostions.includes(value)
+    }
+  }
+})
+const tooltipStypePositions: Record<TooltipPosition, string> = {
+  [TooltipPosition.CenterTop]: 'bottom-lg -translate-x-[50%]',
+  [TooltipPosition.CenterBottom]: 'top-lg -translate-x-[50%]',
+  [TooltipPosition.RightTop]: 'bottom-lg translate-x-[0%]',
+  [TooltipPosition.RightBottom]: 'top-lg translate-x-[0%]',
+  [TooltipPosition.LeftTop]: 'bottom-lg -translate-x-[100%]',
+  [TooltipPosition.LeftBottom]: 'top-lg -translate-x-[100%]'
+}
+const tooltipPosition = computed(() => {
+  return tooltipStypePositions[props.position]
 })
 </script>
 

From c6bea03dda68de5d6ab17a965786750ffae566ca Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Thu, 5 Sep 2024 12:03:58 +0200
Subject: [PATCH 08/13] feat: add position options to select

---
 src/components/Select/WSelect.stories.ts | 16 ++++--
 src/components/Select/WSelect.ts         |  9 +++-
 src/components/Select/WSelect.vue        | 69 +++++++++++++++---------
 3 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/src/components/Select/WSelect.stories.ts b/src/components/Select/WSelect.stories.ts
index f364038..42904bd 100644
--- a/src/components/Select/WSelect.stories.ts
+++ b/src/components/Select/WSelect.stories.ts
@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import WSelect from './WSelect.vue'
-import { dropdownPostions } from './WSelect'
+import {
+  DropdownXPosition,
+  dropdownXPositions,
+  DropdownYPosition,
+  dropdownYPositions
+} from './WSelect'
 import { ref } from 'vue'
 import 'vue-select/dist/vue-select.css'
 import Icon from '@/assets/svg/navigation-cursor.svg?component'
@@ -10,9 +15,12 @@ const meta: any = {
   component: WSelect,
   tags: ['autodocs'],
   argTypes: {
-    dropdownPosition: { control: 'select', options: dropdownPostions }
+    dropdownYPosition: { control: 'select', options: dropdownYPositions },
+    dropdownXPosition: { control: 'select', options: dropdownXPositions }
   },
   args: {
+    dropdownXPosition: DropdownXPosition.Right,
+    dropdownYPosition: DropdownYPosition.Bottom,
     options: [
       {
         key: 'en',
@@ -47,8 +55,10 @@ export const Default: Story = {
 
       return { args, model, update }
     },
-    template: `<WSelect v-bind="args" v-model="model" @update:model-value="update" />`,
+    template: `<div class="h-[100px] w-auto flex"><WSelect v-bind="args" v-model="model" @update:model-value="update" /></div>`,
     args: {
+      dropdownXPosition: DropdownXPosition.Right,
+      dropdownYPosition: DropdownYPosition.Bottom,
       options: [
         {
           key: 'en',
diff --git a/src/components/Select/WSelect.ts b/src/components/Select/WSelect.ts
index a9ef07c..eddac86 100644
--- a/src/components/Select/WSelect.ts
+++ b/src/components/Select/WSelect.ts
@@ -1,6 +1,11 @@
 export type Option = { key: string; label: string; icon: string | null }
-export enum DropdownPosition {
+export enum DropdownYPosition {
   Top = 'top',
   Bottom = 'bottom'
 }
-export const dropdownPostions = Object.values(DropdownPosition)
+export enum DropdownXPosition {
+  Right = 'right',
+  Left = 'left'
+}
+export const dropdownYPositions = Object.values(DropdownYPosition)
+export const dropdownXPositions = Object.values(DropdownXPosition)
diff --git a/src/components/Select/WSelect.vue b/src/components/Select/WSelect.vue
index 25e249c..b6195af 100644
--- a/src/components/Select/WSelect.vue
+++ b/src/components/Select/WSelect.vue
@@ -8,6 +8,7 @@
     :filterable="false"
     :searchable="false"
     class="language-selector"
+    :class="xPosition"
   >
     <template #selected-option-container="{ option }">
       <span class="vs__selected">
@@ -35,7 +36,12 @@
 <script setup lang="ts">
 import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
-import { dropdownPostions, DropdownPosition } from './WSelect'
+import {
+  dropdownYPositions,
+  dropdownXPositions,
+  DropdownYPosition,
+  DropdownXPosition
+} from './WSelect'
 import { PropType, computed, DefineComponent, SVGAttributes } from 'vue'
 
 type Option = { key: string; label: string; icon: DefineComponent<SVGAttributes> | null }
@@ -46,11 +52,18 @@ const props = defineProps({
     type: Array as PropType<Array<Option>>,
     required: true
   },
-  dropdownPosition: {
-    type: String as PropType<DropdownPosition>,
-    default: DropdownPosition.Bottom,
-    validator(value: DropdownPosition) {
-      return dropdownPostions.includes(value)
+  dropdownYPosition: {
+    type: String as PropType<DropdownYPosition>,
+    default: DropdownYPosition.Bottom,
+    validator(value: DropdownYPosition) {
+      return dropdownYPositions.includes(value)
+    }
+  },
+  dropdownXPosition: {
+    type: String as PropType<DropdownXPosition>,
+    default: DropdownXPosition.Right,
+    validator(value: DropdownXPosition) {
+      return dropdownXPositions.includes(value)
     }
   },
   hexPrimaryColor: {
@@ -62,10 +75,16 @@ const props = defineProps({
     default: '#ffffff'
   }
 })
-
-const position = computed(() =>
-  props.dropdownPosition === DropdownPosition.Top ? '-210%' : '110%'
-)
+const yPositions: Record<DropdownYPosition, string> = {
+  [DropdownYPosition.Top]: '-210%',
+  [DropdownYPosition.Bottom]: '110%'
+}
+const xPositions: Record<DropdownXPosition, string> = {
+  [DropdownXPosition.Right]: 'right',
+  [DropdownXPosition.Left]: 'left'
+}
+const yPosition = computed(() => yPositions[props.dropdownYPosition])
+const xPosition = computed(() => xPositions[props.dropdownXPosition])
 </script>
 
 <style lang="scss">
@@ -108,8 +127,20 @@ const position = computed(() =>
     transform: rotate(180deg) scale(0.5) !important;
   }
 }
+
 .language-selector {
-  @apply bg-[v-bind(hexPrimaryColor)] w-min px-md py-xs rounded-full flex justify-center;
+  @apply bg-[v-bind(hexPrimaryColor)] h-max w-auto px-md py-xs rounded-full flex justify-center;
+  &.right {
+    .vs__dropdown-menu {
+      left: unset;
+      right: 0px;
+    }
+  }
+  &.left {
+    .vs__dropdown-menu {
+      left: 0px;
+    }
+  }
   .option {
     @apply grid grid-cols-[max-content_max-content] justify-start items-center h-max;
   }
@@ -134,8 +165,7 @@ const position = computed(() =>
   }
   .vs__dropdown-menu {
     z-index: -10;
-    top: v-bind(position);
-    left: 0px;
+    top: v-bind(yPosition);
     background: v-bind(hexSecondaryColor);
     border: 2px solid v-bind(hexPrimaryColor);
     border-radius: 16px;
@@ -193,17 +223,4 @@ const position = computed(() =>
   opacity: 1 !important;
   position: inherit !important;
 }
-
-// @media (max-width: 706px) {
-//   .language-selector {
-//     padding: 8px 8px;
-//     .vs__selected {
-//       width: 100px;
-//     }
-//     .vs__dropdown-menu {
-//       top: -80px;
-//       left: 24px;
-//     }
-//   }
-// }
 </style>

From b3590e084e26d13b7675507564cecd7ea7b6a02f Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Thu, 5 Sep 2024 12:21:01 +0200
Subject: [PATCH 09/13] fix(test): update select and tooltip position props

---
 src/components/Select/WSelect.spec.ts                     | 8 +++++---
 src/components/Select/__snapshots__/WSelect.spec.ts.snap  | 4 ++--
 .../Tooltip/__snapshots__/WTooltip.spec.ts.snap           | 4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Select/WSelect.spec.ts b/src/components/Select/WSelect.spec.ts
index ceadc11..bcaf4c8 100644
--- a/src/components/Select/WSelect.spec.ts
+++ b/src/components/Select/WSelect.spec.ts
@@ -1,14 +1,15 @@
 import { describe, it, expect } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
 import WSelect from './WSelect.vue'
-import { DropdownPosition } from './WSelect'
+import { DropdownXPosition, DropdownYPosition } from './WSelect'
 import Icon from '@/assets/svg/navigation-cursor.svg?component'
 
 describe('WSelect', () => {
   it('renders properly', () => {
     const wrapper = shallowMount(WSelect, {
       props: {
-        dropdownPosition: DropdownPosition.Bottom,
+        dropdownXPosition: DropdownXPosition.Right,
+        dropdownYPosition: DropdownYPosition.Bottom,
         modelValue: {
           key: 'en',
           label: 'English',
@@ -35,7 +36,8 @@ describe('WSelect', () => {
   it('renders properly an icon when provided', () => {
     const wrapper = shallowMount(WSelect, {
       props: {
-        dropdownPosition: DropdownPosition.Bottom,
+        dropdownXPosition: DropdownXPosition.Right,
+        dropdownYPosition: DropdownYPosition.Bottom,
         modelValue: {
           key: 'en',
           label: 'English',
diff --git a/src/components/Select/__snapshots__/WSelect.spec.ts.snap b/src/components/Select/__snapshots__/WSelect.spec.ts.snap
index 8611945..b4f897c 100644
--- a/src/components/Select/__snapshots__/WSelect.spec.ts.snap
+++ b/src/components/Select/__snapshots__/WSelect.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`WSelect > renders properly 1`] = `
   appendtobody="false"
   autocomplete="off"
   calculateposition="[Function]"
-  class="language-selector"
+  class="language-selector right"
   clearable="false"
   clearsearchonblur="[Function]"
   clearsearchonselect="true"
@@ -47,7 +47,7 @@ exports[`WSelect > renders properly an icon when provided 1`] = `
   appendtobody="false"
   autocomplete="off"
   calculateposition="[Function]"
-  class="language-selector"
+  class="language-selector right"
   clearable="false"
   clearsearchonblur="[Function]"
   clearsearchonselect="true"
diff --git a/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap b/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap
index acbf789..b261cad 100644
--- a/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap
+++ b/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`WTooltip > renders properly 1`] = `
 <div
-  class="group inline relative p-[4px] -p-[4px]"
+  class="group inline relative p-sm -m-sm"
   data-v-38c68585=""
 >
   
@@ -11,7 +11,7 @@ exports[`WTooltip > renders properly 1`] = `
   </p>
   
   <div
-    class="tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline hover:inline transition-opacity text-sm rounded-md absolute bottom-md -translate-x-[50%] mb-sm"
+    class="bottom-lg -translate-x-[50%] tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline group-hover:opacity-100 text-sm rounded-md absolute"
     data-v-38c68585=""
   >
     

From aa5042d0d47cdc92e15999a00ad68b8bf337797d Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Thu, 5 Sep 2024 13:48:52 +0200
Subject: [PATCH 10/13] fix: export types and constants

---
 src/index.ts | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index de5d888..ef2d5dc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,37 +1,39 @@
 import './assets/main.css'
 
 import WButton from './components/Button/WButton.vue'
-export { buttonTypes } from './components/Button/WButton'
-
 import WCard from './components/Card/WCard.vue'
 import WEmptyState from './components/EmptyState/WEmptyState.vue'
-
 import WFooter from './components/Footer/WFooter.vue'
-
 import WIcon from './components/icon/WIcon.vue'
-export { IconName, iconNames } from './components/icon/WIcon'
-
 import WIconRounded from './components/IconRounded/WIconRounded.vue'
-
 import WIconText from './components/IconText/WIconText.vue'
-export { iconTextPositions } from './components/IconText/WIconText'
-
 import WInput from './components/Input/WInput.vue'
 import WLink from './components/Link/WLink.vue'
-
 import WLoadingPlaceholder from './components/LoadingPlaceholder/WLoadingPlaceholder.vue'
-
 import WNavbar from './components/Navbar/WNavbar.vue'
-
 import WPagination from './components/pagination/WPagination.vue'
-
 import WSection from './components/Section/WSection.vue'
 import WSelect from './components/Select/WSelect.vue'
 import WSpinner from './components/Spinner/WSpinner.vue'
 import WTooltip from './components/Tooltip/WTooltip.vue'
-
 import WSocialsBar from './components/SocialsBar/WSocialsBar.vue'
+
+export { buttonTypes } from './components/Button/WButton'
+export { CardType, cardTypes } from './components/Card/WCard'
+export { FooterSection, FooterLink } from './components/Footer/WFooter'
+export { IconName, iconNames } from './components/icon/WIcon'
+export { IconTextPosition, iconTextPositions } from './components/IconText/WIconText'
+export { InputType, inputTypes } from './components/Input/WInput'
+export { NavLinks, NavLink } from './components/Navbar/WNavbar'
+export {
+  Option,
+  DropdownYPosition,
+  DropdownXPosition,
+  dropdownYPositions,
+  dropdownXPositions
+} from './components/Select/WSelect'
 export { SOCIAL_URLS } from './components/SocialsBar/WSocialsBar'
+export { TooltipPosition, tooltipPostions } from './components/Tooltip/WTooltip'
 
 export {
   WButton,

From 1c46acf096ddfb5bb2d3171301b7b0fc4fd0d5b6 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Thu, 5 Sep 2024 13:49:11 +0200
Subject: [PATCH 11/13] fix: remove delay in select animation

---
 src/components/Select/WSelect.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Select/WSelect.vue b/src/components/Select/WSelect.vue
index b6195af..5c37f3d 100644
--- a/src/components/Select/WSelect.vue
+++ b/src/components/Select/WSelect.vue
@@ -115,12 +115,10 @@ const xPosition = computed(() => xPositions[props.dropdownXPosition])
 
 .dropdown-leave-active {
   transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
-  transition-delay: 0.5s;
 }
 
 .dropdown-enter-active {
   transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
-  transition-delay: 0.5s;
 }
 .vs--open {
   .vs__open-indicator {

From 15fca025041c7ff8124696eda0ae6f0fecc7dbee Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Thu, 5 Sep 2024 14:22:01 +0200
Subject: [PATCH 12/13] fix: export types correctly

---
 src/components/Footer/WFooter.ts  | 8 ++++----
 src/components/Footer/WFooter.vue | 2 +-
 src/index.ts                      | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Footer/WFooter.ts b/src/components/Footer/WFooter.ts
index c899459..047f168 100644
--- a/src/components/Footer/WFooter.ts
+++ b/src/components/Footer/WFooter.ts
@@ -1,8 +1,8 @@
-export type FooterSection = {
-  title: string
-  links: FooterLink[]
-}
 export type FooterLink = {
   url: string
   label: string
 }
+export type FooterSection = {
+  title: string
+  links: FooterLink[]
+}
diff --git a/src/components/Footer/WFooter.vue b/src/components/Footer/WFooter.vue
index d0b0f30..c66ca17 100644
--- a/src/components/Footer/WFooter.vue
+++ b/src/components/Footer/WFooter.vue
@@ -74,7 +74,7 @@
 <script setup lang="ts">
 import AdoIcon from '@/assets/svg/ado.svg?component'
 import WitOracleIcon from '@/assets/svg/witnet-logo-dark.svg?component'
-import { FooterSection } from './WFooter.ts'
+import { FooterSection } from './WFooter'
 import WSection from '@/components/Section/WSection.vue'
 import { PropType } from 'vue'
 
diff --git a/src/index.ts b/src/index.ts
index ef2d5dc..bdbe0f8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -20,13 +20,13 @@ import WSocialsBar from './components/SocialsBar/WSocialsBar.vue'
 
 export { buttonTypes } from './components/Button/WButton'
 export { CardType, cardTypes } from './components/Card/WCard'
-export { FooterSection, FooterLink } from './components/Footer/WFooter'
+export { type FooterSection, type FooterLink } from './components/Footer/WFooter'
 export { IconName, iconNames } from './components/icon/WIcon'
 export { IconTextPosition, iconTextPositions } from './components/IconText/WIconText'
 export { InputType, inputTypes } from './components/Input/WInput'
-export { NavLinks, NavLink } from './components/Navbar/WNavbar'
+export { type NavLinks, type NavLink } from './components/Navbar/WNavbar'
 export {
-  Option,
+  type Option,
   DropdownYPosition,
   DropdownXPosition,
   dropdownYPositions,

From f4c85a6e16329fdd2b45776ff6d8e4b8f8c8ded8 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Thu, 5 Sep 2024 16:27:05 +0200
Subject: [PATCH 13/13] refacto: remove unnecessary animation classes

---
 src/components/Select/WSelect.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/Select/WSelect.vue b/src/components/Select/WSelect.vue
index 5c37f3d..3ea1c1f 100644
--- a/src/components/Select/WSelect.vue
+++ b/src/components/Select/WSelect.vue
@@ -88,10 +88,6 @@ const xPosition = computed(() => xPositions[props.dropdownXPosition])
 </script>
 
 <style lang="scss">
-.dropdown-enter {
-  transform: translateY(-8px);
-}
-
 .dropdown-enter-to {
   transform: translateY(0px);
 }
@@ -100,7 +96,7 @@ const xPosition = computed(() => xPositions[props.dropdownXPosition])
   transform: translateY(-8px);
 }
 
-.dropdown-leave {
+.dropdown-leave-from {
   transform: translateY(0px);
 }
 
@@ -109,10 +105,6 @@ const xPosition = computed(() => xPositions[props.dropdownXPosition])
   transform: translateY(-8px);
 }
 
-.dropdown-leave-from {
-  transform: translateY(0);
-}
-
 .dropdown-leave-active {
   transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
 }