Add Partner Directory (#161)

* add types

* fix captcha

* buncha type fixes

* agency partner types

* add to prerender routes

* directory page block

* form components

* new pages

* helpers

* update deps

* fix filter causing build to fail

* fix card

* fix main content bottom border

* mobile filters

* Fix OG Images

* fix placement of clear filter button on desktop

* add directus-format-title package

* fix lint issues

components/Base/Block.vue

@@ -40,6 +40,7 @@ const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
 	block_testimonial_slider: resolveComponent('BlockTestimonialSlider'),
 	block_tier_group: resolveComponent('BlockTierGroup'),
 	block_tier: resolveComponent('BlockTier'),
+	block_directory: resolveComponent('BlockDirectory'),
 };
 </script>
 

components/Base/Byline.vue

@@ -10,7 +10,7 @@ defineProps<BaseBylineProps>();
 
 <template>
 	<address rel="author" class="base-byline">
-		<BaseDirectusImage v-if="image" :width="44" :height="44" class="avatar" :uuid="image" :alt="name ?? ''" />
+		<BaseDirectusImage v-if="image" :width="44" :height="44" class="avatar" :uuid="image as string" :alt="name ?? ''" />
 
 		<div>
 			<p v-if="name" class="name">{{ name }}</p>

components/Base/CardGroup.vue

@@ -21,7 +21,7 @@ withDefaults(defineProps<BaseCardGroup>(), {
 .base-cardgroup {
 	&.direction-horizontal {
 		--columns: 1;
-		--gap: var(--space-5);
+		--gap: var(--space-6);
 
 		display: grid;
 		grid-template-columns: repeat(var(--columns), 1fr);
@@ -50,7 +50,7 @@ withDefaults(defineProps<BaseCardGroup>(), {
 			}
 
 			@container (width > 60rem) {
-				--gap: var(--space-20);
+				--gap: var(--space-12);
 			}
 		}
 

components/Base/CheckboxGroup.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+interface Option {
+	label: string;
+	value: string;
+}
+
+interface Props {
+	modelValue: string[] | undefined;
+	options: Option[];
+	name?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	name: 'checkbox-group',
+	modelValue: () => [],
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const updateValue = (value: string) => {
+	const currentValue = props.modelValue || [];
+	const index = currentValue.indexOf(value);
+	let newValue;
+
+	if (index === -1) {
+		newValue = [...currentValue, value];
+	} else {
+		newValue = currentValue.filter((v) => v !== value);
+	}
+
+	emit('update:modelValue', newValue);
+};
+
+const isChecked = (value: string) => (props.modelValue || []).includes(value);
+
+const { theme } = useTheme();
+</script>
+
+<template>
+	<div class="checkbox-group" :class="`theme-${theme}`">
+		<div v-for="option in options" :key="option.value" class="checkbox-wrapper">
+			<input
+				:id="`${name}-${option.value}`"
+				type="checkbox"
+				:name="name"
+				:value="option.value"
+				:checked="isChecked(option.value)"
+				@change="updateValue(option.value)"
+			/>
+			<label :for="`${name}-${option.value}`">{{ option.label }}</label>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.checkbox-group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+
+	.checkbox-wrapper {
+		display: flex;
+		align-items: center;
+		font-size: var(--font-size-sm);
+		line-height: var(--line-height-sm);
+
+		input[type='checkbox'] {
+			appearance: none;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			width: var(--space-6);
+			height: var(--space-6);
+			border: 2px solid var(--gray-300);
+			border-radius: var(--rounded-sm);
+			margin-right: var(--space-3);
+			cursor: pointer;
+			position: relative;
+			transition: var(--duration-150) var(--ease-out);
+
+			&:hover {
+				border-color: var(--gray-400);
+			}
+
+			&:checked {
+				background-color: var(--primary);
+				border-color: var(--primary);
+
+				&::after {
+					content: '';
+					position: absolute;
+					left: 6px;
+					top: 2px;
+					width: 6px;
+					height: 12px;
+					border: solid white;
+					border-width: 0 2px 2px 0;
+					transform: rotate(45deg);
+				}
+			}
+
+			&:focus {
+				outline: none;
+				box-shadow: 0 0 0 3px var(--primary-100);
+			}
+		}
+
+		label {
+			cursor: pointer;
+			user-select: none;
+			padding-top: 2px;
+			text-transform: capitalize;
+		}
+	}
+}
+
+.theme-dark {
+	.checkbox-wrapper {
+		input[type='checkbox'] {
+			border-color: var(--gray-600);
+			background-color: var(--gray-700);
+
+			&:hover {
+				border-color: var(--gray-500);
+			}
+
+			&:checked {
+				background-color: var(--primary);
+				border-color: var(--primary);
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 3px var(--primary-800);
+			}
+		}
+
+		label {
+			color: var(--gray-200);
+		}
+	}
+}
+</style>

components/Base/FormGroup.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+interface Props {
+	label?: string;
+	required?: boolean;
+	error?: string;
+	hideLabel?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	required: false,
+	hideLabel: false,
+});
+
+const { theme } = useTheme();
+</script>
+
+<template>
+	<div class="form-group" :class="`theme-${theme}`">
+		<label v-if="label && !hideLabel" :for="label">
+			{{ label }}
+			<span v-if="required" class="required">*</span>
+		</label>
+		<slot></slot>
+		<ul v-if="error" class="error-messages">
+			<li>
+				<label>{{ error }}</label>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.form-group {
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
+
+	label {
+		font-weight: 600;
+		display: block;
+		margin-bottom: var(--space-2);
+		text-transform: capitalize;
+	}
+
+	.required {
+		color: var(--primary);
+	}
+
+	.error-messages {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		color: var(--danger);
+		font-style: italic;
+		margin-block-start: var(--space-1);
+
+		li label {
+			font-weight: 500;
+			font-size: var(--font-size-xs);
+			line-height: var(--line-height-xs);
+		}
+	}
+}
+
+.theme-dark {
+	.error-messages {
+		color: var(--danger);
+	}
+}
+</style>

components/Base/HsForm.vue

@@ -154,7 +154,8 @@ watch(formId, renderHsForm);
 	}
 
 	:deep(fieldset + fieldset .hs-form-field > label),
-	:deep(.hs-dependent-field > * + * .hs-form-field > label) {
+	:deep(.hs-dependent-field > * + * .hs-form-field > label),
+	:deep(.hs_recaptcha) {
 		display: block;
 		margin-block-start: var(--space-6);
 	}

components/Base/Icon.vue

@@ -33,6 +33,7 @@ const filledIcons = [
 	'api',
 	'arrow_back',
 	'arrow_forward',
+	'arrow_outward',
 	'autopay',
 	'autostop',
 	'avg_pace',
@@ -55,6 +56,7 @@ const filledIcons = [
 	'globe_uk',
 	'home_app_logo',
 	'horizontal_rule',
+	'link',
 	'image_search',
 	'insights',
 	'login',
@@ -68,6 +70,7 @@ const filledIcons = [
 	'published_with_changes',
 	'query_stats',
 	'repeat',
+	'search',
 	'security',
 	'sort_by_alpha',
 	'sports_martial_arts',