Rename files and fix first Item padding

leaderboardsgg · May 5, 2024 · accd1db · accd1db
1 parent e7fdb2a
commit accd1db
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>