@cooperco/cooper-component-library 0.0.10 → 0.1.0

package/src/components/Accordion/AccordionTileItem.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { type AccordionItem } from './AccordionItem'
+import { computed } from 'vue'
+import ImageComponent from '../Image/Image.vue'
+import {
+	combinePassthroughs,
+	AccordionTileItemPt,
+} from '../../config/defaultPassthrough'
+
+const props = defineProps<AccordionItem>()
+const pt = computed(() =>
+	combinePassthroughs(AccordionTileItemPt, props.pt ?? {})
+)
+
+const isExpanded = computed(() => {
+	return props.openAccordionIndex === props.itemNumber
+})
+
+const emit = defineEmits(['toggleAccordion'])
+
+const toggleAccordion = (index: number) => {
+	emit('toggleAccordion', index)
+}
+</script>
+
+<template>
+	<div
+		:class="{
+			[`accordion-item-${itemNumber}`]: true,
+			[pt?.root ?? '']: true,
+			active: isExpanded,
+			first: isFirst,
+			last: isLast,
+		}"
+		class="accordion-item group"
+	>
+		<div
+			:id="`accordion-collapse-headline-${itemNumber}`"
+			:class="`flex accordion-item-headline ${pt?.headline ?? ''}`"
+		>
+			<ImageComponent
+				v-if="Image"
+				v-bind="Image"
+				:class="`${pt?.image ?? ''}`"
+			/>
+			<button
+				type="button"
+				:class="`flex items-center w-full ${pt?.button ?? ''}`"
+				data-accordion-target="#accordion-collapse-body-1"
+				aria-expanded="true"
+				:aria-controls="`accordion-collapse-body-${itemNumber}`"
+				@click.prevent="toggleAccordion(itemNumber as number)"
+			>
+				<span>{{ title }}</span>
+				<div :class="pt?.icon">
+					<i
+						v-show="openAccordionIndex !== itemNumber"
+						:class="`pi pi-plus-circle`"
+					></i>
+					<i
+						v-show="openAccordionIndex === itemNumber"
+						:class="`pi pi-times-circle`"
+					></i>
+				</div>
+			</button>
+		</div>
+		<div
+			:id="`accordion-collapse-body-${itemNumber}`"
+			:class="`accordion-item-body ${!isExpanded ? 'hidden' : 'active'} ${pt?.content ?? ''}`"
+			:aria-labelledby="`accordion-collapse-heading-${itemNumber}`"
+		>
+			{{ content }}
+		</div>
+	</div>
+</template>

package/src/components/CTA/CTA.ts

@@ -0,0 +1,22 @@
+import { URLRef } from '../../types'
+import { Image } from '../Image/Image'
+
+export interface CTAPassthrough {
+	logo?: string
+	title?: string
+}
+
+export interface CTA {
+	__typename?: 'CTA'
+	title: string
+	url: URLRef
+	color: string
+	textColor: string
+	buttonType: 'fill' | 'outline' | 'link' | 'logo'
+	Logo?: Image | string // could be a css class for an icon
+	pt?: CTAPassthrough
+	ariaLabel: string
+	anchor?: string
+	target?: string
+	class?: string
+}

package/src/components/CTA/CTA.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { CTA } from './CTA'
+import { CTAOptions } from '../../types'
+import Button from 'primevue/button'
+import { computed } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import { combinePassthroughs, CTAPt } from '../../config/defaultPassthrough'
+
+const props = defineProps<CTA>()
+
+const pt = computed(() =>
+	combinePassthroughs(CTAPt[props.buttonType], props.pt ?? {})
+)
+
+const buttonTypeValue = computed(() => {
+	return CTAOptions[props?.buttonType]
+})
+
+const isLink = computed(() => {
+	return props.buttonType === 'link' || props.buttonType === 'logo'
+})
+
+const fullClassname = computed(
+	() =>
+		`cta ${props.class ?? ''} ${props.buttonType === 'link' || props.buttonType === 'logo' ? 'hover:underline' : ''} flex items-center gap-4`
+)
+
+const computedStyle = computed(() => {
+	return {
+		color: props.textColor,
+		'background-color':
+			buttonTypeValue.value == CTAOptions.fill ? props.color : 'transparent',
+		'border-color':
+			buttonTypeValue.value != CTAOptions.link &&
+			buttonTypeValue.value != CTAOptions.logo
+				? props.color
+				: 'transparent',
+	}
+})
+
+// Update to support url vs page
+const url = computed(() => {
+	return props?.url?.link
+})
+</script>
+
+<template>
+	<Button
+		:class="fullClassname"
+		:style="computedStyle"
+		:aria-label="ariaLabel"
+		:link="isLink"
+		:href="url"
+	>
+		<div v-if="Logo" :class="pt?.logo ?? ''">
+			<template v-if="typeof Logo !== 'string' && Logo?.__typename">
+				<Image v-bind="Logo" />
+			</template>
+			<template v-else-if="typeof Logo === 'string'">
+				<div :class="twMerge(Logo, pt?.logo)"></div>
+			</template>
+		</div>
+		<p :class="twMerge('pointer-events-none', pt?.title ?? '')">{{ title }}</p>
+	</Button>
+</template>

package/src/components/CarouselModule/CarouselModule.ts

@@ -0,0 +1,20 @@
+import { ComponentPassthrough } from '../../types'
+import { ContainerModule } from '../ContainerModule/ContainerModule'
+import { TestimonialModule } from '../TestimonialModule/TestimonialModule'
+import { TileContent } from '../TileContent/TileContent'
+
+export interface CarouselPassthrough extends ComponentPassthrough {
+	item?: string
+}
+
+// Carousel
+export interface Carousel {
+	__typename?: 'CarouselModule'
+	headline: string
+	modules: (TestimonialModule | TileContent | ContainerModule)[]
+	textColor?: string
+	backgroundColor?: string
+	backgroundImage?: string
+	pt?: CarouselPassthrough
+	variant?: 'Hero' | 'Default'
+}

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

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { Carousel as CarouselType } from './types/CarouselModule'
+import { Carousel as CarouselType } from './CarouselModule'
 import Carousel from 'primevue/carousel'
 import { computed } from 'vue'
-// import { getComponent } from '../utils/getComponent'
+import {
+	combinePassthroughs,
+	CarouselModulePt,
+} from '../../config/defaultPassthrough'
+import { twMerge } from 'tailwind-merge'
 
 // Still need to figure out how to configure where buttons go
 // as defaults do not match cordblood site.
@@ -11,6 +15,8 @@ const props = withDefaults(defineProps<CarouselType>(), {
 	variant: 'Default',
 })
 
+const pt = computed(() => combinePassthroughs(CarouselModulePt, props.pt ?? {}))
+
 const computedStyle = computed(() => {
 	return {
 		'background-color': props.backgroundColor ?? 'transparent',
@@ -19,25 +25,37 @@ const computedStyle = computed(() => {
 		color: props.textColor ?? 'inherit',
 	}
 })
+const computedClass = computed(
+	() =>
+		// TODO: Add description below or remove if classes fixed
+		// @ts-expect-error <add description>
+		`${twMerge('py-16 px-8', props.class)} ${props.variant.toLowerCase()} carousel`
+)
 </script>
 
 <template>
 	<Carousel
 		:value="modules"
-		:numVisible="1"
-		:numScroll="1"
+		:num-visible="1"
+		:num-scroll="1"
 		:style="computedStyle"
-		:class="`carousel ${variant.toLowerCase()}`"
+		:class="computedClass"
 		:pt:item:class="`carousel-item w-full ${pt?.item ?? ''}`"
 	>
 		<template v-if="headline" #header>
 			<h2 :class="`carousel-headline ${pt?.headline ?? ''}`">{{ headline }}</h2>
 		</template>
-		<template v-for="(item, index) in modules" #item="slotProps">
+		<!-- eslint-disable -->
+		<!-- remove ^^ when valid-v-slot error is fixed -->
+		<template
+			v-for="(item, index) in modules"
+			:key="`${item?.__typename}-${index}`"
+			#item="slotProps"
+		>
 			<component
 				v-bind="slotProps.data"
 				:is="slotProps.data.__typename"
-				:isChild="true"
+				:is-child="true"
 			/>
 		</template>
 		<template #footer></template>

package/src/components/ContainerCollectionModule/ContainerCollectionModule.ts

@@ -0,0 +1,12 @@
+import { ComponentPassthrough } from '../../types'
+import { ContainerModule } from '../ContainerModule/ContainerModule'
+import { SplitModule } from '../SplitModule/SplitModule'
+
+export interface ContainerCollectionModule {
+	__typename?: 'ContainerCollection'
+	entryTitle?: string
+	headline: string
+	modules: Array<ContainerModule | SplitModule>
+	backgroundColor?: string
+	pt?: ComponentPassthrough
+}

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

@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { ContainerCollectionModule } from './types/ContainerCollectionModule'
+import { ContainerCollectionModule } from './ContainerCollectionModule'
+import {
+	combinePassthroughs,
+	ContainerCollectionModulePt,
+} from '../../config/defaultPassthrough'
 
 const props = defineProps<ContainerCollectionModule>()
 
+const pt = computed(() =>
+	combinePassthroughs(ContainerCollectionModulePt, props.pt ?? {})
+)
+
 const computedStyle = computed(() => {
 	return {
 		'background-color': props.backgroundColor ?? 'transparent',
@@ -23,10 +31,11 @@ const computedStyle = computed(() => {
 			:class="`container-collection-content mx-auto container ${pt?.content}`"
 		>
 			<component
-				v-for="subModule in modules"
 				:is="subModule.__typename"
+				v-for="(subModule, index) in modules"
 				v-bind="subModule"
-				:isChild="true"
+				:key="`${subModule?.__typename}-${index}`"
+				:is-child="true"
 			/>
 		</div>
 	</section>

package/src/components/ContainerModule/ContainerModule.ts

@@ -0,0 +1,69 @@
+import { Image } from '../Image/Image'
+import { Video } from '../Video/Video'
+import { Accordion } from '../Accordion/Accordion'
+import { ContentModule } from '../ContentModule/ContentModule'
+import { TestimonialModule } from '../TestimonialModule/TestimonialModule'
+import { TileCollection } from '../TileCollectionModule/TileCollectionModule'
+import {
+	TileContent,
+	TileContentIconTile,
+	TileContentImageStackedAnimatedTile,
+	TileContentImageTile,
+	TileContentTextTile,
+	TileContentVideoTile,
+} from '../TileContent/TileContent'
+import { ComponentPassthrough } from '../../types'
+
+export interface ContainerModulePassthrough extends ComponentPassthrough {
+	inner?: string
+	fullWidthContent?: string
+}
+export interface ContainerModule {
+	__typename?: 'ContainerModule'
+	headline: string
+	subHeadline?: string
+	fullWidthContent?:
+		| Image
+		| Video
+		| ContentModule
+		| ContainerModule
+		| TileCollection
+		| TileContent
+		| TileContentImageStackedAnimatedTile
+		| TileContentIconTile
+		| TileContentTextTile
+		| TileContentImageTile
+		| TileContentVideoTile
+		| Accordion
+	start?:
+		| Image
+		| Video
+		| ContentModule
+		| TileContent
+		| TileContentImageStackedAnimatedTile
+		| TileContentIconTile
+		| TileContentTextTile
+		| TileContentImageTile
+		| TileContentVideoTile
+		| Accordion
+		| TestimonialModule
+	end?:
+		| Image
+		| Video
+		| ContentModule
+		| TileContent
+		| TileContentImageStackedAnimatedTile
+		| TileContentIconTile
+		| TileContentTextTile
+		| TileContentImageTile
+		| TileContentVideoTile
+		| Accordion
+		| TestimonialModule
+	textColor?: string
+	backgroundColor?: string
+	backgroundImage?: string
+	variant?: 'Centered' | 'Hero'
+	// types only used in code, based on placement from contentful
+	isChild?: boolean
+	pt?: ContainerModulePassthrough
+}

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

@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import { ContainerModule as ContainerModuleType } from './types/ContainerModule'
-import { VariantOptions, MediaOptions } from '../types'
+import { ContainerModule as ContainerModuleType } from './ContainerModule'
+import { VariantOptions } from '../../types'
 import { computed } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import {
+	combinePassthroughs,
+	ContainerModulePt,
+} from '../../config/defaultPassthrough'
 
 const props = withDefaults(defineProps<ContainerModuleType>(), {
 	isChild: false,
 	variant: 'Centered',
 })
 
+const pt = computed(() =>
+	combinePassthroughs(ContainerModulePt[props.variant], props.pt ?? {})
+)
+
 const isHero = computed(() => {
 	return VariantOptions[props.variant] === VariantOptions.Hero
 })
@@ -16,25 +25,18 @@ const isCentered = computed(() => {
 	return VariantOptions[props.variant] === VariantOptions.Centered
 })
 
-const mediaTypeLeftValue = computed(() => {
-	if (!props?.start?.mediaType) {
-		return null
-	}
-	return MediaOptions[props.start.mediaType]
-})
-
-const mediaTypeRightValue = computed(() => {
-	if (!props?.end?.mediaType) {
-		return null
-	}
-	return MediaOptions[props.end.mediaType]
+const computedClass = computed(() => {
+	return twMerge(
+		`container-module relative ${pt.value?.root} ${isHero.value || props.isChild ? '' : 'py-16 px-8'}`,
+		// TODO: Add description below or remove if classes fixed
+		// @ts-expect-error <add description>
+		props.class ?? ''
+	)
 })
 
 const computedStyle = computed(() => {
 	return {
 		'background-color': props.backgroundColor ?? 'transparent',
-		'background-image': `url(${props.backgroundImage ?? ''})`,
-		'background-size': 'cover',
 		color: props.textColor ?? 'inherit',
 	}
 })
@@ -44,10 +46,15 @@ const computedStyle = computed(() => {
 	<component
 		:is="isChild ? 'div' : 'section'"
 		:style="computedStyle"
-		class="container-module"
+		:class="computedClass"
 	>
+		<Image
+			v-if="backgroundImage"
+			:media="{ src: backgroundImage }"
+			class="md:absolute md:top-0 md:right-0 object-cover w-full h-full z-0"
+		/>
 		<div
-			:class="`container-module-inner h-full ${isHero ? 'container' : ''} mx-auto ${pt?.inner ?? ''}`"
+			:class="`container-module-inner relative z-10 ${isHero ? 'container' : ''} ${pt?.inner ?? ''}`"
 		>
 			<h2
 				v-if="headline"
@@ -64,48 +71,38 @@ const computedStyle = computed(() => {
 			</p>
 
 			<div
-				:class="`container-module-content flex flex-row gap-5 h-full ${pt?.content ?? ''}`"
+				:class="`container-module-content flex flex-col-reverse md:flex-row gap-5 h-full ${pt?.content ?? ''}`"
 			>
 				<template v-if="fullWidthContent">
 					<div
-						:class="`container-module ${pt?.fullWidthContent ?? ''} ${isCentered ? 'mx-auto' : ''}`"
+						:class="`container-module-full-width-content ${pt?.fullWidthContent ?? ''} ${isCentered ? 'mx-auto' : ''}`"
 					>
-						<template v-if="fullWidthContent?.mediaType">
-							<component :is="mediaTypeLeftValue" :="fullWidthContent" />
-						</template>
-						<template v-else-if="fullWidthContent.__typename">
+						<template v-if="fullWidthContent.__typename">
 							<component
 								v-bind="fullWidthContent"
 								:is="fullWidthContent.__typename"
-								:isChild="true"
+								:is-child="true"
 							/>
 						</template>
 					</div>
 				</template>
-
 				<template v-else>
 					<div
 						v-if="start"
 						:class="`container-module-start basis-1/2 ${pt?.start ?? ''}`"
 					>
-						<template v-if="start?.mediaType">
-							<component :is="mediaTypeLeftValue" :="start" />
-						</template>
-						<template v-else-if="start?.__typename">
+						<template v-if="start?.__typename">
 							<component
 								v-bind="start"
 								:is="start.__typename"
-								:isChild="true"
+								:is-child="true"
 							/>
 						</template>
 					</div>
 
 					<div :class="`container-module-end basis-1/2 ${pt?.end ?? ''}`">
-						<template v-if="end?.mediaType">
-							<component :is="mediaTypeRightValue" :="end" />
-						</template>
-						<template v-else-if="end?.__typename">
-							<component v-bind="end" :is="end.__typename" :isChild="true" />
+						<template v-if="end?.__typename">
+							<component v-bind="end" :is="end.__typename" :is-child="true" />
 						</template>
 					</div>
 				</template>

package/src/components/ContentModule/ContentModule.ts

@@ -0,0 +1,31 @@
+import { ComponentPassthrough } from '../../types'
+import { CTA } from '../CTA/CTA'
+import { Image } from '../Image/Image'
+
+export interface ContentModulePassthrough extends ComponentPassthrough {
+	container?: string
+	ctas?: string
+	logo?: string
+	subHeadline?: string
+}
+
+export enum ContentModuleAligmentEnum {
+	Left = 'left',
+	Center = 'center',
+	Right = 'right',
+}
+
+export interface ContentModule {
+	__typename?: 'ContentModule'
+	headline?: string
+	subHeadline?: string
+	description?: string
+	ctas?: CTA[]
+	textColor?: string
+	backgroundColor?: string
+	pt?: ContentModulePassthrough
+	logo?: Image
+	isHero?: boolean
+	alignment?: ContentModuleAligmentEnum
+	isChild?: boolean
+}

package/src/components/ContentModule/ContentModule.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ContentModule, ContentModuleAligmentEnum } from './ContentModule'
+import CTA from '../CTA/CTA.vue'
+import { computed } from 'vue'
+import {
+	combinePassthroughs,
+	ContentModulePt,
+} from '../../config/defaultPassthrough'
+import { twMerge } from 'tailwind-merge'
+
+const props = withDefaults(defineProps<ContentModule>(), {
+	isHero: false,
+	alignment: ContentModuleAligmentEnum.Left,
+})
+const pt = computed(() => combinePassthroughs(ContentModulePt, props.pt ?? {}))
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+const computedAlignment = computed(() => `text-${props.alignment}`)
+const logoClass = computed(
+	// TODO: Add description or remove when class error is fixed
+	// @ts-expect-error <add description>
+	() => `${pt.value?.logo ?? ''} ${props?.logo?.class}`
+)
+</script>
+
+<template>
+	<div :class="`content-module ${pt?.root ?? ''}`" :style="computedStyle">
+		<div :class="`content-module-container mx-auto ${pt?.container ?? ''}`">
+			<Image v-if="logo" v-bind="logo" :class="logoClass" />
+			<h2
+				v-if="headline"
+				:class="`${headline && !subHeadline ? 'mb-4' : ''} ${twMerge(pt?.headline ?? '', computedAlignment)}`"
+			>
+				{{ headline }}
+			</h2>
+			<h2
+				v-if="subHeadline"
+				:class="`content-module-subheadline ${twMerge(pt?.subheadline ?? '', computedAlignment)}`"
+			>
+				{{ subHeadline }}
+			</h2>
+			<p
+				v-if="description"
+				:class="`content-module-description ${twMerge(pt?.description ?? '', computedAlignment)}`"
+			>
+				{{ description }}
+			</p>
+			<div
+				v-if="ctas"
+				:class="`content-module-ctas ${twMerge(pt?.ctas ?? '', computedAlignment)}`"
+			>
+				<CTA
+					v-for="(item, index) in ctas"
+					v-bind="item"
+					:key="`cta-${item.title}-${index}`"
+				/>
+			</div>
+		</div>
+	</div>
+</template>

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

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

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { type FooterNavigation } from './types/FooterNavigation'
-import NavigationElement from './NavigationElement.vue'
+import { type FooterNavigation } from './FooterNavigation'
+import NavigationElement from '../NavigationElement/NavigationElement.vue'
 import { computed } from 'vue'
 
 const props = defineProps<FooterNavigation>()
@@ -30,6 +30,7 @@ const computedStyle = computed(() => {
 				>
 					<NavigationElement
 						v-for="(item, index) in navigation"
+						:key="`footer-nav-item-${item.title}-${index}`"
 						:class="`footer-nav-item-${index}`"
 						role="menuitem"
 						tabindex="-1"
@@ -42,6 +43,7 @@ const computedStyle = computed(() => {
 				>
 					<a
 						v-for="(item, index) in socialMediaRef"
+						:key="`footer-social-item-${item.icon.altTag}-${index}`"
 						:class="`footer-social-item-${index}`"
 						:href="item?.url?.link"
 					>

package/src/components/Image/Image.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Image } from './Image'
+
+const props = defineProps<Image>()
+</script>
+
+<template>
+	<!-- TODO: Add description below or remove if classes fixed -->
+	<!-- @vue-expect-error <add description> -->
+	<img
+		:class="props.class"
+		:src="props.media.src"
+		:alt="props.altTag"
+		:height="props.media.height"
+		:width="props.media.width"
+	/>
+</template>

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

@@ -1,5 +1,5 @@
-import { ClassOverrides } from '.'
-import { Image } from './Image'
+import { ComponentPassthrough } from '../../types'
+import { Image } from '../Image/Image'
 
 // Logos
 export interface LogoCollectionModule {
@@ -8,5 +8,5 @@ export interface LogoCollectionModule {
 	modules: Image[]
 	textColor?: string
 	backgroundColor?: string
-	pt?: ClassOverrides
+	pt?: ComponentPassthrough
 }