Fix icon of dropdown button

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.

src/components/DownloadButton.vue → src/components/VDownloadButton.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 },
+  name: 'VDownloadButton',
+  components: { VDropdownButton, VLink },
   props: {
     formats: {
       type: Array,

src/components/DropdownButton.vue → src/components/VDropdownButton.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',
+const VDropdownButton = defineComponent({
+  name: 'VDropdownButton',
+  components: { VIcon },
   props: {
     dropdownAriaLabel: {
       type: String,
@@ -167,7 +168,7 @@ const DropdownButton = defineComponent({
   },
 })
 
-export default DropdownButton
+export default VDropdownButton
 </script>
 
 <style scoped>
@@ -185,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.
 

src/components/meta/DownloadButton.stories.js → 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: [
       {

src/components/meta/DropdownButton.stories.js → 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>
   `,

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 ""

test/unit/specs/components/AudioTrack/audio-track.spec.js → 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,

test/unit/specs/components/download-button.spec.js → 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()
   })

test/unit/specs/components/dropdown-button.spec.js → 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)