@cooperco/cooper-component-library 0.1.1 → 0.1.2

package/src/components/TestimonialModule/TestimonialModule.vue

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

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

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

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

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { TileContent } 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,
-	TileContentPt,
-} from '../../config/defaultPassthrough'
-
-const props = defineProps<TileContent>()
-const pt = computed(() => combinePassthroughs(TileContentPt, props.pt ?? {}))
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props?.textColor ?? 'inherit',
-		textAlign: props.alignment ?? 'center',
-	}
-})
-
-const computedCardLabelStyle = computed(() => {
-	return {
-		'background-color': props?.cardLabel?.backgroundColor ?? 'transparent',
-		color: props?.cardLabel?.textColor ?? 'inherit',
-	}
-})
-</script>
-
-<template>
-	<div :class="`tile-content ${pt?.root ?? ''}`" :style="computedStyle">
-		<div
-			v-if="cardLabel && !isImageStacked"
-			:style="computedCardLabelStyle"
-			:class="`tile-label absolute ${pt?.label}`"
-		>
-			{{ cardLabel.content }}
-		</div>
-		<Card
-			:class="`${pt?.container ?? ''} tile-content-container shadow-none`"
-			:style="computedStyle"
-			:pt:footer:class="`tile-content-ctas ${pt?.ctas ?? ''}`"
-			:pt:body:class="pt?.body ?? ''"
-		>
-			<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
-							v-if="headline"
-							:class="`tile-content-headline ${pt?.headline ?? ''}`"
-						>
-							{{ headline }}
-						</h3>
-						<p :class="`tile-content-description ${pt?.description ?? ''}`">
-							{{ description }}
-						</p>
-					</div>
-					<h3
-						v-if="!isImageStacked && 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="Video || Image"
-						:class="`tile-content-media ${pt?.media ?? ''}`"
-					>
-						<div
-							v-if="isImageStacked && cardLabel"
-							:style="computedCardLabelStyle"
-							:class="`tile-label absolute ${pt?.label}`"
-						>
-							{{ cardLabel.content }}
-						</div>
-						<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" />
-					</div>
-					<p
-						v-if="!isImageStacked"
-						:class="`tile-content-description ${pt?.description ?? ''}`"
-					>
-						{{ description }}
-					</p>
-				</div>
-			</template>
-
-			<template v-if="ctas || footer" #footer>
-				<p v-if="footer" :class="`${pt?.footer ?? ''}`">
-					{{ footer }}
-				</p>
-				<CTA
-					v-for="(item, index) in ctas"
-					:key="`${item?.title}-${index}`"
-					:class="`cta-${index} ${pt?.cta}`"
-					:="item"
-				/>
-			</template>
-		</Card>
-	</div>
-</template>

package/src/components/TileContent/TileContentIconTile.vue

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

package/src/components/TileContent/TileContentImageStackedAnimatedTile.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import { TileContentImageStackedAnimatedTile } 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,
-	TileContentImageStackedAnimatedTilePt,
-} from '../../config/defaultPassthrough'
-
-const props = defineProps<TileContentImageStackedAnimatedTile>()
-const pt = computed(() =>
-	combinePassthroughs(TileContentImageStackedAnimatedTilePt, props.pt ?? {})
-)
-
-const isEven = computed(() => !((props.index ?? 0) % 2))
-const isFirst = computed(() => props.index === 0)
-</script>
-
-<template>
-	<div :class="`tile-content ${pt?.root ?? ''}`">
-		<Card
-			:class="`${pt?.container ?? ''} tile-content-container shadow-none`"
-			:pt:footer:class="`tile-content-ctas ${pt?.ctas ?? ''}`"
-			:pt:body:class="pt?.body ?? ''"
-		>
-			<template #content>
-				<div
-					:class="`flex gap-[5vmin] md:gap-12 relative ${isEven ? 'flex-row-reverse' : ''} tile-content-inner ${pt?.content ?? ''}`"
-				>
-					<div
-						:class="`tile-content-text flex-auto relative z-20 flex flex-col justify-center ${pt?.text ?? ''} ${isEven ? 'items-start *:text-left' : 'items-end *:text-right'}`"
-					>
-						<h3
-							v-if="headline"
-							:class="`tile-content-headline w-full ${pt?.headline ?? ''}`"
-						>
-							{{ headline }}
-						</h3>
-						<h6
-							v-if="subheadline"
-							:class="`tile-content-subheadline ${pt?.subheadline ?? ''} w-full`"
-						>
-							{{ subheadline }}
-						</h6>
-						<p
-							v-if="description"
-							:class="`tile-content-description ${pt?.description ?? ''} w-full`"
-						>
-							{{ description }}
-						</p>
-					</div>
-					<div
-						v-if="Video || Image"
-						:class="`tile-content-media relative ${pt?.media ?? ''}`"
-					>
-						<img
-							:class="{
-								absolute: true,
-								'w-full': true,
-								'z-0': true,
-								'top-[36%]': isFirst,
-								'left-[-16%]': isFirst,
-								// Odd items
-								'bg-left-top': (isEven && !isFirst) || !isEven,
-								'rotate-90': isEven && !isFirst,
-								'left-[-28%]': isEven && !isFirst,
-								'top-[-10%]': isEven && !isFirst,
-								// Even items
-								'top-[-16%]': !isEven,
-								'right-[-16%]': !isEven,
-								'rotate-180': !isEven,
-							}"
-							:src="
-								isEven
-									? 'https://images.ctfassets.net/qqblaiss500w/5Bp3ySaz0pqR5gLtdxOQoi/db01031466deed9b7b959c08c17e5681/circles1.f3eead2.svg'
-									: 'https://images.ctfassets.net/qqblaiss500w/5Bp3ySaz0pqR5gLtdxOQoi/db01031466deed9b7b959c08c17e5681/circles1.f3eead2.svg'
-							"
-						/>
-
-						<div
-							v-if="cardLabel"
-							:class="{
-								[pt?.label ?? '']: true,
-								'tile-label': true,
-								'top-8': true,
-								'right-0': isEven,
-								'left-0': !isEven,
-							}"
-						>
-							{{ cardLabel.content }}
-						</div>
-						<ImageComponent
-							v-if="Image"
-							v-bind="Image"
-							:class="
-								// @ts-ignore
-								twMerge('w-full relative rounded-full z-10', Image.class)
-							"
-						/>
-						<VideoComponent v-if="Video" v-bind="Video" />
-					</div>
-				</div>
-			</template>
-
-			<template v-if="ctas || footer" #footer>
-				<p v-if="footer" :class="`${pt?.footer ?? ''}`">
-					{{ footer }}
-				</p>
-				<CTA
-					v-for="(item, index) in ctas"
-					:key="`cta-${item.title}-${index}`"
-					:class="`cta-${index} ${pt?.cta}`"
-					:="item"
-				/>
-			</template>
-		</Card>
-	</div>
-</template>

package/src/components/TileContent/TileContentImageTile.vue

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import { TileContentImageTile } from './TileContent'
-import { computed } from 'vue'
-import Card from 'primevue/card'
-import ImageComponent from '../Image/Image.vue'
-import { twMerge } from 'tailwind-merge'
-import {
-	combinePassthroughs,
-	TileContentImageTilePt,
-} from '../../config/defaultPassthrough'
-
-const props = defineProps<TileContentImageTile>()
-const pt = computed(() =>
-	combinePassthroughs(TileContentImageTilePt, props.pt ?? {})
-)
-</script>
-
-<template>
-	<div :class="`tile-content ${pt?.root ?? ''}`">
-		<Card
-			:class="`${pt?.container ?? ''} tile-content-container shadow-none`"
-			:pt:footer:class="`tile-content-ctas ${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
-							v-if="cardLabel"
-							:class="`tile-label  ${cardLabel?.type === 'Numeric' ? pt?.numericLabel : pt?.label}`"
-						>
-							{{ cardLabel.content }}
-						</div>
-						<div class="tile-content-media-background"></div>
-						<ImageComponent
-							v-if="Image"
-							v-bind="Image"
-							:class="
-								// @ts-ignore
-								twMerge('w-full rounded-full', Image.class)
-							"
-						/>
-					</div>
-					<h3
-						v-if="headline"
-						:class="`tile-content-headline ${pt?.headline ?? ''}`"
-					>
-						{{ headline }}
-					</h3>
-					<h6
-						v-if="subheadline"
-						: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>

package/src/components/TileContent/TileContentTextTile.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { TileContentTextTile } from './TileContent'
-import { computed } from 'vue'
-import Card from 'primevue/card'
-import {
-	combinePassthroughs,
-	TileContentTextTilePt,
-} from '../../config/defaultPassthrough'
-
-const props = defineProps<TileContentTextTile>()
-const pt = computed(() =>
-	combinePassthroughs(TileContentTextTilePt, props.pt ?? {})
-)
-</script>
-
-<template>
-	<div :class="`tile-content ${pt?.root ?? ''}`">
-		<div v-if="cardLabel" :class="`tile-label absolute ${pt?.label}`">
-			{{ cardLabel.content }}
-		</div>
-		<Card
-			:class="`${pt?.container ?? ''} tile-content-container shadow-none`"
-			:pt:header:class="`tile-content-headline ${pt?.headline ?? ''}`"
-			:pt:footer:class="`tile-content-ctas ${pt?.footer ?? ''}`"
-			:pt:body:class="pt?.body ?? ''"
-		>
-			<template v-if="headline" #header>
-				{{ headline }}
-			</template>
-
-			<template v-if="description || subheadline" #content>
-				<div :class="`flex flex-col tile-content-inner ${pt?.content ?? ''}`">
-					<h6
-						v-if="subheadline"
-						: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>