@cooperco/cooper-component-library 0.0.10 → 0.1.0

package/package.json

@@ -1,12 +1,11 @@
 {
 	"name": "@cooperco/cooper-component-library",
 	"private": false,
-	"version": "0.0.10",
+	"version": "0.1.0",
 	"type": "module",
 	"files": [
 		"dist",
 		"src/components/",
-		"src/presets/",
 		"src/assets/"
 	],
 	"main": "./dist/component-lib.umd.cjs",
@@ -21,58 +20,66 @@
 			"require": "./dist/style.css"
 		},
 		"./components/*": "./dist/components/*",
-		"./presets/*": "./dist/presets/*",
 		"./assets/*": "./dist/assets/*"
 	},
 	"scripts": {
 		"dev": "vite",
+		"check-types": "vue-tsc --noEmit",
 		"build": "vite build",
 		"preview": "vite preview",
 		"tail": "tailwind-config-viewer -o",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
 		"chromatic": "chromatic --exit-zero-on-changes",
-		"prepare": "husky install"
+		"prepare": "husky",
+		"lint": "eslint . --no-fix",
+		"lint:fix": "eslint . --fix --quiet"
 	},
 	"dependencies": {
 		"@primevue/themes": "^4.0.0",
+		"primeicons": "^7.0.0",
 		"primevue": "^3.0.0",
+		"tailwind-merge": "^2.4.0",
 		"vite-plugin-turbosnap": "^1.0.3",
-		"vue": "^3.0.0",
-		"vue-router": "^4.4.0"
+		"vue": "^3.0.0"
 	},
 	"devDependencies": {
-		"@chromatic-com/storybook": "^1.4.0",
+		"@cooperco/contentful-cli-migrations": "^0.5.0",
+		"@chromatic-com/storybook": "^1.6.1",
 		"@eslint/js": "^9.4.0",
-		"@storybook/addon-essentials": "^8.1.2",
-		"@storybook/addon-interactions": "^8.1.2",
-		"@storybook/addon-links": "^8.1.2",
-		"@storybook/blocks": "^8.1.2",
-		"@storybook/builder-vite": "^8.1.2",
-		"@storybook/test": "^8.1.2",
-		"@storybook/vue3": "^8.1.2",
-		"@storybook/vue3-vite": "^8.1.2",
+		"@storybook/addon-essentials": "^8.2.8",
+		"@storybook/addon-interactions": "^8.2.8",
+		"@storybook/addon-links": "^8.2.8",
+		"@storybook/blocks": "^8.2.8",
+		"@storybook/builder-vite": "^8.2.8",
+		"@storybook/test": "^8.2.8",
+		"@storybook/vue3": "^8.2.8",
+		"@storybook/vue3-vite": "^8.2.8",
 		"@tsconfig/node18": "^18.2.4",
 		"@vitejs/plugin-vue": "^5.0.4",
 		"@vue/tsconfig": "^0.5.1",
 		"autoprefixer": "^10.4.19",
 		"chromatic": "^11.4.0",
-		"eslint": "^8.56.0",
-		"eslint-plugin-vue": "^9.20.1",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-vue": "^9.26.0",
 		"globals": "^15.3.0",
 		"husky": "^9.1.4",
 		"jsdom": "^24.1.0",
 		"lint-staged": "^15.2.8",
 		"postcss": "^8.4.38",
 		"prettier": "3.3.1",
-		"storybook": "^8.1.2",
+		"storybook": "^8.2.8",
 		"storybook-vue3-router": "^5.0.0",
 		"tailwind-config-viewer": "^2.0.2",
 		"tailwindcss": "^3.4.3",
 		"typescript": "~5.3.3",
 		"typescript-eslint": "^7.17.0",
 		"unplugin-vue-components": "^0.27.0",
-		"vite": "^5.2.0"
+		"vite": "^5.2.0",
+		"vue-eslint-parser": "^9.4.3",
+		"vue-router": "^4.4.3",
+		"vue-tsc": "^2.0.29"
 	},
 	"peerDependencies": {
 		"primevue": "^3.0.0",
@@ -80,6 +87,8 @@
 		"vue": "^3.0.0"
 	},
 	"lint-staged": {
-		"*.{js,css,md,ts,vue}": "prettier --write"
+		"*.{json,js,ts,jsx,tsx,html,vue}": [
+			"prettier --write --ignore-unknown"
+		]
 	}
 }

package/src/assets/fonts/fonts.scss

@@ -0,0 +1,60 @@
+@font-face {
+    font-family: 'GTWalsheim-Rg';
+    src: url('./fonts/GT-Walsheim-Regular.woff') format('woff'),
+        url('./fonts/GT-Walsheim-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GTWalsheim-Bd';
+    src: url('./fonts/GT-Walsheim-Bold.woff') format('woff'), url('./fonts/GT-Walsheim-Bold.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GTWalsheim-Md';
+    src: url('./fonts/GT-Walsheim-Medium.woff') format('woff'), url('./fonts/GT-Walsheim-Medium.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'NotoSansSC-Rg';
+    src: url('./fonts/notosanssc-regular-webfont.woff') format('woff'),
+        url('./fonts/notosanssc-regular-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'NotoSansSC-Bd';
+    src: url('./fonts/notosanssc-bold-webfont.woff') format('woff'),
+        url('./fonts/notosanssc-bold-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GTWalsheimLC-Rg';
+    src: url('./fonts/GT-Walsheim-LC-Regular.woff') format('woff'),
+        url('./fonts/GT-Walsheim-LC-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GTWalsheimLC-Bd';
+    src: url('./fonts/GT-Walsheim-LC-Bold.woff') format('woff'),
+        url('./fonts/GT-Walsheim-LC-Bold.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}

package/src/assets/main.css

@@ -2,6 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+	font-family: 'GT-Walsheim';
+	src: url('./fonts/GT-Walsheim-Regular.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'GT-Walsheim-Bd';
+	src: url('./fonts/GT-Walsheim-Bold.woff') format('woff');
+}
+
+:root {
+	font-family: 'GT-Walsheim';
+}
+
+.font-bold {
+	font-family: 'GT-Walsheim-Bd';
+}
+
 img {
 	height: inherit;
 }
@@ -16,120 +34,6 @@ div {
 	white-space: pre-wrap;
 }
 
-/* 
-  Tile Collection variant styles.
-  The `variant` is appended to the container class.
-*/
-.tile-collection.IconCard,
-.tile-collection.ImageCard {
-	.tile-content-media {
-		@apply order-1 mb-4;
-		img {
-			@apply mx-auto;
-		}
-	}
-	.tile-content-headline {
-		@apply order-2;
-	}
-	.tile-content-description {
-		@apply order-3;
-	}
-}
-
-.tile-collection.VideoCard {
-	.p-card-title {
-		@apply order-1;
-	}
-
-	.p-card-header {
-		@apply order-2;
-	}
-
-	.p-card-content {
-		@apply order-3;
-	}
-}
-
-.tile-collection.ImageStackedAnimated {
-	.tile-collection-content {
-		@apply flex-col gap-36;
-	}
-	p {
-		@apply leading-snug;
-		word-wrap: break-word;
-	}
-	.tile-content-inner {
-		@apply max-h-80 !flex-row justify-center items-center gap-16;
-		.tile-content-subheadline {
-			@apply hidden;
-		}
-		.tile-content-text {
-			@apply max-w-[450px] space-y-4;
-		}
-	}
-
-	.tile-content-container {
-		@apply flex flex-row items-center justify-center;
-	}
-	img {
-		@apply rounded-full min-w-80;
-	}
-
-	.tile-content-media {
-		@apply relative;
-		img {
-			@apply relative z-10;
-		}
-	}
-	.tile-content:nth-child(odd) {
-		.tile-content-inner {
-			.tile-content-text {
-				@apply *:text-left order-2;
-			}
-			.tile-content-media {
-				@apply order-1;
-				.tile-label {
-					@apply right-0 top-4;
-				}
-
-				&::before {
-					@apply absolute z-0;
-					bottom: -22%;
-					left: -16%;
-					background-repeat: no-repeat;
-					background-position: 0 100%;
-					content: url(https://images.ctfassets.net/qqblaiss500w/5Bp3ySaz0pqR5gLtdxOQoi/db01031466deed9b7b959c08c17e5681/circles1.f3eead2.svg);
-				}
-			}
-		}
-	}
-
-	.tile-content:nth-child(even) {
-		.tile-content-inner {
-			.tile-content-text {
-				@apply *:text-right order-1;
-			}
-			.tile-content-media {
-				.tile-label {
-					@apply left-0 top-4;
-				}
-				@apply order-2;
-				&::before {
-					@apply absolute z-0;
-					top: -12%;
-					left: -28%;
-					background-repeat: no-repeat;
-					background-position: 0 100%;
-					transform: rotate(90deg);
-					content: url(https://images.ctfassets.net/qqblaiss500w/5Bp3ySaz0pqR5gLtdxOQoi/db01031466deed9b7b959c08c17e5681/circles1.f3eead2.svg);
-				}
-			}
-			.tile-content-media {
-			}
-		}
-	}
-}
-
 .carousel.hero {
 	/* 
   This with the content override below puts the indicators

package/src/assets/theme.css

@@ -4,7 +4,7 @@
 	--primary-200: #9375ce;
 	--primary-300: #8869bf;
 	--primary-400: #7d5caf;
-	--primary-500: #734fa0;
+	--primary-500: #8959e3; /* #734fa0 <- old, not quite the same as cordblood */
 	--primary-600: #684291;
 	--primary-700: #5d3581;
 	--primary-800: #522972;
@@ -31,6 +31,10 @@
 	--primary-highlight-opacity: 0.1;
 	--primary-highlight-inverse: var(--primary-700);
 	--primary-highlight-hover-opacity: 0.2;
+
+	--secondary-500: #18a589;
+
+	--secondary: var(--secondary-500);
 }
 .dark {
 	--primary: var(--primary-400);

package/src/components/{types → Accordion}/Accordion.ts

@@ -1,18 +1,20 @@
-import { ClassOverrides } from '.'
+import { ComponentPassthrough } from '../../types'
 import { AccordionItem } from './AccordionItem'
-import { Image } from './Image'
-import { CTA } from './CTA'
+import { Image } from '../Image/Image'
 
-interface AccordionModuleOverrides extends ClassOverrides {
+export interface AccordionPassthrough extends ComponentPassthrough {
 	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
+	iconDefault?: string
+	iconActive?: string
+	type: 'List' | 'Tile'
+	pt?: AccordionPassthrough
 	imageIcon?: Image
 }

package/src/components/Accordion/Accordion.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+// Can potentially merge this and TestimonialModule
+import { type Accordion } from './Accordion'
+import { computed, ref } from 'vue'
+import {
+	combinePassthroughs,
+	AccordionPt,
+} from '../../config/defaultPassthrough'
+
+const props = withDefaults(defineProps<Accordion>(), {
+	iconDefault: 'pi-chevron-down',
+	iconActive: 'pi-chevron-up',
+})
+
+const computedIconDefault = computed(() => {
+	return props.type === 'List' ? 'pi-chevron-down' : 'pi-plus-circle'
+})
+
+const computedIconActive = computed(() => {
+	return props.type === 'List' ? 'pi-chevron-up' : 'pi-times-circle'
+})
+
+const pt = computed(() =>
+	combinePassthroughs(AccordionPt[props.type], props.pt ?? {})
+)
+const openAccordionIndex = ref<number | null>(null)
+const toggleAccordion = (index: number) => {
+	openAccordionIndex.value = openAccordionIndex.value === index ? null : index
+}
+</script>
+
+<template>
+	<component
+		:is="isChild ? 'div' : 'section'"
+		:class="`accordion-module ${pt?.root ?? ''}`"
+	>
+		<h3
+			v-if="headline"
+			:class="`accordion-module-headline ${pt?.headline ?? ''}`"
+		>
+			{{ headline }}
+		</h3>
+		<div
+			v-if="modules"
+			:class="`accordion-module-container flex ${pt?.container ?? ''}`"
+		>
+			<template
+				v-for="(item, index) in modules"
+				:key="`${item.title}-${index}`"
+			>
+				<component
+					:is="`Accordion${type}Item`"
+					v-bind="item"
+					:item-number="index"
+					:is-first="index === 0"
+					:is-last="index === modules.length - 1"
+					:icon-default="computedIconDefault"
+					:icon-active="computedIconActive"
+					:total-items="modules.length"
+					:open-accordion-index="openAccordionIndex"
+					@toggle-accordion="toggleAccordion(index)"
+				/>
+			</template>
+		</div>
+	</component>
+</template>

package/src/components/Accordion/AccordionItem.ts

@@ -0,0 +1,25 @@
+import { ComponentPassthrough } from '../../types'
+import { Image } from '../Image/Image'
+
+export interface AccordionItemPassthrough extends ComponentPassthrough {
+	icon?: string
+	button?: string
+	image?: string
+}
+
+export interface AccordionItem {
+	__typename?: 'AccordionItem'
+	itemNumber?: number
+	title?: string
+	content?: string
+	pt?: AccordionItemPassthrough
+	isFirst?: boolean
+	isLast?: boolean
+	iconActive?: string
+	iconDefault?: string
+	totalItems?: number
+	isListType?: boolean
+	openAccordionIndex?: number | null
+	toggleAccordion?: (index: number) => void
+	Image?: Image
+}

package/src/components/Accordion/AccordionItem.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { type AccordionItem } from './AccordionItem'
+import { computed, ref } from 'vue'
+import {
+	combinePassthroughs,
+	AccordionItemPt,
+} from '../../config/defaultPassthrough'
+
+const props = withDefaults(defineProps<AccordionItem>(), { totalItems: 4 })
+const pt = computed(() => combinePassthroughs(AccordionItemPt, props.pt ?? {}))
+const showDescription = ref(false)
+
+const emit = defineEmits(['toggleAccordion'])
+
+const toggleAccordion = (index: number) => {
+	emit('toggleAccordion', index)
+}
+</script>
+
+<template isListType>
+	<div
+		v-if="isListType"
+		:class="{
+			[`accordion-item-${itemNumber}`]: true,
+			active: showDescription,
+			first: isFirst,
+			last: isLast,
+		}"
+		class="accordion-item group"
+	>
+		<h3
+			:id="`accordion-collapse-headline-${itemNumber}`"
+			:class="`flex accordion-item-headline ${pt?.headline ?? ''}`"
+		>
+			<button
+				type="button"
+				:class="`flex items-center w-full ${pt?.button ?? ''} justify-between`"
+				data-accordion-target="#accordion-collapse-body-1"
+				:aria-expanded="true"
+				:aria-controls="`accordion-collapse-body-${itemNumber}`"
+				@click.prevent="showDescription = !showDescription"
+			>
+				<span>{{ title }}</span>
+				<div :class="`${pt?.icon ?? ''}`">
+					<i v-show="!showDescription" :class="`pi ${iconDefault}`"></i>
+					<i v-show="showDescription" :class="`pi ${iconActive}`"></i>
+				</div>
+			</button>
+		</h3>
+		<div
+			:id="`accordion-collapse-body-${itemNumber}`"
+			:class="`accordion-item-body ${showDescription ? 'show' : 'hidden'} ${pt?.content ?? ''}`"
+			:aria-labelledby="`accordion-collapse-heading-${itemNumber}`"
+		>
+			{{ content }}
+		</div>
+	</div>
+
+	<div
+		v-else
+		:class="{
+			[`accordion-item-${itemNumber}`]: true,
+			active: openAccordionIndex === itemNumber,
+			first: isFirst,
+			last: isLast,
+			[`accordion-item-width-${Math.floor(100 / props.totalItems)}`]: true,
+		}"
+		class="accordion-item group"
+	>
+		<h3
+			:id="`accordion-collapse-headline-${itemNumber}`"
+			:class="`flex accordion-item-headline ${pt?.headline ?? ''}`"
+		>
+			<button
+				type="button"
+				:class="`flex items-center w-full ${pt?.button ?? ''} ${props.isListType ? 'justify-between' : 'justify-center'}`"
+				data-accordion-target="#accordion-collapse-body-1"
+				:aria-expanded="openAccordionIndex === itemNumber"
+				:aria-controls="`accordion-collapse-body-${itemNumber}`"
+				@click.prevent="toggleAccordion(itemNumber as number)"
+			>
+				<span>{{ title }}</span>
+
+				<div :class="`${pt?.icon ?? ''}`">
+					<i
+						v-show="openAccordionIndex !== itemNumber"
+						:class="`pi ${iconDefault}`"
+					></i>
+					<i
+						v-show="openAccordionIndex === itemNumber"
+						:class="`pi ${iconActive}`"
+					></i>
+				</div>
+			</button>
+		</h3>
+		<div
+			:id="`accordion-collapse-body-${itemNumber}`"
+			:class="`accordion-item-body ${openAccordionIndex !== itemNumber ? 'hidden' : 'active'} ${pt?.content ?? ''}`"
+			:aria-labelledby="`accordion-collapse-heading-${itemNumber}`"
+		>
+			{{ content }}
+		</div>
+	</div>
+</template>

package/src/components/{AccordionItem.vue → Accordion/AccordionListItem.vue}

@@ -1,14 +1,24 @@
 <script setup lang="ts">
-import { type AccordionItem } from './types/AccordionItem'
+import { type AccordionItem } from './AccordionItem'
 import { computed, ref } from 'vue'
+import ImageComponent from '../Image/Image.vue'
+import {
+	combinePassthroughs,
+	AccordionListItemPt,
+} from '../../config/defaultPassthrough'
 
 const props = defineProps<AccordionItem>()
+const pt = computed(() =>
+	combinePassthroughs(AccordionListItemPt, props.pt ?? {})
+)
+
 const showDescription = ref(false)
 </script>
 
 <template>
 	<div
 		:class="{
+			[`${pt?.root ?? ''}`]: true,
 			[`accordion-item-${itemNumber}`]: true,
 			active: showDescription,
 			first: isFirst,
@@ -16,15 +26,14 @@ const showDescription = ref(false)
 		}"
 		class="accordion-item group"
 	>
-		<h3
-			:class="`flex accordion-item-headline ${pt?.headline ?? ''}`"
+		<div
 			:id="`accordion-collapse-headline-${itemNumber}`"
+			:class="`flex accordion-item-headline ${pt?.headline ?? ''}`"
 		>
-			<img
-				v-if="imageIcon"
-				:src="imageIcon.src"
-				alt="imageIcon.alt"
-				:class="` ${pt.imageIcon}`"
+			<ImageComponent
+				v-if="Image"
+				v-bind="Image"
+				:class="`${pt?.image ?? ''}`"
 			/>
 			<button
 				type="button"
@@ -35,13 +44,12 @@ const showDescription = ref(false)
 				@click.prevent="showDescription = !showDescription"
 			>
 				<span>{{ title }}</span>
-				<IconChevron
-					:class="`accordion-icon ps-5 ${pt?.icon ?? ''}`"
-					:orientation="showDescription ? 'up' : 'down'"
-					:bold="true"
-				/>
+				<div :class="pt?.icon">
+					<i v-show="!showDescription" :class="`pi pi-chevron-down`"></i>
+					<i v-show="showDescription" :class="`pi pi-chevron-up`"></i>
+				</div>
 			</button>
-		</h3>
+		</div>
 		<div
 			:id="`accordion-collapse-body-${itemNumber}`"
 			:class="`accordion-item-body ${!showDescription ? 'hidden' : 'active'} ${pt?.content ?? ''}`"