@cooperco/cooper-component-library 0.0.10

package/src/components/TileCollectionModule.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { TileCollection } from './types/TileCollection'
+import TileContent from './TileContent.vue'
+import { computed } from 'vue'
+
+const props = defineProps<TileCollection>()
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<section :class="`tile-collection ${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 flex flex-col md:flex-row justify-center gap-3 ${pt?.content ?? ''}`"
+			>
+				<TileContent
+					v-for="(item, index) in modules"
+					:class="`tile-collection-content-item-${index}`"
+					:isImageStacked="variant === 'ImageStackedAnimated'"
+					:="item"
+				/>
+			</ul>
+			<!-- TODO: need to add the CTA -->
+		</div>
+	</section>
+</template>

package/src/components/TileContent.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { TileContent } from './types/TileContent'
+import { computed } from 'vue'
+import Card from 'primevue/card'
+import ImageComponent from './Image.vue'
+import VideoComponent from './Video.vue'
+
+const props = defineProps<TileContent>()
+
+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 relative text-center list-none p-5 flex-auto rounded overflow-visible mx-auto shadow-none"
+		: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 #content v-if="description || listItems">
+				<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" />
+						<VideoComponent v-if="Video" v-bind="Video" />
+					</div>
+					<p
+						:class="`tile-content-description ${pt?.description ?? ''}`"
+						v-if="!isImageStacked"
+					>
+						{{ description }}
+					</p>
+				</div>
+			</template>
+
+			<template v-if="CTAs" #footer>
+				<p v-if="price" :class="`${pt?.price ?? ''}`">
+					{{ price }}
+				</p>
+				<CTA
+					v-for="(item, index) in CTAs"
+					:class="`cta-${index} ${pt?.cta}`"
+					:="item"
+				/>
+			</template>
+		</Card>
+	</div>
+</template>

package/src/components/Video.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Video } from './types/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/components/types/Accordion.ts

@@ -0,0 +1,18 @@
+import { ClassOverrides } from '.'
+import { AccordionItem } from './AccordionItem'
+import { Image } from './Image'
+import { CTA } from './CTA'
+
+interface AccordionModuleOverrides extends ClassOverrides {
+	imageIcon?: string
+}
+export interface Accordion {
+	__typename?: 'Accordion'
+	modules: AccordionItem[]
+	headline?: string
+	// types only used in code, based on placement from contentful
+	isChild?: boolean
+	type?: 'List' | 'Tile'
+	pt?: AccordionModuleOverrides
+	imageIcon?: Image
+}

package/src/components/types/AccordionItem.ts

@@ -0,0 +1,19 @@
+import { ClassOverrides } from '.'
+import { Image } from './Image'
+
+interface AccordionItemOverrides extends ClassOverrides {
+	icon?: string
+	button?: string
+	imageIcon?: string
+}
+
+export interface AccordionItem {
+	__typename?: 'AccordionItem'
+	itemNumber?: number
+	title?: string
+	content?: string
+	pt?: AccordionItemOverrides
+	isFirst?: boolean
+	isLast?: boolean
+	imageIcon?: Image
+}

package/src/components/types/CTA.ts

@@ -0,0 +1,13 @@
+import { URLRef } from '../../types'
+
+export interface CTA {
+	__typename?: 'CTA'
+	title: string
+	url: URLRef
+	color: string
+	textColor: string
+	buttonType: 'fill' | 'outline' | 'link'
+	ariaLabel: string
+	anchor?: string
+	target?: string
+}

package/src/components/types/CarouselModule.ts

@@ -0,0 +1,21 @@
+import { ClassOverrides } from '.'
+import { ContainerModule } from './ContainerModule'
+import { ContentMediaModule } from './ContentMediaModule'
+import { Testimonial } from './Testimonial'
+import { TileContent } from './TileContent'
+
+interface CarouselPassthrough extends ClassOverrides {
+	item?: string
+}
+
+// Carousel
+export interface Carousel {
+	__typename?: 'CarouselModule'
+	headline: string
+	modules: (ContentMediaModule | Testimonial | TileContent | ContainerModule)[]
+	textColor?: string
+	backgroundColor?: string
+	backgroundImage?: string
+	pt?: CarouselPassthrough
+	variant?: 'Hero' | 'Default'
+}

package/src/components/types/ContainerCollectionModule.ts

@@ -0,0 +1,12 @@
+import { ClassOverrides } from '.'
+import { ContainerModule } from './ContainerModule'
+import { SplitModule } from './SplitModule'
+
+export interface ContainerCollectionModule {
+	__typename?: 'ContainerCollection'
+	entryTitle?: string
+	headline: string
+	modules: Array<ContainerModule | SplitModule>
+	backgroundColor?: string
+	pt?: ClassOverrides
+}

package/src/components/types/ContainerModule.ts

@@ -0,0 +1,35 @@
+import { Video } from '../../types'
+import { Image } from './Image'
+import { Accordion } from './Accordion'
+import { ContentModule } from './ContentModule'
+import { Testimonial } from './Testimonial'
+import { TileCollection } from './TileCollection'
+import { TileContent } from './TileContent'
+import { ClassOverrides } from '.'
+
+interface ContainerClassOverrides extends ClassOverrides {
+	inner?: string
+	fullWidthContent?: string
+}
+export interface ContainerModule {
+	__typename?: 'ContainerModule'
+	headline: string
+	subHeadline?: string
+	fullWidthContent?:
+		| Image
+		| Video
+		| ContentModule
+		| ContainerModule
+		| TileCollection
+		| TileContent
+		| Accordion
+	start?: Image | Video | ContentModule | TileContent | Accordion | Testimonial
+	end?: Image | Video | ContentModule | TileContent | Accordion | Testimonial
+	textColor?: string
+	backgroundColor?: string
+	backgroundImage?: string
+	variant?: 'Centered' | 'Hero'
+	// types only used in code, based on placement from contentful
+	isChild?: boolean
+	pt?: ContainerClassOverrides
+}

package/src/components/types/ContentAndImage.ts

@@ -0,0 +1,14 @@
+import { Image } from '../../types'
+import { ContentModule } from './ContentModule'
+
+export interface ContentAndImage {
+	__typename?: 'ContentAndImage'
+	headline: string
+	fullWidthContent?: boolean
+	content: ContentModule
+	image?: Image
+	textColor?: string
+	backgroundColor?: string
+	// types only used in code, based on placement from contentful
+	isChild: boolean
+}

package/src/components/types/ContentMediaModule.ts

@@ -0,0 +1,14 @@
+import { Image } from '../../types'
+import { ContentModule } from './ContentModule'
+
+export interface ContentMediaModule {
+	__typename?: 'ContentMediaModule'
+	fullWidthContent?: boolean
+	content: ContentModule
+	media?: Image
+	textColor?: string
+	backgroundColor?: string
+	variant: 'VideoLeft' | 'Hero'
+	// types only used in code, based on placement from contentful
+	isChild: boolean
+}

package/src/components/types/ContentModule.ts

@@ -0,0 +1,21 @@
+import { ClassOverrides } from '.'
+import { CTA } from './CTA'
+import { Image } from './Image'
+
+interface ContentModuleOverrides extends ClassOverrides {
+	container?: string
+	ctas?: string
+	logo?: string
+}
+
+export interface ContentModule {
+	__typename?: 'ContentModule'
+	headline?: string
+	subHeadline?: string
+	description?: string
+	CTAs?: CTA[]
+	textColor?: string
+	backgroundColor?: string
+	pt?: ContentModuleOverrides
+	logo?: Image
+}

package/src/components/types/FooterNavigation.ts

@@ -0,0 +1,12 @@
+import { Image, socialMedia } from '../../types'
+import { NavigationElement } from './NavigationElement'
+
+export interface FooterNavigation {
+	title?: string
+	logo?: Image
+	legalText?: string
+	textColor?: string
+	backgroundColor?: string
+	navigation?: NavigationElement[]
+	socialMediaRef?: socialMedia[]
+}

package/src/components/types/Image.ts

@@ -0,0 +1,12 @@
+export interface ImageMedia {
+	src: string
+	height?: string | number
+	width?: string | number
+}
+
+export interface Image {
+	__typename?: 'Image'
+	entryTitle?: string
+	media: ImageMedia
+	altTag?: string
+}

package/src/components/types/LogoCollectionModule.ts

@@ -0,0 +1,12 @@
+import { ClassOverrides } from '.'
+import { Image } from './Image'
+
+// Logos
+export interface LogoCollectionModule {
+	__typename?: 'LogoCollectionModule'
+	headline: string
+	modules: Image[]
+	textColor?: string
+	backgroundColor?: string
+	pt?: ClassOverrides
+}

package/src/components/types/LogoContainerModule.ts

@@ -0,0 +1,12 @@
+import { ClassOverrides } from '.'
+import { Image } from './Image'
+
+// Logos
+export interface LogoContainerModule {
+	__typename?: 'LogoContainerModule'
+	headline: string
+	modules: Image[]
+	textColor?: string
+	backgroundColor?: string
+	pt?: ClassOverrides
+}

package/src/components/types/NavigationElement.ts

@@ -0,0 +1,19 @@
+import { ClassOverrides } from '.'
+import { URLRef } from '../../types'
+
+export interface NavigationElement {
+	elementType?: 'header' | 'footer'
+	title?: string
+	linkRef?: URLRef
+	htmlRef?: string
+	subNavigation?: NavigationElement[]
+	// types only used in code, based on placement from contentful
+	isChild?: boolean
+	pt?: ClassOverrides
+}
+
+// Navigation
+export enum NavigationElementType {
+	'header' = 0,
+	'footer' = 1,
+}

package/src/components/types/PrimaryNavigation.ts

@@ -0,0 +1,10 @@
+import { Image } from './Image'
+import { NavigationElement } from './NavigationElement'
+
+export interface PrimaryNavigation {
+	title?: string
+	logo?: Image
+	textColor?: string
+	backgroundColor?: string
+	navigation?: NavigationElement[]
+}

package/src/components/types/SplitModule.ts

@@ -0,0 +1,16 @@
+import { Image } from './Image'
+import { ContentModule } from './ContentModule'
+import { Video } from './Video'
+import { ClassOverrides } from '.'
+
+export interface SplitModule {
+	__typename?: 'SplitModule'
+	entryTitle?: string
+	headline: string
+	start?: Image | Video | ContentModule
+	center?: Image | Video | ContentModule
+	end?: Image | Video | ContentModule
+	backgroundImage?: Image
+	backgroundColor?: string
+	pt?: ClassOverrides
+}

package/src/components/types/Testimonial.ts

@@ -0,0 +1,17 @@
+import { ClassOverrides } from '.'
+import { Image, Video } from '../../types'
+
+interface TestimonialPassthrough extends ClassOverrides {
+	quote?: string
+	media?: string
+	text?: string
+}
+export interface Testimonial {
+	__typename?: 'Testimonial'
+	headline: string
+	quote: string
+	media?: Video | Image
+	textColor?: string
+	backgroundColor?: string
+	pt?: TestimonialPassthrough
+}

package/src/components/types/TileCollection.ts

@@ -0,0 +1,14 @@
+import { ClassOverrides } from '.'
+import { TileContent } from './TileContent'
+
+export interface TileCollection {
+	__typename?: 'TileCollection'
+	headline: string
+	description?: string
+	modules: TileContent[]
+	textColor?: string
+	backgroundColor?: string
+	variant?: 'IconCard' | 'ImageCard' | 'VideoCard' | 'ImageStackedAnimated'
+	pt?: ClassOverrides
+	description?: string
+}

package/src/components/types/TileContent.ts

@@ -0,0 +1,34 @@
+import { ClassOverrides } from '.'
+import { CardLabel, Video } from '../../types'
+import { CTA } from './CTA'
+import { Image } from './Image'
+
+interface TileContentOverrides extends ClassOverrides {
+	media?: string
+	mediaContainer?: string
+	ctas?: string
+	label?: string
+	cta?: string
+	body?: string
+	list?: string
+	listItem?: string
+	price?: string
+}
+
+export interface TileContent {
+	__typename?: 'TileContent'
+	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?: TileContentOverrides
+	listItems?: string[]
+	price?: string
+}

package/src/components/types/Video.ts

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

package/src/components/types/index.ts

@@ -0,0 +1,10 @@
+export interface ClassOverrides {
+	headline?: string
+	subheadline?: string
+	content?: string
+	description?: string
+	start?: string
+	center?: string
+	end?: string
+	container?: string
+}

package/src/presets/aura/accordion/index.js

@@ -0,0 +1,81 @@
+export default {
+	accordiontab: {
+		root: {
+			class: ['mb-0', 'border-b border-surface-200 dark:border-surface-700'],
+		},
+		header: ({ props }) => ({
+			class: [
+				// State
+				{
+					'select-none pointer-events-none cursor-default opacity-60':
+						props?.disabled,
+				},
+			],
+		}),
+		headerAction: {
+			class: [
+				//Font
+				'font-semibold',
+				'leading-none',
+
+				// Alignments
+				'flex justify-between items-center',
+				'flex-row-reverse',
+				'relative',
+
+				// Sizing
+				'p-[1.125rem]',
+
+				// Shape
+				'rounded-md',
+				'border-0',
+
+				// Color
+				'bg-surface-0 dark:bg-surface-900',
+				'text-surface-600 dark:text-surface-0/80',
+
+				// Transition
+				'transition duration-200 ease-in-out',
+				'transition-shadow duration-200',
+
+				// States
+				'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300', // Focus
+
+				// Misc
+				'cursor-pointer no-underline select-none',
+			],
+		},
+		headerIcon: ({ context }) => ({
+			class: [
+				'inline-block ml-2',
+				{ 'text-surface-900 dark:text-surface-0': context.active },
+			],
+		}),
+		headerTitle: {
+			class: 'leading-none',
+		},
+		content: {
+			class: [
+				// Spacing
+				'p-[1.125rem] pt-0',
+
+				//Shape
+				'border-0 rounded-none',
+
+				// Color
+				'bg-surface-0 dark:bg-surface-900',
+				'text-surface-600 dark:text-surface-0/70',
+			],
+		},
+		transition: {
+			enterFromClass: 'max-h-0',
+			enterActiveClass:
+				'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+			enterToClass: 'max-h-[1000px]',
+			leaveFromClass: 'max-h-[1000px]',
+			leaveActiveClass:
+				'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+			leaveToClass: 'max-h-0',
+		},
+	},
+}