From a5c8f357a5a559631781e8bfa45b1089e595b884 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 22 Sep 2022 17:22:44 +0300
Subject: [PATCH] Create a tabbed mobile modal

---
 .../VContentSwitcher/VMobileMenuModal.vue     | 138 ++++++++++++++----
 .../VContentSwitcher/VSearchTypes.vue         |   1 +
 .../meta/VMobileMenuModal.stories.mdx         |  46 ++++++
 src/components/VFilters/VSearchGridFilter.vue |  21 ++-
 src/components/VHeader/VHeaderMenu.vue        |   2 +-
 src/components/VModal/VModal.vue              |   2 +-
 src/components/VModal/VModalContent.vue       |  23 ++-
 src/components/VTabs/VTab.vue                 |  19 ++-
 src/components/VTabs/VTabs.vue                |  17 ++-
 src/components/VTabs/meta/VTabs.stories.mdx   |  39 ++++-
 src/locales/en.json                           |   3 +-
 src/models/tabs.ts                            |   6 +-
 12 files changed, 272 insertions(+), 45 deletions(-)
 create mode 100644 src/components/VContentSwitcher/meta/VMobileMenuModal.stories.mdx

diff --git a/src/components/VContentSwitcher/VMobileMenuModal.vue b/src/components/VContentSwitcher/VMobileMenuModal.vue
index 0f57e76ed1..89f88aa479 100644
--- a/src/components/VContentSwitcher/VMobileMenuModal.vue
+++ b/src/components/VContentSwitcher/VMobileMenuModal.vue
@@ -2,86 +2,170 @@
   <VModal
     ref="nodeRef"
     class="mobile-menu ms-auto md:ms-0"
+    variant="two-thirds"
     :label="$t('header.filter-button.simple').toString()"
     :initial-focus-element="initialFocusElement"
   >
     <template #trigger="{ a11yProps, visible }">
       <VSearchTypeButton
+        ref="triggerRef"
         :a11y-props="a11yProps"
         :visible="visible"
-        :active-item="activeItem"
         aria-controls="content-switcher-modal"
       />
     </template>
-    <nav
-      id="content-switcher-modal"
-      class="p-6"
-      aria-labelledby="content-switcher-heading"
+    <VTabs
+      variant="plain"
+      :selected-id="selectedMenu"
+      :label="$t('header.aria.menu').toString()"
+      @change="$emit('change', $event)"
+      @close="closeModal"
     >
-      <VSearchTypes
-        ref="searchTypesRef"
-        size="small"
-        :active-item="content.activeType.value"
-        :use-links="true"
-        @select="selectItem"
-      />
-      <VPageList layout="columns" class="mt-10" />
-    </nav>
+      <template #tabs>
+        <VTab id="content-type" class="!text-sr uppercase ms-8" size="large">
+          {{ $t(`search-type.heading`) }}
+        </VTab>
+        <VTab id="filters" class="!text-sr !uppercase ms-8" size="large">
+          {{ $t(`header.filter-button.simple`) }}
+        </VTab>
+        <VIconButton
+          class="my-auto border-none text-dark-charcoal-70 ms-auto hover:text-dark-charcoal"
+          size="search-medium"
+          :icon-props="{ iconPath: closeIcon }"
+          :button-props="{
+            'aria-label': $t('modal.close').toString(),
+            variant: 'plain',
+          }"
+          @click="closeModal"
+        />
+      </template>
+      <VTabPanel id="content-type" class="h-120 flex-grow overflow-y-auto px-8">
+        <nav
+          id="content-switcher-modal"
+          aria-labelledby="content-switcher-heading"
+        >
+          <VSearchTypes
+            ref="searchTypesRef"
+            size="small"
+            :active-item="content.activeType.value"
+            :use-links="true"
+            @select="selectItem"
+          />
+        </nav>
+      </VTabPanel>
+      <VTabPanel id="filters" class="h-120 flex-grow overflow-y-auto px-8 pt-0">
+        <VSearchGridFilter
+          class="!px-0"
+          :show-filter-header="false"
+          @close="closeModal"
+        />
+      </VTabPanel>
+    </VTabs>
+    <footer
+      class="mt-auto flex justify-between border-t border-dark-charcoal-20 px-6 py-4"
+    >
+      <VButton variant="secondary">{{ $t('filter-list.clear') }}</VButton>
+      <VButton @click="close">{{ $t('header.see-results') }}</VButton>
+    </footer>
   </VModal>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+  watch,
+} from '@nuxtjs/composition-api'
 
 import usePages from '~/composables/use-pages'
 import useSearchType from '~/composables/use-search-type'
+import { isMinScreen } from '~/composables/use-media-query'
+
+import type { SearchType, SupportedSearchType } from '~/constants/media'
 
-import type { SupportedSearchType } from '~/constants/media'
+import { defineEvent } from '~/types/emits'
 
+import VButton from '~/components/VButton.vue'
+import VIconButton from '~/components/VIconButton/VIconButton.vue'
 import VModal from '~/components/VModal/VModal.vue'
-import VPageList from '~/components/VHeaderOld/VPageMenu/VPageList.vue'
 import VSearchTypeButton from '~/components/VContentSwitcher/VSearchTypeButton.vue'
 import VSearchTypes from '~/components/VContentSwitcher/VSearchTypes.vue'
+import VTabs from '~/components/VTabs/VTabs.vue'
+import VTab from '~/components/VTabs/VTab.vue'
+import VTabPanel from '~/components/VTabs/VTabPanel.vue'
+import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
+
+import closeIcon from '~/assets/icons/close-small.svg'
 
 export default defineComponent({
   name: 'VMobileMenuModal',
   components: {
+    VButton,
+    VIconButton,
     VModal,
-    VPageList,
+    VSearchGridFilter,
     VSearchTypeButton,
     VSearchTypes,
+    VTab,
+    VTabPanel,
+    VTabs,
   },
   props: {
-    activeItem: {
-      type: String,
-      required: true,
+    openTab: {
+      type: String as PropType<'content-type' | 'filters'>,
+      default: 'content-type',
     },
   },
+  emits: {
+    select: defineEvent<[item: SearchType]>(),
+  },
   setup(_, { emit }) {
     const content = useSearchType()
     const pages = usePages()
 
     const searchTypesRef = ref<InstanceType<typeof VSearchTypes> | null>(null)
-    const nodeRef = ref(null)
+    const nodeRef = ref<InstanceType<typeof VModal>>(null)
+    const triggerRef = ref<InstanceType<typeof VSearchTypeButton> | null>(null)
+
+    const isMinScreenLg = isMinScreen('lg')
 
     const initialFocusElement = computed(() => {
-      return searchTypesRef.value?.$el
-        ? (searchTypesRef.value.$el as HTMLElement).querySelector<HTMLElement>(
-            '[aria-checked="true"]'
-          )
-        : null
+      const searchTypesElement = searchTypesRef.value?.$el
+      if (!searchTypesElement) return null
+
+      return (searchTypesElement as HTMLElement).querySelector<HTMLElement>(
+        '[aria-checked="true"]'
+      )
     })
 
     const selectItem = (item: SupportedSearchType) => emit('select', item)
+    const selectedMenu = computed(() => 'content-type')
+
+    const closeModal = () => {
+      nodeRef.value?.close()
+    }
+
+    watch(isMinScreenLg, (isLg) => {
+      if (isLg) {
+        closeModal()
+      }
+    })
 
     return {
       pages,
       content,
       nodeRef,
       searchTypesRef,
+      closeIcon,
 
       selectItem,
+      closeModal,
+      close: closeModal,
       initialFocusElement,
+      selectedMenu,
+      triggerRef,
     }
   },
 })
diff --git a/src/components/VContentSwitcher/VSearchTypes.vue b/src/components/VContentSwitcher/VSearchTypes.vue
index 3e85d79f4f..891a059a31 100644
--- a/src/components/VContentSwitcher/VSearchTypes.vue
+++ b/src/components/VContentSwitcher/VSearchTypes.vue
@@ -16,6 +16,7 @@
       }"
     >
       <h4
+        v-if="index !== 0"
         :class="bordered ? 'ps-0' : 'ps-6'"
         class="pt-6 pb-4 text-sr font-semibold uppercase pe-6"
       >
diff --git a/src/components/VContentSwitcher/meta/VMobileMenuModal.stories.mdx b/src/components/VContentSwitcher/meta/VMobileMenuModal.stories.mdx
new file mode 100644
index 0000000000..0274de4c87
--- /dev/null
+++ b/src/components/VContentSwitcher/meta/VMobileMenuModal.stories.mdx
@@ -0,0 +1,46 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+
+import VMobileMenuModal from '~/components/VContentSwitcher/VMobileMenuModal.vue'
+import VModalTarget from '~/components/VModal/VModalTarget.vue'
+
+<Meta
+  title="Components/VMobileMenuModal"
+  components={VMobileMenuModal}
+  argTypes={{
+    close: {
+      action: 'close',
+    },
+    select: {
+      action: 'select',
+    },
+    change: {
+      action: 'change',
+    },
+  }}
+/>
+
+export const Template = (args) => ({
+  template: `<div><VMobileMenuModal v-bind="args" v-on="args"/><VModalTarget /></div>`,
+  components: { VMobileMenuModal, VModalTarget },
+  setup() {
+    return { args }
+  },
+})
+
+# VMobileMenuModal
+
+<Description of={VMobileMenuModal} />
+
+<ArgsTable of={VMobileMenuModal} />
+
+<Canvas>
+  <Story height="480px" name="Default">
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 580e24d19d..e019d1fe31 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -4,7 +4,10 @@
     aria-labelledby="filters-heading"
     class="filters py-8 px-10"
   >
-    <div class="mt-2 mb-6 flex items-center justify-between">
+    <header
+      v-if="showFilterHeader"
+      class="mt-2 mb-6 flex items-center justify-between"
+    >
       <h4
         id="filters-heading"
         class="py-2 text-sr font-semibold uppercase leading-8"
@@ -21,7 +24,7 @@
       >
         {{ $t('filter-list.clear') }}
       </VButton>
-    </div>
+    </header>
     <form
       ref="filtersFormRef"
       class="filters-form"
@@ -37,7 +40,10 @@
         @toggle-filter="toggleFilter"
       />
     </form>
-    <footer v-if="isAnyFilterApplied" class="flex justify-between md:hidden">
+    <footer
+      v-if="showFilterHeader && isAnyFilterApplied"
+      class="flex justify-between md:hidden"
+    >
       <VButton variant="primary" @click="$emit('close')">
         {{ $t('filter-list.show') }}
       </VButton>
@@ -73,6 +79,15 @@ export default defineComponent({
     VButton,
     VFilterChecklist,
   },
+  props: {
+    /**
+     * Whether to show the header with the title and the clear button.
+     */
+    showFilterHeader: {
+      type: Boolean,
+      default: true,
+    },
+  },
   emits: {
     close: defineEvent(),
   },
diff --git a/src/components/VHeader/VHeaderMenu.vue b/src/components/VHeader/VHeaderMenu.vue
index 1c06608756..547c2c89c3 100644
--- a/src/components/VHeader/VHeaderMenu.vue
+++ b/src/components/VHeader/VHeaderMenu.vue
@@ -44,7 +44,7 @@ export default defineComponent({
       isMounted.value = true
     })
     const selectSearchType = async (type) => {
-      menuModalRef.value?.closeMenu()
+      menuModalRef.value?.close()
       content.setActiveType(type)
 
       const newPath = app.localePath({
diff --git a/src/components/VModal/VModal.vue b/src/components/VModal/VModal.vue
index d0dd3908cc..e90bc751c6 100644
--- a/src/components/VModal/VModal.vue
+++ b/src/components/VModal/VModal.vue
@@ -122,7 +122,7 @@ export default defineComponent({
      * @default 'default'
      */
     variant: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'default' | 'full'>} */ (
+      type: /** @type {import('@nuxtjs/composition-api').PropType<'default' | 'full' | 'two-thirds'>} */ (
         String
       ),
       default: 'default',
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
index 19a3cbae86..7d1b621cbf 100644
--- a/src/components/VModal/VModalContent.vue
+++ b/src/components/VModal/VModalContent.vue
@@ -29,7 +29,8 @@
               jarring "shifting" effect when opening the mobile modal.
             -->
             <div
-              class="flex w-full shrink-0 justify-between bg-white py-4 pe-3 ps-4 md:justify-end md:bg-tx md:px-0 md:py-3"
+              v-if="variant === 'default'"
+              class="flex w-full shrink-0 justify-between py-4 pe-3 ps-4 md:justify-end md:bg-tx md:px-0 md:py-3"
               :class="[$style[`top-bar-${variant}`], $style[`top-bar-${mode}`]]"
             >
               <VLogoButtonOld
@@ -52,7 +53,7 @@
           </slot>
 
           <div
-            class="w-full flex-grow text-left align-bottom md:rounded-t-md"
+            class="w-full flex-grow"
             :class="[
               $style[`modal-content-${variant}`],
               $style[`modal-content-${mode}`],
@@ -125,7 +126,7 @@ export default defineComponent({
       required: false,
     },
     variant: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'default' | 'full'>} */ (
+      type: /** @type {import('@nuxtjs/composition-api').PropType<'default' | 'full' | 'two-thirds'>} */ (
         String
       ),
       default: 'default',
@@ -187,18 +188,34 @@ export default defineComponent({
 .top-bar-full {
   @apply flex h-20 w-full shrink-0 justify-between bg-dark-charcoal px-4 py-3 md:items-stretch md:justify-start md:py-4 md:px-7;
 }
+.top-bar-two-thirds {
+  @apply bg-tx;
+}
+.modal-backdrop-two-thirds {
+  @apply bg-dark-charcoal bg-opacity-75;
+}
 .modal-default {
   @apply md:max-w-[768px] lg:w-[768px] xl:w-[1024px] xl:max-w-[1024px];
 }
+
 .modal-dark {
   @apply bg-dark-charcoal text-white;
 }
 .modal-light {
   @apply bg-white text-dark-charcoal;
 }
+.modal-content-default {
+  @apply text-left align-bottom md:rounded-t-md;
+}
 .modal-content-full {
   @apply flex w-full flex-col justify-between px-6 pb-10;
 }
+.modal-two-thirds {
+  @apply mt-50 h-full w-full rounded-t-lg bg-white;
+}
+.modal-content-two-thirds {
+  @apply rounded-t-md;
+}
 .modal-content-dark {
   @apply bg-dark-charcoal text-white;
 }
diff --git a/src/components/VTabs/VTab.vue b/src/components/VTabs/VTab.vue
index d4d60741ce..d0bfb2457d 100644
--- a/src/components/VTabs/VTab.vue
+++ b/src/components/VTabs/VTab.vue
@@ -7,8 +7,12 @@
     size="disabled"
     variant="plain--avoid"
     v-bind="tabProps"
-    class="label-bold md:description-bold rounded-none border-0 bg-white py-3 px-4 focus-visible:shadow-[0_0_0_1.5px_#c52b9b_inset] md:px-6"
-    :class="[$style[variant], isSelected && $style[`${variant}-selected`]]"
+    class="label-bold md:description-bold rounded-none border-0 bg-white focus-visible:shadow-[0_0_0_1.5px_#c52b9b_inset]"
+    :class="[
+      $style[variant],
+      $style[`size-${size}`],
+      isSelected && $style[`${variant}-selected`],
+    ]"
     @click="handleSelection"
     @focus="handleFocus"
     @mousedown="handleMouseDown"
@@ -25,6 +29,7 @@ import {
   inject,
   onMounted,
   onUnmounted,
+  type PropType,
   ref,
 } from '@nuxtjs/composition-api'
 
@@ -54,6 +59,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    size: {
+      type: String as PropType<'default' | 'large'>,
+      default: 'default',
+    },
   },
   setup(props) {
     const tabContext = inject(tabsContextKey)
@@ -199,4 +208,10 @@ export default defineComponent({
 .plain-selected {
   @apply rounded-none border-dark-charcoal;
 }
+.size-default {
+  @apply py-3 px-4 md:px-6;
+}
+.size-large {
+  @apply h-16;
+}
 </style>
diff --git a/src/components/VTabs/VTabs.vue b/src/components/VTabs/VTabs.vue
index 5b540c628e..dfa3bb5e19 100644
--- a/src/components/VTabs/VTabs.vue
+++ b/src/components/VTabs/VTabs.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <div role="tablist" class="flex flex-row" v-bind="accessibleLabel">
+    <div
+      role="tablist"
+      class="flex flex-row items-stretch"
+      v-bind="accessibleLabel"
+    >
       <slot name="tabs" />
     </div>
     <slot name="default" />
@@ -16,9 +20,11 @@ import {
   ref,
 } from '@nuxtjs/composition-api'
 
-import { tabsContextKey, TabsState } from '~/models/tabs'
+import { tabsContextKey, type TabsState, TabVariant } from '~/models/tabs'
 import { defineEvent } from '~/types/emits'
 
+import closeIcon from '~/assets/icons/close-small.svg'
+
 /**
  * VTabs is an accessible implementation of tabs component that displays one panel at a time.
  * @see { https://www.w3.org/TR/wai-aria-practices/#tabpanel }
@@ -60,7 +66,7 @@ export default defineComponent({
      * `plain` tabs only have a line under the tabs, and a thicker line under the selected tab.
      */
     variant: {
-      type: String as PropType<TabsState['variant']['value'][number]>,
+      type: String as PropType<TabVariant>,
       default: 'bordered',
     },
     /**
@@ -73,11 +79,13 @@ export default defineComponent({
   },
   emits: {
     change: defineEvent<[string]>(),
+    close: defineEvent(),
   },
   setup(props, { emit }) {
     const selectedId = ref<TabsState['selectedId']['value']>(props.selectedId)
     const tabs = ref<TabsState['tabs']['value']>([])
     const panels = ref<TabsState['panels']['value']>([])
+    const closeButtonRef = ref<HTMLElement | null>(null)
 
     const tabGroupContext: TabsState = {
       selectedId,
@@ -114,9 +122,12 @@ export default defineComponent({
         ? { 'aria-labelledby': props.label.slice(1) }
         : { 'aria-label': props.label }
     )
+
     return {
       accessibleLabel,
       selectedTabId: tabGroupContext.selectedId,
+      closeIcon,
+      closeButtonRef,
     }
   },
 })
diff --git a/src/components/VTabs/meta/VTabs.stories.mdx b/src/components/VTabs/meta/VTabs.stories.mdx
index 85c4e56472..715d15b3d4 100644
--- a/src/components/VTabs/meta/VTabs.stories.mdx
+++ b/src/components/VTabs/meta/VTabs.stories.mdx
@@ -10,10 +10,25 @@ import VTabs from '~/components/VTabs/VTabs.vue'
 import VTabPanel from '~/components/VTabs/VTabPanel.vue'
 import VTab from '~/components/VTabs/VTab.vue'
 
-<Meta title="Components/VTabs" component={VTabs} />
+<Meta
+  title="Components/VTabs"
+  component={VTabs}
+  argTypes={{
+    variant: {
+      options: ['bordered', 'plain'],
+      control: { type: 'radio' },
+    },
+    close: {
+      action: 'close',
+    },
+    change: {
+      action: 'change',
+    },
+  }}
+/>
 
 export const Template = (args) => ({
-  template: `<VTabs v-bind="args"><template #tabs>
+  template: `<VTabs v-bind="args" v-on="args"><template #tabs>
 <VTab id='1'>Tab1</VTab><VTab id='2'>Tab2</VTab><VTab id='3'>Tab3</VTab>
 </template>
 <VTabPanel id='1'>Page 1 content</VTabPanel>
@@ -43,6 +58,7 @@ such as the attribution panels in Openverse.
     name="Default"
     args={{
       label: 'Default tabs story',
+      selectedId: '1',
     }}
   >
     {Template.bind({})}
@@ -69,6 +85,7 @@ These tabs also use the second available variant, `plain`.
     name="Manual plain tabs"
     args={{
       label: 'Manual plain tabs',
+      selectedId: '1',
       manual: true,
       variant: 'plain',
     }}
@@ -76,3 +93,21 @@ These tabs also use the second available variant, `plain`.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+### Closeable tabs
+
+If you pass the `showCloseButton` prop, the tab will have a close button at the top end side that will emit a `close` event when clicked.
+
+<Canvas>
+  <Story
+    name="Closeable tabs"
+    args={{
+      label: 'Closeable tabs',
+      showCloseButton: true,
+      variant: 'plain',
+      selectedId: '1',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/locales/en.json b/src/locales/en.json
index 5e27a6cd46..44124d22e7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -58,7 +58,8 @@
     "filter-button": {
       "simple": "Filters",
       "with-count": "{count} Filter|{count} Filters"
-    }
+    },
+    "see-results": "See results"
   },
   "navigation": {
     "about": "About",
diff --git a/src/models/tabs.ts b/src/models/tabs.ts
index 548ec1aab2..5bb065cecb 100644
--- a/src/models/tabs.ts
+++ b/src/models/tabs.ts
@@ -1,12 +1,14 @@
 import type { ComputedRef, InjectionKey, Ref } from '@nuxtjs/composition-api'
 import type { ComponentPublicInstance } from '@vue/runtime-dom'
 
+export type TabActivation = 'manual' | 'auto'
+export type TabVariant = 'bordered' | 'plain'
 export type TabsState = {
   // State
   selectedId: Ref<string>
 
-  activation: ComputedRef<'manual' | 'auto'>
-  variant: ComputedRef<'bordered' | 'plain'>
+  activation: ComputedRef<TabActivation>
+  variant: ComputedRef<TabVariant>
 
   tabs: Ref<Ref<HTMLElement | ComponentPublicInstance | null>[]>
   panels: Ref<Ref<HTMLElement | null>[]>