@cooperco/cooper-component-library 0.0.10

package/src/components/ContentMediaModule.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ContentMediaModule } from './types/ContentMediaModule'
+import { VariantOptions } from '../types'
+import { computed } from 'vue'
+import ContentModule from './ContentModule.vue'
+
+const props = defineProps<ContentMediaModule>()
+
+const variantValue = computed(() => {
+	return VariantOptions[props.variant]
+})
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<component
+		:is="isChild ? 'div' : 'section'"
+		:style="computedStyle"
+		class="content-media-module"
+	>
+		<div
+			class="content-media-container flex flex-row gap-5 relative"
+			:class="{ container: variantValue != VariantOptions.Hero }"
+		>
+			<img
+				v-if="media"
+				class="media"
+				:class="{ 'w-screen': variantValue == VariantOptions.Hero }"
+				:src="media.src"
+				:alt="media.altTag"
+				:height="media.height"
+				:width="media.width"
+			/>
+
+			<ContentModule
+				class="content"
+				:class="{
+					absolute: variantValue == VariantOptions.Hero,
+				}"
+				:="content"
+			/>
+		</div>
+	</component>
+</template>

package/src/components/ContentModule.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ContentModule } from './types/ContentModule'
+import CTA from './CTA.vue'
+import { computed } from 'vue'
+
+const props = defineProps<ContentModule>()
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+const computedClassname = computed(
+	() => `content-module p-5 ${props.class ?? ''}`
+)
+</script>
+
+<template>
+	<div :class="computedClassname" :style="computedStyle">
+		<div :class="`content-module-container mx-auto ${pt?.container ?? ''}`">
+			<img
+				v-if="logo"
+				:src="logo.src"
+				:alt="logo.alt"
+				:class="`${pt?.logo ?? ''}`"
+			/>
+			<h2
+				v-if="headline"
+				:class="`content-module-headline ${pt?.headline ?? ''}`"
+			>
+				{{ headline }}
+			</h2>
+			<h2
+				v-if="subHeadline"
+				:class="`content-module-subHeadline ${pt?.subHeadline ?? ''}`"
+			>
+				{{ subHeadline }}
+			</h2>
+			<p
+				v-if="description"
+				:class="`content-module-description ${pt?.description ?? ''}`"
+			>
+				{{ description }}
+			</p>
+			<div v-if="CTAs" :class="`content-module-ctas ${pt?.ctas ?? ''}`">
+				<CTA v-for="(item, index) in CTAs" v-bind="item" />
+			</div>
+		</div>
+	</div>
+</template>

package/src/components/FooterNavigation.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { type FooterNavigation } from './types/FooterNavigation'
+import NavigationElement from './NavigationElement.vue'
+import { computed } from 'vue'
+
+const props = defineProps<FooterNavigation>()
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+<template>
+	<footer class="w-full p-5" :style="computedStyle">
+		<div class="container flex flex-col mx-auto">
+			<div class="flex justify-between flex-col sm:flex-row p-5 gap-4">
+				<a href="/" class="footer-navigation-logo text-center">
+					<img
+						v-if="logo"
+						class="min-h-[95px] min-w-[100px] w-[100px] h-[95px]"
+						:="logo"
+					/>
+					{{ title }}
+				</a>
+				<div
+					v-if="navigation"
+					class="footer-navigation px-2 pt-2 pb-4 sm:flex sm:p-0 sm:space-x-2 md:space-x-4 space-y-5 sm:space-y-0"
+				>
+					<NavigationElement
+						v-for="(item, index) in navigation"
+						:class="`footer-nav-item-${index}`"
+						role="menuitem"
+						tabindex="-1"
+						:="{ ...item, isChild: false, elementType: 'footer' }"
+					/>
+				</div>
+				<div
+					v-if="socialMediaRef"
+					class="flex flex-wrap footer-social space-x-2"
+				>
+					<a
+						v-for="(item, index) in socialMediaRef"
+						:class="`footer-social-item-${index}`"
+						:href="item?.url?.link"
+					>
+						<img :="item.icon" />
+					</a>
+				</div>
+			</div>
+			<hr />
+			<!-- switch to rich text if we go forward with this -->
+			<div v-if="legalText" class="footer-legal py-5" v-html="legalText" />
+		</div>
+	</footer>
+</template>

package/src/components/IconChevron.vue

@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+const props = defineProps({
+	bold: {
+		type: Boolean,
+		default: false,
+	},
+	orientation: {
+		type: String,
+		default: 'right',
+	},
+})
+
+const orientClass = computed(() => {
+	return 'orient-' + props.orientation
+})
+</script>
+
+<template>
+	<i>
+		<svg
+			v-if="!props.bold"
+			:class="orientClass"
+			xwidth="19px"
+			xheight="35px"
+			height="1em"
+			viewBox="0 0 19 35"
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			xmlns:xlink="http://www.w3.org/1999/xlink"
+		>
+			<title>icon-arrow-lg</title>
+			<defs>
+				<path
+					id="path-1"
+					d="M366,124.5 C366,124.907277 365.845623,125.313759 365.536079,125.624786 L349.70258,141.534057 C349.084282,142.155314 348.08123,142.155314 347.463724,141.534057 C346.845425,140.9128 346.845425,139.905743 347.463724,139.284486 L362.177794,124.5 L347.463724,109.715514 C346.845425,109.094257 346.845425,108.0872 347.463724,107.465943 C348.082022,106.844686 349.085074,106.844686 349.70258,107.465943 L365.536079,123.375214 C365.845623,123.686241 366,124.092723 366,124.5"
+				></path>
+			</defs>
+			<g id="r4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+				<g
+					id="CCB_Sperm-Donor_HP_M_R4"
+					transform="translate(-380.000000, -2753.000000)"
+				>
+					<g id="TESTIMONIALS" transform="translate(0.000000, 2175.000000)">
+						<g id="Group-15" transform="translate(33.000000, 471.000000)">
+							<mask id="mask-2" fill="white">
+								<use xlink:href="#path-1"></use>
+							</mask>
+							<use
+								id="icon-arrow-lg"
+								fill="currentcolor"
+								xlink:href="#path-1"
+							></use>
+						</g>
+					</g>
+				</g>
+			</g>
+		</svg>
+		<svg
+			v-if="props.bold"
+			:class="orientClass"
+			xwidth="7px"
+			xheight="10px"
+			height="1em"
+			viewBox="0 0 7 10"
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			xmlns:xlink="http://www.w3.org/1999/xlink"
+		>
+			<title>icon-arrow</title>
+			<g id="r4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+				<g
+					id="CCB_Sperm-Donor_Location_1_D_R4"
+					transform="translate(-182.000000, -2023.000000)"
+					fill="currentcolor"
+				>
+					<g id="Group-2" transform="translate(120.000000, 409.000000)">
+						<g id="Group" transform="translate(0.000000, 90.000000)">
+							<g id="LOS-ALTOS" transform="translate(60.000000, 1294.000000)">
+								<g id="ADDRESS" transform="translate(0.000000, 12.000000)">
+									<g id="Group-19" transform="translate(2.696552, 214.000000)">
+										<path
+											id="icon-arrow"
+											d="M5.59137931,8.92855676 C5.59137931,9.13884623 5.51349799,9.34872498 5.35733597,9.50931713 L1.36342228,13.6165333 C1.05149763,13.9373069 0.545868153,13.9373069 0.233943494,13.6165333 C-0.0779811647,13.2957597 -0.0779811647,12.7757862 0.233943494,12.4550126 L3.66271839,8.92855676 L0.233943494,5.40210093 C-0.0779811647,5.08132735 -0.0779811647,4.56135377 0.233943494,4.24058019 C0.545868153,3.9198066 1.05149763,3.9198066 1.36342228,4.24058019 L5.35733597,8.34779639 C5.51349799,8.50838854 5.59137931,8.71826729 5.59137931,8.92855676 Z"
+										></path>
+									</g>
+								</g>
+							</g>
+						</g>
+					</g>
+				</g>
+			</g>
+		</svg>
+	</i>
+</template>
+
+<style scoped>
+.orient-up {
+	transform: rotate(-90deg);
+}
+.orient-down {
+	transform: rotate(90deg);
+}
+.orient-left {
+	transform: rotate(180deg);
+}
+</style>

package/src/components/Image.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Image } from './types/Image'
+
+defineProps<Image>()
+</script>
+
+<template>
+	<img
+		:src="media.src"
+		:alt="altTag"
+		:height="media.height"
+		:width="media.width"
+		:class="class"
+	/>
+</template>

package/src/components/LogoCollectionModule.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { LogoCollectionModule } from './types/LogoCollectionModule'
+import { computed } from 'vue'
+
+const props = defineProps<LogoCollectionModule>()
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<section :style="computedStyle" class="logo-module">
+		<div :class="`container mx-auto ${pt?.container ?? ''}`">
+			<h2 v-if="headline" :class="`logo-module-headline ${pt?.headline ?? ''}`">
+				{{ headline }}
+			</h2>
+			<div
+				v-if="modules"
+				:class="`logo-module-content flex flex-wrap justify-evenly gap-2 ${pt?.content ?? ''}`"
+			>
+				<Image v-for="image in modules" v-bind="image" />
+			</div>
+		</div>
+	</section>
+</template>
+./types/LogoCollectionModule

package/src/components/LogoContainerModule.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { LogoContainerModule } from './types/LogoContainerModule'
+import { computed } from 'vue'
+
+const props = defineProps<LogoContainerModule>()
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<section :style="computedStyle" class="logo-module">
+		<div :class="`container mx-auto ${pt?.container ?? ''}`">
+			<h2 v-if="headline" :class="`logo-module-headline ${pt?.headline ?? ''}`">
+				{{ headline }}
+			</h2>
+			<div
+				v-if="modules"
+				:class="`logo-module-content flex flex-wrap justify-evenly gap-2 ${pt?.content ?? ''}`"
+			>
+				<Image v-for="image in modules" v-bind="image" />
+			</div>
+		</div>
+	</section>
+</template>
+./types/LogoContainerModule

package/src/components/NavigationElement.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import {
+	NavigationElement as NavigationElementT,
+	NavigationElementType,
+} from './types/NavigationElement'
+import { computed, ref } from 'vue'
+import IconChevron from './IconChevron.vue'
+import { RouterLink } from 'vue-router'
+
+const props = defineProps<NavigationElementT>()
+
+// Update to support url vs page
+const url = computed(() => {
+	if (props.linkRef?.page) {
+		return `/${props.linkRef?.page}`
+	}
+	return props?.linkRef?.link
+})
+
+const elementTypeValue = computed(() => {
+	console.log(props.title, props.isChild)
+	return NavigationElementType[props.elementType ?? 'header']
+})
+const showSubNavigation = ref(false)
+const builtClassname = computed(
+	() =>
+		`relative m-0 ${props.class ?? ''} ${props.isChild ? 'sub-' : ''}navigation-element`
+)
+</script>
+
+<template>
+	<component :is="isChild ? 'li' : 'div'" :class="builtClassname">
+		<component
+			v-if="
+				elementTypeValue === NavigationElementType.header ||
+				(isChild && (url || subNavigation))
+			"
+			:is="url || isChild ? RouterLink : 'button'"
+			:to="url"
+			class="flex items-center hover:underline"
+			:class="{
+				'whitespace-nowrap': elementTypeValue === NavigationElementType.header,
+			}"
+			aria-expanded="true"
+			aria-haspopup="true"
+			@click.prevent="showSubNavigation = !showSubNavigation"
+		>
+			{{ title }}
+			<IconChevron
+				v-if="!isChild && subNavigation && !(url || isChild)"
+				class="ps-2 text-xs"
+				:orientation="showSubNavigation ? 'up' : 'down'"
+				:bold="true"
+			/>
+		</component>
+		<h2
+			v-else-if="elementTypeValue == NavigationElementType.footer"
+			class="mb-2 font-bold"
+		>
+			{{ title }}
+		</h2>
+
+		<ul
+			v-if="!isChild && subNavigation"
+			:class="{
+				hidden:
+					!showSubNavigation &&
+					elementTypeValue == NavigationElementType.header,
+				'sm:absolute left-0 z-10 sm:mt-2 space-y-2 origin-top-right rounded-md ring-opacity-5 focus:outline-none sm:shadow-lg sm:ring-1 sm:ring-white sm:bg-white p-5':
+					elementTypeValue == NavigationElementType.header,
+			}"
+			role="menu"
+			aria-orientation="vertical"
+			aria-labelledby="menu-button"
+			tabindex="-1"
+		>
+			<NavigationElement
+				v-for="(item, index) in subNavigation"
+				:key="item.title"
+				class="ms-3 sm:ms-0"
+				:class="`sub-navigation-element-item-${index}`"
+				role="menuitem"
+				tabindex="-1"
+				:="{ ...item, elementType, isChild: true }"
+			/>
+		</ul>
+
+		<template v-if="htmlRef">
+			<div v-html="htmlRef" />
+		</template>
+	</component>
+</template>

package/src/components/PrimaryNavigation.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { PrimaryNavigation } from './types/PrimaryNavigation'
+import Image from './Image.vue'
+import NavigationElement from './NavigationElement.vue'
+import { ref, computed } from 'vue'
+
+const props = defineProps<PrimaryNavigation>()
+const isOpen = ref(true)
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'white',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<header
+		class="primary-navigation-header sticky top-0 z-50 p-5 shadow-2xl"
+		:style="computedStyle"
+	>
+		<div class="container sm:flex sm:justify-between sm:items-center mx-auto">
+			<div class="flex items-center justify-between py-3 sm:p-0">
+				<a
+					href="/"
+					class="primary-navigation-logo flex items-center h-12 sm:h-16 ps-5"
+				>
+					<Image v-bind="logo" />
+				</a>
+				<div class="sm:hidden">
+					<button @click="isOpen = !isOpen" type="button" class="block">
+						<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+							<!-- Hamburger SVG path-->
+							<path
+								v-if="isOpen"
+								fill-rule="evenodd"
+								d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
+							/>
+							<!-- X SVG path -->
+							<path
+								v-if="!isOpen"
+								fill-rule="evenodd"
+								d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+			<nav
+				v-if="navigation"
+				class="primary-navigation items-center px-2 pt-2 pb-4 sm:flex gap-4 sm:justify-evenly sm:p-0"
+				:class="isOpen ? 'block' : 'hidden'"
+			>
+				<NavigationElement
+					v-for="(item, index) in navigation"
+					role="menuitem"
+					tabindex="-1"
+					:="{
+						...item,
+						class: `primary-nav-item-${index} ${item.class}`,
+						isChild: false,
+						elementType: 'header',
+					}"
+				/>
+			</nav>
+		</div>
+	</header>
+</template>

package/src/components/SplitModule.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SplitModule } from './types/SplitModule'
+
+const props = defineProps<SplitModule>()
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		'background-image': `url(${props.backgroundImage ?? ''})`,
+		'background-size': 'cover',
+	}
+})
+</script>
+
+<template>
+	<section class="split-module" :style="computedStyle">
+		<h2 :class="`headline ${pt?.headline ?? ''}`">{{ headline }}</h2>
+		<div
+			:class="`split-module-content flex justify-evenly gap-4 mx-auto ${pt?.content ?? ''}`"
+		>
+			<component
+				v-if="start"
+				:is="start.__typename"
+				v-bind="start"
+				class="split-module-left"
+			/>
+			<component
+				v-if="center"
+				:is="center.__typename"
+				v-bind="center"
+				class="split-module-center"
+			/>
+			<component
+				v-if="end"
+				:is="end.__typename"
+				v-bind="end"
+				class="split-module-right"
+			/>
+		</div>
+	</section>
+</template>

package/src/components/Testimonial.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Testimonial } from './types/Testimonial'
+import { MediaOptions } from '../types'
+import { computed } from 'vue'
+
+const props = defineProps<Testimonial>()
+
+const mediaTypeValue = computed(() => {
+	if (!props.media) {
+		return null
+	}
+	return MediaOptions[props.media.mediaType]
+})
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<div class="testimonial p-5" :style="computedStyle">
+		<div
+			:class="`container mx-auto flex flex-col items-center lg:flex-row gap-5 ${pt?.container ?? ''}`"
+		>
+			<div v-if="media" :class="`testimonial-media ${pt?.media}`">
+				<component :is="mediaTypeValue" :="media" />
+			</div>
+			<div
+				v-if="headline || quote"
+				:class="`testimonial-text ${pt?.text ?? ''}`"
+			>
+				<h3
+					v-if="headline"
+					:class="`testimonial-headline ${pt?.headline ?? ''}`"
+				>
+					{{ headline }}
+				</h3>
+
+				<p v-if="quote" :class="`testimonial-quote ${pt?.quote ?? ''}`">
+					{{ quote }}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>

package/src/components/TestimonialModule.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Testimonial } from './types/Testimonial'
+import { MediaOptions } from '../types'
+import { computed } from 'vue'
+
+const props = defineProps<Testimonial>()
+
+const mediaTypeValue = computed(() => {
+	if (!props.media) {
+		return null
+	}
+	return MediaOptions[props.media.mediaType]
+})
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<div class="testimonial p-5" :style="computedStyle">
+		<div
+			:class="`container mx-auto flex flex-col items-center lg:flex-row gap-5 ${pt?.container ?? ''}`"
+		>
+			<div v-if="media" :class="`testimonial-media ${pt?.media}`">
+				<component :is="mediaTypeValue" :="media" />
+			</div>
+			<div
+				v-if="headline || quote"
+				:class="`testimonial-text ${pt?.text ?? ''}`"
+			>
+				<h3
+					v-if="headline"
+					:class="`testimonial-headline ${pt?.headline ?? ''}`"
+				>
+					{{ headline }}
+				</h3>
+
+				<p v-if="quote" :class="`testimonial-quote ${pt?.quote ?? ''}`">
+					{{ quote }}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>

package/src/components/TileCollection.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { TileCollection } from './types/TileCollection'
+import TileContent from './TileContent.vue'
+import { computed } from 'vue'
+
+const props = defineProps<TileCollection>()
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<section :class="`tile-collection ${variant}`" :style="computedStyle">
+		<div :class="`container mx-auto ${pt?.container ?? ''}`">
+			<h2
+				v-if="headline"
+				:class="`tile-collection-headline ${pt?.headline ?? ''}`"
+			>
+				{{ headline }}
+			</h2>
+			<ul
+				v-if="modules"
+				:class="`tile-collection-content flex flex-col md:flex-row justify-center gap-3 ${pt?.content ?? ''}`"
+			>
+				<TileContent
+					v-for="(item, index) in modules"
+					:class="`tile-collection-content-item-${index}`"
+					:="item"
+				/>
+			</ul>
+		</div>
+	</section>
+</template>