From accd1db7b778491d98d652f25413a73ba97dece9 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 5 May 2024 19:01:37 +0800
Subject: [PATCH] Rename files and fix first Item padding

---
 .../blocks/LeaderboardInfo/Desktop/Desktop.vue | 15 ++++++++-------
 .../elements/buttons/DropDown/DropDown.test.ts | 18 +++++++++---------
 .../buttons/DropDown/DropDownItem.test.ts      |  8 ++++----
 .../elements/buttons/DropDown/DropDownItem.vue |  6 +++---
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index ce279a06..64c3335b 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
-import DropDown from 'elements/buttons/DropDown/DropDown.vue'
-import DropDownItem from 'elements/buttons/DropDown/DropDownItem.vue'
+import Dropdown from 'elements/buttons/Dropdown/Dropdown.vue'
+import DropdownItem from 'elements/buttons/Dropdown/DropdownItem.vue'
 import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
 import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
 import Tag from 'elements/tags/Tag/Tag.vue'
@@ -68,11 +68,11 @@ defineProps<Props>()
           <i-svg-link />
           <div>Resources</div>
         </ButtonLink>
-        <DropDown class-name="body__internal-link-buttons__button">
-          <DropDownItem>First</DropDownItem>
-          <DropDownItem>Second</DropDownItem>
-          <DropDownItem>Third</DropDownItem>
-        </DropDown>
+        <Dropdown class-name="body__internal-link-buttons__button">
+          <DropdownItem>First</DropdownItem>
+          <DropdownItem>Second</DropdownItem>
+          <DropdownItem>Third</DropdownItem>
+        </Dropdown>
       </div>
       <SocialButtons :socials="socials" />
     </div>
@@ -131,3 +131,4 @@ defineProps<Props>()
   }
 }
 </style>
+elements/buttons/Dropdown/Dropdown.vueelements/buttons/Dropdown/DropdownItem.vue
diff --git a/components/elements/buttons/DropDown/DropDown.test.ts b/components/elements/buttons/DropDown/DropDown.test.ts
index 032ac9df..2f633cdd 100644
--- a/components/elements/buttons/DropDown/DropDown.test.ts
+++ b/components/elements/buttons/DropDown/DropDown.test.ts
@@ -1,18 +1,18 @@
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import { getByTestId } from 'root/testUtils'
-import DropDown from './DropDown.vue'
-import DropDownItem from './DropDownItem.vue'
+import Dropdown from './Dropdown.vue'
+import DropdownItem from './DropdownItem.vue'
 import type { ComponentMountingOptions } from '@vue/test-utils'
 
 enableAutoUnmount(afterEach)
 
-function mountDropDown(options?: ComponentMountingOptions<typeof DropDown>) {
-  return mount(DropDown, options)
+function mountDropdown(options?: ComponentMountingOptions<typeof Dropdown>) {
+  return mount(Dropdown, options)
 }
 
-describe('<DropDown />', () => {
+describe('<Dropdown />', () => {
   it('should render without crashing', () => {
-    const wrapper = mountDropDown({
+    const wrapper = mountDropdown({
       props: { className: 'test' },
     })
     expect(wrapper.isVisible()).toBe(true)
@@ -21,9 +21,9 @@ describe('<DropDown />', () => {
 
   describe('when the toggler is clicked', () => {
     it('should render the slot item, then hide it on a second click', async () => {
-      const itemWrapper = mount(DropDownItem)
+      const itemWrapper = mount(DropdownItem)
 
-      const wrapper = mountDropDown({
+      const wrapper = mountDropdown({
         slots: { default: itemWrapper.html() },
       })
 
@@ -35,7 +35,7 @@ describe('<DropDown />', () => {
     })
 
     it('should apply the style to the dropdown arrow', async () => {
-      const wrapper = mountDropDown()
+      const wrapper = mountDropdown()
 
       await getByTestId(wrapper, 'toggler').trigger('click')
 
diff --git a/components/elements/buttons/DropDown/DropDownItem.test.ts b/components/elements/buttons/DropDown/DropDownItem.test.ts
index cab5f377..f4736313 100644
--- a/components/elements/buttons/DropDown/DropDownItem.test.ts
+++ b/components/elements/buttons/DropDown/DropDownItem.test.ts
@@ -1,17 +1,17 @@
 import { enableAutoUnmount, shallowMount } from '@vue/test-utils'
 import { getByTestId } from 'root/testUtils'
-import DropDownItem from './DropDownItem.vue'
+import DropdownItem from './DropdownItem.vue'
 import type { ComponentMountingOptions } from '@vue/test-utils'
 
 enableAutoUnmount(afterEach)
 
 function mountDropDownItem(
-  options?: ComponentMountingOptions<typeof DropDownItem>,
+  options?: ComponentMountingOptions<typeof DropdownItem>,
 ) {
-  return shallowMount(DropDownItem, options)
+  return shallowMount(DropdownItem, options)
 }
 
-describe('<DropDownItem />', () => {
+describe('<DropdownItem />', () => {
   it('should render without crashing', () => {
     const wrapper = mountDropDownItem({
       props: { slots: 'test' },
diff --git a/components/elements/buttons/DropDown/DropDownItem.vue b/components/elements/buttons/DropDown/DropDownItem.vue
index 5c82c9c6..247ec19a 100644
--- a/components/elements/buttons/DropDown/DropDownItem.vue
+++ b/components/elements/buttons/DropDown/DropDownItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject, ref } from 'vue'
-import type { SharedState } from './DropDown.vue'
+import type { SharedState } from './Dropdown.vue'
 
 const emit = defineEmits<{
   (event: 'click'): void
@@ -24,8 +24,8 @@ function hide() {
 .container {
   @apply py-2 text-center border border-t-0 border-gray-200 hover:bg-gray-100;
 
-  &:first {
-    @apply pt-4;
+  &:first-child {
+    @apply pt-3;
   }
 }
 </style>