From 27c9e880ae70c8bfc7235c6015be9bc5deffeec8 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Wed, 30 Mar 2022 17:30:31 -0400
Subject: [PATCH 1/5] Fix icon of DropdownButton

---
 src/assets/icons/caret-down.svg   | 4 +++-
 src/components/DropdownButton.vue | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/assets/icons/caret-down.svg b/src/assets/icons/caret-down.svg
index e9b21bc0b4..35f507bce3 100644
--- a/src/assets/icons/caret-down.svg
+++ b/src/assets/icons/caret-down.svg
@@ -1,3 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M18.0045 10.555L12 16.0136L5.9955 10.555L7.00451 9.44507L12 13.9864L16.9955 9.44507L18.0045 10.555Z" fill="currentColor"/>
+  <g id="icon" fill="currentColor">
+    <path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M18.0045 10.555L12 16.0136L5.9955 10.555L7.00451 9.44507L12 13.9864L16.9955 9.44507L18.0045 10.555Z" />
+  </g>
 </svg>
diff --git a/src/components/DropdownButton.vue b/src/components/DropdownButton.vue
index 6e093bb58e..344dd19d5f 100644
--- a/src/components/DropdownButton.vue
+++ b/src/components/DropdownButton.vue
@@ -25,9 +25,7 @@
         @click="toggleOpen"
         @keydown.space.prevent="toggleOpen"
       >
-        <svg class="h-2 w-4 pointer-events-none">
-          <use :href="`${icons.caretDown}#icon`" />
-        </svg>
+        <VIcon :icon-path="icons.caretDown" />
       </button>
     </div>
 
@@ -56,10 +54,13 @@ import { defineComponent } from '@nuxtjs/composition-api'
 
 import { keycodes } from '~/constants/key-codes'
 
+import VIcon from '~/components/VIcon/VIcon.vue'
+
 import caretDown from '~/assets/icons/caret-down.svg'
 
 const DropdownButton = defineComponent({
   name: 'DropdownButton',
+  components: { VIcon },
   props: {
     dropdownAriaLabel: {
       type: String,

From 0b5bacf0c747e639e18542a02dbf5acd4ec3e13f Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Wed, 30 Mar 2022 17:48:53 -0400
Subject: [PATCH 2/5] Rename DropdownButton with prefix

---
 src/components/DownloadButton.vue             |  8 ++++----
 ...DropdownButton.vue => VDropdownButton.vue} |  6 +++---
 ...io-track.spec.js => v-audio-track.spec.js} |  0
 ...tton.spec.js => v-dropdown-button.spec.js} | 20 +++++++++----------
 4 files changed, 17 insertions(+), 17 deletions(-)
 rename src/components/{DropdownButton.vue => VDropdownButton.vue} (98%)
 rename test/unit/specs/components/AudioTrack/{audio-track.spec.js => v-audio-track.spec.js} (100%)
 rename test/unit/specs/components/{dropdown-button.spec.js => v-dropdown-button.spec.js} (91%)

diff --git a/src/components/DownloadButton.vue b/src/components/DownloadButton.vue
index e053f32e02..67badb446c 100644
--- a/src/components/DownloadButton.vue
+++ b/src/components/DownloadButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <DropdownButton
+  <VDropdownButton
     v-if="filesizes"
     :dropdown-aria-label="$t('download-button.aria.dropdown-label')"
     :is-single-item="formats.length === 1"
@@ -55,7 +55,7 @@
         </li>
       </ul>
     </template>
-  </DropdownButton>
+  </VDropdownButton>
 </template>
 
 <script>
@@ -64,14 +64,14 @@ import axios from 'axios'
 
 import local from '~/utils/local'
 
-import DropdownButton from '~/components/DropdownButton.vue'
+import VDropdownButton from '~/components/VDropdownButton.vue'
 import VLink from '~/components/VLink.vue'
 
 const LS_DOWNLOAD_FORMAT_EXTENSION_KEY = 'openverse:download-format-extension'
 
 export default {
   name: 'DownloadButton',
-  components: { DropdownButton, VLink },
+  components: { VDropdownButton, VLink },
   props: {
     formats: {
       type: Array,
diff --git a/src/components/DropdownButton.vue b/src/components/VDropdownButton.vue
similarity index 98%
rename from src/components/DropdownButton.vue
rename to src/components/VDropdownButton.vue
index 344dd19d5f..fc553e88a8 100644
--- a/src/components/DropdownButton.vue
+++ b/src/components/VDropdownButton.vue
@@ -58,8 +58,8 @@ import VIcon from '~/components/VIcon/VIcon.vue'
 
 import caretDown from '~/assets/icons/caret-down.svg'
 
-const DropdownButton = defineComponent({
-  name: 'DropdownButton',
+const VDropdownButton = defineComponent({
+  name: 'VDropdownButton',
   components: { VIcon },
   props: {
     dropdownAriaLabel: {
@@ -168,7 +168,7 @@ const DropdownButton = defineComponent({
   },
 })
 
-export default DropdownButton
+export default VDropdownButton
 </script>
 
 <style scoped>
diff --git a/test/unit/specs/components/AudioTrack/audio-track.spec.js b/test/unit/specs/components/AudioTrack/v-audio-track.spec.js
similarity index 100%
rename from test/unit/specs/components/AudioTrack/audio-track.spec.js
rename to test/unit/specs/components/AudioTrack/v-audio-track.spec.js
diff --git a/test/unit/specs/components/dropdown-button.spec.js b/test/unit/specs/components/v-dropdown-button.spec.js
similarity index 91%
rename from test/unit/specs/components/dropdown-button.spec.js
rename to test/unit/specs/components/v-dropdown-button.spec.js
index 519f911a13..e5cebd69bf 100644
--- a/test/unit/specs/components/dropdown-button.spec.js
+++ b/test/unit/specs/components/v-dropdown-button.spec.js
@@ -2,10 +2,10 @@ import Vue from 'vue'
 import { render, screen, fireEvent } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 
-import DropdownButton from '~/components/DropdownButton.vue'
+import VDropdownButton from '~/components/VDropdownButton.vue'
 
 const TestWrapper = Vue.component('TestWrapper', {
-  components: { DropdownButton },
+  components: { VDropdownButton },
   data: () => ({
     items: new Array(4)
       .fill(null)
@@ -25,7 +25,7 @@ const TestWrapper = Vue.component('TestWrapper', {
     },
   },
   template: `
-    <DropdownButton>
+    <VDropdownButton>
       <template #default="{ buttonProps }">
         <button v-bind="buttonProps">Action {{ activeItem?.name ?? '' }}</button>
       </template>
@@ -37,11 +37,11 @@ const TestWrapper = Vue.component('TestWrapper', {
           </li>
         </ul>
       </template>
-    </DropdownButton>
+    </VDropdownButton>
   `,
 })
 
-const getDropdownButton = () =>
+const getVDropdownButton = () =>
   screen.getByLabelText('dropdown-button.aria.arrow-label')
 const getDropdownContainer = () => screen.queryByRole('menu')
 const getFirstDropdownItem = () => screen.getAllByRole('menuitem')[0]
@@ -51,12 +51,12 @@ const getDropdownItem = (idx) => screen.getAllByRole('menuitem')[idx]
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
 const openDropdown = async () => {
-  await fireEvent.click(getDropdownButton())
+  await fireEvent.click(getVDropdownButton())
   // sleep for 1 ms to allow focus to settle
   await sleep(1)
 }
 
-describe('DropdownButton', () => {
+describe('VDropdownButton', () => {
   it('should render a clickable dropdown button', async () => {
     render(TestWrapper)
     await openDropdown()
@@ -111,12 +111,12 @@ describe('DropdownButton', () => {
     expect(getFirstDropdownItem()).toHaveFocus()
     await userEvent.keyboard('{escape}')
     await sleep(1)
-    expect(getDropdownButton()).toHaveFocus()
+    expect(getVDropdownButton()).toHaveFocus()
   })
 
   it('should open the dropdown with space', async () => {
     render(TestWrapper)
-    getDropdownButton().focus()
+    getVDropdownButton().focus()
     await userEvent.keyboard('{space}')
     await sleep(1)
     expect(getDropdownContainer()).not.toBe(null)
@@ -125,7 +125,7 @@ describe('DropdownButton', () => {
   // This test doesn't work for some reason, but testing in storybook confirms it should pass
   it.skip('should open the dropdown with enter', async () => {
     render(TestWrapper)
-    getDropdownButton().focus()
+    getVDropdownButton().focus()
     await userEvent.keyboard('{enter}')
     await sleep(1)
     expect(getDropdownContainer()).not.toBe(null)

From 9069ff9300d5ea3688ca982ea4ca3436bcbe97ed Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Wed, 30 Mar 2022 18:01:28 -0400
Subject: [PATCH 3/5] Rename DownloadButton with prefix

---
 src/components/VAudioTrack/layouts/VFullLayout.vue    | 11 ++++-------
 .../{DownloadButton.vue => VDownloadButton.vue}       |  2 +-
 src/components/VDropdownButton.vue                    |  2 +-
 .../specs/components/AudioTrack/v-audio-track.spec.js |  2 +-
 ...nload-button.spec.js => v-download-button.spec.js} |  8 ++++----
 5 files changed, 11 insertions(+), 14 deletions(-)
 rename src/components/{DownloadButton.vue => VDownloadButton.vue} (99%)
 rename test/unit/specs/components/{download-button.spec.js => v-download-button.spec.js} (92%)

diff --git a/src/components/VAudioTrack/layouts/VFullLayout.vue b/src/components/VAudioTrack/layouts/VFullLayout.vue
index 764364d91b..f2c095dcc8 100644
--- a/src/components/VAudioTrack/layouts/VFullLayout.vue
+++ b/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -58,7 +58,7 @@
         </div>
       </div>
 
-      <DownloadButton
+      <VDownloadButton
         class="ms-auto order-1 lg:order-2"
         :formats="getFormats(audio)"
         :size="isSmall ? 'small' : 'medium'"
@@ -70,15 +70,12 @@
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
 
-import DownloadButton from '~/components/DownloadButton.vue'
+import VDownloadButton from '~/components/VDownloadButton.vue'
 import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
   name: 'VFullLayout',
-  components: {
-    DownloadButton,
-    VLink,
-  },
+  components: { VDownloadButton, VLink },
   props: ['audio', 'size', 'status', 'currentTime'],
   setup(props) {
     /**
@@ -114,7 +111,7 @@ export default defineComponent({
 
     /**
      * Creates a list of { extension_name, download_url } objects
-     * for DownloadButton.
+     * for VDownloadButton.
      *
      * If there are `alt_files` then just use that list. Otherwise,
      * create one using the preview URL.
diff --git a/src/components/DownloadButton.vue b/src/components/VDownloadButton.vue
similarity index 99%
rename from src/components/DownloadButton.vue
rename to src/components/VDownloadButton.vue
index 67badb446c..20c0cacd69 100644
--- a/src/components/DownloadButton.vue
+++ b/src/components/VDownloadButton.vue
@@ -70,7 +70,7 @@ import VLink from '~/components/VLink.vue'
 const LS_DOWNLOAD_FORMAT_EXTENSION_KEY = 'openverse:download-format-extension'
 
 export default {
-  name: 'DownloadButton',
+  name: 'VDownloadButton',
   components: { VDropdownButton, VLink },
   props: {
     formats: {
diff --git a/src/components/VDropdownButton.vue b/src/components/VDropdownButton.vue
index fc553e88a8..72bcb59d7e 100644
--- a/src/components/VDropdownButton.vue
+++ b/src/components/VDropdownButton.vue
@@ -186,7 +186,7 @@ Note the bespoke `py-[0.86rem]` class used below is necessary
 to match the height of the small Audio play/pause button.
 
 This is currently the only application of the DropdownButton
-component (via the DownloadButton component) so as a stop-gap
+component (via the VDownloadButton component) so as a stop-gap
 solution to get the redesign out the door in a timely manner it
 is necessary.
 
diff --git a/test/unit/specs/components/AudioTrack/v-audio-track.spec.js b/test/unit/specs/components/AudioTrack/v-audio-track.spec.js
index d0b36772a9..085f568343 100644
--- a/test/unit/specs/components/AudioTrack/v-audio-track.spec.js
+++ b/test/unit/specs/components/AudioTrack/v-audio-track.spec.js
@@ -57,7 +57,7 @@ const configureVue = (vue) => {
 }
 
 const stubs = {
-  DownloadButton: true,
+  VDownloadButton: true,
   VPlayPause: true,
   NuxtLink: true,
   VLicense: true,
diff --git a/test/unit/specs/components/download-button.spec.js b/test/unit/specs/components/v-download-button.spec.js
similarity index 92%
rename from test/unit/specs/components/download-button.spec.js
rename to test/unit/specs/components/v-download-button.spec.js
index ca6c2484b4..afd9f9e62c 100644
--- a/test/unit/specs/components/download-button.spec.js
+++ b/test/unit/specs/components/v-download-button.spec.js
@@ -4,7 +4,7 @@ import MockAdapter from 'axios-mock-adapter'
 
 import local from '~/utils/local'
 
-import DownloadButton from '~/components/DownloadButton.vue'
+import VDownloadButton from '~/components/VDownloadButton.vue'
 
 import render from '../../test-utils/render'
 
@@ -52,12 +52,12 @@ formats.forEach((format) =>
 )
 
 const doRender = async () => {
-  const wrapper = render(DownloadButton, { propsData: { formats } }, mount)
-  await DownloadButton.fetch.call(wrapper.vm)
+  const wrapper = render(VDownloadButton, { propsData: { formats } }, mount)
+  await VDownloadButton.fetch.call(wrapper.vm)
   return wrapper
 }
 
-describe('DownloadButton', () => {
+describe('VDownloadButton', () => {
   beforeEach(() => {
     mockAxios.resetHistory()
   })

From f46bcf812a8a6a13b1aeb95f3826fd62933da644 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Wed, 30 Mar 2022 18:24:35 -0400
Subject: [PATCH 4/5] Update the pot file

---
 src/locales/po-files/openverse.pot | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index ac71da93ee..b143cfcb54 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-03-30T13:22:40+00:00\n"
+"POT-Creation-Date: 2022-03-30T22:24:18+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -98,12 +98,12 @@ msgctxt "modal.close"
 msgid "Close"
 msgstr ""
 
-#: src/components/DownloadButton.vue:15
+#: src/components/VDownloadButton.vue:15
 msgctxt "download-button.download"
 msgid "Download"
 msgstr ""
 
-#: src/components/DownloadButton.vue:4
+#: src/components/VDownloadButton.vue:4
 msgctxt "download-button.aria.dropdown-label"
 msgid "Select the download file format"
 msgstr ""
@@ -125,7 +125,7 @@ msgctxt "migration-notice.read"
 msgid "Read more"
 msgstr ""
 
-#: src/components/DropdownButton.vue:87
+#: src/components/VDropdownButton.vue:88
 msgctxt "dropdown-button.aria.arrow-label"
 msgid "Dropdown"
 msgstr ""

From 3e5336874abd5df31cde24ee98cf40d685526494 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
Date: Wed, 30 Mar 2022 18:41:17 -0400
Subject: [PATCH 5/5] Fix stories for renamed components

---
 ...oadButton.stories.js => VDownloadButton.stories.js} | 10 +++++-----
 ...ownButton.stories.js => VDropdownButton.stories.js} | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)
 rename src/components/meta/{DownloadButton.stories.js => VDownloadButton.stories.js} (73%)
 rename src/components/meta/{DropdownButton.stories.js => VDropdownButton.stories.js} (88%)

diff --git a/src/components/meta/DownloadButton.stories.js b/src/components/meta/VDownloadButton.stories.js
similarity index 73%
rename from src/components/meta/DownloadButton.stories.js
rename to src/components/meta/VDownloadButton.stories.js
index 2f9cb499a3..677cb7d5c1 100644
--- a/src/components/meta/DownloadButton.stories.js
+++ b/src/components/meta/VDownloadButton.stories.js
@@ -1,13 +1,13 @@
-import DownloadButton from '~/components/DownloadButton.vue'
+import VDownloadButton from '~/components/VDownloadButton.vue'
 
 export default {
-  title: 'Components/DownloadButton',
-  component: DownloadButton,
+  title: 'Components/VDownloadButton',
+  component: VDownloadButton,
 }
 
 export const Default = () => ({
-  template: `<DownloadButton :formats="formats" />`,
-  components: { DownloadButton },
+  template: `<VDownloadButton :formats="formats" />`,
+  components: { VDownloadButton },
   data: () => ({
     formats: [
       {
diff --git a/src/components/meta/DropdownButton.stories.js b/src/components/meta/VDropdownButton.stories.js
similarity index 88%
rename from src/components/meta/DropdownButton.stories.js
rename to src/components/meta/VDropdownButton.stories.js
index c78648692e..a6a9d258fa 100644
--- a/src/components/meta/DropdownButton.stories.js
+++ b/src/components/meta/VDropdownButton.stories.js
@@ -1,10 +1,10 @@
 import { log } from '~/utils/console'
 
-import DropdownButton from '~/components/DropdownButton.vue'
+import VDropdownButton from '~/components/VDropdownButton.vue'
 
 export default {
-  title: 'Components/DropdownButton',
-  component: DropdownButton,
+  title: 'Components/VDropdownButton',
+  component: VDropdownButton,
   argTypes: {
     size: {
       type: 'select',
@@ -16,7 +16,7 @@ export default {
 export const Default = (args, { argTypes }) => ({
   template: `
     <div>
-      <DropdownButton v-bind="$props">
+      <VDropdownButton v-bind="$props">
         <template #default="{ buttonProps }">
           <button v-bind="buttonProps" class="whitespace-nowrap" @click="onClick">Download {{ activeItem?.name ?? '' }}</button>
         </template>
@@ -28,7 +28,7 @@ export const Default = (args, { argTypes }) => ({
             </li>
           </ul>
         </template>
-      </DropdownButton>
+      </VDropdownButton>
       Test element below
     </div>
   `,