Skip to content

Commit

Permalink
Merge pull request #191 from kialj876/platform-web-form-updates-2
Browse files Browse the repository at this point in the history
UI - platform web, address previous pr comments and validation styling updates
  • Loading branch information
kialj876 authored Oct 18, 2024
2 parents f9290d4 + 8cca532 commit 4dce42d
Show file tree
Hide file tree
Showing 22 changed files with 337 additions and 216 deletions.
18 changes: 18 additions & 0 deletions strr-pm-web/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ export default defineAppConfig({
}
}
},
radioGroup: {
wrapper: 'max-w-bcGovInput'
},
select: {
color: {
red: {
Expand All @@ -39,6 +42,21 @@ export default defineAppConfig({
empty: 'text-gray-700'
}
},
textarea: {
base: 'bg-gray-100 hover:bg-gray-200 border-b text-gray-900 focus:border-b-2 h-20 hover:bg-gray-200',
rounded: 'rounded-none rounded-t',
color: {
gray: {
outline: 'border-gray-900 placeholder-gray-700 ring-0 focus:ring-0 focus:placeholder-primary-500'
},
primary: {
outline: 'bg-primary-50 border-primary-500 text-gray-900 ring-0 focus:ring-0'
},
red: {
outline: 'bg-red-50 border-red-600 placeholder-red-600 ring-0 focus:ring-0'
}
}
},
tooltip: {
container: 'z-20 group min-h-fit opacity-100'
}
Expand Down
61 changes: 0 additions & 61 deletions strr-pm-web/app/components/connect/Field.vue

This file was deleted.

14 changes: 6 additions & 8 deletions strr-pm-web/app/components/connect/Section.vue
Original file line number Diff line number Diff line change
@@ -1,31 +1,29 @@
<script setup lang="ts">
const { title, optional, divider, className } = defineProps<{
defineProps<{
title?: string
optional?: boolean
divider?: boolean
className?: string
error?: boolean
}>()
const { t } = useI18n()
</script>
<template>
<div
data-testid="form-section"
:class="`${className} mt-[40px] mobile:mt-[20px] ml-[40px] mr-[20px] mobile:mx-[8px]`"
class="px-4 md:px-10"
:class="[className, error ? 'border-l-2 border-red-600' : '']"
>
<div class="flex flex-col sm:flex-row">
<div v-if="title" class="w-[200px]">
<p class="mb-[8px] sm:mb-0 sm:font-bold">
<p class="mb-2 sm:mb-0 sm:font-bold" :class="error ? 'text-red-600' : ''">
{{ title }}
</p>
<p v-if="optional">
{{ t('general.optional') }}
{{ $t('general.optional') }}
</p>
</div>
<div class="w-full sm:pl-5">
<slot />
</div>
</div>
<div v-if="divider" class="hidden h-px w-full bg-bcGovGray-300 sm:block" />
</div>
</template>
4 changes: 2 additions & 2 deletions strr-pm-web/app/components/connect/address/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -130,12 +130,12 @@ const addressComplete = () => {
/>
</UFormGroup>
</div>
<UFormGroup v-slot="{ error }" :name="schemaPrefix + 'locationDescription'">
<UFormGroup :name="schemaPrefix + 'locationDescription'">
<UTextarea
v-model="locationDescription"
:placeholder="$t('label.locationDescription')"
:color="locationDescription ? 'primary' : 'gray'"
class="w-full"
:variant="error ? 'error' : 'bcGov'"
data-testid="address-location-description"
/>
</UFormGroup>
Expand Down
2 changes: 1 addition & 1 deletion strr-pm-web/app/components/connect/fee/ExtraFee.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
defineProps<{ description: string, fee: number, showFeeValue: boolean }>()
</script>
<template>
<div class="flex justify-between border-b border-bcGovGray-300 py-[10px] pl-4">
<div class="flex justify-between border-b border-bcGovGray-300 py-3 pl-4">
<p class="font-bold">
{{ description }}
</p>
Expand Down
54 changes: 28 additions & 26 deletions strr-pm-web/app/components/connect/fee/Widget.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
const { t } = useI18n()
Expand Down Expand Up @@ -30,13 +31,12 @@ const feeItems = computed<ConnectFeeItem[]>(() => {
// folding stuff
const folded = ref(false)
const { width } = useScreenSize()
const isFoldable = computed(() => {
const threshold = width.value < 1024
if (!threshold) {
const { width } = useWindowSize()
const isFoldable = computed(() => width.value < 1024)
watch(isFoldable, (val) => {
if (!val) {
folded.value = false
}
return threshold
})
const toggleFolded = () => {
Expand All @@ -51,31 +51,33 @@ const toggleFolded = () => {
data-testid="fee-widget"
class="z-10 mr-5 w-full rounded bg-white shadow-md lg:mr-0 lg:w-[320px]"
>
<div
:class="`
${folded ? 'rounded' : 'rounded-t'}
px-[15px] py-[10px] pt-[10px] bg-midnightBlue-900 flex flex-row justify-between
cursor-pointer lg:cursor-auto
`
"
<UButton
:tabindex="isFoldable ? 0 : -1"
:role="isFoldable ? 'button' : 'title'"
class="flex w-full bg-midnightBlue-900 py-2 pl-4 text-lg font-bold transition-all"
:class="[folded ? 'rounded' : 'rounded-b-none rounded-t', isFoldable ? '' : 'pointer-events-none']"
:aria-label="$t('feeSummary.title')"
:label="$t('feeSummary.title')"
@click="toggleFolded"
>
<p class="font-bold text-white">
{{ t("feeSummary.title") }}
</p>
<div class="flex lg:hidden">
<img
src="/icons/caret.svg"
alt="Toggle fee widget shown"
:class="`cursor-pointer transition-all ${folded ? 'rotate-180': ''}`"
>
</div>
</div>
<div :class="`transition-all ${folded ? 'h-[0px] overflow-hidden p-[0px]': 'px-[15px] pb-[10px] '}`">
<template #trailing>
<div class="flex grow justify-end pr-1">
<UIcon
v-if="isFoldable"
class="size-7"
:name="folded ? 'i-mdi-chevron-down' : 'i-mdi-chevron-up'"
/>
</div>
</template>
</UButton>
<div
class="text-sm transition-all"
:class="folded ? 'h-[0px] overflow-hidden': 'px-4 pt-1'"
>
<div
v-for="feeItem in feeItems"
:key="feeItem.filingTypeCode"
class="flex flex-row justify-between border-b border-bcGovGray-300 py-[10px]"
class="flex flex-row justify-between border-b border-bcGovGray-300 py-3"
>
<p class="font-bold">
{{ t(`feeSummary.itemLabels.${feeItem.filingTypeCode}`) }}
Expand Down Expand Up @@ -123,7 +125,7 @@ const toggleFolded = () => {
:fee="totalGst"
:show-fee-value="isPlaceholderActive"
/>
<div class="flex flex-row items-end justify-between py-[10px] text-sm" aria-label="null">
<div class="flex flex-row items-end justify-between py-3" aria-label="null">
<p class="mb-1 font-bold">
{{ t("feeSummary.total") }}
</p>
Expand Down
33 changes: 33 additions & 0 deletions strr-pm-web/app/components/connect/field/Group.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<script setup lang="ts">
import { type UseEventBusReturn } from '@vueuse/core'
const formBus = inject<UseEventBusReturn<any, string> | undefined>('form-events', undefined)
const model = defineModel({ type: String, default: '' })
watch(model, () => {
formBus?.emit({ type: 'blur', path: props.name })
formBus?.emit({ type: 'change', path: props.name })
}, { deep: true })
const props = defineProps({
name: { type: String, default: 'name.fullName' },
help: { type: String, default: '' },
id: { type: String, required: true },
label: { type: String, default: '' },
placeholder: { type: String, default: '' },
isDisabled: { type: Boolean, default: false },
size: { type: String, default: 'lg' }
})
</script>

<template>
<UFormGroup :label="label" :name="name" :help="help">
<ConnectField
:id="id"
v-model="model"
:placeholder="placeholder"
:disabled="isDisabled"
size="lg"
/>
</UFormGroup>
</template>
32 changes: 32 additions & 0 deletions strr-pm-web/app/components/connect/field/Index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<script setup lang="ts">
import { normalizeInput } from '~/utils/connect-validation'
const model = defineModel({ type: String, default: '' })
defineProps({
id: { type: String, required: true },
isDisabled: { type: Boolean, default: false },
label: { type: String, default: '' },
placeholder: { type: String, default: '' },
size: { type: String, default: 'lg' }
})
const normalize = () => {
model.value = normalizeInput(model.value)
}
</script>

<template>
<UInput
:id="id"
v-model="model"
v-bind="$attrs"
type="text"
class="max-w-bcGovInput"
:color="model ? 'primary' : 'gray'"
:placeholder="placeholder"
:disabled="isDisabled"
:size="size"
@blur="normalize"
/>
</template>
Loading

0 comments on commit 4dce42d

Please sign in to comment.