@cooperco/cooper-component-library 0.1.1 → 0.1.3

package/src/components/TileContent/TileContentVideoTile.vue

@@ -1,81 +0,0 @@
-<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/Video/Video.ts

@@ -1,8 +0,0 @@
-import { ImageMedia } from '../Image/Image'
-
-export interface Video {
-	__typename?: 'Video'
-	media: ImageMedia
-	altTag?: string
-	isEmbedded?: boolean
-}

package/src/components/Video/Video.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { Video } from './Video'
-
-withDefaults(defineProps<Video>(), { isEmbedded: false })
-</script>
-
-<template>
-	<iframe
-		v-if="isEmbedded"
-		:src="media.src"
-		:height="media.height"
-		:width="media.width"
-	>
-	</iframe>
-	<video v-else :alt="altTag" :height="media.height" :width="media.width">
-		<source :src="media.src" />
-	</video>
-</template>

package/src/config/defaultPassthrough.ts

@@ -1,261 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { twMerge } from 'tailwind-merge'
-import { ComponentPassthrough } from '../types'
-import { ContainerModulePassthrough } from '../components/ContainerModule/ContainerModule'
-import { AccordionItemPassthrough } from '../components/Accordion/AccordionItem'
-import { AccordionPassthrough } from '../components/Accordion/Accordion'
-import { CarouselPassthrough } from '../components/CarouselModule/CarouselModule'
-import { ContentModulePassthrough } from '../components/ContentModule/ContentModule'
-import { TestimonialModulePassthrough } from '../components/TestimonialModule/TestimonialModule'
-import { TileContentPassthrough } from '../components/TileContent/TileContent'
-import { CTAPassthrough } from '../components/CTA/CTA'
-
-export const DEFAULT_PASSTHROUGH: ComponentPassthrough = {
-	headline:
-		'mb-12 text-4xl md:text-5xl font-bold leading-tight text-center text-primary',
-	subheadline: 'mb-2',
-	content: '',
-	description: '',
-	start: '',
-	center: '',
-	end: '',
-	container: 'max-w-[1024px] mx-auto',
-}
-
-interface GenericComponentPassthrough
-	extends ComponentPassthrough,
-		AccordionPassthrough,
-		AccordionItemPassthrough,
-		CarouselPassthrough,
-		ContainerModulePassthrough,
-		ContentModulePassthrough,
-		CTAPassthrough,
-		TestimonialModulePassthrough,
-		TileContentPassthrough {}
-
-/**
- * TODO: Need to define the types for the passthroughs.
- * REMOVE eslint-disable once types are defined
- */
-export const combinePassthroughs = <
-	PtType extends GenericComponentPassthrough,
-	OverrideType extends GenericComponentPassthrough,
->(
-	passthrough: PtType,
-	overrides: OverrideType
-) => {
-	const built: GenericComponentPassthrough = {}
-
-	// First combine the core passthroughs
-	for (const key in passthrough) {
-		;(built as any)[key] = twMerge(
-			(passthrough as any)[key] ?? '',
-			(overrides as any)[key] ?? ''
-		)
-	}
-
-	// Combine any overrides
-	for (const key in overrides) {
-		;(built as any)[key] = twMerge(
-			(built as any)[key] ?? '',
-			(overrides as any)[key] ?? ''
-		)
-	}
-
-	return built
-}
-
-export interface AccordionPtVariants {
-	List: AccordionPassthrough
-	Tile: AccordionPassthrough
-}
-
-export const AccordionPt: AccordionPtVariants = {
-	List: combinePassthroughs(DEFAULT_PASSTHROUGH, {
-		container: 'flex flex-col',
-	}),
-	Tile: combinePassthroughs(DEFAULT_PASSTHROUGH, {
-		container: 'flex flex-wrap gap-4 items-stretch relative',
-		// we should make the "has-.." class programmatic, so it goes off the height of the opened item.
-		root: 'mb-0 relative transition-all duration-200 has-[.active]:mb-[550px]',
-	}),
-}
-
-export const AccordionItemPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
-	headline: 'text-lg md:text-lg mb-0 *:text-left',
-	image: 'w-14 mr-4',
-})
-
-export const AccordionListItemPt = combinePassthroughs(AccordionItemPt, {
-	root: 'border-b first:border-t first:border-t-black border-b-black',
-	headline:
-		'text-primary-950 text-xl md:text-xl py-6 pr-2 *:text-left font-bold ',
-	icon: 'text-primary-950',
-	content: 'pb-6',
-})
-
-export const AccordionTileItemPt = combinePassthroughs(AccordionItemPt, {
-	root: ' w-full md:w-[23%]',
-	headline:
-		'transition-height mb-0 h-[90%] duration-200 py-16 md:text-3xl text-3xl text-center relative rounded-2xl text-white h-[90%] bg-primary group-[.active]:rounded-t-2lg group-[.active]:rounded-b-none group-[.active]:h-full flex items-center justify-center',
-	button:
-		'h-full w-fit text-center *:text-center justify-center md:*:[word-spacing:100px]', // word-spacing so that text wraps when not in mobile
-	icon: 'absolute top-4 right-6',
-	content:
-		'group-[.first]:rounded-tl-none group-[.last]:rounded-tr-none transition-opacity duration-200 opacity-0 left-0 absolute w-full p-12 text-white rounded-2xl bg-primary group-[.active]:opacity-100',
-})
-
-export const CarouselModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
-
-export const CarouselModuleAltPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
-
-export const ContainerCollectionModulePt = combinePassthroughs(
-	DEFAULT_PASSTHROUGH,
-	{
-		root: 'px-8 md:px-0',
-		content: 'max-w-[1024px]',
-	}
-)
-
-export interface ContainerModulePtVariants {
-	Hero: ContainerModulePassthrough
-	Centered: ContainerModulePassthrough
-}
-
-export const ContainerModulePt: ContainerModulePtVariants = {
-	Centered: combinePassthroughs(DEFAULT_PASSTHROUGH, {
-		root: 'px-8 md:px-0',
-		inner: 'h-full mx-auto max-w-[1024px]',
-		fullWidthContent: 'max-w-full w-full',
-	}),
-	Hero: combinePassthroughs(DEFAULT_PASSTHROUGH, {
-		root: 'md:h-[500px] mb-12',
-		inner: 'md:flex md:items-center h-full py-16 px-4 md:px-16 mb-8',
-		headline:
-			'md:text-left text-primary-950 text-[8.75vmin] md:text-6xl text-center',
-	}),
-}
-
-export const ContentModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
-	root: 'p-5',
-	headline: 'mb-4 text-4xl md:text-4xl',
-	description: '',
-	ctas: 'mt-4',
-	cta: '',
-})
-
-export interface CTAPtVariants {
-	fill: CTAPassthrough
-	logo: CTAPassthrough
-	link: CTAPassthrough
-	outline: CTAPassthrough
-}
-
-export const CTAPt: CTAPtVariants = {
-	link: {
-		logo: 'p-2 bg-[#18a589] rounded-full',
-	},
-	logo: {
-		logo: 'p-2 bg-[#18a589] rounded-full',
-	},
-	fill: {},
-	outline: {},
-}
-
-export const FooterNavigationPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
-
-export const ImagePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
-
-export const LogoCollectionModulePt = combinePassthroughs(
-	DEFAULT_PASSTHROUGH,
-	{}
-)
-
-export const NavigationElementPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
-	icon: 'ps-2 text-xs',
-})
-
-export const PrimaryNavigationPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
-
-export const SplitModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
-	root: 'px-8 md:px-0',
-	content:
-		'max-w-[1024px] flex justify-evenly gap-4 mx-auto flex-col md:flex-row',
-})
-
-export const TestimonialModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
-	headline: 'text-primary-950',
-	quote: 'text-primary-950 text-lg font-bold',
-	text: 'space-y-4 w-full md:w-1/2',
-	author: 'text-lg text-gray-600',
-	details: 'text-lg text-gray-600',
-	media: 'md:w-1/2 w-full',
-})
-
-export interface TileCollectionPtVariants {
-	IconTile: ComponentPassthrough
-	ImageTile: ComponentPassthrough
-	VideoTile: ComponentPassthrough
-	TextTile: ComponentPassthrough
-	ImageStackedAnimatedTile: ComponentPassthrough
-}
-
-export const TileCollectionModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
-	root: 'px-8 md:px-0',
-})
-
-export const TileContentPt = {
-	root: 'w-full md:w-[48%] lg:w-[30%] relative flex-auto rounded overflow-visible mx-auto shadow-none flex-none !m-0',
-	label:
-		'bg-[#18a589] w-[120px] p-2 rounded-[50%] rounded-lg text-2xl text-white flex items-center justify-center leading-none font-bold absolute right-[-4%] top-8',
-	numericLabel:
-		'absolute rounded-full bg-primary w-[25%] h-[25%] left-4 top-8 md:left-0 md:top-2 text-4xl text-white font-bold flex items-center justify-center',
-	headline: 'mb-4 text-4xl md:text-3xl text-center text-primary-950 font-bold',
-	// media: 'h-auto w-full mx-auto mb-8 flex items-center justify-center',
-	cta: 'text-xl *:font-bold mx-auto text-center font-bold',
-	ctas: 'flex gap-2',
-	container: 'h-full',
-	description: 'leading-normal text-lg',
-	body: 'h-full flex flex-col justify-between',
-	footer: 'font-bold text-center mt-4 space-y-2',
-	footerContent: 'font-bold text-center',
-}
-
-export const TileContentIconTilePt = combinePassthroughs(TileContentPt, {
-	root: 'bg-white rounded-2xl p-8',
-	ctas: 'text-center',
-	media: 'mb-6 mx-auto',
-	numericLabel:
-		'bg-[#18a589] w-[50px] p-2 rounded-[50%] h-[40px] rounded-lg text-3xl md:text-3xl text-white flex items-center justify-center leading-none font-bold absolute left-[-4%] md:left-[-4%] top-8 md:top-8',
-})
-
-export const TileContentImageStackedAnimatedTilePt = combinePassthroughs(
-	TileContentPt,
-	{
-		root: '!w-full',
-		inner: 'justify-center',
-		label:
-			'rounded-full flex items-center justify-center font-bold absolute text-white bg-primary z-20 w-auto w-20 h-20 text-4xl rounded-full font-bold',
-		media: 'flex-[1_0_26%] md:flex-[1_0_20%]',
-		headline: 'font-bold text-left max-w-[400px]',
-		subheadline:
-			'text-[4.5vmin] md:text-3xl font-bold text-white max-w-[400px]',
-		description: 'text-lg max-w-[400px]',
-	}
-)
-export const TileContentImageTilePt = combinePassthroughs(TileContentPt, {
-	media: 'relative mb-4 md:w-3/4 mx-auto',
-})
-export const TileContentTextTilePt = combinePassthroughs(TileContentPt, {
-	ctas: 'flex-col gap-4',
-	description: 'text-center',
-})
-export const TileContentVideoTilePt = combinePassthroughs(TileContentPt, {
-	root: 'bg-white p-8 rounded-xl',
-	headline: 'text-3xl md:text-3xl mb-2 text-primary font-bold',
-	subheadline: 'text-base md:text-base text-primary-950 text-center',
-	media: 'mb-4 mt-6',
-	description: 'text-left',
-})
-
-export const VideoPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})