Merge pull request #213 from WordPress/add/download-button

Add DownloadButton component

Author: zackkrida

package-lock.json

@@ -41,13 +41,15 @@
  "@nuxtjs/sitemap": "^2.4.0",
  "@nuxtjs/svg": "^0.1.12",
  "axios": "^0.21.1",
+ "axios-mock-adapter": "^1.20.0",
  "babel-core": "^7.0.0-bridge.0",
  "babel-eslint": "^10.1.0",
  "babel-jest": "^26.6.3",
  "build-url": "^6.0.1",
  "case": "^1.6.3",
  "clipboard": "^2.0.8",
  "deepmerge": "^4.2.2",
+ "filesize": "^8.0.2",
  "focus-trap": "^5.1.0",
  "focus-trap-vue": "0.0.6",
  "js-cookie": "^2.2.1",

package.json

@@ -0,0 +1,128 @@
+<template>
+ <DropdownButton
+ v-if="filesizes"
+ :dropdown-aria-label="$t('download-button.aria.dropdown-label')"
+ >
+ <template #default="{ buttonProps }">
+ <a
+ v-bind="buttonProps"
+ class="whitespace-nowrap"
+ :href="selectedFormat.download_url"
+ download=""
+ >
+ <span>{{ $t('download-button.download') }}</span>
+ <span class="ml-4 selected-format">
+ {{ selectedFormat.extension_name }}
+ </span>
+ <span class="ml-1 font-normal">{{
+ getFormatSize(selectedFormat.extension_name)
+ }}</span>
+ </a>
+ </template>
+
+ <template
+ #items="{
+ activeItemClass,
+ itemClass,
+ itemA11yProps,
+ toggleOpen,
+ onItemKeydown,
+ }"
+ >
+ <ul>
+ <li v-for="format in formats" :key="format.name">
+ <button
+ class="flex justify-between w-full"
+ :class="[
+ itemClass,
+ selectedFormat.extension_name === format.extension_name
+ ? activeItemClass
+ : '',
+ ]"
+ type="button"
+ v-bind="itemA11yProps"
+ @click="
+ setSelectedFormat(format)
+ toggleOpen()
+ "
+ @keydown="onItemKeydown($event)"
+ >
+ <span class="font-bold mr-2">{{ format.extension_name }}</span>
+ <span>{{ getFormatSize(format.extension_name) }}</span>
+ </button>
+ </li>
+ </ul>
+ </template>
+ </DropdownButton>
+</template>
+
+<script>
+import filesize from 'filesize'
+import axios from 'axios'
+import local from '~/utils/local'
+import DropdownButton from '~/components/DropdownButton'
+
+const LS_DOWNLOAD_FORMAT_EXTENSION_KEY = 'openverse:download-format-extension'
+
+export default {
+ name: 'DownloadButton',
+ components: { DropdownButton },
+ props: {
+ formats: {
+ type: Array,
+ required: true,
+ validator: (formats) => {
+ const properties = ['extension_name', 'download_url']
+ return formats.every((format) => properties.every((p) => p in format))
+ },
+ },
+ },
+ data() {
+ const savedFormatExtension =
+ local.get(LS_DOWNLOAD_FORMAT_EXTENSION_KEY) ?? null
+ let format = this.formats[0]
+ if (savedFormatExtension) {
+ const found = this.formats.find(
+ (format) => format.extension_name === savedFormatExtension
+ )
+ if (found) {
+ format = found
+ }
+ }
+
+ return { selectedFormat: format, filesizes: null }
+ },
+ async fetch() {
+ const extensionsToFilesizes = await Promise.all(
+ this.formats.map(async (format) => {
+ try {
+ const response = await axios.head(format.download_url)
+ return [format.extension_name, response.headers['content-length']]
+ } catch (e) {
+ return [format.extension_name, undefined]
+ }
+ })
+ )
+
+ this.filesizes = extensionsToFilesizes.reduce(
+ (acc, [extensionName, filesize]) => ({
+ ...acc,
+ [extensionName]: filesize,
+ }),
+ {}
+ )
+ },
+ methods: {
+ getFormatSize(extensionName) {
+ const size = this.filesizes?.[extensionName] ?? undefined
+ if (typeof size === 'undefined') return ''
+
+ return filesize(size, { locale: this.$i18n.locale })
+ },
+ setSelectedFormat(format) {
+ local.set(LS_DOWNLOAD_FORMAT_EXTENSION_KEY, format.extension_name)
+ this.selectedFormat = format
+ },
+ },
+}
+</script>

src/components/DownloadButton.vue

@@ -14,12 +14,12 @@
  class="dropdown-button ml-1 rounded-r-sm rounded-l-none"
  :class="{ 'dropdown-button-active': isOpen }"
  aria-haspopup="menu"
- :aria-label="$t('dropdown-button.aria.arrow-label')"
+ :aria-label="safeDropdownAriaLabel"
  :aria-expanded="isOpen"
  @click="toggleOpen"
  @keydown.space.prevent="toggleOpen"
  >
- <svg class="h-2 w-4">
+ <svg class="h-2 w-4 pointer-events-none">
  <use :href="`${icons.caretDown}#icon`" />
  </svg>
  </button>
@@ -50,12 +50,22 @@ import caretDown from '~/assets/icons/caret-down.svg'
 
 const DropdownButton = {
  name: 'DropdownButton',
- data: () => ({
- isOpen: false,
- icons: {
- caretDown,
+ props: {
+ dropdownAriaLabel: {
+  type: String,
+ required: false,
  },
- }),
+ },
+ data() {
+ return {
+ isOpen: false,
+ icons: {
+ caretDown,
+ },
+ safeDropdownAriaLabel:
+ this.dropdownAriaLabel || this.$t('dropdown-button.aria.arrow-label'),
+ }
+ },
  mounted() {
  document.addEventListener('click', this.onClickout)
  },
@@ -136,7 +146,7 @@ export default DropdownButton
 
 <style lang="css" scoped>
 .dropdown-button {
- @apply flex items-center justify-center bg-pink text-white font-bold p-2 px-4 transition-shadow duration-100 ease-linear disabled:opacity-70 focus:outline-none focus-visible:ring focus-visible:ring-offset-2 focus-visible:ring-pink hover:bg-dark-pink;
+ @apply flex items-center justify-center bg-pink text-white font-bold p-2 px-4 transition-shadow duration-100 ease-linear disabled:opacity-70 focus:outline-none focus-visible:ring focus-visible:ring-offset-2 focus-visible:ring-pink hover:bg-dark-pink no-underline appearance-none;
 }
 
 .dropdown-button-active {

src/components/DropdownButton.vue

@@ -0,0 +1,31 @@
+import DownloadButton from '~/components/DownloadButton'
+
+export default {
+ title: 'Components/DownloadButton',
+ component: DownloadButton,
+}
+
+export const Default = () => ({
+ template: `<DownloadButton :formats="formats" />`,
+ components: { DownloadButton },
+ data: () => ({
+ formats: [
+ {
+ extension_name: 'MP3 98kbs',
+ download_url: 'https://mp3d.jamendo.com/download/track/1532771/mp31/',
+ },
+ {
+ extension_name: 'MP3 VBR',
+ download_url: 'https://mp3d.jamendo.com/download/track/1532771/mp32/',
+ },
+ {
+ extension_name: 'FLAC',
+ download_url: 'https://mp3d.jamendo.com/download/track/1532771/flac/',
+ },
+ {
+ extension_name: 'OGG',
+ download_url: 'https://mp3d.jamendo.com/download/track/1532771/ogg/',
+ },
+ ],
+ }),
+})