@sbc-connect/nuxt-forms 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sbc-connect/nuxt-forms
 
+## 0.7.0
+
+### Minor Changes
+
+- [#144](https://github.com/bcgov/connect-nuxt/pull/144) [`3b9fddb`](https://github.com/bcgov/connect-nuxt/commit/3b9fddb1c634fa48c8f4426954cbb2a043f78ff1) Thanks [@eve-git](https://github.com/eve-git)! - Fix issue where postal code was not optional for certain countries.
+
+## 0.6.2
+
+### Patch Changes
+
+- [#141](https://github.com/bcgov/connect-nuxt/pull/141) [`83c5627`](https://github.com/bcgov/connect-nuxt/commit/83c5627689a50d6fa27f12f2ab7b2ef65e752d0e) Thanks [@deetz99](https://github.com/deetz99)! - ConnectFieldset, ConnectFormFieldWrapper: Move error text to always be under label instead of wrapping. ConnectFieldset: add error border styling to card bodyVariant
+
 ## 0.6.1
 
 ### Patch Changes

package/app/components/Connect/Fieldset.vue

@@ -4,7 +4,8 @@ import type { FormError } from '@nuxt/ui'
 const {
   orientation = 'horizontal',
   bodyVariant = 'none',
-  paddingClass = 'x-default'
+  paddingClass = 'x-default',
+  error
 } = defineProps<{
   label?: string
   description?: string
@@ -19,12 +20,15 @@ const id = useId()
 const legendId = id + '-legend'
 const descriptionId = id + '-description'
 
-const bodyClassMap: Record<FieldsetBodyVariant, string> = {
-  none: '',
-  card: 'bg-white rounded shadow-xs'
-}
+const bodyClassMap = computed<Record<FieldsetBodyVariant, string>>(() => {
+  const cardError = error ? 'border-error border-l-3' : 'border-transparent border-l-3'
+  return {
+    none: '',
+    card: 'bg-white rounded shadow-xs ' + cardError
+  }
+})
 
-const bodyClass = bodyClassMap[bodyVariant]
+const bodyClass = computed(() => bodyClassMap.value[bodyVariant])
 
 const padding = paddingClass === 'x-default'
   ? 'px-4 sm:px-8'
@@ -52,7 +56,7 @@ const padding = paddingClass === 'x-default'
           class="text-base text-neutral-highlighted font-bold"
         >
           <slot name="label">
-            <div class="flex flex-wrap gap-4">
+            <div class="flex flex-col gap-1">
               <span>{{ label }}</span>
               <span
                 v-if="error && typeof error === 'object' && 'message' in error && showErrorMsg"

package/app/components/Connect/Form/Address/PostalCode.vue

@@ -7,6 +7,14 @@ defineProps<{
   required?: boolean
 }>()
 
+const isOptionalPostalCodeCountry = (country?: string) => {
+  if (!country) {
+    return false
+  }
+
+  return isNoPostalCodeCountry(country)
+}
+
 const model = defineModel<string | undefined>({
   set(value) {
     if (value) {
@@ -24,10 +32,12 @@ const model = defineModel<string | undefined>({
     :data-testid="`${parentId}-field-postalCode`"
     :input-id="`${parentId}-input-postalCode`"
     :disabled
-    :required
+    :required="required && !isOptionalPostalCodeCountry(country)"
     :label="country === 'US'
       ? $t('connect.label.zipCode')
-      : $t('connect.label.postalCode')
+      : isOptionalPostalCodeCountry(country)
+        ? $t('connect.label.postalCodeOpt')
+        : $t('connect.label.postalCode')
     "
     :mask="country === 'CA'
       ? '*** ***'

package/app/components/Connect/Form/FieldWrapper.vue

@@ -33,7 +33,7 @@ const padding = paddingClass === 'x-default'
       class="text-base text-neutral-highlighted font-bold"
       :class="{ 'w-full sm:basis-1/4': orientation === 'horizontal' }"
     >
-      <div class="flex gap-2.5" :class="orientation === 'horizontal' ? 'flex-col' : 'flex-wrap'">
+      <div class="flex flex-col gap-1">
         <span>{{ label }}</span>
         <span
           v-if="error && typeof error === 'object' && 'message' in error && showErrorMsg"

package/app/utils/isoCountriesList.ts

@@ -2034,3 +2034,15 @@ export const isoCountriesListSortedByName = isoCountriesList.toSorted(
     return 0
   }
 )
+
+const NO_POSTAL_CODE_COUNTRY_CODES = [
+  'AO', 'AG', 'AW', 'BS', 'BZ', 'BJ', 'BM', 'BO', 'BQ', 'BW', 'BF', 'BI',
+  'CM', 'CF', 'TD', 'KM', 'CG', 'CD', 'CK', 'CI', 'CW', 'DJ', 'DM', 'GQ',
+  'ER', 'FJ', 'TF', 'GA', 'GM', 'GH', 'GD', 'GY', 'HM', 'HK',
+  'KI', 'KP', 'LY', 'MO', 'MW', 'ML', 'MR', 'NR',
+  'AN', 'NU', 'QA', 'RW', 'KN', 'ST', 'SC', 'SL', 'SX', 'SB', 'SO', 'SR', 'SY',
+  'TL', 'TG', 'TK', 'TO', 'TT', 'TV', 'UG', 'AE', 'VU', 'YE', 'ZW'
+]
+export function isNoPostalCodeCountry(countryCode: string): boolean {
+  return NO_POSTAL_CODE_COUNTRY_CODES.indexOf(countryCode) !== -1
+}

package/app/utils/zod-schemas/addresses.ts

@@ -55,6 +55,7 @@ export function getRequiredAddressSchema() {
     }
 
     const isRequiredRegion = country === 'US' || country === 'CA'
+    const isRequiredPostalCode = !!country && !isNoPostalCodeCountry(country)
 
     if (isRequiredRegion) {
       if (!region) {
@@ -64,14 +65,14 @@ export function getRequiredAddressSchema() {
           path: ['region']
         })
       }
+    }
 
-      if (!postalCode) {
-        ctx.addIssue({
-          code: 'custom',
-          message: t('connect.validation.fieldRequired'),
-          path: ['postalCode']
-        })
-      }
+    if (isRequiredPostalCode && !postalCode) {
+      ctx.addIssue({
+        code: 'custom',
+        message: t('connect.validation.fieldRequired'),
+        path: ['postalCode']
+      })
     }
 
     if (!postalCode) {

package/i18n/locales/en-CA.ts

@@ -17,6 +17,7 @@ export default {
       locationDescriptionOpt: 'Location Description (Optional)',
       mailingAddress: 'Mailing Address',
       postalCode: 'Postal Code',
+      postalCodeOpt: 'Postal Code (Optional)',
       province: 'Province',
       region: 'Region',
       regionOpt: 'Region (Optional)',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",