@cooperco/cooper-component-library 0.0.10 → 0.1.1

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>

package/src/components/TileContent/TileContentImageStackedAnimatedTile.vue

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

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

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

package/src/components/TileContent/TileContentVideoTile.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { TileContentVideoTile } from './TileContent'
+import { computed } from 'vue'
+import Card from 'primevue/card'
+import VideoComponent from '../Video/Video.vue'
+import {
+	combinePassthroughs,
+	TileContentVideoTilePt,
+} from '../../config/defaultPassthrough'
+
+const props = defineProps<TileContentVideoTile>()
+const pt = computed(() =>
+	combinePassthroughs(TileContentVideoTilePt, props.pt ?? {})
+)
+
+const computedCardLabelStyle = computed(() => {
+	return {
+		'background-color': props?.cardLabel?.backgroundColor ?? 'transparent',
+		color: props?.cardLabel?.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<div
+		:class="`tile-content relative text-center list-none flex-auto rounded overflow-visible mx-auto shadow-none ${pt?.root ?? ''}`"
+	>
+		<div
+			v-if="cardLabel"
+			:style="computedCardLabelStyle"
+			:class="`tile-label absolute ${pt?.label}`"
+		>
+			{{ cardLabel.content }}
+		</div>
+		<Card
+			:class="`${pt?.container ?? ''} tile-content-container shadow-none`"
+			: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 ?? ''}`">
+					<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="Video" :class="`tile-content-media ${pt?.media ?? ''}`">
+						<div class="tile-content-media-background"></div>
+						<VideoComponent v-if="Video" v-bind="Video" class="w-full" />
+					</div>
+
+					<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?.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/{types → Video}/Video.ts

@@ -1,4 +1,4 @@
-import { ImageMedia } from './Image'
+import { ImageMedia } from '../Image/Image'
 
 export interface Video {
 	__typename?: 'Video'

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Video } from './types/Video'
+import { Video } from './Video'
 
 withDefaults(defineProps<Video>(), { isEmbedded: false })
 </script>