refactor: change props for buttons and links

Author: essenmitsosse

app/components/Button/Base.vue

@@ -3,7 +3,8 @@ const props = withDefaults(
   defineProps<{
     'disabled'?: boolean
     'type'?: 'button' | 'submit'
-    'variant'?: 'primary' | 'secondary' | 'tag'
+    'variant'?: 'primary' | 'secondary'
+    'size'?: 'small' | 'medium'
     'keyshortcut'?: string
 
     /**
@@ -16,6 +17,7 @@ const props = withDefaults(
   {
     type: 'button',
     variant: 'secondary',
+    size: 'medium',
   },
 )
 
@@ -31,10 +33,10 @@ defineExpose({
     ref="el"
     class="group cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50)) bg-gradient-to-t dark:bg-gradient-to-b"
     :class="{
-      'text-sm px-4 py-2': variant !== 'tag',
-      'text-xs px-2 py-0.5': variant === 'tag',
+      'text-sm px-4 py-2': size === 'medium',
+      'text-xs px-2 py-0.5': size === 'small',
       'from-fg/10 via-transparent to-transparent text-fg hover:enabled:(bg-accent/20 border-accent) focus-visible:enabled:(bg-accent/20 border-accent)':
-        variant === 'tag' || variant === 'secondary',
+        variant === 'secondary',
       'text-black from-accent via-accent to-accent/30 hover:enabled:(bg-accent/50) focus-visible:enabled:(bg-accent/50)':
         variant === 'primary',
     }"
@@ -52,7 +54,7 @@ defineExpose({
   >
     <span
       v-if="classicon"
-      :class="[variant === 'tag' ? 'size-3' : 'size-4', classicon]"
+      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
       aria-hidden="true"
     />
     <slot />

app/components/Filter/Panel.vue

@@ -310,7 +310,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             <ButtonBase
               v-for="keyword in displayedKeywords"
               :key="keyword"
-              variant="tag"
+              size="small"
               :aria-pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >

app/components/Link/Base.vue

@@ -10,7 +10,8 @@ const props = withDefaults(
        * `type` should never be used, because this will always be a link.
        * */
       'type'?: never
-      'variant'?: 'button-primary' | 'button-secondary' | 'tag' | 'link'
+      'variant'?: 'button-primary' | 'button-secondary' | 'link'
+      'size'?: 'small' | 'medium'
 
       'keyshortcut'?: string
 
@@ -37,7 +38,7 @@ const props = withDefaults(
       'href'?: never
     } & NuxtLinkProps
   >(),
-  { variant: 'link' },
+  { variant: 'link', size: 'medium' },
 )
 
 const isLinkExternal = computed(
@@ -49,17 +50,22 @@ const isLinkExternal = computed(
 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(() => props.variant !== 'link')
+const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
+const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
 </script>
 
 <template>
   <span
     v-if="disabled"
     :class="{
       'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
-        variant !== 'link',
-      'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
-      'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-bg-muted text-fg-muted': variant === 'tag',
+        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',
     }"
@@ -69,16 +75,15 @@ const isLinkAnchor = computed(
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/50':
-        !isLinkAnchor && variant === 'link',
+      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/50': !isLinkAnchor && isLink,
       'text-fg hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-colors duration-200':
-        variant === 'link',
+        isLink,
       'font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:(text-bg/50)) bg-gradient-to-t dark:bg-gradient-to-b':
-        variant !== 'link',
-      'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
-      'text-xs px-2 py-0.5': variant === 'tag',
+        isButton,
+      'text-sm px-4 py-2': isButtonMedium,
+      'text-xs px-2 py-0.5': isButtonSmall,
       'from-fg/10 via-transparent to-transparent text-fg hover:(bg-accent/20 border-accent) focus-visible:(bg-accent/20 border-accent)':
-        variant === 'tag' || variant === 'button-secondary',
+        variant === 'button-secondary',
       'text-black from-accent via-accent to-accent/30 hover:(bg-accent/50) focus-visible:(bg-accent/50)':
         variant === 'button-primary',
     }"
@@ -91,7 +96,7 @@ const isLinkAnchor = computed(
   >
     <span
       v-if="classicon"
-      :class="[variant === 'tag' ? 'size-3' : 'size-4', classicon]"
+      :class="[isButtonSmall ? 'size-3' : 'size-4', classicon]"
       aria-hidden="true"
     />
     <slot />
@@ -102,7 +107,7 @@ const isLinkAnchor = computed(
       aria-hidden="true"
     />
     <span
-      v-else-if="isLinkAnchor && variant === 'link'"
+      v-else-if="isLinkAnchor && isLink"
       class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
       aria-hidden="true"
     />

app/components/Package/Card.vue

@@ -165,7 +165,7 @@ const pkgDescription = useMarkdown(() => ({
       <ButtonBase
         v-for="keyword in result.package.keywords.slice(0, 5)"
         class="pointer-events-auto"
-        variant="tag"
+        size="small"
         :key="keyword"
         :aria-pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"

app/components/Package/Keywords.vue

@@ -7,7 +7,11 @@ defineProps<{
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
     <ul class="flex flex-wrap gap-1.5 list-none m-0 p-1">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
-        <LinkBase variant="tag" :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
+        <LinkBase
+          variant="button-secondary"
+          size="small"
+          :to="{ name: 'search', query: { q: `keywords:${keyword}` } }"
+        >
           {{ keyword }}
         </LinkBase>
       </li>

app/components/Package/MetricsBadges.vue

@@ -58,7 +58,13 @@ const typesHref = computed(() => {
     <!-- TypeScript types badge -->
     <li v-if="!props.isBinary" class="contents">
       <TooltipApp :text="typesTooltip">
-        <LinkBase v-if="typesHref" variant="tag" :to="typesHref" classicon="i-carbon-checkmark">
+        <LinkBase
+          v-if="typesHref"
+          variant="button-secondary"
+          size="small"
+          :to="typesHref"
+          classicon="i-carbon-checkmark"
+        >
           {{ $t('package.metrics.types_label') }}
         </LinkBase>
         <TagStatic

app/components/Package/TableRow.vue

@@ -132,7 +132,7 @@ const allMaintainersText = computed(() => {
         <ButtonBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
-          variant="tag"
+          size="small"
           :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"

app/pages/package/[[org]]/[name].vue

@@ -573,7 +573,8 @@ onKeyStroke(
                 position="bottom"
               >
                 <LinkBase
-                  variant="tag"
+                  variant="button-secondary"
+                  size="small"
                   to="#provenance"
                   :aria-label="$t('package.provenance_section.view_more_details')"
                   classicon="i-lucide-shield-check"
@@ -607,7 +608,7 @@ onKeyStroke(
               >
                 <ButtonBase
                   @click="likeAction"
-                  variant="tag"
+                  size="small"
                   :title="
                     likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
@@ -839,7 +840,8 @@ onKeyStroke(
 
               <span class="flex items-center gap-1">
                 <LinkBase
-                  variant="tag"
+                  variant="button-secondary"
+                  size="small"
                   v-if="getDependencyCount(displayVersion) > 0"
                   :to="`https://npmgraph.js.org/?q=${pkg.name}`"
                   :title="$t('package.stats.view_dependency_graph')"
@@ -849,7 +851,8 @@ onKeyStroke(
                 </LinkBase>
 
                 <LinkBase
-                  variant="tag"
+                  variant="button-secondary"
+                  size="small"
                   v-if="getDependencyCount(displayVersion) > 0"
                   :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                   :title="$t('package.stats.inspect_dependency_tree')"

test/nuxt/a11y.spec.ts

@@ -317,9 +317,9 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations as tag', async () => {
+    it('should have no accessibility violations with size small', async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { variant: 'tag' },
+        props: { size: 'small' },
         slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
@@ -373,9 +373,14 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations as tag', async () => {
+    it('should have no accessibility violations as small button', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', disabled: true, variant: 'tag' },
+        props: {
+          to: 'http://example.com',
+          disabled: true,
+          variant: 'button-secondary',
+          size: 'small',
+        },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)