refactor(link-base): update size and tests

Author: RYGRIT

app/components/Link/Base.vue

@@ -7,12 +7,11 @@ const props = withDefaults(
       /** Disabled links will be displayed as plain text */
       disabled?: boolean
       /**
-       * `type` should never be used, because this will always be a link.
-       * */
-      type?: never
-      variant?: 'button-primary' | 'button-secondary' | 'link'
-      size?: 'small' | 'medium'
-      block?: boolean
+       * Controls whether the link is styled as text or as a button.
+       */
+      type?: 'button' | 'link'
+      size?: 'xs' | 'sm' | 'md' | 'lg'
+      inline?: boolean
 
       ariaKeyshortcuts?: string
 
@@ -37,7 +36,7 @@ const props = withDefaults(
       noUnderline?: boolean
     } & NuxtLinkProps
   >(),
-  { variant: 'link', size: 'medium' },
+  { type: 'link', size: 'md', inline: true },
 )
 
 const isLinkExternal = computed(
@@ -50,47 +49,66 @@ const isLinkAnchor = computed(
   () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
 )
 
-/** size is only applicable for button like links */
-const isLink = computed(() => props.variant === 'link')
-const isButton = computed(() => !isLink.value)
-const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
-const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
+const isLink = computed(() => props.type === 'link')
+const isButton = computed(() => props.type === 'button')
+const sizeClass = computed(() => {
+  if (isButton.value) {
+    switch (props.size) {
+      case 'xs':
+        return 'text-xs px-2 py-0.5'
+      case 'sm':
+        return 'text-sm px-4 py-2'
+      case 'md':
+        return 'text-base px-5 py-2.5'
+      case 'lg':
+        return 'text-lg px-6 py-3'
+    }
+  }
+
+  switch (props.size) {
+    case 'xs':
+      return 'text-xs'
+    case 'sm':
+      return 'text-sm'
+    case 'md':
+      return 'text-base'
+    case 'lg':
+      return 'text-lg'
+  }
+})
 </script>
 
 <template>
   <span
     v-if="disabled"
-    :class="{
-      'flex': block,
-      'inline-flex': !block,
-      'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
-        isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
-      'text-bg bg-fg': variant === 'button-primary',
-      'bg-transparent text-fg': variant === 'button-secondary',
-    }"
+    :class="[
+      inline ? 'inline-flex' : 'flex',
+      sizeClass,
+      {
+        'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
+          isButton,
+        'bg-transparent text-fg': isButton,
+      },
+    ]"
     ><slot
   /></span>
   <NuxtLink
     v-else
     class="group/link gap-x-1 items-center"
-    :class="{
-      'flex': block,
-      'inline-flex': !block,
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
-        !isLinkAnchor && isLink && !noUnderline,
-      'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
-        isLink,
-      'justify-center font-mono border border-border rounded-md transition-all duration-200':
-        isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
-      'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
-        variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
-        variant === 'button-primary',
-    }"
+    :class="[
+      inline ? 'inline-flex' : 'flex',
+      sizeClass,
+      {
+        'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
+          !isLinkAnchor && isLink && !noUnderline,
+        'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+          isLink,
+        'justify-center font-mono border border-border rounded-md transition-all duration-200':
+          isButton,
+        'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
+          isButton,
+      },
+    ]"
     :to="to"
     :aria-keyshortcuts="ariaKeyshortcuts"
     :target="isLinkExternal ? '_blank' : undefined"

test/nuxt/a11y.spec.ts

@@ -380,7 +380,8 @@ describe('component accessibility audits', () => {
 
     it("should have no accessibility violations when it's the current link", async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', current: true },
+        props: { to: 'http://example.com' },
+        attrs: { 'aria-current': 'page' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
@@ -396,18 +397,18 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations as secondary button', async () => {
+    it('should have no accessibility violations as button link', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', disabled: true, variant: 'button-secondary' },
+        props: { to: 'http://example.com', disabled: true, type: 'button' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations as primary button', async () => {
+    it('should have no accessibility violations as button link (large)', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', disabled: true, variant: 'button-primary' },
+        props: { to: 'http://example.com', disabled: true, type: 'button', size: 'lg' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
@@ -419,8 +420,22 @@ describe('component accessibility audits', () => {
         props: {
           to: 'http://example.com',
           disabled: true,
-          variant: 'button-secondary',
-          size: 'small',
+          type: 'button',
+          size: 'sm',
+        },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations as extra-small button', async () => {
+      const component = await mountSuspended(LinkBase, {
+        props: {
+          to: 'http://example.com',
+          disabled: true,
+          type: 'button',
+          size: 'xs',
         },
         slots: { default: 'Button link content' },
       })

test/nuxt/components/LinkBase.spec.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import LinkBase from '~/components/Link/Base.vue'
+
+describe('LinkBase', () => {
+  it('renders a default text link with inline layout and medium size', async () => {
+    const wrapper = await mountSuspended(LinkBase, {
+      props: { to: '/about' },
+      slots: { default: 'About' },
+    })
+
+    const link = wrapper.get('a')
+    expect(link.classes()).toContain('inline-flex')
+    expect(link.classes()).toContain('text-base')
+    expect(link.classes()).toContain('underline')
+  })
+
+  it('uses flex layout and small text size when inline is false', async () => {
+    const wrapper = await mountSuspended(LinkBase, {
+      props: { to: '/settings', size: 'sm', inline: false },
+      slots: { default: 'Settings' },
+    })
+
+    const link = wrapper.get('a')
+    expect(link.classes()).toContain('flex')
+    expect(link.classes()).toContain('text-sm')
+  })
+
+  it('applies extra-small text size for links', async () => {
+    const wrapper = await mountSuspended(LinkBase, {
+      props: { to: '/compare', size: 'xs' },
+      slots: { default: 'Compare' },
+    })
+
+    const link = wrapper.get('a')
+    expect(link.classes()).toContain('text-xs')
+  })
+
+  it('styles button links with size classes and no underline', async () => {
+    const wrapper = await mountSuspended(LinkBase, {
+      props: { to: '/compare', type: 'button', size: 'lg' },
+      slots: { default: 'Compare' },
+    })
+
+    const link = wrapper.get('a')
+    expect(link.classes()).toContain('border')
+    expect(link.classes()).toContain('rounded-md')
+    expect(link.classes()).toContain('text-lg')
+    expect(link.classes()).toContain('px-6')
+    expect(link.classes()).toContain('py-3')
+    expect(link.classes()).not.toContain('underline')
+  })
+})