feat: add leadingIcon and trailingIcon to BaseButton on /playground

Author: marcel-bitfly

frontend/layers/base/app/assets/css/main.css

@@ -8,17 +8,14 @@
   src: url('/assets-2usdf/fonts/Urbanist-VariableFont_wght.ttf') format("truetype");
 }
 
-body {
-  font-family: 'Urbanist', sans-serif;
-}
-
 @theme {
-  /* todo: think about only removing specific utility classes */
   --*: initial;
 
   --color-black: #101010;
 
   --color-brand-300: #6482EC; 
+  --color-brand-500: #1E46D6;
+  --color-brand-700: #172F81;
 
   --color-white: #FAFAFA;
   --color-gray-100: #D6D6D6;
@@ -32,15 +29,13 @@ body {
   --spacing-sm: .375rem; /* 6px */
   --spacing-md: .5rem; /* 8px */
   --spacing-lg: .75rem; /* 12px */
-
-  --text-sm: .875rem; /* 14px */
-  --text-sm--line-height: 1.25rem; /* 20px */
-
+  --spacing-xl: 1rem; /* 16px */
+  --spacing-3xl: 1.5rem; /* 24px */
+
+  --text-sm-tight: .875rem; /* 14px */
+  --text-sm-tight--line-height: 1rem; /* 16px */
+  /* --text-sm: .875rem; 14px */
+  /* --text-sm--line-height: 1.25rem; 20px */
+  --text-md: 1rem; /* 16px */
+  --text-md--line-height: 1.5rem; /* 24px */
 }
-/* todo: think about moving this to theme.css (problem import order) */
-@theme inline {  
-  /* --color-brand-100: var(--color-gray-100);  */
-  
-  /* --color-link-100: var(--color-gray-100);  */
-}
-

frontend/layers/base/app/components/BaseButton.vue

@@ -1,18 +1,40 @@
 <script setup lang="ts">
-const { variant = 'primary' } = defineProps<{
-  variant?: 'primary' | 'secondary',
+import { LazyBaseIcon } from '#components'
+import type { IconName } from '~/layers/base/app/components/BaseIcon.vue'
+
+const {
+  size = 'md',
+  variant = 'primary',
+} = defineProps<{
+  leadingIcon?: IconName,
+  size?: 'md' | 'xl',
+  trailingIcon?: IconName,
+  variant?: 'branded' | 'primary',
 }>()
 </script>
 
 <template>
   <button
-    class="bg-linear-to-b py-md px-sm rounded-full text-sm font-semibold opacity-90 hover:opacity-95 disabled:opacity-40 aria-disabled:opacity-40 active:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
+    class="flex items-center bg-linear-to-b rounded-full font-semibold disabled:opacity-40 aria-disabled:opacity-40 active:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
     :class="[
-      variant === 'primary' && 'from-gray-100 to-gray-300 text-black',
+      variant === 'primary' && 'from-gray-100 to-gray-300 text-black opacity-90 hover:opacity-95',
+      variant === 'branded' && 'from-brand-500 to-brand-700 text-white hover:opacity-90',
+      size === 'md' && 'text-sm-tight py-md px-sm',
+      size === 'xl' && 'text-md py-xl px-3xl',
     ]"
   >
+    <LazyBaseIcon
+      v-if="leadingIcon"
+      :name="leadingIcon"
+      class=""
+    />
     <span class="px-lg">
       <slot />
     </span>
+    <LazyBaseIcon
+      v-if="trailingIcon"
+      :name="trailingIcon"
+      class=""
+    />
   </button>
 </template>

frontend/layers/base/app/components/BaseIcon.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type icons from '@iconify-json/tabler/icons.json'
+
+export type IconName = keyof typeof icons['icons']
+
+const { name } = defineProps<{
+  name: IconName,
+}>()
+
+// https://github.com/nuxt/icon?tab=readme-ov-file#icon-customization
+const customize = (content: string) => {
+  return content
+    .replace(/stroke-width="[^"]*"/g, 'stroke-width="1.5px"')
+}
+</script>
+
+<template>
+  <Icon
+    :name="`tabler:${name}`"
+    :customize
+  />
+</template>

frontend/layers/base/app/layouts/base.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="font-urbanist">
+  <div class="font-urbanist antialiased">
     <slot />
   </div>
 </template>

frontend/layers/base/app/pages/test.vue …yers/base/app/pages/playground/index.vuefrontend/layers/base/app/pages/test.vue renamed to frontend/layers/base/app/pages/playground/index.vue frontend/layers/base/app/pages/test.vue renamed to frontend/layers/base/app/pages/playground/index.vue

@@ -6,6 +6,16 @@
     <NuxtLayout name="base">
       Primary Button
       <section class="grid gap-sm">
+        <div>
+          <BaseButton
+            leading-icon="file-code-2"
+            trailing-icon="arrow-up-right"
+            size="xl"
+            variant="branded"
+          >
+            Go to API
+          </BaseButton>
+        </div>
         <div>
           <BaseButton
             variant="primary"

frontend/layers/base/nuxt.config.ts

@@ -7,11 +7,20 @@ import tailwindcss from '@tailwindcss/vite'
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
 export default defineNuxtConfig({
+  /* eslint-disable perfectionist/sort-objects  -- as there is a conflict with `nuxt specific eslint rules` */
+  modules: [ '@nuxt/icon' ],
   $meta: {
     name: 'base',
   },
   css: [ join(currentDir, './app/assets/css/main.css') ],
   vite: {
     plugins: [ tailwindcss() ],
   },
+  icon: {
+    mode: 'css',
+    cssLayer: 'base',
+    size: '1.25rem',
+    localApiEndpoint: '/api/bff/_nuxt_icon',
+  },
+  /* eslint-enable perfectionist/sort-objects */
 })

frontend/layers/base/package.json

@@ -3,6 +3,10 @@
         "@tailwindcss/vite": "^4.1.12",
         "tailwindcss": "^4.1.12"
     },
+    "devDependencies": {
+        "@iconify-json/tabler": "^1.2.22",
+        "@nuxt/icon": "^2.0.0"
+    },
     "name": "beaconchain-explorer-base",
     "private": true,
     "type": "module"

frontend/middleware/redirect.global.ts

@@ -3,6 +3,7 @@ import type { RouteLocationNormalizedLoaded } from 'vue-router'
 export default function ({
   name,
   params,
+  path,
 }: RouteLocationNormalizedLoaded) {
   const { has } = useFeatureFlag()
   const config = useRuntimeConfig()
@@ -62,4 +63,8 @@ export default function ({
     case 'validator-id':
       return redirectToV1(`/validator/${params.id || params.slug?.[1]}`)
   }
+  const currentEnvironment = config.public.deploymentType
+  if (currentEnvironment === 'production' && path.startsWith('/playground')) {
+    return abortNavigation()
+  }
 }