Update footer to match the new mockups

src/components/VFooter/VFooter.vue

@@ -2,18 +2,22 @@
   <footer
     ref="footerEl"
     class="footer flex flex-col gap-10 px-6 py-10"
-    :class="variantNames"
+    :class="[
+      ...variantNames,
+      isContentMode ? 'footer-content' : 'footer-internal',
+    ]"
   >
     <!-- Logo and links -->
-    <div v-if="isContentMode" class="logo-and-links flex flex-col gap-10">
-      <VLink href="/" class="text-dark-charcoal">
+    <div v-if="isContentMode" class="logo-and-links flex flex-col gap-y-10">
+      <VLink href="/" class="logo text-dark-charcoal">
         <VBrand class="text-[18px]" />
       </VLink>
       <nav>
-        <ul class="nav-list grid grid-cols-2 gap-6 text-sm">
+        <ul class="nav-list label-regular" :style="linkColumnHeight">
           <li v-for="page in allPages" :key="page.id">
             <VLink
-              class="text-dark-charcoal"
+              class="py-2 text-dark-charcoal"
+              :class="{ active: page.id === currentPage }"
               :href="page.link"
               show-external-icon
               >{{ $t(page.name) }}</VLink
@@ -24,16 +28,16 @@
     </div>
 
     <!-- Locale chooser and WordPress affiliation graphic -->
-    <div class="locale-and-wp flex flex-col justify-between gap-10">
+    <div class="locale-and-wp flex flex-col justify-between gap-y-10">
       <VLanguageSelect v-bind="languageProps" class="language max-w-full" />
       <VLink
         href="https://wordpress.org"
         class="text-dark-charcoal hover:no-underline"
       >
         <i18n
-          tag="div"
+          tag="p"
           path="footer.wordpress-affiliation"
-          class="flex h-full flex-row items-center gap-2 text-sm"
+          class="label-regular flex h-full flex-row gap-2 !leading-[25px]"
         >
           <template #wordpress>
             <WordPress class="aria-hidden" />
@@ -53,17 +57,18 @@ import {
   ref,
 } from '@nuxtjs/composition-api'
 
-import usePages from '~/composables/use-pages'
+import { CSSProperties } from '@vue/runtime-dom'
 
+import usePages from '~/composables/use-pages'
 import useResizeObserver from '~/composables/use-resize-observer'
 
 import { SCREEN_SIZES } from '~/constants/screens'
 
-import type { SelectFieldProps } from '~/components/VSelectField/VSelectField.vue'
+import { useUiStore } from '~/stores/ui'
 
+import type { SelectFieldProps } from '~/components/VSelectField/VSelectField.vue'
 import VLink from '~/components/VLink.vue'
 import VBrand from '~/components/VBrand/VBrand.vue'
-
 import VLanguageSelect from '~/components/VLanguageSelect/VLanguageSelect.vue'
 
 import WordPress from '~/assets/wordpress.svg?inline'
@@ -89,76 +94,102 @@ export default defineComponent({
     mode: {
       type: String as PropType<'internal' | 'content'>,
       required: false,
-      default: undefined,
     },
     languageProps: {
       type: Object as PropType<SelectFieldProps>,
       default: () => ({}),
     },
   },
   setup(props) {
+    const uiStore = useUiStore()
     const { all: allPages, current: currentPage } = usePages(true)
 
-    const isContentMode = computed(() => {
-      if (props.mode) {
-        return props.mode === 'content'
-      } else {
-        return ['search', 'audio', 'image'].some((prefix) =>
-          currentPage.value?.startsWith(prefix)
-        )
-      }
-    })
+    const isContentMode = computed(() => props.mode === 'content')
 
     /** JS-based responsiveness */
     const footerEl = ref<HTMLElement | null>(null)
-    const { dimens: footerDimens } = useResizeObserver(footerEl)
+    const initialWidth = SCREEN_SIZES[uiStore.breakpoint]
+    const { dimens: footerDimens } = useResizeObserver(footerEl, {
+      initialWidth,
+    })
+
+    /**
+     * Return a list of all breakpoints that are smaller than the current screen width. This allows us to use the smallest variant class to target CSS styles.
+     *
+     * I.e., with a width at 1200, the footer will have `footer-2xl footer-lg`. Using `footer-lg`, we can apply styles to both `footer-2xl` and `footer-lg`.
+     */
     const variantNames = computed(() =>
       Object.entries(SCREEN_SIZES)
         .filter(([, val]) => footerDimens.value.width >= val)
         .map(([key]) => `footer-${key}`)
     )
 
+    const linkColumnHeight = computed<CSSProperties>(() => ({
+      '--link-col-height': Math.ceil(Object.keys(allPages).length / 2),
+    }))
+
     return {
       isContentMode,
       allPages,
+      currentPage,
 
       footerEl,
       variantNames,
+      linkColumnHeight,
     }
   },
 })
 </script>
 
 <style>
-.footer.footer-sm .nav-list {
-  @apply flex flex-row gap-8;
+/* wrapper element styles */
+.footer-sm {
+  @apply p-6 pt-10;
 }
-
-.footer.footer-sm .locale-and-wp {
-  @apply flex-row;
+.footer-lg {
+  @apply gap-y-8 px-10;
 }
 
-.footer.footer-sm .language {
-  @apply max-w-[12.5rem];
+/* footer > logo-and-links styles */
+.footer-sm .logo-and-links {
+  @apply grid grid-flow-col grid-cols-2;
 }
 
-.footer.footer-md .logo-and-links {
-  @apply flex-row items-center justify-between;
+.footer-lg .logo-and-links {
+  @apply flex flex-row items-center justify-between;
 }
 
-.footer.footer-lg {
-  @apply px-10;
+/* logo-and-links > nav-list styles */
+
+.nav-list {
+  @apply grid grid-flow-col grid-cols-2;
+  /*
+  We set the number of rows in JS to have 2 equally distributed link columns.
+  */
+  grid-template-rows: repeat(var(--link-col-height, 3), 1fr);
 }
 
-.footer.footer-xl {
-  @apply flex-row gap-8;
+.footer-lg .nav-list {
+  @apply flex gap-x-6;
 }
 
-.footer.footer-xl .logo-and-links {
-  @apply flex-grow;
+/* locale-and-wp locale chooser and WordPress affiliation graphic styles */
+.footer-content.footer-sm .locale-and-wp {
+  @apply grid grid-cols-2 items-center;
+}
+.footer-content.footer-lg .locale-and-wp,
+.footer-internal.footer-sm .locale-and-wp {
+  @apply flex flex-row items-center justify-between;
 }
 
-.footer.footer-xl .locale-and-wp {
-  @apply flex-grow;
+/* element styles */
+.footer-sm .logo {
+  @apply self-start pt-2;
+}
+.footer .language {
+  width: 100% !important;
+}
+.footer-sm .language {
+  @apply max-w-[12.5rem];
 }
 </style>

src/composables/use-pages.ts

@@ -79,7 +79,9 @@ export default function usePages(isNew = false) {
    * The route name of the current page is localized, so it looks like `index__en`.
    * We need to remove the locale suffix to match the page id.
    */
-  const currentPageId = computed(() => route.value?.name?.split('__')[0])
+  const currentPageId = computed<string>(
+    () => route.value?.name?.split('__')[0] ?? ''
+  )
 
   return { all: pages, current: currentPageId }
 }

src/composables/use-resize-observer.ts

@@ -2,14 +2,27 @@ import { ref, onMounted, onBeforeUnmount } from '@nuxtjs/composition-api'
 
 import type { Ref } from '@nuxtjs/composition-api'
 
+interface Options {
+  initialWidth?: number
+  initialHeight?: number
+}
 /**
  * Configure a `ResizeObserver` to observe the given `HTMLElement` and update
  * the dimensions whenever it is resized.
  *
  * @param elem - the ref pointing to the `HTMLElement` to observe
+ * @param options - the options to pass to the `ResizeObserver`, can be used to
+ * pass the initial dimensions.
  */
-export default function useResizeObserver(elem: Ref<HTMLElement | null>) {
-  const dimens = ref({ width: 0, height: 0 })
+export default function useResizeObserver(
+  elem: Ref<HTMLElement | null>,
+  options: Options = {}
+) {
+  const initialDimensions = {
+    width: options.initialWidth || 0,
+    height: options.initialHeight || 0,
+  }
+  const dimens = ref(initialDimensions)
   const updateDimens = () => {
     dimens.value = {
       width: elem.value?.clientWidth || 0,

src/locales/scripts/en.json5

@@ -697,7 +697,7 @@
   },
   footer: {
     // Link back to WordPress, the word is replaced by the logo
-    'wordpress-affiliation': 'Powered by {wordpress}',
+    'wordpress-affiliation': 'Part of the {wordpress} project',
     wip: '\uD83D\uDEA7',
   },
   language: {

test/locales/ar.json

@@ -689,5 +689,21 @@
     "sources": "مصادر",
     "external-sources": "مصادر خارجية",
     "search-help": "بحث في المساعدة"
+  },
+  "footer": {
+    "wordpress-affiliation": "جزء من مشروع {wordpress}",
+    "wip": "\uD83D\uDEA7"
+  },
+  "language": {
+    "language": "لغة"
+  },
+  "recent-searches": {
+    "heading": "عمليات البحث الأخيرة",
+    "clear": {
+      "text": "مسح",
+      "label": "مسح عمليات البحث الأخيرة"
+    },
+    "none": "لا توجد عمليات بحث حديثة لعرضها.",
+    "disclaimer": "لا يقوم Openverse بتخزين عمليات البحث الأخيرة ، يتم الاحتفاظ بهذه المعلومات محليًا في متصفحك."
   }
 }

test/playwright/utils/breakpoints.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Expect } from '@playwright/test'
 
 import { VIEWPORTS } from '~/constants/screens'
 import type { Breakpoint } from '~/constants/screens'
@@ -11,7 +11,8 @@ type ScreenshotAble = {
 type ExpectSnapshot = <T extends ScreenshotAble>(
   name: string,
   s: T,
-  options?: Parameters<T['screenshot']>[0]
+  options?: Parameters<T['screenshot']>[0],
+  snapshotOptions?: Parameters<ReturnType<Expect>['toMatchSnapshot']>[0]
 ) => Promise<Buffer | void>
 
 type BreakpointBlock = (options: {
@@ -49,11 +50,18 @@ interface Options {
    *
    * @defaultValue true
    */
-  uaMocking: boolean
+  uaMocking?: boolean
+  /**
+   * Adjust the error tolerance for a single test to avoid
+   * flakiness.
+   * Do not set to a value higher than 0.02.
+   */
+  maxDiffPixelRatio?: number
 }
 
 const defaultOptions = Object.freeze({
   uaMocking: true,
+  maxDiffPixelRatio: 0,
 })
 
 const makeBreakpointDescribe =
@@ -85,13 +93,15 @@ const makeBreakpointDescribe =
         const expectSnapshot = async <T extends ScreenshotAble>(
           name: string,
           screenshotAble: T,
-          options?: Parameters<T['screenshot']>[0]
+          options?: Parameters<T['screenshot']>[0],
+          snapshotOptions?: Parameters<ReturnType<Expect>['toMatchSnapshot']>[0]
         ) => {
           const { name: snapshotName } = getConfigValues(name)
           return expect(
             await screenshotAble.screenshot(options)
           ).toMatchSnapshot({
             name: snapshotName,
+            ...snapshotOptions,
           })
         }
 

typings/csstype/index.d.ts

@@ -14,5 +14,6 @@ declare module 'csstype' {
     '--progress-time-left'?: string
     '--seek-time-left'?: string
     '--popover-height'?: string
+    '--link-col-height'?: number
   }
 }