Add VContentLink component

playwright.config.js

@@ -4,5 +4,6 @@ const config = {
   use: {
     baseURL: 'http://localhost:8443',
   },
+  timeout: 1 * 60 * 1000,
 }
 module.exports = config

src/components/VContentLink/VContentLink.vue

@@ -0,0 +1,95 @@
+<template>
+  <button
+    class="bg-white border border-dark-charcoal/20 rounded-sm flex hover:bg-dark-charcoal hover:text-white focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black overflow-hidden"
+    :class="[
+      isStacked
+        ? 'flex-col items-start py-4 ps-4 pe-12'
+        : 'flex-row justify-between items-center w-full min-w-[22rem] p-6',
+    ]"
+    role="radio"
+    type="button"
+    :aria-checked="isSelected"
+    @click="$emit('selected', mediaType)"
+  >
+    <div
+      class="flex"
+      :class="[isStacked ? 'flex-col items-start' : ' flex-row items-center']"
+    >
+      <VIcon :icon-path="iconPath" />
+      <p class="font-semibold" :class="[isStacked ? 'pt-1' : 'ps-2 text-2xl']">
+        {{
+          isStacked
+            ? $t(`search-tab.${mediaType}`)
+            : $t(`search-tab.see-${mediaType}`)
+        }}
+      </p>
+    </div>
+    <span :class="{ 'text-sr': !isStacked }">{{ resultsCountLabel }}</span>
+  </button>
+</template>
+
+<script>
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+import { resultsCount } from '~/composables/use-i18n-utilities'
+import { AUDIO, IMAGE, mediaTypes } from '~/constants/media'
+import VIcon from '~/components/VIcon/VIcon.vue'
+
+import audioIcon from '~/assets/icons/audio-wave.svg'
+import imageIcon from '~/assets/icons/image.svg'
+
+export default defineComponent({
+  name: 'VContentLink',
+  components: { VIcon },
+  props: {
+    /**
+     * One of the media types supported.
+     */
+    mediaType: {
+      type: String,
+      required: true,
+      validator: (val) => mediaTypes.includes(val),
+    },
+    /**
+     * The number of results that the search returned.
+     */
+    resultsCount: {
+      type: Number,
+      required: true,
+    },
+    /**
+     * Whether the indicated media type is currently selected.
+     */
+    isSelected: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * `stacked` intended for mobile and `horizontal` for desktop.
+     */
+    layout: {
+      type: String,
+      default: 'stacked',
+      validator: (val) => ['stacked', 'horizontal'].includes(val),
+    },
+  },
+  setup(props) {
+    const iconMapping = {
+      [AUDIO]: audioIcon,
+      [IMAGE]: imageIcon,
+    }
+    const iconPath = computed(() => iconMapping[props.mediaType])
+
+    const resultsCountLabel = computed(() => resultsCount(props.resultsCount))
+
+    const isStacked = computed(() => props.layout == 'stacked')
+
+    return { iconPath, imageIcon, resultsCountLabel, isStacked }
+  },
+})
+</script>
+
+<style scoped>
+button[aria-checked='true'] {
+  @apply bg-dark-charcoal text-white;
+}
+</style>

src/components/VContentLink/meta/VContentLink.stories.js

@@ -0,0 +1,83 @@
+import VContentLink from '~/components/VContentLink/VContentLink.vue'
+
+export default {
+  title: 'Components/VContentLink',
+  component: VContentLink,
+  argTypes: {
+    mediaType: {
+      options: ['audio', 'image'],
+      control: { type: 'radio' },
+    },
+    resultsCount: {
+      control: { type: 'number' },
+    },
+    isSelected: {
+      control: { type: 'boolean' },
+    },
+    layout: {
+      options: ['stacked', 'horizontal'],
+      control: { type: 'radio' },
+    },
+  },
+}
+
+const VContentLinkStory = (args, { argTypes }) => ({
+  template: `<VContentLink v-bind="$props" />`,
+  components: { VContentLink },
+  props: Object.keys(argTypes),
+})
+
+const TwoVContentLinkStory = () => ({
+  template: `
+  <div class="grid grid-cols-2 gap-4">
+    <VContentLink
+      v-for="(type, key) in types"
+      :key="key"
+      :media-type="type.mediaType"
+      :results-count="type.resultsCount"
+      :is-selected="selected == type.mediaType"
+      @selected="onSelected"/>
+  </div>
+  `,
+  components: { VContentLink },
+  data() {
+    return {
+      types: [
+        { mediaType: 'image', resultsCount: 4321 },
+        { mediaType: 'audio', resultsCount: 1234 },
+      ],
+      selected: 'audio',
+    }
+  },
+  methods: {
+    onSelected(mediaType) {
+      this.selected = mediaType
+    },
+  },
+})
+
+export const Default = VContentLinkStory.bind({})
+Default.args = {
+  mediaType: 'image',
+  resultsCount: 5708,
+  isSelected: false,
+}
+
+const VContentLinkHorizontalStory = (args, { argTypes }) => ({
+  template: `<div class="max-w-md"><VContentLink v-bind="$props" /></div>`,
+  components: { VContentLink },
+  props: Object.keys(argTypes),
+})
+
+export const Horizontal = VContentLinkHorizontalStory.bind({})
+Horizontal.args = {
+  mediaType: 'audio',
+  resultsCount: 4561,
+  isSelected: false,
+  layout: 'horizontal',
+}
+
+export const Mobile = TwoVContentLinkStory.bind({})
+Mobile.parameters = {
+  viewport: { defaultViewport: 'mob' },
+}

src/components/VInputField/meta/VInputField.stories.mdx

@@ -30,9 +30,9 @@ export const Template = (args, { argTypes }) => ({
 
 # Input field
 
-<Description of={InputField} />
+<Description of={VInputField} />
 
-<ArgsTable of={InputField} />
+<ArgsTable of={VInputField} />
 
 The component emits an `input` event with the new contents of the field whenever
 the field receives an input.

src/composables/use-i18n-utilities.js

@@ -0,0 +1,24 @@
+import { useContext } from '@nuxtjs/composition-api'
+import { ALL_MEDIA } from '~/constants/media'
+
+/**
+ * Returns the localized text for the number of search results according to the
+ * media type.
+ *
+ * @param {number} resultsCount
+ * @param {string} mediaType
+ * @returns {string}
+ */
+export function resultsCount(resultsCount, mediaType = ALL_MEDIA) {
+  const { i18n } = useContext()
+
+  const countKey =
+    resultsCount === 0
+      ? 'no-results'
+      : resultsCount >= 10000
+      ? 'result-count-more'
+      : 'result-count'
+  const fullKey = `browse-page.${mediaType}-${countKey}`
+  const localeCount = resultsCount.toLocaleString(i18n.locale)
+  return i18n.tc(fullKey, resultsCount, { localeCount })
+}

src/locales/en.json

@@ -324,9 +324,11 @@
   },
   "search-tab": {
     "all": "All",
-    "image": "Image",
+    "image": "Images",
     "audio": "Audio",
-    "video": "Video"
+    "video": "Video",
+    "see-image": "See all images",
+    "see-audio": "See all audio"
   },
   "filters": {
     "title": "Filters",

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-01-11T19:17:21+00:00\n"
+"POT-Creation-Date: 2022-01-12T20:51:27+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1112,7 +1112,7 @@ msgid "All"
 msgstr ""
 
 msgctxt "search-tab.image"
-msgid "Image"
+msgid "Images"
 msgstr ""
 
 msgctxt "search-tab.audio"
@@ -1123,6 +1123,14 @@ msgctxt "search-tab.video"
 msgid "Video"
 msgstr ""
 
+msgctxt "search-tab.see-image"
+msgid "See all images"
+msgstr ""
+
+msgctxt "search-tab.see-audio"
+msgid "See all audio"
+msgstr ""
+
 msgctxt "error.occurred"
 msgid "An error occurred"
 msgstr ""

test/e2e/content-types.spec.js

@@ -41,7 +41,7 @@ const contentTypes = [
   },
   {
     id: 'image',
-    name: 'Image',
+    name: 'Images',
     url: '/search/image/?q=cat',
     supported: true,
     sources: 6,
@@ -63,7 +63,7 @@ const contentTypes = [
 ]
 
 for (const [i, contentType] of contentTypes.entries()) {
-  test(`Can open ${contentType.name} page on SSR`, async ({ page }) => {
+  test(`Can open ${contentType.name} search page on SSR`, async ({ page }) => {
     await page.goto(contentType.url)
 
     // Selected content page

test/e2e/search-query-client.spec.js

@@ -74,7 +74,7 @@ test('selecting license type filter on homepage applies filters', async ({
   const activeTabLabel = await page
     .locator('[role="tab"][aria-selected="true"]')
     .textContent()
-  expect(activeTabLabel.trim()).toEqual('Image')
+  expect(activeTabLabel.trim()).toEqual('Images')
   await expect(page).toHaveURL('search/image?q=cat&license_type=commercial')
 })
 

test/unit/specs/components/v-content-link.spec.js

@@ -0,0 +1,48 @@
+import VContentLink from '~/components/VContentLink/VContentLink.vue'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import VueI18n from 'vue-i18n'
+
+const enMessages = require('~/locales/en.json')
+const i18n = new VueI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: { en: enMessages },
+})
+
+describe('VContentLink', () => {
+  let options = {}
+
+  beforeEach(() => {
+    options = {
+      props: { mediaType: 'image', resultsCount: 123 },
+      mocks: {
+        $nuxt: {
+          context: {
+            i18n,
+          },
+        },
+      },
+    }
+  })
+
+  it('is not selected by default', () => {
+    render(VContentLink, options)
+    const btn = screen.getByRole('radio')
+    expect(btn).not.toHaveAttribute('aria-checked')
+  })
+
+  it('is marked as selected when indicated with the isSelected prop', () => {
+    options.props.isSelected = true
+    render(VContentLink, options)
+    const btn = screen.getByRole('radio')
+    expect(btn).toHaveAttribute('aria-checked')
+  })
+
+  it('should emit selected event on click', () => {
+    const { emitted } = render(VContentLink, options)
+    const btn = screen.getByText('search-tab.image')
+    userEvent.click(btn)
+    expect(emitted().selected).toBeTruthy()
+  })
+})