@sbc-connect/nuxt-base 0.1.3 → 0.1.4

package/i18n/locales/en-CA.ts

@@ -1,88 +1,56 @@
-/* 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'
+  /* Ordering should be alphabetical unless otherwise specified */
+  connect: {
+    breadcrumb: {
+      /* Only include breadcrumb values that extended apps may overwrite */
+      arialabel: 'Breadcrumb',
+      default: 'Service BC Connect'
     },
-    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.'
+    footer: {
+      /* Only include footer values that extended apps may overwrite */
+      navLabel: 'Useful Links' // <nav> aria-label
+    },
+    header: {
+      /* Only include header values that extended apps may overwrite */
+      homeLink: 'Home', // aria-label
+      navLabel: 'Main Navigation', // <nav> aria-label
+      title: 'Service BC Connect'
+    },
+    label: {
+      accessibility: 'Accessibility',
+      appVersion: 'App Version',
+      bcApp: 'A BC Online Application',
+      bcGovLogo: 'Government of British Columbia Logo',
+      copyright: 'Copyright',
+      disclaimer: 'Disclaimer',
+      fees: 'Fees',
+      goBack: 'Go Back',
+      goHome: 'Go Home',
+      home: 'Home',
+      localeSelect: 'Select a Language, current language: English',
+      privacy: 'Privacy',
+      releaseNotes: 'Release Notes',
+      whatsNew: "What's New",
+      whatsNewAria: "What's New, {count} unread",
+      whatsNewSlideover: "What's New at BC Registries"
+    },
+    page: {
+      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.'
+    },
+    text: {
+      whatsNewSlideoverDescription: ' ',
+      whatsNewSlideoverEmpty: 'No new items.'
     }
   },
   test: {

package/i18n/locales/fr-CA.ts

@@ -1,7 +1,39 @@
 /* eslint-disable max-len */
 export default {
+  /* Ordering should be alphabetical unless otherwise specified */
+  connect: {
+    breadcrumb: {
+      /* Only include breadcrumb values that extended apps may overwrite */
+      arialabel: "Fil d'Ariane",
+      default: 'Service Connect CB'
+    },
+    footer: {
+      /* Only include footer values that extended apps may overwrite */
+      navLabel: 'Liens utiles' // <nav> aria-label
+    },
+    header: {
+      /* Only include header values that extended apps may overwrite */
+      homeLink: 'Accueil', // aria-label
+      navLabel: 'Navigation principale', // <nav> aria-label
+      title: 'Service Connect CB'
+    },
+    label: {
+      accessibility: 'Accessibilité',
+      appVersion: "Version de l'Application",
+      bcApp: 'Une application en ligne CB',
+      bcGovLogo: 'Logo du gouvernement de la Colombie-Britannique',
+      copyright: "Droits d'auteur",
+      disclaimer: 'Clause de non-responsabilité',
+      fees: 'Frais',
+      goBack: 'Retour',
+      home: 'Accueil',
+      localeSelect: 'Sélectionnez une langue, langue courante: Français',
+      privacy: 'Confidentialité',
+      releaseNotes: 'Notes de Version'
+    },
+    text: {}
+  },
   btn: {
-    appVersion: "Version de l'Application",
     bcRegHome: 'Accueil des Registres de la CB',
     createAccount: 'Créer un Compte',
     editProfile: 'Editer le Profil',
@@ -33,35 +65,6 @@ export default {
     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: {

package/modules/assets/index.ts

@@ -18,7 +18,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     _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-main.css'))
     await installModule('@nuxt/ui')
   }
 })

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

@@ -1,15 +1,63 @@
-@reference "tailwindcss";
-@reference "@nuxt/ui";
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@source "../../../../app/";
 
 /* Customize Nuxt UI default tokens */
+/* Follows https://sites.google.com/bcdevexchange.org/designsystem/foundation-styles/colours */
 :root {
-  --ui-error: var(--color-connect-error);
+  --ui-error: var(--color-red-600);
+  --ui-primary: var(--color-blue-500);
+  --ui-secondary: white;
+  --ui-success: var(--color-green-600);
+  --ui-warning: #F8661A;
+  /* Custom themes */
+  --ui-brandDark: var(--color-midnightBlue-900);
+  --ui-brandLight: var(--color-yellow-400);
+  --ui-lineDark: #6F7780;
+  --ui-lineLight: var(--color-gray-300);
+  --ui-lineSpecial: #899EB2;
+  --ui-markBlue: #1A5A96;
+  --ui-markBlueHover: #0000EE;
   --ui-neutral: var(--color-gray-700);
+  --ui-neutralDark: var(--color-gray-900);
+  --ui-neutralLight: #757575;
+  --ui-shadeCaution: #FFF7E3;
+  --ui-shadeLight: white;
+  --ui-shadeNew: #E8F5E9;
+  --ui-shadePrimary: var(--color-gray-100);
+  --ui-shadeSecondary: #E2E8EE;
+  --ui-shadeSpecial: var(--color-blue-50);
+  --ui-shadeWarning: #FAE9E9;
+  --ui-radius: 0.1667rem;
+}
+
+/* FUTURE: add dark themed colours (currently set to be the same) */
+.dark {
+  --ui-error: var(--color-red-600);
   --ui-primary: var(--color-blue-500);
   --ui-secondary: white;
   --ui-success: var(--color-green-600);
   --ui-warning: #F8661A;
-  --ui-radius: 0.25rem;
+  /* Custom themes */
+  --ui-brandDark: var(--color-midnightBlue-900);
+  --ui-brandLight: var(--color-yellow-400);
+  --ui-lineDark: #6F7780;
+  --ui-lineLight: var(--color-gray-300);
+  --ui-lineSpecial: #899EB2;
+  --ui-markBlue: #1A5A96;
+  --ui-markBlueHover: #0000EE;
+  --ui-neutral: var(--color-gray-700);
+  --ui-neutralDark: var(--color-gray-900);
+  --ui-neutralLight: #757575;
+  --ui-shadeCaution: #FFF7E3;
+  --ui-shadeLight: white;
+  --ui-shadeNew: #E8F5E9;
+  --ui-shadePrimary: var(--color-gray-100);
+  --ui-shadeSecondary: #E2E8EE;
+  --ui-shadeSpecial: var(--color-blue-50);
+  --ui-shadeWarning: #FAE9E9;
+  --ui-radius: 0.1667rem;
 }
 
 @theme static {
@@ -28,27 +76,6 @@
   /* box shadow */
   --shadow-bcGovInput: inset 0 -2px 0 0px #1669bb;
 
-  /* COLOURS */
-  /* these colours are as defined in styleguide: */
-  /* https://preview.uxpin.com/73eb31e6346bc2863a066f02218a3af289325619#/pages/138840439/simulate/sitemap?mode=i */
-  /* for more details see previous link */
-  --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-connect-hairlinesOnWhite: var(--color-gray-300);
-  --color-connect-specialityDottedLines: #899EB2;
-  --color-connect-formFieldLines: #6F7780;
-
   /* GRAY */
   --color-gray-50: #f8f9fa;
   --color-gray-100: #f1f3f5;
@@ -186,7 +213,7 @@ body {
   h2,
   h3,
   h4 {
-    @apply text-gray-900;
+    @apply text-neutralDark;
   }
 
   h1,
@@ -213,20 +240,20 @@ body {
   }
 
   p {
-    @apply font-normal text-connect-midGray;
+    @apply font-normal text-neutral;
   }
 
   td,
   th {
-    @apply text-gray-900 text-sm;
+    @apply text-neutralDark text-sm;
   }
 
   /* floating labels */
   .floating-label-input {
-    @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;
+    @apply pointer-events-none absolute left-0 top-1 text-neutralDark 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-primary;
   }
   
   .floating-label-textarea {
-    @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;
+    @apply pointer-events-none absolute left-0 top-1 text-neutralDark 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-primary;
   }
 }

package/nuxt.config.ts

@@ -18,7 +18,14 @@ export default defineNuxtConfig({
 
   compatibilityDate: '2025-07-10',
 
-  modules: ['@nuxtjs/i18n'],
+  imports: {
+    dirs: ['interfaces']
+  },
+
+  modules: [
+    '@nuxtjs/i18n',
+    '@vueuse/nuxt'
+  ],
 
   // 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
@@ -43,5 +50,59 @@ export default defineNuxtConfig({
       }
     ],
     strategy: 'prefix'
+  },
+
+  ui: {
+    colorMode: false,
+    theme: {
+      colors: [
+        'primary',
+        'secondary',
+        'success',
+        'info',
+        'warning',
+        'error',
+        'brandDark',
+        'brandLight',
+        'lineDark',
+        'lineLight',
+        'lineSpecial',
+        'neutral',
+        'neutralDark',
+        'neutralLight',
+        'shadeCaution',
+        'shadeLight',
+        'shadeNew',
+        'shadePrimary',
+        'shadeSecondary',
+        'shadeSpecial',
+        'shadeWarning'
+      ]
+    }
+  },
+
+  icon: {
+    clientBundle: {
+      icons: [
+        'mdi:arrow-left',
+        'mdi:info-outline',
+        'mdi:information',
+        'mdi:web',
+        'mdi:check'
+      ]
+    }
+  },
+
+  runtimeConfig: {
+    public: {
+      // Should in alphabetical order
+      appName: process.env.npm_package_name || '',
+      version: `Connect Base Layer v${process.env.npm_package_version || ''}`,
+      baseUrl: '',
+      registryHomeUrl: '',
+      ldClientId: '',
+      statusApiUrl: '',
+      statusApiVersion: ''
+    }
   }
 })

package/package.json

@@ -1,23 +1,31 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "repository": "github:bcgov/connect-nuxt",
+  "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "dependencies": {
-    "@nuxt/ui": "^3.2.0",
-    "@nuxtjs/i18n": "^10.0.1"
+    "@iconify-json/mdi": "^1.2.3",
+    "@nuxt/ui": "^3.3.0",
+    "@nuxtjs/i18n": "^10.0.2",
+    "dompurify": "^3.2.6",
+    "launchdarkly-vue-client-sdk": "^2.4.1",
+    "@vueuse/nuxt": "^13.5.0",
+    "@vueuse/core": "^13.5.0",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@vitest/coverage-v8": "^3.2.3",
+    "@vitest/coverage-v8": "^3.2.4",
     "dotenv": "^17.2.0",
     "nuxt": "4.0.0",
     "typescript": "^5.8.3",
-    "vue-tsc": "^3.0.2",
-    "@sbc-connect/eslint-config": "0.0.4",
+    "vue-tsc": "^3.0.3",
+    "@types/lodash-es": "^4.17.12",
+    "@sbc-connect/eslint-config": "0.0.5",
     "@sbc-connect/playwright-config": "0.0.4",
-    "@sbc-connect/vitest-config": "0.0.4"
+    "@sbc-connect/vitest-config": "0.0.5"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -29,8 +37,10 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "test": "pnpm run test:unit; pnpm run test:e2e",
-    "test:unit": "vitest run",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:unit:watch": "vitest",
     "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
     "typecheck": "npx nuxt typecheck"
   }
 }

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

@@ -1,17 +0,0 @@
-<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>