@cooperco/cooper-component-library 0.1.0 → 0.1.2

package/src/components/ContentModule/ContentModule.ts

@@ -1,31 +0,0 @@
-import { ComponentPassthrough } from '../../types'
-import { CTA } from '../CTA/CTA'
-import { Image } from '../Image/Image'
-
-export interface ContentModulePassthrough extends ComponentPassthrough {
-	container?: string
-	ctas?: string
-	logo?: string
-	subHeadline?: string
-}
-
-export enum ContentModuleAligmentEnum {
-	Left = 'left',
-	Center = 'center',
-	Right = 'right',
-}
-
-export interface ContentModule {
-	__typename?: 'ContentModule'
-	headline?: string
-	subHeadline?: string
-	description?: string
-	ctas?: CTA[]
-	textColor?: string
-	backgroundColor?: string
-	pt?: ContentModulePassthrough
-	logo?: Image
-	isHero?: boolean
-	alignment?: ContentModuleAligmentEnum
-	isChild?: boolean
-}

package/src/components/ContentModule/ContentModule.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { ContentModule, ContentModuleAligmentEnum } from './ContentModule'
-import CTA from '../CTA/CTA.vue'
-import { computed } from 'vue'
-import {
-	combinePassthroughs,
-	ContentModulePt,
-} from '../../config/defaultPassthrough'
-import { twMerge } from 'tailwind-merge'
-
-const props = withDefaults(defineProps<ContentModule>(), {
-	isHero: false,
-	alignment: ContentModuleAligmentEnum.Left,
-})
-const pt = computed(() => combinePassthroughs(ContentModulePt, props.pt ?? {}))
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-const computedAlignment = computed(() => `text-${props.alignment}`)
-const logoClass = computed(
-	// TODO: Add description or remove when class error is fixed
-	// @ts-expect-error <add description>
-	() => `${pt.value?.logo ?? ''} ${props?.logo?.class}`
-)
-</script>
-
-<template>
-	<div :class="`content-module ${pt?.root ?? ''}`" :style="computedStyle">
-		<div :class="`content-module-container mx-auto ${pt?.container ?? ''}`">
-			<Image v-if="logo" v-bind="logo" :class="logoClass" />
-			<h2
-				v-if="headline"
-				:class="`${headline && !subHeadline ? 'mb-4' : ''} ${twMerge(pt?.headline ?? '', computedAlignment)}`"
-			>
-				{{ headline }}
-			</h2>
-			<h2
-				v-if="subHeadline"
-				:class="`content-module-subheadline ${twMerge(pt?.subheadline ?? '', computedAlignment)}`"
-			>
-				{{ subHeadline }}
-			</h2>
-			<p
-				v-if="description"
-				:class="`content-module-description ${twMerge(pt?.description ?? '', computedAlignment)}`"
-			>
-				{{ description }}
-			</p>
-			<div
-				v-if="ctas"
-				:class="`content-module-ctas ${twMerge(pt?.ctas ?? '', computedAlignment)}`"
-			>
-				<CTA
-					v-for="(item, index) in ctas"
-					v-bind="item"
-					:key="`cta-${item.title}-${index}`"
-				/>
-			</div>
-		</div>
-	</div>
-</template>

package/src/components/FooterNavigation/FooterNavigation.ts

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

package/src/components/FooterNavigation/FooterNavigation.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { type FooterNavigation } from './FooterNavigation'
-import NavigationElement from '../NavigationElement/NavigationElement.vue'
-import { computed } from 'vue'
-
-const props = defineProps<FooterNavigation>()
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		color: props.textColor ?? 'inherit',
-	}
-})
-</script>
-<template>
-	<footer class="w-full p-5" :style="computedStyle">
-		<div class="container flex flex-col mx-auto">
-			<div class="flex justify-between flex-col sm:flex-row p-5 gap-4">
-				<a href="/" class="footer-navigation-logo text-center">
-					<img
-						v-if="logo"
-						class="min-h-[95px] min-w-[100px] w-[100px] h-[95px]"
-						:="logo"
-					/>
-					{{ title }}
-				</a>
-				<div
-					v-if="navigation"
-					class="footer-navigation px-2 pt-2 pb-4 sm:flex sm:p-0 sm:space-x-2 md:space-x-4 space-y-5 sm:space-y-0"
-				>
-					<NavigationElement
-						v-for="(item, index) in navigation"
-						:key="`footer-nav-item-${item.title}-${index}`"
-						:class="`footer-nav-item-${index}`"
-						role="menuitem"
-						tabindex="-1"
-						:="{ ...item, isChild: false, elementType: 'footer' }"
-					/>
-				</div>
-				<div
-					v-if="socialMediaRef"
-					class="flex flex-wrap footer-social space-x-2"
-				>
-					<a
-						v-for="(item, index) in socialMediaRef"
-						:key="`footer-social-item-${item.icon.altTag}-${index}`"
-						:class="`footer-social-item-${index}`"
-						:href="item?.url?.link"
-					>
-						<img :="item.icon" />
-					</a>
-				</div>
-			</div>
-			<hr />
-			<!-- switch to rich text if we go forward with this -->
-			<div v-if="legalText" class="footer-legal py-5" v-html="legalText" />
-		</div>
-	</footer>
-</template>

package/src/components/Image/Image.ts

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

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { Image } from './Image'
-
-const props = defineProps<Image>()
-</script>
-
-<template>
-	<!-- TODO: Add description below or remove if classes fixed -->
-	<!-- @vue-expect-error <add description> -->
-	<img
-		:class="props.class"
-		:src="props.media.src"
-		:alt="props.altTag"
-		:height="props.media.height"
-		:width="props.media.width"
-	/>
-</template>

package/src/components/LogoCollectionModule/LogoCollectionModule.ts

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

package/src/components/LogoCollectionModule/LogoCollectionModule.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { LogoCollectionModule } from './LogoCollectionModule'
-import { computed } from 'vue'
-import {
-	combinePassthroughs,
-	LogoCollectionModulePt,
-} from '../../config/defaultPassthrough'
-
-const props = defineProps<LogoCollectionModule>()
-const pt = computed(() =>
-	combinePassthroughs(LogoCollectionModulePt, props.pt ?? {})
-)
-
-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, index) in modules"
-					v-bind="image"
-					:key="`cta-${image.altTag}-${index}`"
-				/>
-			</div>
-		</div>
-	</section>
-</template>

package/src/components/NavigationElement/NavigationElement.ts

@@ -1,22 +0,0 @@
-import { ComponentPassthrough, URLRef } from '../../types'
-
-export interface NavigationElementPt extends ComponentPassthrough {
-	icon?: string
-}
-
-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?: NavigationElementPt
-}
-
-// Navigation
-export enum NavigationElementType {
-	'header' = 0,
-	'footer' = 1,
-}

package/src/components/NavigationElement/NavigationElement.vue

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import {
-	NavigationElement as NavigationElementT,
-	NavigationElementType,
-} from './NavigationElement'
-import { computed, ref } from 'vue'
-import { RouterLink } from 'vue-router'
-import {
-	combinePassthroughs,
-	NavigationElementPt,
-} from '../../config/defaultPassthrough'
-
-const props = defineProps<NavigationElementT>()
-const pt = computed(() =>
-	combinePassthroughs(NavigationElementPt, props.pt ?? {})
-)
-
-// Update to support url vs page
-const url = computed(() => {
-	if (props.linkRef?.page) {
-		return `/${props.linkRef?.page}`
-	}
-	return props?.linkRef?.link
-})
-
-const elementTypeValue = computed(() => {
-	return NavigationElementType[props.elementType ?? 'header']
-})
-const showSubNavigation = ref(false)
-const builtClassname = computed(
-	() =>
-		// TODO: Add description below or remove if classes fixed
-		// @ts-expect-error <add description>
-		`relative m-0 ${props.class ?? ''} ${props.isChild ? 'sub-' : ''}navigation-element`
-)
-</script>
-
-<template>
-	<component :is="isChild ? 'li' : 'div'" :class="builtClassname">
-		<component
-			:is="url || isChild ? RouterLink : 'button'"
-			v-if="
-				elementTypeValue === NavigationElementType.header ||
-				(isChild && (url || subNavigation))
-			"
-			:to="url"
-			class="flex items-center hover:underline"
-			:class="{
-				'whitespace-nowrap': elementTypeValue === NavigationElementType.header,
-			}"
-			aria-expanded="true"
-			aria-haspopup="true"
-			@click.prevent="showSubNavigation = !showSubNavigation"
-		>
-			{{ title }}
-
-			<div
-				v-if="!isChild && subNavigation && !(url || isChild)"
-				:class="pt?.icon"
-			>
-				<i v-show="!showSubNavigation" :class="`pi pi-chevron-down`"></i>
-				<i v-show="showSubNavigation" :class="`pi pi-chevron-up`"></i>
-			</div>
-		</component>
-		<h2
-			v-else-if="elementTypeValue == NavigationElementType.footer"
-			class="mb-2 font-bold"
-		>
-			{{ title }}
-		</h2>
-
-		<ul
-			v-if="!isChild && subNavigation"
-			:class="{
-				hidden:
-					!showSubNavigation &&
-					elementTypeValue == NavigationElementType.header,
-				'sm:absolute left-0 z-10 sm:mt-2 space-y-2 origin-top-right rounded-md ring-opacity-5 focus:outline-none sm:shadow-lg sm:ring-1 sm:ring-white sm:bg-white p-5':
-					elementTypeValue == NavigationElementType.header,
-			}"
-			role="menu"
-			aria-orientation="vertical"
-			aria-labelledby="menu-button"
-			tabindex="-1"
-		>
-			<NavigationElement
-				v-for="(item, index) in subNavigation"
-				:key="item.title"
-				class="ms-3 sm:ms-0"
-				:class="`sub-navigation-element-item-${index}`"
-				role="menuitem"
-				tabindex="-1"
-				:="{ ...item, elementType, isChild: true }"
-			/>
-		</ul>
-
-		<template v-if="htmlRef">
-			<div v-html="htmlRef" />
-		</template>
-	</component>
-</template>

package/src/components/PrimaryNavigation/PrimaryNavigation.ts

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

package/src/components/PrimaryNavigation/PrimaryNavigation.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { PrimaryNavigation } from './PrimaryNavigation'
-import Image from '../Image/Image.vue'
-import NavigationElement from '../NavigationElement/NavigationElement.vue'
-import { ref, computed } from 'vue'
-
-const props = defineProps<PrimaryNavigation>()
-const isOpen = ref(true)
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'white',
-		color: props.textColor ?? 'inherit',
-	}
-})
-</script>
-
-<template>
-	<header
-		class="primary-navigation-header sticky top-0 z-50 p-5 shadow-2xl"
-		:style="computedStyle"
-	>
-		<div class="container sm:flex sm:justify-between sm:items-center mx-auto">
-			<div class="flex items-center justify-between py-3 sm:p-0">
-				<a
-					v-if="logo"
-					href="/"
-					class="primary-navigation-logo flex items-center h-12 sm:h-16 ps-5"
-				>
-					<Image v-bind="logo" />
-				</a>
-				<div class="sm:hidden">
-					<button type="button" class="block" @click="isOpen = !isOpen">
-						<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
-							<!-- Hamburger SVG path-->
-							<path
-								v-if="isOpen"
-								fill-rule="evenodd"
-								d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
-							/>
-							<!-- X SVG path -->
-							<path
-								v-if="!isOpen"
-								fill-rule="evenodd"
-								d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
-							/>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<nav
-				v-if="navigation"
-				class="primary-navigation items-center px-2 pt-2 pb-4 sm:flex gap-4 sm:justify-evenly sm:p-0"
-				:class="isOpen ? 'block' : 'hidden'"
-			>
-				<NavigationElement
-					v-for="(item, index) in navigation"
-					:key="`${item.title}-${index}`"
-					role="menuitem"
-					tabindex="-1"
-					:="{
-						...item,
-						// @ts-ignore
-						class: `primary-nav-item-${index} ${item.class}`,
-						isChild: false,
-						elementType: 'header',
-					}"
-				/>
-			</nav>
-		</div>
-	</header>
-</template>

package/src/components/SplitModule/SplitModule.ts

@@ -1,17 +0,0 @@
-import { Image } from '../Image/Image'
-import { ContentModule } from '../ContentModule/ContentModule'
-import { Video } from '../Video/Video'
-import { ComponentPassthrough } from '../../types'
-
-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?: ComponentPassthrough
-	isChild?: boolean
-}

package/src/components/SplitModule/SplitModule.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { SplitModule } from './SplitModule'
-import {
-	combinePassthroughs,
-	SplitModulePt,
-} from '../../config/defaultPassthrough'
-import { twMerge } from 'tailwind-merge'
-
-const props = defineProps<SplitModule>()
-const pt = computed(() => combinePassthroughs(SplitModulePt, props.pt ?? {}))
-
-const computedStyle = computed(() => {
-	return {
-		'background-color': props.backgroundColor ?? 'transparent',
-		'background-image': `url(${props.backgroundImage ?? ''})`,
-		'background-size': 'cover',
-	}
-})
-const computedClass = computed(() =>
-	// TODO: Add description below or remove if classes fixed
-	// @ts-expect-error <add description>
-	twMerge(`split-module ${props.isChild ? '' : 'py-16'}`, props.class)
-)
-</script>
-
-<template>
-	<component
-		:is="isChild ? 'div' : 'section'"
-		:style="computedStyle"
-		:class="computedClass"
-	>
-		<h2 :class="`headline ${pt?.headline ?? ''}`">{{ headline }}</h2>
-		<div
-			:class="`split-module-content ${twMerge('flex justify-evenly gap-4 mx-auto items-center', pt?.content ?? '')}`"
-		>
-			<component
-				:is="start.__typename"
-				v-if="start"
-				v-bind="start"
-				:class="`split-module-start ${pt?.start ?? ''}`"
-			/>
-			<component
-				:is="center.__typename"
-				v-if="center"
-				v-bind="center"
-				:class="`split-module-center ${pt?.center ?? ''}`"
-			/>
-			<component
-				:is="end.__typename"
-				v-if="end"
-				v-bind="end"
-				:class="`split-module-end ${pt?.end ?? ''}`"
-			/>
-		</div>
-	</component>
-</template>

package/src/components/TestimonialModule/TestimonialModule.ts

@@ -1,22 +0,0 @@
-import { ComponentPassthrough } from '../../types'
-import { Image } from '../Image/Image'
-import { Video } from '../Video/Video'
-
-export interface TestimonialModulePassthrough extends ComponentPassthrough {
-	quote?: string
-	author?: string
-	details?: string
-	media?: string
-	text?: string
-}
-export interface TestimonialModule {
-	__typename?: 'TestimonialModule'
-	headline?: string
-	quote: string
-	author?: string
-	details?: string
-	media?: Video | Image
-	textColor?: string
-	backgroundColor?: string
-	pt?: TestimonialModulePassthrough
-}

package/src/components/TestimonialModule/TestimonialModule.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { TestimonialModule } from './TestimonialModule'
-import { computed } from 'vue'
-import {
-	combinePassthroughs,
-	TestimonialModulePt,
-} from '../../config/defaultPassthrough'
-
-const props = defineProps<TestimonialModule>()
-const pt = computed(() =>
-	combinePassthroughs(TestimonialModulePt, props.pt ?? {})
-)
-
-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 lg:flex-row gap-8 ${pt?.container ?? ''}`"
-		>
-			<div v-if="media" :class="`testimonial-media ${pt?.media ?? ''}`">
-				<component :is="media.__typename" v-bind="media" />
-			</div>
-			<div :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 ?? ''}`">
-					&quot;{{ quote }}&quot;
-				</p>
-
-				<p v-if="author" :class="`testimonial-author ${pt?.author ?? ''}`">
-					{{ author }}
-				</p>
-
-				<p v-if="details" :class="`testimonial-details ${pt?.details ?? ''}`">
-					{{ details }}
-				</p>
-			</div>
-		</div>
-	</div>
-</template>

package/src/components/TileCollectionModule/TileCollectionModule.ts

@@ -1,18 +0,0 @@
-import { ComponentPassthrough } from '../../types'
-import { TileContent } from '../TileContent/TileContent'
-
-export interface TileCollection {
-	__typename?: 'TileCollectionModule'
-	headline: string
-	description?: string
-	modules: TileContent[]
-	textColor?: string
-	backgroundColor?: string
-	variant:
-		| 'IconTile'
-		| 'ImageTile'
-		| 'VideoTile'
-		| 'ImageStackedAnimatedTile'
-		| 'TextTile'
-	pt?: ComponentPassthrough
-}