@cooperco/cooper-component-library 0.1.0 → 0.1.2

package/src/components/Accordion/AccordionItem.ts

@@ -1,25 +0,0 @@
-import { ComponentPassthrough } from '../../types'
-import { Image } from '../Image/Image'
-
-export interface AccordionItemPassthrough extends ComponentPassthrough {
-	icon?: string
-	button?: string
-	image?: string
-}
-
-export interface AccordionItem {
-	__typename?: 'AccordionItem'
-	itemNumber?: number
-	title?: string
-	content?: string
-	pt?: AccordionItemPassthrough
-	isFirst?: boolean
-	isLast?: boolean
-	iconActive?: string
-	iconDefault?: string
-	totalItems?: number
-	isListType?: boolean
-	openAccordionIndex?: number | null
-	toggleAccordion?: (index: number) => void
-	Image?: Image
-}

package/src/components/Accordion/AccordionItem.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { type AccordionItem } from './AccordionItem'
-import { computed, ref } from 'vue'
-import {
-	combinePassthroughs,
-	AccordionItemPt,
-} from '../../config/defaultPassthrough'
-
-const props = withDefaults(defineProps<AccordionItem>(), { totalItems: 4 })
-const pt = computed(() => combinePassthroughs(AccordionItemPt, props.pt ?? {}))
-const showDescription = ref(false)
-
-const emit = defineEmits(['toggleAccordion'])
-
-const toggleAccordion = (index: number) => {
-	emit('toggleAccordion', index)
-}
-</script>
-
-<template isListType>
-	<div
-		v-if="isListType"
-		:class="{
-			[`accordion-item-${itemNumber}`]: true,
-			active: showDescription,
-			first: isFirst,
-			last: isLast,
-		}"
-		class="accordion-item group"
-	>
-		<h3
-			:id="`accordion-collapse-headline-${itemNumber}`"
-			:class="`flex accordion-item-headline ${pt?.headline ?? ''}`"
-		>
-			<button
-				type="button"
-				:class="`flex items-center w-full ${pt?.button ?? ''} justify-between`"
-				data-accordion-target="#accordion-collapse-body-1"
-				:aria-expanded="true"
-				:aria-controls="`accordion-collapse-body-${itemNumber}`"
-				@click.prevent="showDescription = !showDescription"
-			>
-				<span>{{ title }}</span>
-				<div :class="`${pt?.icon ?? ''}`">
-					<i v-show="!showDescription" :class="`pi ${iconDefault}`"></i>
-					<i v-show="showDescription" :class="`pi ${iconActive}`"></i>
-				</div>
-			</button>
-		</h3>
-		<div
-			:id="`accordion-collapse-body-${itemNumber}`"
-			:class="`accordion-item-body ${showDescription ? 'show' : 'hidden'} ${pt?.content ?? ''}`"
-			:aria-labelledby="`accordion-collapse-heading-${itemNumber}`"
-		>
-			{{ content }}
-		</div>
-	</div>
-
-	<div
-		v-else
-		:class="{
-			[`accordion-item-${itemNumber}`]: true,
-			active: openAccordionIndex === itemNumber,
-			first: isFirst,
-			last: isLast,
-			[`accordion-item-width-${Math.floor(100 / props.totalItems)}`]: true,
-		}"
-		class="accordion-item group"
-	>
-		<h3
-			:id="`accordion-collapse-headline-${itemNumber}`"
-			:class="`flex accordion-item-headline ${pt?.headline ?? ''}`"
-		>
-			<button
-				type="button"
-				:class="`flex items-center w-full ${pt?.button ?? ''} ${props.isListType ? 'justify-between' : 'justify-center'}`"
-				data-accordion-target="#accordion-collapse-body-1"
-				:aria-expanded="openAccordionIndex === itemNumber"
-				: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 ${iconDefault}`"
-					></i>
-					<i
-						v-show="openAccordionIndex === itemNumber"
-						:class="`pi ${iconActive}`"
-					></i>
-				</div>
-			</button>
-		</h3>
-		<div
-			:id="`accordion-collapse-body-${itemNumber}`"
-			:class="`accordion-item-body ${openAccordionIndex !== itemNumber ? 'hidden' : 'active'} ${pt?.content ?? ''}`"
-			:aria-labelledby="`accordion-collapse-heading-${itemNumber}`"
-		>
-			{{ content }}
-		</div>
-	</div>
-</template>

package/src/components/Accordion/AccordionListItem.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { type AccordionItem } from './AccordionItem'
-import { computed, ref } from 'vue'
-import ImageComponent from '../Image/Image.vue'
-import {
-	combinePassthroughs,
-	AccordionListItemPt,
-} from '../../config/defaultPassthrough'
-
-const props = defineProps<AccordionItem>()
-const pt = computed(() =>
-	combinePassthroughs(AccordionListItemPt, props.pt ?? {})
-)
-
-const showDescription = ref(false)
-</script>
-
-<template>
-	<div
-		:class="{
-			[`${pt?.root ?? ''}`]: true,
-			[`accordion-item-${itemNumber}`]: true,
-			active: showDescription,
-			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 justify-between w-full ${pt?.button ?? ''}`"
-				data-accordion-target="#accordion-collapse-body-1"
-				aria-expanded="true"
-				:aria-controls="`accordion-collapse-body-${itemNumber}`"
-				@click.prevent="showDescription = !showDescription"
-			>
-				<span>{{ title }}</span>
-				<div :class="pt?.icon">
-					<i v-show="!showDescription" :class="`pi pi-chevron-down`"></i>
-					<i v-show="showDescription" :class="`pi pi-chevron-up`"></i>
-				</div>
-			</button>
-		</div>
-		<div
-			:id="`accordion-collapse-body-${itemNumber}`"
-			:class="`accordion-item-body ${!showDescription ? 'hidden' : 'active'} ${pt?.content ?? ''}`"
-			:aria-labelledby="`accordion-collapse-heading-${itemNumber}`"
-		>
-			{{ content }}
-		</div>
-	</div>
-</template>

package/src/components/Accordion/AccordionTileItem.vue

@@ -1,75 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-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

@@ -1,65 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-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/CarouselModule.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { Carousel as CarouselType } from './CarouselModule'
-import Carousel from 'primevue/carousel'
-import { computed } from 'vue'
-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.
-
-const props = withDefaults(defineProps<CarouselType>(), {
-	variant: 'Default',
-})
-
-const pt = computed(() => combinePassthroughs(CarouselModulePt, props.pt ?? {}))
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		'background-image': `url(${props.backgroundImage ?? ''})`,
-		'background-size': 'cover',
-		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"
-		:num-visible="1"
-		:num-scroll="1"
-		:style="computedStyle"
-		: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>
-		<!-- 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"
-				:is-child="true"
-			/>
-		</template>
-		<template #footer></template>
-		<template #nexticon></template>
-	</Carousel>
-</template>

package/src/components/ContainerCollectionModule/ContainerCollectionModule.ts

@@ -1,12 +0,0 @@
-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/ContainerCollectionModule.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-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',
-	}
-})
-</script>
-
-<template>
-	<section class="container-collection" :style="computedStyle">
-		<h2
-			v-if="headline"
-			:class="`container-collection-headline ${pt?.headline}`"
-		>
-			{{ headline }}
-		</h2>
-		<div
-			:class="`container-collection-content mx-auto container ${pt?.content}`"
-		>
-			<component
-				:is="subModule.__typename"
-				v-for="(subModule, index) in modules"
-				v-bind="subModule"
-				:key="`${subModule?.__typename}-${index}`"
-				:is-child="true"
-			/>
-		</div>
-	</section>
-</template>

package/src/components/ContainerModule/ContainerModule.ts

@@ -1,69 +0,0 @@
-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/ContainerModule.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-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
-})
-
-const isCentered = computed(() => {
-	return VariantOptions[props.variant] === VariantOptions.Centered
-})
-
-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',
-		color: props.textColor ?? 'inherit',
-	}
-})
-</script>
-
-<template>
-	<component
-		:is="isChild ? 'div' : 'section'"
-		:style="computedStyle"
-		: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 relative z-10 ${isHero ? 'container' : ''} ${pt?.inner ?? ''}`"
-		>
-			<h2
-				v-if="headline"
-				:class="`container-module-headline ${isCentered ? 'text-center' : ''} ${pt?.headline ?? ''}`"
-			>
-				{{ headline }}
-			</h2>
-
-			<p
-				v-if="subHeadline"
-				:class="`container-module-subheadline ${isCentered ? 'text-center' : ''} ${pt?.subheadline ?? ''}`"
-			>
-				{{ subHeadline }}
-			</p>
-
-			<div
-				: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-full-width-content ${pt?.fullWidthContent ?? ''} ${isCentered ? 'mx-auto' : ''}`"
-					>
-						<template v-if="fullWidthContent.__typename">
-							<component
-								v-bind="fullWidthContent"
-								:is="fullWidthContent.__typename"
-								: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?.__typename">
-							<component
-								v-bind="start"
-								:is="start.__typename"
-								:is-child="true"
-							/>
-						</template>
-					</div>
-
-					<div :class="`container-module-end basis-1/2 ${pt?.end ?? ''}`">
-						<template v-if="end?.__typename">
-							<component v-bind="end" :is="end.__typename" :is-child="true" />
-						</template>
-					</div>
-				</template>
-			</div>
-		</div>
-		<slot />
-	</component>
-</template>