@sbc-connect/nuxt-base 0.1.3 → 0.1.4

package/.env.example

@@ -1 +1,11 @@
-NUXT_BASE_URL="http://localhost:3000/"
+# Web Urls
+NUXT_PUBLIC_BASE_URL="http://localhost:3000/"
+NUXT_PUBLIC_REGISTRY_HOME_URL="https://dev.bcregistry.gov.bc.ca/"
+
+# API Urls
+# Status API
+NUXT_PUBLIC_STATUS_API_URL="https://status-api-dev.apps.gold.devops.gov.bc.ca"
+NUXT_PUBLIC_STATUS_API_VERSION="/api/v1"
+
+# LaunchDarkly
+NUXT_PUBLIC_LD_CLIENT_ID=""

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.4
+
+### Patch Changes
+
+- [#18](https://github.com/bcgov/connect-nuxt/pull/18) [`90f240f`](https://github.com/bcgov/connect-nuxt/commit/90f240fd789a5286ded5df710bddd6dc953bcba5) Thanks [@deetz99](https://github.com/deetz99)! - **Feat: Whats New**
+
+  - fetch whats new inside a plugin
+  - whats new header button
+  - whats new slideover component
+  - whats new plugin tests
+  - fix eslint to ignore playwright reports
+  - whats new items tracked in local storage to display button chip or not
+
+  issue: bcgov/entity#29334
+
+- [#15](https://github.com/bcgov/connect-nuxt/pull/15) [`0fb8c54`](https://github.com/bcgov/connect-nuxt/commit/0fb8c54e059d78b246b80a03f049d075b7bbcf72) Thanks [@deetz99](https://github.com/deetz99)! - - add spa-loading-template
+
+  - add error.vue
+  - add html attrs to app.vue
+  - add launch darkly composable & start tests
+  - add Banner component
+  - add iconify dep and icons to client bundle
+  - add test:unit:watch command to run vitest in watch mode
+  - update vitest config to search nested folders
+  - update --ui-radius var so rounded-md is 0.25rem
+  - remove core main css file causing duplicate fonts
+  - add html sanitizer plugin
+
+  issue: bcgov/entity#29334
+
+- [#16](https://github.com/bcgov/connect-nuxt/pull/16) [`9b8c225`](https://github.com/bcgov/connect-nuxt/commit/9b8c225a011e3c89c9b490e93a554f55a4e29b78) Thanks [@kialj876](https://github.com/kialj876)! - - add base header components (logo, localeSelect, wrapper)
+
+  - add footer component
+  - appendUrlParam util
+
+  issue: bcgov/entity#29334
+
 ## 0.1.3
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2025, bcgov
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,73 +1,62 @@
-# Nuxt Layer Starter
+[![License](https://img.shields.io/badge/License-BSD%203%20Clause-blue.svg)](LICENSE) [![pkg.pr.new](https://pkg.pr.new/badge/OWNER/REPO)](https://pkg.pr.new/~/bcgov/connect-nuxt)
 
-Create Nuxt extendable layer with this GitHub template.
+# @sbc-connect/nuxt-base
+The foundational Nuxt layer for all Connect applications.
 
-## Setup
+This package contains the core UI components, styling, and utilities for the Connect ecosystem. Extend this layer in your Nuxt project to get a consistent, on-brand starting point with zero configuration.
 
-Make sure to install the dependencies:
+## Features
 
-```bash
-pnpm install
-```
-
-## Working on your layer
-
-Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
-
-The `.playground` directory should help you on trying your layer during development.
+### BC Government Branding
+- Official color theme and design tokens
+- BCSans font family with pre-configured @font-face rules
+- BC Government logos and favicon assets
 
-Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
+### Core Development Assets
+- A library of reusable base components
+- Essential composables for common application logic
+- Standard utility functions
+- Pre-configured for Internationalization (i18n)
 
-## Distributing your layer
-
-Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
-
-To do so, you only have to check if `files` in `package.json` are valid, then run:
-
-```bash
-npm publish --access public
-```
+For detailed usage and documentation, please see the [Base Layer Docs](../../../docs/packages/layers/base/intro.md)
 
-Once done, your users will only have to run:
+## Usage
 
+### Install
 ```bash
-npm install --save your-layer
+pnpm install @sbc-connect/nuxt-base
 ```
 
-Then add the dependency to their `extends` in `nuxt.config`:
+### Configure
+Then add the dependency to `extends` in `nuxt.config`:
 
 ```ts
 defineNuxtConfig({
-  extends: 'your-layer'
+  extends: '@sbc-connect/nuxt-base'
 })
 ```
 
-## Development Server
+### Environment Variables
+This project requires certain environment variables to be set to run correctly.
 
-Start the development server on http://localhost:3000
+Create a file named .env in the root of the project.
 
-```bash
-pnpm dev
-```
-
-## Production
+Copy the contents of the .env.example file into your new .env file.
 
-Build the application for production:
+#### Local Development
+For local development, the following variables are required. The default values are suitable for running the application on your local machine:
 
-```bash
-pnpm build
 ```
-
-Or statically generate it with:
-
-```bash
-pnpm generate
+# .env
+NUXT_BASE_URL="http://localhost:3000/"
 ```
 
-Locally preview production build:
+#### Production Environments
+> [!IMPORTANT]
+> The values for staging and production environments are managed securely and should not be stored in this file.
 
-```bash
-pnpm preview
-```
+To obtain the correct values for a production build or deployment, please contact the Connect Platform Team.
+
+## Contributing
 
-Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+We welcome contributions to this package! Please see the main [Contribution Guidelines](../../../CONTRIBUTING.md) for information on our branching strategy, commit conventions, and pull request process.

package/app/app.config.ts

@@ -1,194 +1,54 @@
-/* eslint-disable max-len */
 export default defineAppConfig({
   connect: {
     header: {
-      localeSelect: true
+      localeSelect: true,
+      whatsNew: true
     },
     footer: {
       versions: []
     }
   },
   ui: {
-    badge: {
+    breadcrumb: {
       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'
+        separatorIcon: 'text-secondary'
       },
       variants: {
-        size: {
-          xs: {
-            root: 'text-xs'
-          },
-          sm: {
-            root: 'text-xs'
-          },
-          md: {
-            root: 'text-sm'
-          },
-          lg: {
-            root: 'text-sm'
-          },
-          xl: {
-            root: 'text-base'
-          }
-        },
-        required: {
+        active: {
           true: {
-            label: 'after:content-[\'*\'] after:ms-0.5 after:text-(--ui-error)'
+            link: 'text-secondary font-medium'
+          },
+          false: {
+            link: 'text-secondary underline font-medium'
           }
         }
       },
-      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'
+      compoundVariants: [
+        {
+          disabled: false,
+          active: false,
+          to: true,
+          class: {
+            link: 'hover:text-secondary hover:underline transition-colors'
           }
-        },
-        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'
-          }
-        }
+    button: {
+      slots: {
+        base: 'cursor-pointer'
       }
     },
-    select: {
+    dropdownMenu: {
       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'
+        content: 'bg-secondary ring-0',
+        group: 'p-0'
       }
     },
-    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'
+    tooltip: {
+      slots: {
+        content: 'bg-neutral ring-neutral text-secondary p-4',
+        arrow: 'fill-neutral'
       }
     }
   }
@@ -196,13 +56,13 @@ export default defineAppConfig({
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    myLayer?: {
-      /** Project name */
-      name?: string
-    }
     connect?: {
       header?: {
         localeSelect?: boolean
+        whatsNew?: boolean
+      }
+      footer?: {
+        versions?: string[]
       }
     }
   }

package/app/app.vue

@@ -1,5 +1,18 @@
+<script setup lang="ts">
+const { localeProperties } = useI18n()
+
+useHead({
+  htmlAttrs: {
+    lang: () => localeProperties.value.code,
+    dir: () => localeProperties.value.dir
+  }
+})
+</script>
+
 <template>
-  <nuxt-layout>
-    <nuxt-page />
-  </nuxt-layout>
+  <UApp :toaster="{ position: 'bottom-center' }">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
 </template>

package/app/components/Connect/BCGovLogo.vue

@@ -19,24 +19,24 @@ import enSmallLogo from 'BCGovLogoSmEn'
     <img
       class="hidden h-[60px] scale-125 sm:block"
       :src="frLargeLogo"
-      :alt="$t('ConnectBCGovLogo.alt')"
+      :alt="$t('connect.label.bcGovLogo')"
     >
     <img
       class="block h-[64px] scale-125 sm:hidden"
       :src="frSmallLogo"
-      :alt="$t('ConnectBCGovLogo.alt')"
+      :alt="$t('connect.label.bcGovLogo')"
     >
   </div>
   <div v-else class="shrink-0">
     <img
       class="hidden h-[60px] scale-125 sm:block"
       :src="enLargeLogo"
-      :alt="$t('ConnectBCGovLogo.alt')"
+      :alt="$t('connect.label.bcGovLogo')"
     >
     <img
       class="block h-[64px] scale-150 sm:hidden"
       :src="enSmallLogo"
-      :alt="$t('ConnectBCGovLogo.alt')"
+      :alt="$t('connect.label.bcGovLogo')"
     >
   </div>
 </template>

package/app/components/Connect/Breadcrumb.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const props = defineProps({ accountId: { type: String, required: false } })
+
+const { t } = useI18n()
+
+const breadcrumbs = computed<ConnectBreadcrumb[]>(() => {
+  const metaCrumbs = useRoute().meta.breadcrumbs as ConnectBreadcrumb[] | undefined
+
+  if (metaCrumbs) {
+    return metaCrumbs.map((bc) => {
+      if (bc.appendAccountId && props.accountId) {
+        return {
+          ...bc,
+          to: appendUrlParam(bc.to as string, 'accountid', props.accountId)
+        }
+      }
+      return bc
+    })
+  } else {
+    return [{ label: t('connect.breadcrumb.default') }]
+  }
+})
+
+function resolveBackHref() {
+  const bcLength = breadcrumbs.value.length
+
+  if (bcLength > 1) {
+    // return the second to last breadcrumb link
+    return breadcrumbs.value[bcLength - 2]?.to ?? breadcrumbs.value[bcLength - 2]?.href
+  } else {
+    return ''
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="$route.meta.hideBreadcrumbs !== true"
+    class="bg-blue-350"
+  >
+    <div class="app-inner-container flex items-center px-4 py-2 gap-3">
+      <UButton
+        class="size-[28px] rounded-full px-1 bg-secondary hover:bg-secondary/75"
+        :disabled="breadcrumbs.length < 2"
+        color="secondary"
+        icon="i-mdi-arrow-left"
+        :aria-label="$t('connect.label.goBack')"
+        :to="resolveBackHref()"
+        :ui="{
+          leadingIcon: 'text-blue-500',
+        }"
+      />
+      <div class="w-[1px] bg-shadePrimary h-[24px]" />
+      <UBreadcrumb
+        :items="breadcrumbs"
+        :aria-label="$t('connect.breadcrumb.arialabel')"
+        separator-icon="i-mdi-chevron-right"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Connect/Footer.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+const rtc = useRuntimeConfig().public
+const uiVersion = rtc.version
+const feesUrl = `${rtc.registryHomeUrl}product-fees`
+const dependencyVersions: string[] = useAppConfig().connect?.footer?.versions || []
+const localePath = useLocalePath()
+const links = [
+  {
+    label: 'connect.label.home',
+    to: localePath('/')
+  },
+  {
+    label: 'connect.label.releaseNotes',
+    to: 'https://www.release-notes.bcregistry.gov.bc.ca',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.fees',
+    to: feesUrl,
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.disclaimer',
+    to: 'https://www2.gov.bc.ca/gov/content/home/disclaimer',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.privacy',
+    to: 'https://www2.gov.bc.ca/gov/content/home/privacy',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.accessibility',
+    to: 'https://www2.gov.bc.ca/gov/content/home/accessibility',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.copyright',
+    to: 'https://www2.gov.bc.ca/gov/content/home/copyright',
+    target: '_blank'
+  }
+]
+
+const appVersions = computed<string[]>(() => {
+  const items = [...dependencyVersions]
+  if (uiVersion) {
+    items.unshift(uiVersion)
+  }
+  return items
+})
+</script>
+
+<template>
+  <footer
+    id="connect-main-footer"
+    data-testid="connect-main-footer"
+    class="border-t-2 border-brandLight bg-brandDark"
+  >
+    <div class="app-inner-container flex items-center justify-between p-2">
+      <nav :aria-label="$t('connect.footer.navLabel')" class="flex grow">
+        <ul class="list-none flex-col gap-1 p-0 sm:-ml-2 sm:flex-row sm:flex-wrap">
+          <li
+            v-for="link in links"
+            :key="link.to"
+            :class="[
+              'flex-col gap-2 border-r-0 pr-2 last:mr-0',
+              'last:border-r-0 sm:mr-2 sm:inline-block sm:flex-none',
+              'sm:border-r sm:first:ml-2 border-lineLight',
+            ]"
+          >
+            <NuxtLink
+              :to="link.to === '/' ? `/${$i18n.locale}` : link.to"
+              :target="link.target"
+              :class="[
+                'rounded p-1 text-sm text-secondary',
+                'hover:underline focus:outline-none',
+                'focus-visible:ring-2 focus-visible:ring-secondary',
+              ]"
+            >
+              {{ $t(link.label) }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </nav>
+      <div class="-mb-1 flex items-center">
+        <span class="italic text-brandLight">{{ $t('connect.label.bcApp') }}</span>
+        <UTooltip arrow :delay-duration="200">
+          <UButton
+            :aria-label="$t('connect.label.appVersion')"
+            color="secondary"
+            icon="i-mdi-info-outline"
+            variant="ghost"
+          />
+
+          <template #content>
+            <div class="flex flex-col">
+              <span v-for="(item, i) in appVersions" :key="i">{{ item }}</span>
+            </div>
+          </template>
+        </UTooltip>
+      </div>
+    </div>
+  </footer>
+</template>

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

@@ -9,12 +9,12 @@ const localePath = useLocalePath()
     :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',
+      'ease-in-out hover:bg-secondary/[0.1]',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-secondary',
     ]"
-    :aria-label="$t('ConnectHeader.homeLink')"
+    :aria-label="$t('connect.header.homeLink')"
   >
     <ConnectBCGovLogo />
-    <span class="text-base font-semibold text-white lg:text-lg"> {{ $t('ConnectHeader.title') }} </span>
+    <span class="text-base font-semibold text-secondary lg:text-lg"> {{ $t('connect.header.title') }} </span>
   </NuxtLink>
 </template>