@sbc-connect/nuxt-base 0.0.0-test-ld-20260520212549

package/app/assets/css/connect-base-tw.css

@@ -0,0 +1,303 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+/* Customize Nuxt UI default tokens */
+/* Follows https://sites.google.com/bcdevexchange.org/designsystem/foundation-styles/colours */
+:root {
+  /* Nuxt UI Default Text Colours */
+  --ui-text-dimmed: var(--color-gray-400);
+  --ui-text-muted: var(--color-gray-500);
+  --ui-text-toned: var(--color-gray-600);
+  --ui-text: var(--ui-neutral);
+  --ui-text-highlighted: var(--ui-neutral-highlighted);
+  --ui-text-inverted: var(--color-white);
+  /* Variant Colours */
+  --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-brand: var(--color-midnightBlue-900);
+  --ui-brand-inverted: var(--color-yellow-400);
+  --ui-line: #6F7780;
+  --ui-line-muted: var(--color-gray-300);
+  --ui-line-highlighted: #899EB2;
+  --ui-mark: #1A5A96;
+  --ui-mark-highlighted: #0000EE;
+  --ui-neutral: var(--color-gray-700);
+  --ui-neutral-highlighted: var(--color-gray-900);
+  --ui-neutral-toned: #757575;
+  --ui-shade-caution: #FFF7E3;
+  --ui-shade-inverted: white;
+  --ui-shade-new: #E8F5E9;
+  --ui-shade: var(--color-gray-100);
+  --ui-shade-secondary: #E2E8EE;
+  --ui-shade-highlighted: var(--color-blue-50);
+  --ui-shade-warning: #FAE9E9;
+  --ui-radius: 0.1667rem;
+  --ui-container: var(--container-bcGovLg);
+}
+
+/* FUTURE: add dark themed colours (currently set to be the same) */
+.dark {
+  /* Nuxt UI Default Text Colours */
+  --ui-text-dimmed: var(--ui-color-gray-400);
+  --ui-text-muted: var(--ui-color-gray-500);
+  --ui-text-toned: var(--ui-color-gray-600);
+  --ui-text: var(--ui-neutral);
+  --ui-text-highlighted: var(--ui-neutral-highlighted);
+  --ui-text-inverted: var(--color-white);
+  /* Variant Colours */
+  --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-brand: var(--color-midnightBlue-900);
+  --ui-brand-inverted: var(--color-yellow-400);
+  --ui-line: #6F7780;
+  --ui-line-muted: var(--color-gray-300);
+  --ui-line-highlighted: #899EB2;
+  --ui-mark: #1A5A96;
+  --ui-mark-highlighted: #0000EE;
+  --ui-neutral: var(--color-gray-700);
+  --ui-neutral-highlighted: var(--color-gray-900);
+  --ui-neutral-toned: #757575;
+  --ui-shade-caution: #FFF7E3;
+  --ui-shade-inverted: white;
+  --ui-shade-new: #E8F5E9;
+  --ui-shade: var(--color-gray-100);
+  --ui-shade-secondary: #E2E8EE;
+  --ui-shade-highlighted: var(--color-blue-50);
+  --ui-shade-warning: #FAE9E9;
+  --ui-radius: 0.1667rem;
+}
+
+/* Main Theme */
+@theme static {
+  /* font */
+  --font-sans: 'BCSans', 'Verdana', 'Arial', 'sans-serif';
+
+  /* widths */
+  --container-bcGovMd: 1020px;
+  --container-bcGovLg: 1360px;
+  --container-input: 600px;
+
+  /* list style types */
+  --marker-alpha: lower-alpha;
+  --marker-upper-alpha: upper-alpha;
+
+  /* box shadow */
+  /* bottom neutral/focused/error border for input elements */
+  --shadow-input: inset 0 -1px 0 0 var(--ui-neutral);
+  --shadow-input-focus: inset 0 -2px 0 0 var(--ui-primary);
+  --shadow-input-error: inset 0 -2px 0 0 var(--ui-error);
+
+  /* GRAY */
+  --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;
+  --color-blue-100: #e0e7ed;
+  --color-blue-150: #b3c2d1;
+  --color-blue-200: #8099b3;
+  --color-blue-300: #4d7094;
+  --color-blue-350: #38598a;
+  --color-blue-400: #26527d;
+  --color-blue-500: #1669bb;
+  --color-blue-600: #125192;
+  --color-blue-700: #002e5e;
+  --color-blue-800: #002753;
+  --color-blue-900: #002049;
+  --color-blue-950: #001438;
+
+  /* RED */
+  --color-red-50: #fef2f2;
+  --color-red-100: #fde3e4;
+  --color-red-200: #fdcbcc;
+  --color-red-300: #faa7a9;
+  --color-red-400: #f57478;
+  --color-red-500: #eb484d;
+  --color-red-600: #d3272c;
+  --color-red-700: #b52024;
+  --color-red-800: #961e21;
+  --color-red-900: #7d1f22;
+  --color-red-950: #440b0d;
+
+  /* YELLOW */
+  --color-yellow-50: #fffbeb;
+  --color-yellow-100: #fef2c7;
+  --color-yellow-200: #fee589;
+  --color-yellow-300: #fdd14c;
+  --color-yellow-400: #fcba19;
+  --color-yellow-500: #f69b0a;
+  --color-yellow-600: #da7505;
+  --color-yellow-700: #b55108;
+  --color-yellow-800: #933e0d;
+  --color-yellow-900: #79340e;
+  --color-yellow-950: #451903;
+
+  /* GREEN */
+  --color-green-50: #f2fbf4;
+  --color-green-100: #e2f6e6;
+  --color-green-200: #c6eccd;
+  --color-green-300: #99dca6;
+  --color-green-400: #65c378;
+  --color-green-500: #40a755;
+  --color-green-600: #2e8540;
+  --color-green-700: #286d37;
+  --color-green-800: #24572f;
+  --color-green-900: #1f4828;
+  --color-green-950: #0c2713;
+
+  /* MIDNIGHT BLUE */
+  --color-midnightBlue-50: #eef7ff;
+  --color-midnightBlue-100: #dceeff;
+  --color-midnightBlue-200: #b2dfff;
+  --color-midnightBlue-300: #6dc6ff;
+  --color-midnightBlue-400: #20a8ff;
+  --color-midnightBlue-500: #008dff;
+  --color-midnightBlue-600: #006edf;
+  --color-midnightBlue-700: #0057b4;
+  --color-midnightBlue-800: #004a94;
+  --color-midnightBlue-900: #003366;
+  --color-midnightBlue-950: #002651;
+}
+
+@font-face {
+  font-family: "BCSans";
+  font-style: normal;
+  font-weight: 400;
+  src: url("BCGovFonts/BCSans-Regular.woff2") format("woff2"),
+       url("BCGovFonts/BCSans-Regular.woff") format("woff"); /* Optimized for very modern browsers */
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "BCSans";
+  font-style: italic;
+  font-weight: 400;
+  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("BCGovFonts/BCSans-Bold.woff2") format("woff2"),
+       url("BCGovFonts/BCSans-Bold.woff") format("woff"); /* Optimized for very modern browsers */
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "BCSans";
+  font-style: italic;
+  font-weight: 700;
+  src: url("BCGovFonts/BCSans-BoldItalic.woff2") format("woff2"),
+       url("BCGovFonts/BCSans-BoldItalic.woff") format("woff"); /* Optimized for very modern browsers */
+  font-display: swap;
+}
+
+html,
+body {
+  min-height: 100dvh; /* Modern browsers */
+  min-height: 100vh;
+  font-family: 'BCSans', Verdana, Arial, sans-serif;
+  font-size: 0.875rem;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media (min-width: 960px) {
+  html,
+  body {
+    font-size: 1rem;
+  }
+}
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply text-neutral-highlighted;
+  }
+
+  h1,
+  h2,
+  h3 {
+    @apply font-bold;
+  }
+
+  h1,
+  h2 {
+    @apply leading-9;
+  }
+
+  h1 {
+    @apply text-3xl;
+  }
+
+  h2 {
+    @apply text-lg;
+  }
+
+  h3 {
+    @apply text-base;
+  }
+
+  p {
+    @apply font-normal text-neutral;
+  }
+
+  td,
+  th {
+    @apply text-neutral-highlighted text-sm;
+  }
+
+  /* floating labels */
+  .floating-label-input {
+    @apply pointer-events-none absolute left-0 top-3 text-neutral transition-all motion-reduce:transition-none duration-200 text-xs font-medium px-2.5 peer-focus:top-3 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:text-primary peer-aria-invalid:text-error;
+  }
+  
+  .floating-label-textarea {
+    @apply pointer-events-none absolute left-0 top-1 text-neutral text-xs font-medium px-2.5 transition-all duration-200 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 peer-aria-invalid:text-error;
+  }
+
+  /* Standard container padding */
+  .padding-x-default {
+    @apply px-4 sm:px-7.5
+  }
+  
+  .padding-xy-default {
+    @apply py-6 px-4 sm:py-10 sm:px-7.5
+  }
+
+  /* left error border for section elements */
+  /* Psuedo element required to be visible so slot content does not cover it */
+  .shadow-section-error {
+    position: relative;
+  }
+
+  .shadow-section-error::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 3px;
+    background-color: var(--ui-error);
+    pointer-events: none;
+    z-index: 1;
+  }
+}

package/app/components/Connect/Address/Display.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+const props = defineProps<{
+  address: Partial<ConnectAddress>
+  omitCountry?: boolean
+  separateCity?: boolean
+  textDecor?: boolean
+}>()
+
+const getAddressDisplayParts = (
+  address: Partial<ConnectAddress>,
+  separateCity = false,
+  addTextDecor = false,
+  omitCountry = false
+): string[] => {
+  const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
+  const textDecor = addTextDecor ? ',' : ''
+
+  const getLine1 = () => {
+    return (
+      address.street || [
+        [address.unitNumber, address.streetNumber].filter(val => !!val).join('-'),
+        address.streetName
+      ].filter(val => !!val).join(' ') || ''
+    ) + textDecor
+  }
+
+  const getLine2 = () => {
+    return (address.streetAdditional || '') + textDecor
+  }
+
+  const getCity = () => {
+    return (address.city || '') + textDecor
+  }
+
+  const getRegion = () => {
+    return address.region
+      ? address.region + (addTextDecor ? '\u00A0' : '')
+      : ''
+  }
+
+  const getCountry = () => {
+    try {
+      return address.country && !omitCountry ? (regionNamesInEnglish.of(address.country) || address.country) : ''
+    } catch {
+      return address.country || ''
+    }
+  }
+  return [
+    getLine1(),
+    getLine2(),
+    separateCity ? getCity() : '',
+    [!separateCity ? getCity() : '', getRegion(), address.postalCode].filter(val => !!val).join(' ') || '',
+    getCountry()
+  ].filter(val => !!val && val !== ',')
+}
+
+const addressDisplay = computed<string[]>(() =>
+  getAddressDisplayParts(props.address, props.separateCity, props.textDecor, props.omitCountry)
+)
+</script>
+
+<template>
+  <div
+    data-testid="address-display"
+    class="flex flex-col gap-2"
+  >
+    <div>
+      <div
+        v-for="addressLine, i in addressDisplay"
+        :key="addressLine + i"
+        data-testid="address-line"
+      >
+        {{ addressLine }}
+      </div>
+    </div>
+    <span
+      v-if="address.locationDescription"
+      data-testid="location-description"
+      class="italic"
+    >
+      {{ address.locationDescription }}
+    </span>
+  </div>
+</template>

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('connect.label.bcGovLogo')"
+    >
+    <img
+      class="block h-[64px] scale-125 sm:hidden"
+      :src="frSmallLogo"
+      :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('connect.label.bcGovLogo')"
+    >
+    <img
+      class="block h-[64px] scale-150 sm:hidden"
+      :src="enSmallLogo"
+      :alt="$t('connect.label.bcGovLogo')"
+    >
+  </div>
+</template>

package/app/components/Connect/Breadcrumb.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps<{
+  accountId?: string
+}>()
+
+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"
+    data-testid="connect-breadcrumb-wrapper"
+    class="bg-blue-350 p-2 sm:px-4 py-2"
+  >
+    <nav
+      :aria-label="$t('connect.breadcrumb.arialabel')"
+      class="app-inner-container flex items-center 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-primary',
+        }"
+      />
+      <div class="w-[1px] bg-shade h-[24px]" />
+      <UBreadcrumb
+        as="div"
+        aria-label=""
+        :items="breadcrumbs"
+        separator-icon="i-mdi-chevron-right"
+      />
+    </nav>
+  </div>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{ buttons: ConnectButton[], position: 'left' | 'right' }>()
+
+// remove alertText and removeAlertSpacing from being added to button html attrs
+const removeButtonAttrs = (button: ConnectButton) => {
+  const newButton = { ...button }
+  delete newButton['alertText']
+  delete newButton['removeAlertSpacing']
+  return newButton
+}
+</script>
+
+<template>
+  <div
+    v-for="(button, i) in buttons"
+    :key="`${position}-button-${i}`"
+    data-testid="button-wrapper"
+    class="flex flex-col grow"
+  >
+    <UButton
+      class="grow px-7 py-3 mb-1 justify-center"
+      v-bind="removeButtonAttrs(button)"
+    />
+    <p :class="['text-center', !button.removeAlertSpacing ? 'h-[1.25rem]' : '']">
+      <span v-if="button.alertText" class="text-error">{{ button.alertText }}</span>
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const {
+  stateKey = 'default-button-control'
+} = defineProps<{
+  stateKey?: string
+}>()
+
+const { buttonControl: meta } = useConnectButtonControl(stateKey)
+const buttonControl = computed(() => meta.value)
+const leftGroup = computed(() => buttonControl.value?.leftGroup || [])
+const rightGroup = computed(() => buttonControl.value?.rightGroup || [])
+const leftAlertText = computed(() => buttonControl.value?.leftGroup.alertText || undefined)
+const rightAlertText = computed(() => buttonControl.value?.rightGroup.alertText || undefined)
+</script>
+
+<template>
+  <div
+    class="@container"
+    data-testid="connect-button-control"
+  >
+    <div class="grid grid-cols-1 gap-4 @4xl:grid-cols-2">
+      <div>
+        <div
+          class="flex justify-center @4xl:justify-start"
+          data-testid="left-buttons"
+        >
+          <div
+            class="relative grow flex flex-col flex-wrap gap-4 @4xl:grow-0"
+            :class="(leftGroup.class || '') + (leftGroup.stacked ? '' : ' flex-row')"
+          >
+            <div
+              v-if="leftAlertText"
+              class="absolute flex flex-wrap justify-start bottom-1/3 right-[-13rem] w-[12rem]"
+            >
+              <p class="text-error" role="alert">
+                {{ leftAlertText }}
+              </p>
+            </div>
+            <ConnectButtonControlButtons :buttons="leftGroup.buttons" position="left" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="flex grow justify-center @4xl:justify-end"
+          data-testid="right-buttons"
+        >
+          <div
+            class="relative grow flex flex-col flex-wrap gap-4 @4xl:grow-0"
+            :class="(rightGroup.class || '') + (rightGroup.stacked ? '' : ' flex-row')"
+          >
+            <div
+              v-if="rightAlertText"
+              class="absolute flex flex-wrap justify-end bottom-1/3 left-[-13rem] w-[12rem]"
+            >
+              <p class="text-error" role="alert">
+                {{ rightAlertText }}
+              </p>
+            </div>
+            <ConnectButtonControlButtons :buttons="rightGroup.buttons" position="right" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const {
+  stateKey = 'default-button-control'
+} = defineProps<{
+  stateKey?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="bg-shade-inverted pb-6 pt-10"
+    data-testid="connect-button-control-wrapper"
+  >
+    <div class="app-inner-container app-body">
+      <ConnectButtonControl :state-key="stateKey" />
+    </div>
+  </div>
+</template>

package/app/components/Connect/Contact/Display.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { ConnectContactItem } from '#imports'
+
+const props = defineProps<{
+  contact: ConnectContactItem | ConnectContactItem[]
+  hours?: string
+}>()
+
+const iconMap = {
+  email: 'i-mdi-email',
+  phone: 'i-mdi-phone',
+  fax: 'i-mdi-fax'
+}
+
+const isMultipleContacts = computed(() => Array.isArray(props.contact))
+const normalizedContact = computed(() => {
+  return isMultipleContacts.value ? props.contact as ConnectContactItem[] : [props.contact as ConnectContactItem]
+})
+</script>
+
+<template>
+  <div class="space-y-5">
+    <ul
+      v-if="isMultipleContacts"
+      class="space-y-1"
+      :aria-label="$t('connect.label.contactInformation')"
+    >
+      <li v-for="item in normalizedContact" :key="item.value">
+        <span class="inline-flex items-center gap-1">
+          <UIcon :name="iconMap[item.type]" class="mr-2 size-4 text-blue-350" />
+          {{ item.title }}
+          <span v-if="item.type === 'fax'">{{ item.value }}</span>
+          <a
+            v-else
+            class="text-primary underline"
+            :href="item.href"
+            :target="item.type === 'email' ? '_blank' : undefined"
+          >
+            {{ item.value }}
+          </a>
+        </span>
+      </li>
+    </ul>
+
+    <div v-else-if="normalizedContact[0]">
+      <span class="inline-flex items-center gap-1">
+        <UIcon :name="iconMap[normalizedContact[0].type]" class="mr-2 size-4 text-blue-350" />
+        {{ normalizedContact[0].title }}
+        <a
+          class="text-primary underline"
+          :href="normalizedContact[0].href"
+          :target="normalizedContact[0].type === 'email' ? '_blank' : undefined"
+        >
+          {{ normalizedContact[0].value }}
+        </a>
+      </span>
+    </div>
+
+    <p v-if="hours">
+      <strong class="text-neutral-highlighted">{{ $t('connect.label.hoursOfOperation') }}</strong>
+      <br>
+      {{ hours }}
+    </p>
+  </div>
+</template>