@sbc-connect/nuxt-base 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.3
+
+### Patch Changes
+
+- [#9](https://github.com/bcgov/connect-nuxt/pull/9) [`e841fde`](https://github.com/bcgov/connect-nuxt/commit/e841fde27630d63efb2c152cd78d92b1193d1d5e) Thanks [@kialj876](https://github.com/kialj876)! - Add Nuxt back as a dev dependency
+
+- [#8](https://github.com/bcgov/connect-nuxt/pull/8) [`c85ebfc`](https://github.com/bcgov/connect-nuxt/commit/c85ebfc879e19cce307b109c9d38044f71f482d2) Thanks [@kialj876](https://github.com/kialj876)! - Added in i18n, added base header components, added in styles for nuxt ui
+
+## 0.1.2
+
+### Patch Changes
+
+- [#5](https://github.com/bcgov/connect-nuxt/pull/5) [`2999779`](https://github.com/bcgov/connect-nuxt/commit/29997796bd3908b2c5ba04319b26cbb00bffe0fc) Thanks [@kialj876](https://github.com/kialj876)! - Updated fonts propagation in base, cleaned up dependencies in layers
+
 ## 0.1.1
 
 ### Patch Changes

package/app/app.config.ts

@@ -1,6 +1,196 @@
+/* eslint-disable max-len */
 export default defineAppConfig({
-  myLayer: {
-    name: 'Hello from Nuxt layer NEW AGAIN x 24!!'
+  connect: {
+    header: {
+      localeSelect: true
+    },
+    footer: {
+      versions: []
+    }
+  },
+  ui: {
+    badge: {
+      slots: {
+        base: 'font-medium inline-flex items-center',
+        label: 'truncate font-bold',
+        leadingIcon: 'shrink-0',
+        leadingAvatar: 'shrink-0',
+        leadingAvatarSize: '',
+        trailingIcon: 'shrink-0'
+      }
+    },
+    button: {
+      compoundVariants: [
+        {
+          color: 'primary',
+          variant: 'solid',
+          class: 'font-bold text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-(--ui-primary)'
+        },
+        {
+          color: 'primary',
+          variant: 'ghost',
+          class: 'text-(--ui-primary) hover:bg-(--ui-primary)/10 active:bg-(--ui-primary)/25 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent'
+        }
+      ]
+    },
+    buttonGroup: {
+      base: 'relative',
+      variants: {
+        size: {
+          xs: '',
+          sm: '',
+          md: '',
+          lg: '',
+          xl: ''
+        },
+        orientation: {
+          horizontal: 'inline-flex -space-x-px divide-x divide-gray-300',
+          vertical: 'flex flex-col -space-y-px'
+        }
+      }
+    },
+    checkbox: {
+      slots: {
+        root: 'relative flex items-start',
+        base: 'shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-2 ring-inset ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2',
+        label: 'block font-medium text-(--ui-text) text-base'
+      }
+    },
+    dropdownMenu: {
+      slots: {
+        content: 'bg-white ring-0',
+        group: 'p-0'
+      }
+    },
+    formField: {
+      slots: {
+        root: '',
+        wrapper: 'space-y-1',
+        labelWrapper: 'flex content-center items-center justify-between',
+        label: 'block font-bold text-base text-gray-900',
+        container: 'mt-1 relative',
+        description: 'text-(--ui-text) text-base text-bcGovColor-lightGray mb-4 whitespace-normal',
+        error: 'pl-4.5 mt-1 text-(--ui-error) text-xs',
+        hint: 'text-(--ui-text)',
+        help: 'pl-4.5 mt-1 text-(--ui-text) text-xs'
+      },
+      variants: {
+        size: {
+          xs: {
+            root: 'text-xs'
+          },
+          sm: {
+            root: 'text-xs'
+          },
+          md: {
+            root: 'text-sm'
+          },
+          lg: {
+            root: 'text-sm'
+          },
+          xl: {
+            root: 'text-base'
+          }
+        },
+        required: {
+          true: {
+            label: 'after:content-[\'*\'] after:ms-0.5 after:text-(--ui-error)'
+          }
+        }
+      },
+      defaultVariants: {
+        size: 'md'
+      }
+    },
+    input: {
+      variants: {
+        size: {
+          bcGovLg: {
+            base: 'px-2.5 pb-2 pt-6 text-base gap-1.5',
+            leading: 'ps-2.5',
+            trailing: 'pe-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          }
+        },
+        variant: {
+          bcGov: 'ring-0 ring-transparent peer rounded-t-sm rounded-b-none bg-gray-100 shadow-bcGovInput focus:ring-0 focus:outline-none focus:shadow-bcGovInputFocus text-gray-900'
+        }
+      },
+      defaultVariants: {
+        size: 'bcGovLg',
+        color: 'primary',
+        variant: 'bcGov'
+      }
+    },
+    modal: {
+      variants: {
+        fullscreen: {
+          false: {
+            content: 'max-w-2xl'
+          }
+        }
+      }
+    },
+    select: {
+      slots: {
+        content: 'rounded-sm',
+        group: 'px-0 py-2',
+        trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200 text-(--ui-text)', //  group-data-[state=open]:text-blue-500 group-data-focus:text-blue-500 // TODO: icon colour when focused
+        item: 'my-0.75 text-gray-900 before:rounded-none data-highlighted:text-blue-500 data-highlighted:before:bg-gray-100 data-[state=checked]:text-blue-500 data-[state=checked]:bg-blue-50',
+        itemLeadingIcon: 'group-data-[state=checked]:text-blue-500 group-data-highlighted:text-blue-500 text-gray-900'
+      },
+      variants: {
+        size: {
+          bcGov: {
+            base: 'px-0 py-0 text-base gap-1.5',
+            leading: 'ps-2.5',
+            trailing: 'pe-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5',
+            label: 'p-1.5 text-xs gap-1.5',
+            item: 'py-3 px-4 text-sm gap-3',
+            itemLeadingIcon: 'size-5',
+            itemLeadingAvatarSize: '2xs',
+            itemLeadingChip: 'size-5',
+            itemLeadingChipSize: 'md',
+            itemTrailingIcon: 'size-5'
+          }
+        },
+        variant: {
+          bcGov: 'peer rounded-t-sm rounded-b-none bg-gray-100 focus:ring-0 focus:outline-none shadow-bcGovInput data-[state=open]:shadow-bcGovInputFocus focus:shadow-bcGovInputFocus text-gray-900'
+        }
+      },
+      defaultVariants: {
+        size: 'bcGov',
+        color: 'primary',
+        variant: 'bcGov'
+      }
+    },
+    textarea: {
+      variants: {
+        size: {
+          bcGovLg: {
+            base: 'px-2.5 pb-1.5 pt-5 text-base gap-1.5',
+            leading: 'ps-2.5',
+            trailing: 'pe-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          }
+        },
+        variant: {
+          bcGov: 'peer rounded-t-sm rounded-b-none bg-gray-100 focus:ring-0 focus:outline-none shadow-bcGovInput focus:shadow-bcGovInputFocus text-gray-900'
+        }
+      },
+      defaultVariants: {
+        size: 'bcGovLg',
+        color: 'primary',
+        variant: 'bcGov'
+      }
+    }
   }
 })
 
@@ -10,5 +200,10 @@ declare module '@nuxt/schema' {
       /** Project name */
       name?: string
     }
+    connect?: {
+      header?: {
+        localeSelect?: boolean
+      }
+    }
   }
 }

package/app/components/Connect/BCGovLogo.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// must explicitly import or will fail when publishing layer // TODO: find better way to handle image aliases
+// @ts-expect-error - Cannot find module 'BCGovLogoLgFr' or its corresponding type declarations.ts(2307)
+import frLargeLogo from 'BCGovLogoLgFr'
+// @ts-expect-error - Cannot find module 'BCGovLogoSmFr' or its corresponding type declarations.ts(2307)
+import frSmallLogo from 'BCGovLogoSmFr'
+// @ts-expect-error - Cannot find module 'BCGovLogoLgEn' or its corresponding type declarations.ts(2307)
+import enLargeLogo from 'BCGovLogoLgEn'
+// @ts-expect-error - Cannot find module 'BCGovLogoSmEn' or its corresponding type declarations.ts(2307)
+import enSmallLogo from 'BCGovLogoSmEn'
+</script>
+
+<template>
+  <!-- use french logo for french locale, any other locale uses english logo -->
+  <div v-if="$i18n.locale === 'fr-CA'" class="shrink-0">
+    <!-- Using scale because it will increase the size of the image without affecting the container size -->
+    <!-- there is a lot of padding on the images, if only the height gets increased,  -->
+    <!-- the padding makes the header too tall -->
+    <img
+      class="hidden h-[60px] scale-125 sm:block"
+      :src="frLargeLogo"
+      :alt="$t('ConnectBCGovLogo.alt')"
+    >
+    <img
+      class="block h-[64px] scale-125 sm:hidden"
+      :src="frSmallLogo"
+      :alt="$t('ConnectBCGovLogo.alt')"
+    >
+  </div>
+  <div v-else class="shrink-0">
+    <img
+      class="hidden h-[60px] scale-125 sm:block"
+      :src="enLargeLogo"
+      :alt="$t('ConnectBCGovLogo.alt')"
+    >
+    <img
+      class="block h-[64px] scale-150 sm:hidden"
+      :src="enSmallLogo"
+      :alt="$t('ConnectBCGovLogo.alt')"
+    >
+  </div>
+</template>

package/app/components/Connect/Header/Base.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const localeSelect = useAppConfig().connect.header.localeSelect
+</script>
+
+<template>
+  <ConnectHeaderWrapper>
+    <div class="flex items-center justify-between">
+      <ConnectHeaderLogoHomeLink />
+      <ClientOnly>
+        <div class="flex gap-4">
+          <slot />
+          <ConnectLocaleSelect v-if="localeSelect" />
+        </div>
+      </ClientOnly>
+    </div>
+  </ConnectHeaderWrapper>
+</template>

package/app/components/Connect/Header/LogoHomeLink.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+</script>
+
+<template>
+  <NuxtLink
+    id="header-logo-home-link"
+    :to="localePath('/')"
+    :class="[
+      'flex items-center gap-4 rounded-md',
+      'px-2 transition-colors duration-300',
+      'ease-in-out hover:bg-white/[0.1]',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-white',
+    ]"
+    :aria-label="$t('ConnectHeader.homeLink')"
+  >
+    <ConnectBCGovLogo />
+    <span class="text-base font-semibold text-white lg:text-lg"> {{ $t('ConnectHeader.title') }} </span>
+  </NuxtLink>
+</template>

package/app/components/Connect/Header/Wrapper.vue

@@ -0,0 +1,14 @@
+<template>
+  <header
+    id="connect-header-wrapper"
+    data-testid="connect-header-wrapper"
+    class="relative border-b-2 border-connect-yellow bg-connect-darkBlue dark:border-b dark:bg-connect-darkGray"
+  >
+    <nav
+      class="app-inner-container px-2"
+      :aria-label="$t('ConnectHeader.navLabel')"
+    >
+      <slot />
+    </nav>
+  </header>
+</template>

package/app/components/Connect/Header/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <ConnectHeaderBase />
+</template>

package/app/components/Connect/LocaleSelect.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { LocaleObject } from '@nuxtjs/i18n'
+
+const { locale, locales, setLocale } = useI18n()
+
+const items = computed((): DropdownMenuItem[] => {
+  const options = locales.value.map((loc: LocaleObject) => {
+    const isCurrentLocal = loc.code === locale.value
+    return {
+      label: loc.name || 'N/A',
+      icon: isCurrentLocal ? 'i-mdi-check' : '',
+      onSelect: () => setLocale(loc.code),
+      class: isCurrentLocal ? 'bg-gray-100' : 'pl-8',
+      color: isCurrentLocal ? 'primary' : 'neutral'
+    }
+  })
+  return [options]
+})
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="items[0] && items[0].length > 1"
+    :items
+    color="secondary"
+  >
+    <UButton
+      data-testid="locale-select-dropdown"
+      icon="i-mdi-web"
+      :aria-label="$t('ConnectLocaleSelect.label')"
+      size="lg"
+      variant="ghost"
+      color="secondary"
+    />
+  </UDropdownMenu>
+</template>

package/app/components/HelloWorld/Index.vue

@@ -7,8 +7,8 @@ const { myLayer } = useAppConfig()
     Should have bg-primary
     <h1>Hello World!</h1>
     <pre>{{ myLayer }}</pre>
-    <p class="text-bcGovGray-900">
-      Hello World text base should be bcGovGray-900
+    <p class="text-gray-900">
+      Hello World text base should be gray-900
     </p>
   </div>
 </template>

package/app/layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+    <ConnectHeader />
     <div class="app-inner-container app-body">
       <div class="flex flex-col lg:flex-row lg:gap-6 grow">
         <div class="grow max-w-full overflow-hidden">

package/i18n/locales/en-CA.ts

@@ -0,0 +1,95 @@
+/* eslint-disable max-len */
+export default {
+  btn: {
+    appVersion: 'App Version',
+    bcRegHome: 'BC Registries Home',
+    createAccount: 'Create Account',
+    editProfile: 'Edit Profile',
+    logout: 'Log out',
+    login: 'Log in',
+    accountInfo: 'Account Info',
+    teamMembers: 'Team Members',
+    transactions: 'Transactions',
+    notifications: {
+      main: 'Notifications',
+      aria: 'Notifications, {count} New'
+    },
+    accountOptionsMenu: 'Account Options Menu',
+    whatsNew: "What's New",
+    mainMenu: 'Main menu',
+    goHome: 'Go Home'
+  },
+  label: {
+    accountSettings: 'Account Settings',
+    bcRegOLServices: 'BC Registries and Online Services',
+    switchAccount: 'Switch Account',
+    selectLoginMethod: 'Select log in method',
+    bcsc: 'BC Services Card',
+    bceid: 'BCeID',
+    idir: 'IDIR',
+    whatsNewSlideover: "What's New at BC Registries"
+  },
+  notifications: {
+    none: 'No Notifications',
+    teamMemberApproval: '{count} team member requires approval to access this account. | {count} team members require approval to access this account.'
+  },
+  ConnectFooter: {
+    navLabel: 'Useful Links', // <nav> aria-label
+    home: 'Home',
+    releaseNotes: 'Release Notes',
+    fees: 'Fees',
+    disclaimer: 'Disclaimer',
+    privacy: 'Privacy',
+    ally: 'Accessibility',
+    copyright: 'Copyright',
+    bcApp: 'A BC Online Application'
+  },
+  ConnectHeader: {
+    title: 'Service BC Connect',
+    logoBtnLabel: 'Home', // <img> link aria-label
+    navLabel: 'Main Navigation', // <nav> aria-label
+    homeLink: 'Home'
+  },
+  ConnectBCGovLogo: {
+    alt: 'Government of British Columbia Logo' // <img> alt
+  },
+  ConnectLocaleSelect: {
+    // aria-label
+    label: 'Select a Language, current language: English'
+  },
+  ConnectBreadcrumb: {
+    default: 'Service BC Connect',
+    backBtn: 'Go Back',
+    arialabel: 'Breadcrumb'
+  },
+  ConnectPage: {
+    error: {
+      404: {
+        title: 'Page Not Found - Service BC Connect',
+        h1: '404 Page Not Found',
+        content: 'This page could not be found or does not exist.'
+      },
+      unknown: {
+        title: 'Unknown Error - Service BC Connect',
+        h1: 'Unknown Error',
+        content: 'An unknown error occured, please refresh the page or try again later.'
+      }
+    }
+  },
+  ConnectModalSessionExpiring: {
+    title: 'Session Expiring Soon',
+    content: 'Your session is about to expire due to inactivity. You will be logged out in {boldStart}0{boldEnd} seconds. Press any key to continue your session. | Your session is about to expire due to inactivity. You will be logged out in {boldStart}1{boldEnd} second. Press any key to continue your session. | Your session is about to expire due to inactivity. You will be logged out in {boldStart}{count}{boldEnd} seconds. Press any key to continue your session.',
+    sessionExpired: 'Session Expired',
+    continueBtn: {
+      main: 'Continue Session',
+      aria: 'Your session is about to expire, press any key to continue your session.'
+    }
+  },
+  test: {
+    i18nBold: {
+      strong: 'This should have {boldStart} bold {boldEnd} text',
+      strongWithProps: 'This should have {boldStart} bold {boldEnd} text and allow a {prop}',
+      italic: 'Italic test {italicStart} goes here {italicEnd}.'
+    }
+  }
+}

package/i18n/locales/fr-CA.ts

@@ -0,0 +1,88 @@
+/* eslint-disable max-len */
+export default {
+  btn: {
+    appVersion: "Version de l'Application",
+    bcRegHome: 'Accueil des Registres de la CB',
+    createAccount: 'Créer un Compte',
+    editProfile: 'Editer le Profil',
+    logout: 'Se déconnecter',
+    login: 'Se connecter',
+    accountInfo: 'Infos Compte',
+    teamMembers: 'Membres Équipe',
+    transactions: 'Transactions',
+    notifications: {
+      main: 'Notifications',
+      aria: 'Notifications, {count} Nouveau'
+    },
+    accountOptionsMenu: 'Menu Options du Compte',
+    whatsNew: 'Quoi de Neuf',
+    mainMenu: 'Menu principal',
+    goHome: "Retour à l'Accueil"
+  },
+  label: {
+    accountSettings: 'Paramètres Compte',
+    bcRegOLServices: 'Registres et Services en ligne de la CB',
+    switchAccount: 'Changer de Compte',
+    selectLoginMethod: 'Sélectionnez la méthode de connexion',
+    bcsc: 'BC Services Card',
+    bceid: 'BCeID',
+    idir: 'IDIR',
+    whatsNewSlideover: 'Nouveautés aux Registres de la CB'
+  },
+  notifications: {
+    none: 'Aucune Notification',
+    teamMemberApproval: "{count} membre de l'équipe doit être approuvé pour accéder à ce compte. | {count} membres de l'équipe doivent être approuvés pour accéder à ce compte."
+  },
+  ConnectFooter: {
+    navLabel: 'Liens utiles', // <nav> aria-label
+    home: 'Accueil',
+    releaseNotes: 'Notes de Version',
+    fees: 'Frais',
+    disclaimer: 'Clause de non-responsabilité',
+    privacy: 'Confidentialité',
+    ally: 'Accessibilité',
+    copyright: "Droits d'auteur",
+    bcApp: 'Une application en ligne CB'
+  },
+  ConnectHeader: {
+    title: 'Service Connect CB',
+    logoBtnLabel: 'Accueil', // <img> link aria-label
+    navLabel: 'Navigation principale', // <nav> aria-label
+    homeLink: 'Home'
+  },
+  ConnectBCGovLogo: {
+    alt: 'Logo du gouvernement de la Colombie-Britannique' // <img> alt
+  },
+  ConnectLocaleSelect: {
+    // aria-label
+    label: 'Sélectionnez une langue, langue courante: Français'
+  },
+  ConnectBreadcrumb: {
+    default: 'Service Connect CB',
+    backBtn: 'Retour',
+    arialabel: "Fil d'Ariane"
+  },
+  ConnectPage: {
+    error: {
+      404: {
+        title: 'Page Introuvable - Service Connect CB',
+        h1: '404 Page Introuvable',
+        content: 'Cette page est introuvable ou n’existe pas.'
+      },
+      unknown: {
+        title: 'Erreur Inconnue - Service Connect CB',
+        h1: 'Erreur Inconnue',
+        content: 'Une erreur inconnue s’est produite, veuillez actualiser la page ou réessayer plus tard.'
+      }
+    }
+  },
+  ConnectModalSessionExpiring: {
+    title: "Session Sur Le Point D'Expirer",
+    content: "Votre session est sur le point d'expirer en raison d'inactivité. Vous serez déconnecté dans {boldStart}0{boldEnd} secondes. Appuyez sur n’importe quelle touche pour continuer votre session. | Votre session est sur le point d'expirer en raison d'inactivité. Vous serez déconnecté dans {boldStart}1{boldEnd} seconde. Appuyez sur n’importe quelle touche pour continuer votre session. | Votre session est sur le point d'expirer en raison d'inactivité. Vous serez déconnecté dans {boldStart}{count}{boldEnd} secondes. Appuyez sur n’importe quelle touche pour continuer votre session.",
+    sessionExpired: 'Session Expirée',
+    continueBtn: {
+      main: 'Continuer la Session',
+      aria: "Votre session est sur le point d'expirer, appuyez sur n'importe quelle touche pour continuer votre session."
+    }
+  }
+}

package/modules/assets/index.ts

@@ -13,12 +13,12 @@ export default defineNuxtModule<ModuleOptions>({
   // Default configuration options of the Nuxt module
   defaults: {},
   async setup(_options, _nuxt) {
-    console.info('setting up assets module')
+    console.info('Setting up assets module')
     const resolver = createResolver(import.meta.url)
 
+    _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-tw.css'))
+    _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-layout.css'))
     _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-main.css'))
-    // _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-tw.css'))
-    // _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-layout.css'))
     await installModule('@nuxt/ui')
   }
 })

package/modules/assets/runtime/assets/core-layout.css

@@ -1,13 +1,13 @@
 @reference "tailwindcss";
 
 .app-container {
-  @apply min-h-dvh flex flex-col bg-(--color-bcGovGray-100) text-(--color-bcGovGray-700); /*  bg-gray-100 text-gray-700 */
+  @apply min-h-dvh flex flex-col bg-(--color-gray-100) text-(--color-gray-700); /*  bg-gray-100 text-gray-700 */
 }
 
 .app-inner-container {
-  @apply max-w-(--container-bcGovLg) w-full mx-auto px-4;
+  @apply max-w-(--container-bcGovLg) w-full mx-auto;
 }
 
 .app-body {
-  @apply grow relative flex flex-col;
+  @apply grow relative flex flex-col px-4;
 }

package/modules/assets/runtime/assets/core-tw.css

@@ -3,10 +3,13 @@
 
 /* Customize Nuxt UI default tokens */
 :root {
+  --ui-error: var(--color-connect-error);
+  --ui-neutral: var(--color-gray-700);
   --ui-primary: var(--color-blue-500);
+  --ui-secondary: white;
+  --ui-success: var(--color-green-600);
+  --ui-warning: #F8661A;
   --ui-radius: 0.25rem;
-  --ui-error: var(--color-red-600);
-  --ui-text-inverted: #FFFFFF;
 }
 
 @theme static {
@@ -29,46 +32,35 @@
   /* these colours are as defined in styleguide: */
   /* https://preview.uxpin.com/73eb31e6346bc2863a066f02218a3af289325619#/pages/138840439/simulate/sitemap?mode=i */
   /* for more details see previous link */
-  /* last updated on (2023-10-16) */
-  /* PRIMARY COLOURS */
-  --color-bcGovColor-footer: #003366;
-  --color-bcGovColor-header: #003366;
-  --color-bcGovColor-navDivider: #FCBA19;
-  /* LINK COLOURS */
-  --color-bcGovColor-activeBlue: #1669BB;
-  --color-bcGovColor-markBlue: #1a5a96;
-  --color-bcGovColor-markBlueHover: #0000EE;
-  /* TEXT/NON-CLICKABLE COLOURS */
-  --color-bcGovColor-darkGray: #212529;
-  --color-bcGovColor-midGray: #495057;
-  --color-bcGovColor-lightGray: #757575;
-  --color-bcGovColor-nonClickable: #38598A;
-  /* BACKGROUND COLOURS */
-  --color-bcGovColor-white: #FFFFFF;
-  --color-bcGovColor-gray1: #F1F3F5;
-  --color-bcGovColor-gray2: #E2E8EE;
-  --color-bcGovColor-lightBlue: #E4EDF7;
+  --color-connect-darkBlue: var(--color-midnightBlue-900);
+  --color-connect-lightBlue: var(--color-blue-50);
+  --color-connect-darkGray: var(--color-gray-900);
+  --color-connect-midGray: var(--color-gray-700);
+  --color-connect-lightGray: #757575;
+  --color-connect-yellow: var(--color-yellow-400);
+  /* Are below used? */
+  /* --color-bcGovColor-markBlue: #1a5a96; */
+  /* --color-bcGovColor-markBlueHover: #0000EE; */
+  --color-connect-nonClickable: var(--color-blue-350);
+  --color-connect-gray1: var(--color-gray-100);
+  --color-connect-gray2: #E2E8EE;
   /* LINES */
-  --color-bcGovColor-hairlinesOnWhite: #DEE2E6;
-  --color-bcGovColor-specialityDottedLines: #899EB2;
-  --color-bcGovColor-formFieldLines: #6F7780;
-  /* OUTCOMES */
-  --color-outcomes-approved: #2E8540;
-  --color-outcomes-error: #D3272C;
-  --color-outcomes-caution: #F8661A;
+  --color-connect-hairlinesOnWhite: var(--color-gray-300);
+  --color-connect-specialityDottedLines: #899EB2;
+  --color-connect-formFieldLines: #6F7780;
 
   /* GRAY */
-  --color-bcGovGray-50: #f8f9fa;
-  --color-bcGovGray-100: #f1f3f5;
-  --color-bcGovGray-200: #e9ecef;
-  --color-bcGovGray-300: #dee2e6;
-  --color-bcGovGray-400: #ced4da;
-  --color-bcGovGray-500: #adb5bd;
-  --color-bcGovGray-600: #868e96;
-  --color-bcGovGray-700: #495057;
-  --color-bcGovGray-800: #343a40;
-  --color-bcGovGray-900: #212529;
-  --color-bcGovGray-950: #232529;
+  --color-gray-50: #f8f9fa;
+  --color-gray-100: #f1f3f5;
+  --color-gray-200: #e9ecef;
+  --color-gray-300: #dee2e6;
+  --color-gray-400: #ced4da;
+  --color-gray-500: #adb5bd;
+  --color-gray-600: #868e96;
+  --color-gray-700: #495057;
+  --color-gray-800: #343a40;
+  --color-gray-900: #212529;
+  --color-gray-950: #232529;
   
   /* BLUE */
   --color-blue-50: #e4edf7;
@@ -194,7 +186,7 @@ body {
   h2,
   h3,
   h4 {
-    @apply text-bcGovGray-900;
+    @apply text-gray-900;
   }
 
   h1,
@@ -221,7 +213,7 @@ body {
   }
 
   p {
-    @apply font-normal text-bcGovColor-midGray;
+    @apply font-normal text-connect-midGray;
   }
 
   td,
@@ -231,10 +223,10 @@ body {
 
   /* floating labels */
   .floating-label-input {
-    @apply pointer-events-none absolute left-0 top-1 text-bcGovGray-900 text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:translate-none peer-focus:text-blue-500;
+    @apply pointer-events-none absolute left-0 top-1 text-gray-900 text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:translate-none peer-focus:text-blue-500;
   }
   
   .floating-label-textarea {
-    @apply pointer-events-none absolute left-0 top-1 text-bcGovGray-900 text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-blue-500;
+    @apply pointer-events-none absolute left-0 top-1 text-gray-900 text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-blue-500;
   }
 }

package/nuxt.config.ts

@@ -16,5 +16,32 @@ export default defineNuxtConfig({
     '#base': resolve('./')
   },
 
-  compatibilityDate: '2025-07-10'
+  compatibilityDate: '2025-07-10',
+
+  modules: ['@nuxtjs/i18n'],
+
+  // For more details on i18n in layers: https://i18n.nuxtjs.org/docs/guide/layers
+  // For more details on config: https://i18n.nuxtjs.org/docs/api/options
+  i18n: {
+    defaultLocale: 'en-CA',
+    detectBrowserLanguage: false,
+    langDir: 'locales',
+    locales: [
+      {
+        name: 'English',
+        code: 'en-CA',
+        language: 'en-CA',
+        dir: 'ltr',
+        file: 'en-CA.ts'
+      },
+      {
+        name: 'Français',
+        code: 'fr-CA',
+        language: 'fr-CA',
+        dir: 'ltr',
+        file: 'fr-CA.ts'
+      }
+    ],
+    strategy: 'prefix'
+  }
 })

package/package.json

@@ -1,34 +1,23 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "repository": "github:bcgov/connect-nuxt",
   "main": "./nuxt.config.ts",
   "dependencies": {
-    "@nuxt/ui": "^3.2.0"
+    "@nuxt/ui": "^3.2.0",
+    "@nuxtjs/i18n": "^10.0.1"
   },
   "devDependencies": {
-    "nuxt": "4.0.0",
-    "typescript": "^5.8.3",
-    "vue": "latest",
-    "@nuxtjs/i18n": "^9.5.5",
-    "@playwright/test": "^1.52.0",
     "@axe-core/playwright": "^4.10.2",
-    "@faker-js/faker": "^9.8.0",
-    "@nuxt/test-utils": "^3.19.1",
-    "vitest": "^3.2.3",
     "@vitest/coverage-v8": "^3.2.3",
-    "happy-dom": "^17.6.3",
-    "otpauth": "^9.4.0",
-    "@testing-library/vue": "^8.1.0",
-    "@vue/test-utils": "^2.4.6",
     "dotenv": "^17.2.0",
+    "nuxt": "4.0.0",
+    "typescript": "^5.8.3",
     "vue-tsc": "^3.0.2",
-    "@nuxt/eslint-config": "^1.6.0",
-    "eslint": "^9.31.0",
-    "@sbc-connect/eslint-config": "0.0.2",
-    "@sbc-connect/playwright-config": "0.0.2",
-    "@sbc-connect/vitest-config": "0.0.2"
+    "@sbc-connect/eslint-config": "0.0.4",
+    "@sbc-connect/playwright-config": "0.0.4",
+    "@sbc-connect/vitest-config": "0.0.4"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

package/eslint.config.ts

@@ -1,3 +0,0 @@
-import eslintConfig from '@sbc-connect/eslint-config'
-
-export default eslintConfig