Update banner to match new designs and add analytics notification

frontend/src/components/VBanner/VAnalyticsNotice.vue

@@ -0,0 +1,38 @@
+<template>
+  <VNotificationBanner
+    v-bind="$attrs"
+    id="analytics"
+    nature="info"
+    :close-button-label="$t('notification.analytics.close')"
+    @close="$emit('close')"
+  >
+    <i18n tag="span" path="notification.analytics.text">
+      <template #link>
+        <VLink :href="privacyPath" class="text-curr underline">{{
+          $t("notification.analytics.link")
+        }}</VLink>
+      </template>
+    </i18n>
+  </VNotificationBanner>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue"
+import { useContext } from "@nuxtjs/composition-api"
+
+import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
+
+export default defineComponent({
+  name: "VAnalyticsNotice",
+  components: { VNotificationBanner },
+  inheritAttrs: false,
+  setup() {
+    const { app } = useContext()
+    const privacyPath = computed(() => app.localePath("/privacy"))
+
+    return {
+      privacyPath,
+    }
+  },
+})
+</script>

frontend/src/components/VBanner/VBanners.vue

@@ -3,10 +3,17 @@
     <div v-show="showBanners" class="flex flex-col gap-2 p-2 pb-0">
       <VMigrationNotice
         v-if="shouldShowMigrationBanner"
+        :variant="variant"
         @close="dismissBanner('cc-referral')"
       />
+      <VAnalyticsNotice
+        v-if="shouldShowAnalyticsBanner"
+        :variant="variant"
+        @close="dismissBanner('analytics')"
+      />
       <VTranslationStatusBanner
         v-if="shouldShowTranslationBanner"
+        :variant="variant"
         :banner-key="translationBannerId"
         @close="dismissBanner(translationBannerId)"
       />
@@ -18,14 +25,17 @@
 import { computed, defineComponent } from "vue"
 
 import { useUiStore } from "~/stores/ui"
-import type { TranslationBannerId } from "~/types/banners"
+import usePages from "~/composables/use-pages"
+
+import type { TranslationBannerId, BannerId } from "~/types/banners"
 
 export default defineComponent({
   name: "VBanners",
   components: {
     VMigrationNotice: () => import("~/components/VBanner/VMigrationNotice.vue"),
     VTranslationStatusBanner: () =>
       import("~/components/VBanner/VTranslationStatusBanner.vue"),
+    VAnalyticsNotice: () => import("~/components/VBanner/VAnalyticsNotice.vue"),
   },
   setup() {
     const uiStore = useUiStore()
@@ -35,25 +45,39 @@ export default defineComponent({
     const shouldShowTranslationBanner = computed(
       () => uiStore.shouldShowTranslationBanner
     )
+    const shouldShowAnalyticsBanner = computed(
+      () => uiStore.shouldShowAnalyticsBanner
+    )
 
     const translationBannerId = computed<TranslationBannerId>(
       () => uiStore.translationBannerId
     )
 
-    const dismissBanner = (bannerKey: TranslationBannerId) => {
+    const { current: currentPage } = usePages()
+    const variant = computed(() =>
+      ["", "index"].includes(currentPage.value) ? "dark" : "regular"
+    )
+
+    const dismissBanner = (bannerKey: BannerId) => {
       uiStore.dismissBanner(bannerKey)
     }
 
-    const showBanners = computed(
-      () => shouldShowMigrationBanner.value || shouldShowTranslationBanner.value
+    const showBanners = computed(() =>
+      [
+        shouldShowMigrationBanner,
+        shouldShowTranslationBanner,
+        shouldShowAnalyticsBanner,
+      ].some((item) => item.value)
     )
 
     return {
       translationBannerId,
       shouldShowMigrationBanner,
       shouldShowTranslationBanner,
+      shouldShowAnalyticsBanner,
       showBanners,
       dismissBanner,
+      variant,
     }
   },
 })

frontend/src/components/VBanner/VMigrationNotice.vue

@@ -1,7 +1,8 @@
 <template>
   <VNotificationBanner
+    v-bind="$attrs"
     id="cc-referral"
-    variant="announcement"
+    nature="info"
     :close-button-label="$t('migration-notice.close')"
     @close="$emit('close')"
   >
@@ -15,11 +16,10 @@
     <i18n tag="span" path="migration-notice.more">
       <template #read-more>
         <VLink
-          class="font-bold text-white underline"
+          class="text-curr underline"
           href="https://wordpress.org/news/2021/05/welcome-to-openverse/"
+          >{{ $t("migration-notice.read") }}</VLink
         >
-          {{ $t("migration-notice.read") }}
-        </VLink>
       </template>
     </i18n>
   </VNotificationBanner>
@@ -34,5 +34,6 @@ import VLink from "~/components/VLink.vue"
 export default defineComponent({
   name: "VMigrationNotice",
   components: { VLink, VNotificationBanner },
+  inheritAttrs: false,
 })
 </script>

frontend/src/components/VBanner/VNotificationBanner.vue

@@ -1,16 +1,23 @@
 <template>
   <section
-    class="flex items-center justify-between gap-x-2 rounded-sm px-4 py-2 md:px-7"
-    :class="$style[variant]"
+    class="flex flex-row items-center gap-2 rounded-sm p-2 lg:px-3 lg:py-4"
+    :class="classNames"
     :data-testid="`banner-${id}`"
   >
-    <p class="caption-regular md:description-regular text-left">
-      <slot name="default" />
+    <slot name="start">
+      <VIcon :name="nature" :class="iconClassNames" />
+    </slot>
+
+    <p class="caption-regular lg:paragraph-small flex-grow">
+      <slot />
     </p>
-    <slot name="buttons">
+
+    <slot name="end">
       <VCloseButton
-        variant="filled-transparent"
-        icon-size="large"
+        class="flex-grow-0"
+        variant="plain--avoid"
+        size="tiny"
+        icon-size="small"
         :label="closeButtonLabel || $t('modal.close-banner')"
         @close="$emit('close')"
       />
@@ -19,49 +26,87 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue"
+import { defineComponent, PropType, computed } from "vue"
 
 import { defineEvent } from "~/types/emits"
 
 import type { BannerId } from "~/types/banners"
 
+import VIcon from "~/components/VIcon/VIcon.vue"
 import VCloseButton from "~/components/VCloseButton.vue"
 
 import type { TranslateResult } from "vue-i18n"
 
+/**
+ * Display a banner that can indicate one of four semantics in one of two color
+ * variants.
+ */
 export default defineComponent({
   name: "VNotificationBanner",
   components: {
+    VIcon,
     VCloseButton,
   },
   props: {
+    /**
+     * the semantic meaning of the banner; This can carry a positive, neutral
+     * or negative connotation.
+     */
+    nature: {
+      type: String as PropType<"info" | "warning" | "success" | "error">,
+      default: "info",
+    },
+    /**
+     * the color variant of the banner; The dark variant is intended for use on
+     * yellow pages.
+     */
     variant: {
-      type: String as PropType<"announcement" | "informational">,
-      required: true,
+      type: String as PropType<"regular" | "dark">,
+      default: "regular",
     },
+    /**
+     * the unique ID of the banner
+     */
     id: {
       type: String as PropType<BannerId>,
       required: true,
     },
+    /**
+     * the label to apply to the close button
+     */
     closeButtonLabel: {
       type: [String, Object] as PropType<string | TranslateResult>,
     },
   },
   emits: {
     close: defineEvent(),
   },
+  setup(props) {
+    const classNames = computed(() =>
+      props.variant === "dark"
+        ? "bg-dark-charcoal text-white"
+        : {
+            info: "bg-info-soft",
+            warning: "bg-warning-soft",
+            success: "bg-success-soft",
+            error: "bg-error-soft",
+          }[props.nature]
+    )
+    const iconClassNames = computed(() =>
+      props.variant === "dark"
+        ? ""
+        : {
+            info: "text-info",
+            warning: "text-warning",
+            success: "text-success",
+            error: "text-error",
+          }[props.nature]
+    )
+
+    return {
+      classNames,
+      iconClassNames,
+    }
+  },
 })
 </script>
-
-<style module>
-/* Styles from learn.wordpress.org */
-.informational {
-  background-color: #fff8e5;
-  border-left: 0.25rem solid #ffb900;
-}
-
-.announcement {
-  @apply bg-trans-blue text-white;
-  border-left: 0.25rem solid transparent;
-}
-</style>

frontend/src/components/VBanner/VTranslationStatusBanner.vue

@@ -1,18 +1,15 @@
 <template>
   <VNotificationBanner
+    v-bind="$attrs"
     :id="bannerKey"
-    variant="informational"
+    nature="warning"
     data-testid="banner-translation"
     :close-button-label="$t('notification.translation.close')"
     @close="$emit('close')"
   >
-    {{
-      // eslint-disable-next-line @intlify/vue-i18n/no-raw-text
-      "⚠️"
-    }}
     <i18n path="notification.translation.text">
       <template #link>
-        <VLink :href="currentLocale.link" class="underline">{{
+        <VLink :href="currentLocale.link" class="text-curr underline">{{
           $t("notification.translation.link")
         }}</VLink>
       </template>
@@ -41,6 +38,7 @@ export default defineComponent({
     VLink,
     VNotificationBanner,
   },
+  inheritAttrs: false,
   props: {
     bannerKey: {
       type: String as PropType<BannerId>,