@sbc-connect/nuxt-base 0.5.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sbc-connect/nuxt-base
 
+## 0.6.1
+
+### Patch Changes
+
+- [#128](https://github.com/bcgov/connect-nuxt/pull/128) [`8cc8cc0`](https://github.com/bcgov/connect-nuxt/commit/8cc8cc09aad741dc841a864998129c6ac5a6af2f) Thanks [@kialj876](https://github.com/kialj876)! - Updates to connect button styling
+
+## 0.6.0
+
+### Minor Changes
+
+- [#118](https://github.com/bcgov/connect-nuxt/pull/118) [`41e58f4`](https://github.com/bcgov/connect-nuxt/commit/41e58f44e6d216e7de568bccb2e240b2d89b8408) Thanks [@deetz99](https://github.com/deetz99)! - Remove now unnecessary css module workaround.
+
+- [#117](https://github.com/bcgov/connect-nuxt/pull/117) [`e3da105`](https://github.com/bcgov/connect-nuxt/commit/e3da1056247f5c502578dc70f95375e66e3cc1da) Thanks [@deetz99](https://github.com/deetz99)! - Update all dependencies
+
 ## 0.5.0
 
 ### Minor Changes

package/{modules/base-assets/runtime/assets → app/assets/css}/connect-base-tw.css

@@ -1,8 +1,6 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-@source "../../../../app/";
-
 /* Customize Nuxt UI default tokens */
 /* Follows https://sites.google.com/bcdevexchange.org/designsystem/foundation-styles/colours */
 :root {
@@ -181,8 +179,8 @@
   font-family: "BCSans";
   font-style: normal;
   font-weight: 400;
-  src: url("/fonts/BCSans/BCSans-Regular.woff2") format("woff2"),
-       url("/fonts/BCSans/BCSans-Regular.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("BCGovFonts/BCSans-Regular.woff2") format("woff2"),
+       url("BCGovFonts/BCSans-Regular.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
@@ -190,15 +188,15 @@
   font-family: "BCSans";
   font-style: italic;
   font-weight: 400;
-  src: url("/fonts/BCSans/BCSans-Italic.woff2") format("woff2"),
-       url("/fonts/BCSans/BCSans-Italic.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("BCGovFonts/BCSans-Italic.woff2") format("woff2"),
+       url("BCGovFonts/BCSans-Italic.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 @font-face {
   font-family: "BCSans";
   font-weight: 700;
-  src: url("/fonts/BCSans/BCSans-Bold.woff2") format("woff2"),
-       url("/fonts/BCSans/BCSans-Bold.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("BCGovFonts/BCSans-Bold.woff2") format("woff2"),
+       url("BCGovFonts/BCSans-Bold.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
@@ -206,8 +204,8 @@
   font-family: "BCSans";
   font-style: italic;
   font-weight: 700;
-  src: url("/fonts/BCSans/BCSans-BoldItalic.woff2") format("woff2"),
-       url("/fonts/BCSans/BCSans-BoldItalic.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("BCGovFonts/BCSans-BoldItalic.woff2") format("woff2"),
+       url("BCGovFonts/BCSans-BoldItalic.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 

package/app/components/Connect/ButtonControl/Buttons.vue

@@ -15,9 +15,10 @@ const removeButtonAttrs = (button: ConnectButton) => {
     v-for="(button, i) in buttons"
     :key="`${position}-button-${i}`"
     data-testid="button-wrapper"
+    class="flex flex-col grow"
   >
     <UButton
-      class="max-w-fit px-7 py-3 mb-1"
+      class="grow px-7 py-3 mb-1 justify-center"
       v-bind="removeButtonAttrs(button)"
     />
     <p :class="['text-center', !button.removeAlertSpacing ? 'h-[1.25rem]' : '']">

package/app/components/Connect/ButtonControl/Index.vue

@@ -18,15 +18,15 @@ const rightAlertText = computed(() => buttonControl.value?.rightGroup.alertText
     class="@container"
     data-testid="connect-button-control"
   >
-    <div class="grid grid-cols-1 gap-4 @3xl:grid-cols-2">
+    <div class="grid grid-cols-1 gap-4 @4xl:grid-cols-2">
       <div>
         <div
-          class="flex justify-center @3xl:justify-start"
+          class="flex justify-center @4xl:justify-start"
           data-testid="left-buttons"
         >
           <div
-            class="relative flex flex-col flex-wrap gap-4 justify-center"
-            :class="leftGroup.stacked ? '' : 'flex-row'"
+            class="relative grow flex flex-col flex-wrap gap-4 @4xl:grow-0"
+            :class="(leftGroup.class || '') + (leftGroup.stacked ? '' : ' flex-row')"
           >
             <div
               v-if="leftAlertText"
@@ -42,12 +42,12 @@ const rightAlertText = computed(() => buttonControl.value?.rightGroup.alertText
       </div>
       <div>
         <div
-          class="flex justify-center @3xl:justify-end"
+          class="flex grow justify-center @4xl:justify-end"
           data-testid="right-buttons"
         >
           <div
-            class="relative flex flex-col flex-wrap gap-4 justify-center"
-            :class="rightGroup.stacked ? '' : 'flex-row'"
+            class="relative grow flex flex-col flex-wrap gap-4 @4xl:grow-0"
+            :class="(rightGroup.class || '') + (rightGroup.stacked ? '' : ' flex-row')"
           >
             <div
               v-if="rightAlertText"

package/app/interfaces/connect-button-control.ts

@@ -8,6 +8,7 @@ export interface ConnectButton extends ButtonProps {
 export interface ConnectButtonGroup {
   alertText?: string
   buttons: ConnectButton[]
+  class?: string
   stacked?: boolean
 }
 

package/firebase.json

@@ -0,0 +1,34 @@
+{
+  "hosting":
+    {
+      "site": "connect-nuxt-layer-base-dev",
+      "public": "dist",
+      "ignore": ["**/devops/**", "**/.*", "**/node_modules/**"],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ],
+      "headers" : [
+        {
+          "source": "**",
+          "headers" : [
+            { "key" : "Access-Control-Allow-Origin", "value" : "*" },
+            { "key" : "X-Frame-Options", "value" : "DENY" },
+            { "key" : "X-Content-Type-Options", "value" : "nosniff" },
+            { "key" : "X-XSS-Protection", "value" : "1; mode=block" },
+            {
+              "key": "Content-Security-Policy",
+              "value": "default-src 'self'; frame-src 'self' *.gov.bc.ca *.hotjar.com *.googleapis.com https://*.nr-data.net https://*.newrelic.com https://*.cac1.pure.cloud; script-src 'self' 'unsafe-eval' 'unsafe-inline' *.gov.bc.ca *.hotjar.com *.googleapis.com https://*.nr-data.net https://*.newrelic.com https://*.cac1.pure.cloud; style-src 'self' 'unsafe-inline' *.cloudflare.com *.googleapis.com  *.jsdelivr.net; font-src 'self' *.gov.bc.ca *.hotjar.com *.cloudflare.com *.googleapis.com *.gstatic.com *.jsdelivr.net; img-src 'self' data: *.hotjar.com https://*.cac1.pure.cloud https://ws1.postescanada-canadapost.ca; connect-src 'self' https://api.iconify.design *.gov.bc.ca *.launchdarkly.com *.run.app *.hotjar.com *.postescanada-canadapost.ca *.sentry.io *.apigee.net wss://*.hotjar.com *.hotjar.io https://*.nr-data.net https://shyrka-prod-cac1.s3.ca-central-1.amazonaws.com https://*.newrelic.com https://*.cac1.pure.cloud wss://*.cac1.pure.cloud; manifest-src 'self'; media-src 'self' https://*.cac1.pure.cloud; object-src 'self' https://*.cac1.pure.cloud; child-src 'self' https://*.cac1.pure.cloud;"
+            },
+            { "key": "Cache-Control", "value": "no-cache, no-store, must-revalidate"},
+            { "key": "Pragma", "value": "no-cache"},
+            { "key": "Referrer-Policy", "value": "no-referrer" },
+            { "key": "Feature-Policy", "value": "microphone 'self'" },
+            { "key": "Strict-Transport-Security", "value": "max-age=31536000;" }
+          ]
+        }
+      ]
+    }
+}

package/nuxt.config.ts

@@ -8,13 +8,20 @@ export default defineNuxtConfig({
   devtools: { enabled: false },
 
   alias: {
+    'BCGovFonts': resolve('./public/fonts/BCSans'),
     'BCGovLogoSmEn': resolve('./public/BCGovLogo/gov_bc_logo_vert_en.png'),
     'BCGovLogoSmFr': resolve('./public/BCGovLogo/gov_bc_logo_vert_fr.png'),
     'BCGovLogoLgEn': resolve('./public/BCGovLogo/gov_bc_logo_horiz_en.png'),
     'BCGovLogoLgFr': resolve('./public/BCGovLogo/gov_bc_logo_horiz_fr.png'),
-    '#base': resolve('./')
+    '#base': resolve('./'),
+    '#connect-theme': resolve('./app/assets/css/connect-base-tw.css')
   },
 
+  css: [
+    resolve('./app/assets/css/connect-base-layout.css'),
+    resolve('./app/assets/css/connect-base-tw.css')
+  ],
+
   compatibilityDate: '2025-07-10',
 
   imports: {
@@ -23,7 +30,8 @@ export default defineNuxtConfig({
 
   modules: [
     '@nuxtjs/i18n',
-    '@vueuse/nuxt'
+    '@vueuse/nuxt',
+    '@nuxt/ui'
   ],
 
   // For more details on i18n in layers: https://i18n.nuxtjs.org/docs/guide/layers

package/package.json

@@ -1,34 +1,33 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "dependencies": {
-    "@iconify-json/mdi": "^1.2.3",
-    "@nuxt/ui": "^4.1.0",
-    "@nuxtjs/i18n": "^10.1.2",
-    "@vueuse/core": "14.0.0",
-    "@vueuse/nuxt": "14.0.0",
-    "dompurify": "^3.3.0",
-    "es-toolkit": "^1.41.0",
-    "launchdarkly-vue-client-sdk": "^2.4.1",
-    "luxon": "^3.7.2",
-    "maska": "^3.2.0",
-    "zod": "^4.1.12"
+    "@iconify-json/mdi": "1.2.3",
+    "@nuxt/ui": "4.3.0",
+    "@nuxtjs/i18n": "10.2.1",
+    "@vueuse/core": "14.1.0",
+    "@vueuse/nuxt": "14.1.0",
+    "dompurify": "3.3.1",
+    "es-toolkit": "1.43.0",
+    "launchdarkly-vue-client-sdk": "2.4.1",
+    "luxon": "3.7.2",
+    "maska": "3.2.0",
+    "zod": "4.1.12"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.11.0",
-    "@types/luxon": "^3.7.1",
-    "@vitest/coverage-v8": "3.2.4",
+    "@types/luxon": "3.7.1",
     "dotenv": "17.2.3",
-    "nuxt": "4.1.3",
+    "nuxt": "4.2.2",
     "typescript": "5.9.3",
-    "vue-tsc": "3.1.2",
+    "vue-tsc": "3.2.1",
     "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/playwright-config": "0.0.8",
-    "@sbc-connect/vitest-config": "0.0.6"
+    "@sbc-connect/vitest-config": "0.1.0",
+    "@sbc-connect/playwright-config": "0.1.1"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

package/modules/base-assets/index.ts

@@ -1,30 +0,0 @@
-import { defineNuxtModule, createResolver, installModule } from 'nuxt/kit'
-
-export default defineNuxtModule({
-  meta: {
-    name: 'base-assets',
-    configKey: 'baseAssets'
-  },
-  defaults: {},
-  async setup(_options, _nuxt) {
-    console.info('Setting up **base** assets module')
-    const resolver = createResolver(import.meta.url)
-
-    _nuxt.hook('nitro:config', async (nitroConfig) => {
-      nitroConfig.publicAssets ||= []
-      nitroConfig.publicAssets.push({
-        dir: resolver.resolve('./runtime/public'),
-        maxAge: 60 * 60 * 24 * 365
-      })
-    })
-
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-base-tw.css'))
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-base-layout.css'))
-    await installModule('@nuxt/ui')
-
-    _nuxt.options.alias = {
-      ..._nuxt.options.alias,
-      '#connect-theme': resolver.resolve('./runtime/assets/connect-base-tw.css')
-    }
-  }
-})