@sbc-connect/nuxt-forms 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @sbc-connect/nuxt-forms
 
+## 0.7.2
+
+### Patch Changes
+
+- [#155](https://github.com/bcgov/connect-nuxt/pull/155) [`e4ad236`](https://github.com/bcgov/connect-nuxt/commit/e4ad2360c255173e20b7f6d384de2a9313ce747d) Thanks [@deetz99](https://github.com/deetz99)! - Apply new padding and error classes to form wrapper elements, add optional prop to apply aria-hidden to formfieldwrapper details content.
+
+- Updated dependencies [[`e4ad236`](https://github.com/bcgov/connect-nuxt/commit/e4ad2360c255173e20b7f6d384de2a9313ce747d)]:
+  - @sbc-connect/nuxt-base@0.7.3
+
 ## 0.7.1
 
 ### Patch Changes

package/app/components/Connect/Fieldset.vue

@@ -21,19 +21,19 @@ const legendId = id + '-legend'
 const descriptionId = id + '-description'
 
 const bodyClassMap = computed<Record<FieldsetBodyVariant, string>>(() => {
-  const cardError = error ? 'border-error border-l-3' : 'border-transparent border-l-3'
+  const cardError = error ? 'shadow-section-error' : ''
   return {
     none: '',
-    card: 'bg-white rounded shadow-xs ' + cardError
+    card: 'bg-white rounded shadow-xs overflow-hidden ' + cardError
   }
 })
 
 const bodyClass = computed(() => bodyClassMap.value[bodyVariant])
 
 const padding = paddingClass === 'x-default'
-  ? 'px-4 sm:px-8'
+  ? 'padding-x-default'
   : paddingClass === 'xy-default'
-    ? 'py-6 px-4 sm:py-10 sm:px-8'
+    ? 'padding-xy-default'
     : paddingClass
 </script>
 
@@ -44,7 +44,7 @@ const padding = paddingClass === 'x-default'
         'flex gap-4 sm:gap-6',
         bodyVariant === 'none' ? padding : '',
         orientation === 'horizontal' ? 'flex-col sm:flex-row' : 'flex-col',
-        (error && bodyVariant === 'none') ? 'border-error border-l-3' : 'border-transparent border-l-3',
+        (error && bodyVariant === 'none') ? 'shadow-section-error' : '',
       ]"
     >
       <div

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

@@ -3,19 +3,21 @@ import type { FormError } from '@nuxt/ui'
 
 const {
   orientation = 'horizontal',
-  paddingClass = 'x-default'
+  paddingClass = 'x-default',
+  detailsAriaHidden = false
 } = defineProps<{
   label: string
   error?: FormError | boolean
+  detailsAriaHidden?: boolean
   showErrorMsg?: boolean
   orientation?: 'vertical' | 'horizontal'
   paddingClass?: 'x-default' | 'xy-default' | string
 }>()
 
 const padding = paddingClass === 'x-default'
-  ? 'px-4 sm:px-8'
+  ? 'padding-x-default'
   : paddingClass === 'xy-default'
-    ? 'py-6 px-4 sm:py-10 sm:px-8'
+    ? 'padding-xy-default'
     : paddingClass
 </script>
 
@@ -25,11 +27,11 @@ const padding = paddingClass === 'x-default'
       'flex gap-4 sm:gap-6',
       padding,
       orientation === 'horizontal' ? 'flex-col sm:flex-row' : 'flex-col',
-      error ? 'border-error border-l-3' : 'border-transparent border-l-3',
+      error ? 'shadow-section-error' : '',
     ]"
   >
     <span
-      aria-hidden="true"
+      :aria-hidden="detailsAriaHidden"
       class="text-base text-neutral-highlighted font-bold"
       :class="{ 'w-full sm:basis-1/4': orientation === 'horizontal' }"
     >

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -18,7 +18,7 @@
   "dependencies": {
     "country-codes-list": "2.0.0",
     "vue-country-flag-next": "2.3.2",
-    "@sbc-connect/nuxt-base": "0.7.2"
+    "@sbc-connect/nuxt-base": "0.7.3"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",