From 0cfb85daeb9b475371bab5ebb7570a49691ce0f7 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 28 Jan 2022 18:38:43 +0300
Subject: [PATCH] Add homepage content switcher for mobile screens (#716)

* Add homepage content switcher for mobile screens

* Apply code-review changes

* Apply code-review changes

* Update src/components/VContentSwitcher/VContentTypeButton.vue

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
---
 .../VContentSwitcher/VContentTypeButton.vue   | 65 +++++++++++++++++++
 src/pages/index.vue                           | 21 ++++--
 2 files changed, 82 insertions(+), 4 deletions(-)
 create mode 100644 src/components/VContentSwitcher/VContentTypeButton.vue

diff --git a/src/components/VContentSwitcher/VContentTypeButton.vue b/src/components/VContentSwitcher/VContentTypeButton.vue
new file mode 100644
index 0000000000..3aa1112f5e
--- /dev/null
+++ b/src/components/VContentSwitcher/VContentTypeButton.vue
@@ -0,0 +1,65 @@
+<template>
+  <button
+    type="button"
+    class="transition-colors"
+    :class="[$style.button, selected && $style['button-pressed']]"
+    :aria-pressed="selected"
+    @click="handleClick"
+  >
+    <VIcon :icon-path="iconPath" class="me-1 flex-shrink-0" />
+    <span>{{ $t(`search-type.${contentType}`) }}</span>
+  </button>
+</template>
+
+<script>
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+import {
+  ALL_MEDIA,
+  AUDIO,
+  IMAGE,
+  supportedContentTypes,
+} 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'
+import allIcon from 'assets/icons/all-content.svg'
+
+const iconMapping = {
+  [AUDIO]: audioIcon,
+  [IMAGE]: imageIcon,
+  [ALL_MEDIA]: allIcon,
+}
+
+export default defineComponent({
+  name: 'VContentTypeButton',
+  components: { VIcon },
+  props: {
+    /**
+     * One of the media types supported.
+     */
+    contentType: {
+      type: String,
+      required: true,
+      validator: (v) => supportedContentTypes.includes(v),
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const iconPath = computed(() => iconMapping[props.contentType])
+    const handleClick = () => emit('select', props.contentType)
+    return { iconPath, handleClick }
+  },
+})
+</script>
+<style module>
+.button {
+  @apply flex flex-row items-center p-2 pe-3 rounded-sm text-sr font-semibold bg-tx border border-dark-charcoal focus-visible:outline-none  focus-visible:ring focus-visible:ring-pink hover:text-white hover:bg-dark-charcoal focus-visible:hover:border-white focus-visible:border-tx;
+}
+.button-pressed {
+  @apply text-white bg-dark-charcoal focus-visible:border focus-visible:border-white;
+}
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 77b5ca2d7b..cba4795201 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -20,6 +20,15 @@
       <h2 class="text-4xl lg:text-6xl mt-auto lg:mt-6">
         {{ $t('hero.subtitle') }}
       </h2>
+      <div class="flex justify-start gap-4 mt-4 md:hidden">
+        <VContentTypeButton
+          v-for="type in supportedContentTypes"
+          :key="type"
+          :content-type="type"
+          :selected="type === contentType"
+          @select="setContentType"
+        />
+      </div>
       <VSearchBar
         v-model.trim="searchTerm"
         class="max-w-[40rem] mt-4 lg:mt-8"
@@ -105,19 +114,20 @@
 </template>
 
 <script>
-import { ref, useRouter, useStore, useContext } from '@nuxtjs/composition-api'
-
-import VContentSwitcherPopover from '~/components/VContentSwitcher/VContentSwitcherPopover.vue'
+import { ref, useContext, useRouter, useStore } from '@nuxtjs/composition-api'
 
 import { isMinScreen } from '~/composables/use-media-query'
 
-import { ALL_MEDIA } from '~/constants/media'
+import { ALL_MEDIA, supportedContentTypes } from '~/constants/media'
 import { MEDIA, SEARCH } from '~/constants/store-modules'
 import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
 
 import imageInfo from '~/assets/homepage_images/image_info.json'
 
 import OpenverseLogo from '~/assets/logo.svg?inline'
+import VContentSwitcherPopover from '~/components/VContentSwitcher/VContentSwitcherPopover.vue'
+import VContentTypeButton from '~/components/VContentSwitcher/VContentTypeButton.vue'
+import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 
 const HomePage = {
   name: 'home-page',
@@ -125,6 +135,8 @@ const HomePage = {
   components: {
     OpenverseLogo,
     VContentSwitcherPopover,
+    VContentTypeButton,
+    VSearchBar,
   },
   head: {
     meta: [
@@ -195,6 +207,7 @@ const HomePage = {
       contentSwitcher,
       contentType,
       setContentType,
+      supportedContentTypes,
 
       searchTerm,
       handleSearch,