@cooperco/cooper-component-library 0.0.10 → 0.1.0

package/src/components/{LogoCollectionModule.vue → LogoCollectionModule/LogoCollectionModule.vue}

@@ -1,8 +1,15 @@
 <script setup lang="ts">
-import { LogoCollectionModule } from './types/LogoCollectionModule'
+import { LogoCollectionModule } from './LogoCollectionModule'
 import { computed } from 'vue'
+import {
+	combinePassthroughs,
+	LogoCollectionModulePt,
+} from '../../config/defaultPassthrough'
 
 const props = defineProps<LogoCollectionModule>()
+const pt = computed(() =>
+	combinePassthroughs(LogoCollectionModulePt, props.pt ?? {})
+)
 
 const computedStyle = computed(() => {
 	return {
@@ -22,9 +29,12 @@ const computedStyle = computed(() => {
 				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" />
+				<Image
+					v-for="(image, index) in modules"
+					v-bind="image"
+					:key="`cta-${image.altTag}-${index}`"
+				/>
 			</div>
 		</div>
 	</section>
 </template>
-./types/LogoCollectionModule

package/src/components/{types → NavigationElement}/NavigationElement.ts

@@ -1,5 +1,8 @@
-import { ClassOverrides } from '.'
-import { URLRef } from '../../types'
+import { ComponentPassthrough, URLRef } from '../../types'
+
+export interface NavigationElementPt extends ComponentPassthrough {
+	icon?: string
+}
 
 export interface NavigationElement {
 	elementType?: 'header' | 'footer'
@@ -9,7 +12,7 @@ export interface NavigationElement {
 	subNavigation?: NavigationElement[]
 	// types only used in code, based on placement from contentful
 	isChild?: boolean
-	pt?: ClassOverrides
+	pt?: NavigationElementPt
 }
 
 // Navigation

package/src/components/{NavigationElement.vue → NavigationElement/NavigationElement.vue}

@@ -2,12 +2,18 @@
 import {
 	NavigationElement as NavigationElementT,
 	NavigationElementType,
-} from './types/NavigationElement'
+} from './NavigationElement'
 import { computed, ref } from 'vue'
-import IconChevron from './IconChevron.vue'
 import { RouterLink } from 'vue-router'
+import {
+	combinePassthroughs,
+	NavigationElementPt,
+} from '../../config/defaultPassthrough'
 
 const props = defineProps<NavigationElementT>()
+const pt = computed(() =>
+	combinePassthroughs(NavigationElementPt, props.pt ?? {})
+)
 
 // Update to support url vs page
 const url = computed(() => {
@@ -18,12 +24,13 @@ const url = computed(() => {
 })
 
 const elementTypeValue = computed(() => {
-	console.log(props.title, props.isChild)
 	return NavigationElementType[props.elementType ?? 'header']
 })
 const showSubNavigation = ref(false)
 const builtClassname = computed(
 	() =>
+		// TODO: Add description below or remove if classes fixed
+		// @ts-expect-error <add description>
 		`relative m-0 ${props.class ?? ''} ${props.isChild ? 'sub-' : ''}navigation-element`
 )
 </script>
@@ -31,11 +38,11 @@ const builtClassname = computed(
 <template>
 	<component :is="isChild ? 'li' : 'div'" :class="builtClassname">
 		<component
+			:is="url || isChild ? RouterLink : 'button'"
 			v-if="
 				elementTypeValue === NavigationElementType.header ||
 				(isChild && (url || subNavigation))
 			"
-			:is="url || isChild ? RouterLink : 'button'"
 			:to="url"
 			class="flex items-center hover:underline"
 			:class="{
@@ -46,12 +53,14 @@ const builtClassname = computed(
 			@click.prevent="showSubNavigation = !showSubNavigation"
 		>
 			{{ title }}
-			<IconChevron
+
+			<div
 				v-if="!isChild && subNavigation && !(url || isChild)"
-				class="ps-2 text-xs"
-				:orientation="showSubNavigation ? 'up' : 'down'"
-				:bold="true"
-			/>
+				:class="pt?.icon"
+			>
+				<i v-show="!showSubNavigation" :class="`pi pi-chevron-down`"></i>
+				<i v-show="showSubNavigation" :class="`pi pi-chevron-up`"></i>
+			</div>
 		</component>
 		<h2
 			v-else-if="elementTypeValue == NavigationElementType.footer"

package/src/components/{types → PrimaryNavigation}/PrimaryNavigation.ts

@@ -1,5 +1,5 @@
-import { Image } from './Image'
-import { NavigationElement } from './NavigationElement'
+import { Image } from '../Image/Image'
+import { NavigationElement } from '../NavigationElement/NavigationElement'
 
 export interface PrimaryNavigation {
 	title?: string

package/src/components/{PrimaryNavigation.vue → PrimaryNavigation/PrimaryNavigation.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { PrimaryNavigation } from './types/PrimaryNavigation'
-import Image from './Image.vue'
-import NavigationElement from './NavigationElement.vue'
+import { PrimaryNavigation } from './PrimaryNavigation'
+import Image from '../Image/Image.vue'
+import NavigationElement from '../NavigationElement/NavigationElement.vue'
 import { ref, computed } from 'vue'
 
 const props = defineProps<PrimaryNavigation>()
@@ -22,13 +22,14 @@ const computedStyle = computed(() => {
 		<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
+					v-if="logo"
 					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">
+					<button type="button" class="block" @click="isOpen = !isOpen">
 						<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
 							<!-- Hamburger SVG path-->
 							<path
@@ -53,10 +54,12 @@ const computedStyle = computed(() => {
 			>
 				<NavigationElement
 					v-for="(item, index) in navigation"
+					:key="`${item.title}-${index}`"
 					role="menuitem"
 					tabindex="-1"
 					:="{
 						...item,
+						// @ts-ignore
 						class: `primary-nav-item-${index} ${item.class}`,
 						isChild: false,
 						elementType: 'header',

package/src/components/{types → SplitModule}/SplitModule.ts

@@ -1,7 +1,7 @@
-import { Image } from './Image'
-import { ContentModule } from './ContentModule'
-import { Video } from './Video'
-import { ClassOverrides } from '.'
+import { Image } from '../Image/Image'
+import { ContentModule } from '../ContentModule/ContentModule'
+import { Video } from '../Video/Video'
+import { ComponentPassthrough } from '../../types'
 
 export interface SplitModule {
 	__typename?: 'SplitModule'
@@ -12,5 +12,6 @@ export interface SplitModule {
 	end?: Image | Video | ContentModule
 	backgroundImage?: Image
 	backgroundColor?: string
-	pt?: ClassOverrides
+	pt?: ComponentPassthrough
+	isChild?: boolean
 }

package/src/components/SplitModule/SplitModule.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SplitModule } from './SplitModule'
+import {
+	combinePassthroughs,
+	SplitModulePt,
+} from '../../config/defaultPassthrough'
+import { twMerge } from 'tailwind-merge'
+
+const props = defineProps<SplitModule>()
+const pt = computed(() => combinePassthroughs(SplitModulePt, props.pt ?? {}))
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		'background-image': `url(${props.backgroundImage ?? ''})`,
+		'background-size': 'cover',
+	}
+})
+const computedClass = computed(() =>
+	// TODO: Add description below or remove if classes fixed
+	// @ts-expect-error <add description>
+	twMerge(`split-module ${props.isChild ? '' : 'py-16'}`, props.class)
+)
+</script>
+
+<template>
+	<component
+		:is="isChild ? 'div' : 'section'"
+		:style="computedStyle"
+		:class="computedClass"
+	>
+		<h2 :class="`headline ${pt?.headline ?? ''}`">{{ headline }}</h2>
+		<div
+			:class="`split-module-content ${twMerge('flex justify-evenly gap-4 mx-auto items-center', pt?.content ?? '')}`"
+		>
+			<component
+				:is="start.__typename"
+				v-if="start"
+				v-bind="start"
+				:class="`split-module-start ${pt?.start ?? ''}`"
+			/>
+			<component
+				:is="center.__typename"
+				v-if="center"
+				v-bind="center"
+				:class="`split-module-center ${pt?.center ?? ''}`"
+			/>
+			<component
+				:is="end.__typename"
+				v-if="end"
+				v-bind="end"
+				:class="`split-module-end ${pt?.end ?? ''}`"
+			/>
+		</div>
+	</component>
+</template>

package/src/components/TestimonialModule/TestimonialModule.ts

@@ -0,0 +1,22 @@
+import { ComponentPassthrough } from '../../types'
+import { Image } from '../Image/Image'
+import { Video } from '../Video/Video'
+
+export interface TestimonialModulePassthrough extends ComponentPassthrough {
+	quote?: string
+	author?: string
+	details?: string
+	media?: string
+	text?: string
+}
+export interface TestimonialModule {
+	__typename?: 'TestimonialModule'
+	headline?: string
+	quote: string
+	author?: string
+	details?: string
+	media?: Video | Image
+	textColor?: string
+	backgroundColor?: string
+	pt?: TestimonialModulePassthrough
+}

package/src/components/TestimonialModule/TestimonialModule.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { TestimonialModule } from './TestimonialModule'
+import { computed } from 'vue'
+import {
+	combinePassthroughs,
+	TestimonialModulePt,
+} from '../../config/defaultPassthrough'
+
+const props = defineProps<TestimonialModule>()
+const pt = computed(() =>
+	combinePassthroughs(TestimonialModulePt, props.pt ?? {})
+)
+
+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 lg:flex-row gap-8 ${pt?.container ?? ''}`"
+		>
+			<div v-if="media" :class="`testimonial-media ${pt?.media ?? ''}`">
+				<component :is="media.__typename" v-bind="media" />
+			</div>
+			<div :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 ?? ''}`">
+					&quot;{{ quote }}&quot;
+				</p>
+
+				<p v-if="author" :class="`testimonial-author ${pt?.author ?? ''}`">
+					{{ author }}
+				</p>
+
+				<p v-if="details" :class="`testimonial-details ${pt?.details ?? ''}`">
+					{{ details }}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>

package/src/components/TileCollectionModule/TileCollectionModule.ts

@@ -0,0 +1,18 @@
+import { ComponentPassthrough } from '../../types'
+import { TileContent } from '../TileContent/TileContent'
+
+export interface TileCollection {
+	__typename?: 'TileCollectionModule'
+	headline: string
+	description?: string
+	modules: TileContent[]
+	textColor?: string
+	backgroundColor?: string
+	variant:
+		| 'IconTile'
+		| 'ImageTile'
+		| 'VideoTile'
+		| 'ImageStackedAnimatedTile'
+		| 'TextTile'
+	pt?: ComponentPassthrough
+}

package/src/components/TileCollectionModule/TileCollectionModule.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { TileCollection } from './TileCollectionModule'
+import { computed } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import {
+	combinePassthroughs,
+	TileCollectionModulePt,
+} from '../../config/defaultPassthrough'
+
+const props = defineProps<TileCollection>()
+const pt = computed(() =>
+	combinePassthroughs(TileCollectionModulePt, props.pt ?? {})
+)
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<section
+		:class="`tile-collection overflow-hidden ${pt?.root ?? ''} py-16 ${variant}`"
+		:style="computedStyle"
+	>
+		<div :class="`container mx-auto ${pt?.container ?? ''}`">
+			<h2
+				v-if="headline"
+				:class="`tile-collection-headline ${pt?.headline ?? ''}`"
+			>
+				{{ headline }}
+			</h2>
+			<h3
+				v-if="description"
+				:class="`tile-collection-description ${pt?.description ?? ''}`"
+			>
+				{{ description }}
+			</h3>
+			<ul
+				v-if="modules"
+				:class="`tile-collection-content ${twMerge(`flex flex-col ${variant !== 'ImageStackedAnimatedTile' ? 'md:flex-row flex-wrap gap-12 md:gap-6' : 'gap-12'} justify-center`, pt?.content ?? '')}`"
+			>
+				<!-- TODO: Fix suppressed ts error "${(item as any).class}" -->
+				<component
+					:is="`TileContent${variant}`"
+					v-for="(item, index) in modules"
+					:key="`${item?.headline}-${index}`"
+					:class="`tile-collection-content-item-${index} ${pt?.item ?? ''} ${(item as any).class}`"
+					v-bind="item"
+					:index="index"
+				/>
+			</ul>
+			<!-- TODO: need to add the CTA -->
+		</div>
+	</section>
+</template>

package/src/components/TileContent/TileContent.ts

@@ -0,0 +1,60 @@
+import { ComponentPassthrough } from '../../types'
+import { CardLabel } from '../../types'
+import { CTA } from '../CTA/CTA'
+import { Image } from '../Image/Image'
+import { Video } from '../Video/Video'
+
+export interface TileContentPassthrough extends ComponentPassthrough {
+	media?: string
+	mediaContainer?: string
+	ctas?: string
+	label?: string
+	numericLabel?: string
+	cta?: string
+	body?: string
+	text?: string
+	list?: string
+	listItem?: string
+	footer?: string
+	footerContent?: string
+}
+
+export interface TileContent {
+	__typename?: 'TileContent'
+	index?: number
+	Image?: Image
+	Video?: Video
+	headline?: string
+	subheadline?: string
+	description?: string
+	ctas?: CTA[]
+	textColor?: string
+	backgroundColor?: string
+	cardLabel?: CardLabel
+	alignment?: 'left' | 'center' | 'right'
+	isImageStacked?: boolean
+	pt?: TileContentPassthrough
+	listItems?: string[]
+	footer?: string
+}
+
+export interface TileContentTextTile extends Omit<TileContent, '__typename'> {
+	__typename?: 'TileContentTextTile'
+}
+
+export interface TileContentIconTile extends Omit<TileContent, '__typename'> {
+	__typename?: 'TileContentIconTile'
+}
+
+export interface TileContentImageTile extends Omit<TileContent, '__typename'> {
+	__typename?: 'TileContentImageTile'
+}
+
+export interface TileContentVideoTile extends Omit<TileContent, '__typename'> {
+	__typename?: 'TileContentVideoTile'
+}
+
+export interface TileContentImageStackedAnimatedTile
+	extends Omit<TileContent, '__typename'> {
+	__typename?: 'TileContentImageStackedAnimatedTile'
+}

package/src/components/{TileContent.vue → TileContent/TileContent.vue}

@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import { TileContent } from './types/TileContent'
+import { TileContent } from './TileContent'
 import { computed } from 'vue'
 import Card from 'primevue/card'
-import ImageComponent from './Image.vue'
-import VideoComponent from './Video.vue'
+import ImageComponent from '../Image/Image.vue'
+import VideoComponent from '../Video/Video.vue'
+import { twMerge } from 'tailwind-merge'
+import {
+	combinePassthroughs,
+	TileContentPt,
+} from '../../config/defaultPassthrough'
 
 const props = defineProps<TileContent>()
+const pt = computed(() => combinePassthroughs(TileContentPt, props.pt ?? {}))
 
 const computedStyle = computed(() => {
 	return {
@@ -24,10 +30,7 @@ const computedCardLabelStyle = computed(() => {
 </script>
 
 <template>
-	<div
-		class="tile-content relative text-center list-none p-5 flex-auto rounded overflow-visible mx-auto shadow-none"
-		:style="computedStyle"
-	>
+	<div :class="`tile-content ${pt?.root ?? ''}`" :style="computedStyle">
 		<div
 			v-if="cardLabel && !isImageStacked"
 			:style="computedCardLabelStyle"
@@ -41,7 +44,7 @@ const computedCardLabelStyle = computed(() => {
 			:pt:footer:class="`tile-content-ctas ${pt?.ctas ?? ''}`"
 			:pt:body:class="pt?.body ?? ''"
 		>
-			<template #content v-if="description || listItems">
+			<template v-if="description || listItems" #content>
 				<div :class="`flex flex-col tile-content-inner ${pt?.content ?? ''}`">
 					<div v-if="isImageStacked" class="tile-content-text">
 						<h3
@@ -78,24 +81,32 @@ const computedCardLabelStyle = computed(() => {
 							{{ cardLabel.content }}
 						</div>
 						<div class="tile-content-media-background"></div>
-						<ImageComponent v-if="Image" v-bind="Image" />
+						<ImageComponent
+							v-if="Image"
+							v-bind="Image"
+							:class="
+								// @ts-ignore
+								twMerge('w-full', Image.class)
+							"
+						/>
 						<VideoComponent v-if="Video" v-bind="Video" />
 					</div>
 					<p
-						:class="`tile-content-description ${pt?.description ?? ''}`"
 						v-if="!isImageStacked"
+						:class="`tile-content-description ${pt?.description ?? ''}`"
 					>
 						{{ description }}
 					</p>
 				</div>
 			</template>
 
-			<template v-if="CTAs" #footer>
-				<p v-if="price" :class="`${pt?.price ?? ''}`">
-					{{ price }}
+			<template v-if="ctas || footer" #footer>
+				<p v-if="footer" :class="`${pt?.footer ?? ''}`">
+					{{ footer }}
 				</p>
 				<CTA
-					v-for="(item, index) in CTAs"
+					v-for="(item, index) in ctas"
+					:key="`${item?.title}-${index}`"
 					:class="`cta-${index} ${pt?.cta}`"
 					:="item"
 				/>

package/src/components/TileContent/TileContentIconTile.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { TileContentIconTile } from './TileContent'
+import { computed } from 'vue'
+import Card from 'primevue/card'
+import ImageComponent from '../Image/Image.vue'
+import VideoComponent from '../Video/Video.vue'
+import { twMerge } from 'tailwind-merge'
+import {
+	combinePassthroughs,
+	TileContentIconTilePt,
+} from '../../config/defaultPassthrough'
+
+const props = defineProps<TileContentIconTile>()
+const pt = computed(() =>
+	combinePassthroughs(TileContentIconTilePt, props.pt ?? {})
+)
+</script>
+
+<template>
+	<div :class="`tile-content ${pt?.root ?? ''}`">
+		<div
+			v-if="cardLabel"
+			:class="`tile-label absolute ${cardLabel?.type === 'Numeric' ? pt?.numericLabel : pt?.label}`"
+		>
+			{{ cardLabel.content }}
+		</div>
+
+		<Card
+			:class="`${pt?.container ?? ''} tile-content-container shadow-none`"
+			:pt:footer:class="`tile-content-footer ${pt?.footer ?? ''}`"
+			:pt:body:class="pt?.body ?? ''"
+		>
+			<template v-if="description || listItems" #content>
+				<div :class="`flex flex-col tile-content-inner ${pt?.content ?? ''}`">
+					<div v-if="Image" :class="`tile-content-media ${pt?.media ?? ''}`">
+						<div class="tile-content-media-background"></div>
+						<ImageComponent
+							v-if="Image"
+							v-bind="Image"
+							:class="
+								// @ts-ignore
+								twMerge('w-full', Image.class)
+							"
+						/>
+						<VideoComponent v-if="Video" v-bind="Video" class="w-full" />
+					</div>
+					<h3
+						v-if="headline"
+						:class="`tile-content-headline ${pt?.headline ?? ''}`"
+					>
+						{{ headline }}
+					</h3>
+					<h6
+						v-if="subheadline && !isImageStacked"
+						:class="`tile-content-subheadline ${pt?.subheadline ?? ''}`"
+					>
+						{{ subheadline }}
+					</h6>
+
+					<div
+						v-if="description"
+						:class="`tile-content-description ${pt?.description ?? ''}`"
+						v-html="description"
+					></div>
+				</div>
+			</template>
+
+			<template v-if="ctas || footer" #footer>
+				<p v-if="footer" :class="`${pt?.footerContent ?? ''}`">
+					{{ footer }}
+				</p>
+				<div :class="pt?.ctas ?? ''">
+					<CTA
+						v-for="(item, index) in ctas"
+						:key="`cta-${item.title}-${index}`"
+						:class="`cta-${index} ${pt?.cta}`"
+						:="item"
+					/>
+				</div>
+			</template>
+		</Card>
+	</div>
+</template>