Update logo nav component in header (#2136)

* Fix VHomeLink styles

* Update snapshots

frontend/src/components/VButton.vue

@@ -355,6 +355,10 @@ a.button {
 .bordered-gray {
   @apply border-dark-charcoal-20 bg-white text-dark-charcoal hover:border-dark-charcoal;
 }
+
+.transparent-tx {
+  @apply border-tx;
+}
 .transparent-gray {
   @apply border-tx bg-tx text-dark-charcoal hover:bg-dark-charcoal-10;
 }

frontend/src/components/VHeader/VHeaderDesktop.vue

@@ -7,7 +7,7 @@
         : 'border-white'
     "
   >
-    <VLogoButton :is-fetching="isFetching" class="h-12" />
+    <VLogoButton :is-fetching="isFetching" />
 
     <VSearchBar
       ref="searchBarRef"

frontend/src/components/VHeader/VHeaderInternal.vue

@@ -3,7 +3,7 @@
     ref="nodeRef"
     class="main-header z-30 flex h-20 w-full items-stretch justify-between gap-x-2 border-b border-tx py-4 pe-3 ps-2 md:py-4 lg:pe-10 lg:ps-6"
   >
-    <VHomeLink variant="dark" class="px-4 hover:bg-yellow" />
+    <VHomeLink variant="dark" />
     <nav class="hidden lg:flex">
       <VPageLinks
         mode="light"
@@ -51,11 +51,8 @@
           @open="openPageMenu"
         >
           <template #top-bar>
-            <div class="flex h-20 w-full justify-between py-4 pe-3 ps-6">
-              <VHomeLink
-                variant="light"
-                class="focus-visible:ring-yellow focus-visible:ring-offset-0"
-              />
+            <div class="flex h-20 w-full justify-between py-4 pe-3 ps-2">
+              <VHomeLink variant="light" />
               <VCloseButton
                 variant="black"
                 icon-size="large"

frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue

@@ -27,8 +27,6 @@
             <VLogoButton
               v-show="!searchBarIsActive"
               :is-fetching="isFetching"
-              :is-search-route="true"
-              class="w-12"
             />
             <VSearchBarButton
               v-show="searchBarIsActive"

frontend/src/components/VHeader/VHomeLink.vue

@@ -1,27 +1,37 @@
 <template>
-  <VLink
+  <VButton
+    as="VLink"
     href="/"
-    class="flex items-stretch rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-pink focus-visible:ring-offset-1 focus-visible:ring-offset-tx"
-    :class="variant === 'dark' ? 'text-dark-charcoal' : 'text-white'"
+    :aria-label="$t('header.home-link', { openverse: 'Openverse' }).toString()"
+    variant="transparent-tx"
+    size="disabled"
+    :class="
+      variant === 'dark'
+        ? 'text-dark-charcoal hover:bg-yellow'
+        : 'text-white focus-slim-tx-yellow'
+    "
+    class="h-12 px-4 text-[1.125rem]"
   >
-    <VBrand
-      :is-fetching="false"
-      :sr-text="$t('header.home-link', { openverse: 'Openverse' }).toString()"
-    />
-  </VLink>
+    <OpenverseLogoAndWordmark class="h-[1em] w-auto" />
+  </VButton>
 </template>
 
 <script lang="ts">
 import { type PropType, defineComponent } from "vue"
 
-import VBrand from "~/components/VBrand/VBrand.vue"
-import VLink from "~/components/VLink.vue"
+import VButton from "~/components/VButton.vue"
 
+import OpenverseLogoAndWordmark from "~/assets/logo_and_wordmark.svg?inline"
+
+/**
+ * The home link for the internal header. Shows the Openverse logo and wordmark,
+ * and does not have a loading state.
+ */
 export default defineComponent({
   name: "VHomeLink",
   components: {
-    VBrand,
-    VLink,
+    OpenverseLogoAndWordmark,
+    VButton,
   },
   props: {
     /**

frontend/src/components/VHeader/VLogoButton.vue

@@ -5,12 +5,11 @@
     :aria-label="$t('header.home-link', { openverse: 'Openverse' }).toString()"
     variant="plain"
     size="disabled"
-    class="text-dark-charcoal hover:bg-yellow"
-    :class="fixedSize ? 'h-12 w-12 flex-shrink-0' : 'max-w-min'"
+    class="h-12 w-12 text-dark-charcoal hover:bg-yellow"
   >
     <VLogoLoader
       :status="isFetching ? 'loading' : 'idle'"
-      :auto-resize="autoResizeLogo"
+      :auto-resize="false"
     />
   </VButton>
 </template>
@@ -20,6 +19,10 @@ import { defineComponent } from "vue"
 import VLogoLoader from "~/components/VLogoLoader/VLogoLoader.vue"
 import VButton from "~/components/VButton.vue"
 
+/**
+ * The home link for the search header. Shows the Openverse logo and the loading state.
+ * When the results are being fetched, the logo is animated.
+ */
 export default defineComponent({
   name: "VLogoButton",
   components: { VLogoLoader, VButton },
@@ -28,14 +31,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    autoResizeLogo: {
-      type: Boolean,
-      default: false,
-    },
-    fixedSize: {
-      type: Boolean,
-      default: false,
-    },
   },
 })
 </script>

frontend/src/components/VHeader/meta/VHomeLink.stories.mdx

@@ -0,0 +1,41 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs"
+import VHomeLink from "~/components/VHeader/VHomeLink.vue"
+
+<Meta
+  title="Components/VHeader/HomeLinks/VHomeLink"
+  components={VHomeLink}
+  argTypes={{
+    variant: {
+      type: "string",
+      control: {
+        type: "select",
+        options: ["dark", "light"],
+      },
+    },
+  }}
+/>
+
+export const Template = (args) => ({
+  template: `<div class="flex p-4" :class="args.bg"><VHomeLink v-bind="args" /></div>`,
+  components: { VHomeLink },
+  setup() {
+    args.bg = args.variant === "dark" ? "bg-white" : "bg-black"
+    return { args }
+  },
+})
+
+# VHomeLink
+
+<Description of={VHomeLink} />
+
+<ArgsTable of={VHomeLink} />
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>

frontend/src/components/VHeader/meta/VLogoButton.stories.mdx

@@ -0,0 +1,36 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs"
+import VLogoButton from "~/components/VHeader/VLogoButton.vue"
+
+<Meta
+  title="Components/VHeader/HomeLinks/VLogoButton"
+  component={VLogoButton}
+  argTypes={{
+    isFetching: {
+      type: "boolean",
+    },
+  }}
+/>
+
+export const Template = (args) => ({
+  template: `<div class="flex p-4"><VLogoButton v-bind="args" /></div>`,
+  components: { VLogoButton },
+  setup() {
+    return { args }
+  },
+})
+
+# VLogoButton
+
+<Description of={VLogoButton} />
+
+<ArgsTable of={VLogoButton} />
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>

frontend/src/types/button.ts

@@ -15,6 +15,7 @@ export const buttonVariants = [
   "filled-transparent",
   "bordered-white",
   "bordered-gray",
+  "transparent-tx",
   "transparent-gray",
   "transparent-dark",
 ] as const