@cooperco/cooper-component-library 0.0.10 → 0.1.0

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>

package/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/Accordion.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-// Can potentially merge this and Testimonial
-import { type Accordion } from './types/Accordion'
-import AccordionItem from './AccordionItem.vue'
-
-defineProps<Accordion>()
-</script>
-
-<template>
-	<component :is="isChild ? 'div' : 'section'" class="accordion-module">
-		<h3
-			v-if="headline"
-			:class="`accordion-module-headline ${pt?.headline ?? ''}`"
-		>
-			{{ headline }}
-		</h3>
-		<div
-			v-if="modules"
-			:class="`accordion-module-container container ${type === 'List' ? 'flex-col' : ''} flex ${pt?.container ?? ''}`"
-		>
-			<template v-for="(item, index) in modules">
-				<AccordionItem
-					:itemNumber="index"
-					:isFirst="index === 0"
-					:isLast="index === modules.length - 1"
-					v-bind="item"
-				/>
-			</template>
-		</div>
-	</component>
-</template>
-
-<style></style>

package/src/components/CTA.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { CTA } from './types/CTA'
-import { CTAOptions } from '../types'
-import Button from 'primevue/button'
-import { computed } from 'vue'
-
-const props = defineProps<CTA>()
-
-const buttonTypeValue = computed(() => {
-	return CTAOptions[props?.buttonType]
-})
-
-const fullClassname = computed(() => `cta ${props.class ?? ''}`)
-
-const computedStyle = computed(() => {
-	return {
-		color: props.textColor,
-		'background-color':
-			buttonTypeValue.value == CTAOptions.fill ? props.color : 'transparent',
-		'border-color':
-			buttonTypeValue.value != CTAOptions.link ? props.color : 'transparent',
-	}
-})
-
-// Update to support url vs page
-const url = computed(() => {
-	return props?.url?.link
-})
-</script>
-
-<template>
-	<Button
-		:class="fullClassname"
-		:label="title"
-		:style="computedStyle"
-		:aria-label="ariaLabel"
-		:link="buttonTypeValue == CTAOptions.link"
-	/>
-</template>

package/src/components/ContentAndImage.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-// Can potentially merge this and Testimonial
-import { type ContentAndImage } from './types/ContentAndImage'
-import { computed } from 'vue'
-import ContentModule from './ContentModule.vue'
-
-const props = defineProps<ContentAndImage>()
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-</script>
-
-<template>
-	<component
-		:is="isChild ? 'div' : 'section'"
-		:style="computedStyle"
-		class="content-and-image"
-	>
-		<div
-			class="content-and-image-inner container flex flex-col lg:flex-row content-between justify-between mx-auto"
-			:class="{ 'text-center': fullWidthContent }"
-		>
-			<div v-if="content" class="content">
-				<ContentModule :="content" />
-			</div>
-
-			<img v-if="image" class="image" :="image" />
-		</div>
-	</component>
-</template>

package/src/components/ContentMediaModule.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { ContentMediaModule } from './types/ContentMediaModule'
-import { VariantOptions } from '../types'
-import { computed } from 'vue'
-import ContentModule from './ContentModule.vue'
-
-const props = defineProps<ContentMediaModule>()
-
-const variantValue = computed(() => {
-	return VariantOptions[props.variant]
-})
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-</script>
-
-<template>
-	<component
-		:is="isChild ? 'div' : 'section'"
-		:style="computedStyle"
-		class="content-media-module"
-	>
-		<div
-			class="content-media-container flex flex-row gap-5 relative"
-			:class="{ container: variantValue != VariantOptions.Hero }"
-		>
-			<img
-				v-if="media"
-				class="media"
-				:class="{ 'w-screen': variantValue == VariantOptions.Hero }"
-				:src="media.src"
-				:alt="media.altTag"
-				:height="media.height"
-				:width="media.width"
-			/>
-
-			<ContentModule
-				class="content"
-				:class="{
-					absolute: variantValue == VariantOptions.Hero,
-				}"
-				:="content"
-			/>
-		</div>
-	</component>
-</template>

package/src/components/ContentModule.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { ContentModule } from './types/ContentModule'
-import CTA from './CTA.vue'
-import { computed } from 'vue'
-
-const props = defineProps<ContentModule>()
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-const computedClassname = computed(
-	() => `content-module p-5 ${props.class ?? ''}`
-)
-</script>
-
-<template>
-	<div :class="computedClassname" :style="computedStyle">
-		<div :class="`content-module-container mx-auto ${pt?.container ?? ''}`">
-			<img
-				v-if="logo"
-				:src="logo.src"
-				:alt="logo.alt"
-				:class="`${pt?.logo ?? ''}`"
-			/>
-			<h2
-				v-if="headline"
-				:class="`content-module-headline ${pt?.headline ?? ''}`"
-			>
-				{{ headline }}
-			</h2>
-			<h2
-				v-if="subHeadline"
-				:class="`content-module-subHeadline ${pt?.subHeadline ?? ''}`"
-			>
-				{{ subHeadline }}
-			</h2>
-			<p
-				v-if="description"
-				:class="`content-module-description ${pt?.description ?? ''}`"
-			>
-				{{ description }}
-			</p>
-			<div v-if="CTAs" :class="`content-module-ctas ${pt?.ctas ?? ''}`">
-				<CTA v-for="(item, index) in CTAs" v-bind="item" />
-			</div>
-		</div>
-	</div>
-</template>

package/src/components/IconChevron.vue

@@ -1,107 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-const props = defineProps({
-	bold: {
-		type: Boolean,
-		default: false,
-	},
-	orientation: {
-		type: String,
-		default: 'right',
-	},
-})
-
-const orientClass = computed(() => {
-	return 'orient-' + props.orientation
-})
-</script>
-
-<template>
-	<i>
-		<svg
-			v-if="!props.bold"
-			:class="orientClass"
-			xwidth="19px"
-			xheight="35px"
-			height="1em"
-			viewBox="0 0 19 35"
-			version="1.1"
-			xmlns="http://www.w3.org/2000/svg"
-			xmlns:xlink="http://www.w3.org/1999/xlink"
-		>
-			<title>icon-arrow-lg</title>
-			<defs>
-				<path
-					id="path-1"
-					d="M366,124.5 C366,124.907277 365.845623,125.313759 365.536079,125.624786 L349.70258,141.534057 C349.084282,142.155314 348.08123,142.155314 347.463724,141.534057 C346.845425,140.9128 346.845425,139.905743 347.463724,139.284486 L362.177794,124.5 L347.463724,109.715514 C346.845425,109.094257 346.845425,108.0872 347.463724,107.465943 C348.082022,106.844686 349.085074,106.844686 349.70258,107.465943 L365.536079,123.375214 C365.845623,123.686241 366,124.092723 366,124.5"
-				></path>
-			</defs>
-			<g id="r4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-				<g
-					id="CCB_Sperm-Donor_HP_M_R4"
-					transform="translate(-380.000000, -2753.000000)"
-				>
-					<g id="TESTIMONIALS" transform="translate(0.000000, 2175.000000)">
-						<g id="Group-15" transform="translate(33.000000, 471.000000)">
-							<mask id="mask-2" fill="white">
-								<use xlink:href="#path-1"></use>
-							</mask>
-							<use
-								id="icon-arrow-lg"
-								fill="currentcolor"
-								xlink:href="#path-1"
-							></use>
-						</g>
-					</g>
-				</g>
-			</g>
-		</svg>
-		<svg
-			v-if="props.bold"
-			:class="orientClass"
-			xwidth="7px"
-			xheight="10px"
-			height="1em"
-			viewBox="0 0 7 10"
-			version="1.1"
-			xmlns="http://www.w3.org/2000/svg"
-			xmlns:xlink="http://www.w3.org/1999/xlink"
-		>
-			<title>icon-arrow</title>
-			<g id="r4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-				<g
-					id="CCB_Sperm-Donor_Location_1_D_R4"
-					transform="translate(-182.000000, -2023.000000)"
-					fill="currentcolor"
-				>
-					<g id="Group-2" transform="translate(120.000000, 409.000000)">
-						<g id="Group" transform="translate(0.000000, 90.000000)">
-							<g id="LOS-ALTOS" transform="translate(60.000000, 1294.000000)">
-								<g id="ADDRESS" transform="translate(0.000000, 12.000000)">
-									<g id="Group-19" transform="translate(2.696552, 214.000000)">
-										<path
-											id="icon-arrow"
-											d="M5.59137931,8.92855676 C5.59137931,9.13884623 5.51349799,9.34872498 5.35733597,9.50931713 L1.36342228,13.6165333 C1.05149763,13.9373069 0.545868153,13.9373069 0.233943494,13.6165333 C-0.0779811647,13.2957597 -0.0779811647,12.7757862 0.233943494,12.4550126 L3.66271839,8.92855676 L0.233943494,5.40210093 C-0.0779811647,5.08132735 -0.0779811647,4.56135377 0.233943494,4.24058019 C0.545868153,3.9198066 1.05149763,3.9198066 1.36342228,4.24058019 L5.35733597,8.34779639 C5.51349799,8.50838854 5.59137931,8.71826729 5.59137931,8.92855676 Z"
-										></path>
-									</g>
-								</g>
-							</g>
-						</g>
-					</g>
-				</g>
-			</g>
-		</svg>
-	</i>
-</template>
-
-<style scoped>
-.orient-up {
-	transform: rotate(-90deg);
-}
-.orient-down {
-	transform: rotate(90deg);
-}
-.orient-left {
-	transform: rotate(180deg);
-}
-</style>