@cooperco/cooper-component-library 0.0.10 → 0.1.0

package/src/components/Image.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { Image } from './types/Image'
-
-defineProps<Image>()
-</script>
-
-<template>
-	<img
-		:src="media.src"
-		:alt="altTag"
-		:height="media.height"
-		:width="media.width"
-		:class="class"
-	/>
-</template>

package/src/components/LogoContainerModule.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { LogoContainerModule } from './types/LogoContainerModule'
-import { computed } from 'vue'
-
-const props = defineProps<LogoContainerModule>()
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-</script>
-
-<template>
-	<section :style="computedStyle" class="logo-module">
-		<div :class="`container mx-auto ${pt?.container ?? ''}`">
-			<h2 v-if="headline" :class="`logo-module-headline ${pt?.headline ?? ''}`">
-				{{ headline }}
-			</h2>
-			<div
-				v-if="modules"
-				:class="`logo-module-content flex flex-wrap justify-evenly gap-2 ${pt?.content ?? ''}`"
-			>
-				<Image v-for="image in modules" v-bind="image" />
-			</div>
-		</div>
-	</section>
-</template>
-./types/LogoContainerModule

package/src/components/SplitModule.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { SplitModule } from './types/SplitModule'
-
-const props = defineProps<SplitModule>()
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		'background-image': `url(${props.backgroundImage ?? ''})`,
-		'background-size': 'cover',
-	}
-})
-</script>
-
-<template>
-	<section class="split-module" :style="computedStyle">
-		<h2 :class="`headline ${pt?.headline ?? ''}`">{{ headline }}</h2>
-		<div
-			:class="`split-module-content flex justify-evenly gap-4 mx-auto ${pt?.content ?? ''}`"
-		>
-			<component
-				v-if="start"
-				:is="start.__typename"
-				v-bind="start"
-				class="split-module-left"
-			/>
-			<component
-				v-if="center"
-				:is="center.__typename"
-				v-bind="center"
-				class="split-module-center"
-			/>
-			<component
-				v-if="end"
-				:is="end.__typename"
-				v-bind="end"
-				class="split-module-right"
-			/>
-		</div>
-	</section>
-</template>

package/src/components/Testimonial.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { Testimonial } from './types/Testimonial'
-import { MediaOptions } from '../types'
-import { computed } from 'vue'
-
-const props = defineProps<Testimonial>()
-
-const mediaTypeValue = computed(() => {
-	if (!props.media) {
-		return null
-	}
-	return MediaOptions[props.media.mediaType]
-})
-
-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 items-center lg:flex-row gap-5 ${pt?.container ?? ''}`"
-		>
-			<div v-if="media" :class="`testimonial-media ${pt?.media}`">
-				<component :is="mediaTypeValue" :="media" />
-			</div>
-			<div
-				v-if="headline || quote"
-				: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 ?? ''}`">
-					{{ quote }}
-				</p>
-			</div>
-		</div>
-	</div>
-</template>

package/src/components/TestimonialModule.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { Testimonial } from './types/Testimonial'
-import { MediaOptions } from '../types'
-import { computed } from 'vue'
-
-const props = defineProps<Testimonial>()
-
-const mediaTypeValue = computed(() => {
-	if (!props.media) {
-		return null
-	}
-	return MediaOptions[props.media.mediaType]
-})
-
-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 items-center lg:flex-row gap-5 ${pt?.container ?? ''}`"
-		>
-			<div v-if="media" :class="`testimonial-media ${pt?.media}`">
-				<component :is="mediaTypeValue" :="media" />
-			</div>
-			<div
-				v-if="headline || quote"
-				: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 ?? ''}`">
-					{{ quote }}
-				</p>
-			</div>
-		</div>
-	</div>
-</template>

package/src/components/TileCollection.vue

@@ -1,37 +0,0 @@
-<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>
-			<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}`"
-					:="item"
-				/>
-			</ul>
-		</div>
-	</section>
-</template>

package/src/components/TileCollectionModule.vue

@@ -1,45 +0,0 @@
-<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/types/AccordionItem.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,81 +0,0 @@
-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',
-		},
-	},
-}