@cooperco/cooper-component-library 0.0.10

package/README.md

@@ -0,0 +1,11 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+
+### TODO issues
+
+- There are many places where `class` is not recognized by Typescript. Examples are "start"/"end" in ContainerModule. This is because we are not defining `class` on the component types. Defining them explicitly overrides the default Attribute Inheritance behavior of Vue. Need to find a way to get around this

package/package.json

@@ -0,0 +1,85 @@
+{
+	"name": "@cooperco/cooper-component-library",
+	"private": false,
+	"version": "0.0.10",
+	"type": "module",
+	"files": [
+		"dist",
+		"src/components/",
+		"src/presets/",
+		"src/assets/"
+	],
+	"main": "./dist/component-lib.umd.cjs",
+	"module": "./dist/component-lib.js",
+	"exports": {
+		".": {
+			"import": "./dist/component-lib.js",
+			"require": "./dist/component-lib.umd.cjs"
+		},
+		"./dist/style.css": {
+			"import": "./dist/style.css",
+			"require": "./dist/style.css"
+		},
+		"./components/*": "./dist/components/*",
+		"./presets/*": "./dist/presets/*",
+		"./assets/*": "./dist/assets/*"
+	},
+	"scripts": {
+		"dev": "vite",
+		"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"
+	},
+	"dependencies": {
+		"@primevue/themes": "^4.0.0",
+		"primevue": "^3.0.0",
+		"vite-plugin-turbosnap": "^1.0.3",
+		"vue": "^3.0.0",
+		"vue-router": "^4.4.0"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^1.4.0",
+		"@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",
+		"@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",
+		"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-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"
+	},
+	"peerDependencies": {
+		"primevue": "^3.0.0",
+		"tailwindcss": "^3.0.0",
+		"vue": "^3.0.0"
+	},
+	"lint-staged": {
+		"*.{js,css,md,ts,vue}": "prettier --write"
+	}
+}

package/src/assets/main.css

@@ -0,0 +1,155 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+img {
+	height: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+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
+  above the content, so that the content is full width. (no padding around it)
+*/
+	.p-carousel-prev,
+	.p-carousel-next {
+		z-index: 10;
+		position: relative;
+	}
+
+	.p-carousel-items-content {
+		width: 100%;
+		margin: 0 -48px;
+	}
+
+	/* Remove the space below the content */
+	.p-carousel-indicators {
+		position: relative;
+		margin-top: -32px;
+		z-index: 10;
+	}
+}

package/src/assets/theme.css

@@ -0,0 +1,67 @@
+:root {
+	--primary-50: #a88fed;
+	--primary-100: #9d82de;
+	--primary-200: #9375ce;
+	--primary-300: #8869bf;
+	--primary-400: #7d5caf;
+	--primary-500: #734fa0;
+	--primary-600: #684291;
+	--primary-700: #5d3581;
+	--primary-800: #522972;
+	--primary-900: #481c62;
+	--primary-950: #3d0f53;
+	--surface-0: rgb(255 255 255);
+	--surface-50: rgb(250 250 250);
+	--surface-100: rgb(244 244 245);
+	--surface-200: rgb(228 228 231);
+	--surface-300: rgb(212 212 216);
+	--surface-400: rgb(161 161 170);
+	--surface-500: rgb(113 113 122);
+	--surface-600: rgb(82 82 91);
+	--surface-700: rgb(63 63 70);
+	--surface-800: rgb(39 39 42);
+	--surface-900: rgb(24 24 27);
+	--surface-950: rgb(9 9 11);
+
+	--primary: var(--primary-500);
+	--primary-inverse: var(--surface-0);
+	--primary-hover: var(--primary-600);
+	--primary-active-color: var(--primary-600);
+
+	--primary-highlight-opacity: 0.1;
+	--primary-highlight-inverse: var(--primary-700);
+	--primary-highlight-hover-opacity: 0.2;
+}
+.dark {
+	--primary: var(--primary-400);
+	--primary-inverse: var(--surface-900);
+	--primary-hover: var(--primary-300);
+	--primary-active-color: var(--primary-300);
+
+	--primary-highlight-opacity: 0.2;
+	--primary-highlight-inverse: var(--surface-0);
+	--primary-highlight-hover-opacity: 0.3;
+}
+
+.customized-primary {
+	&:not(.dark) {
+		--primary: var(--primary-950);
+		--primary-inverse: var(--surface-0);
+		--primary-hover: var(--primary-800);
+		--primary-active-color: var(--primary-900);
+
+		--primary-highlight-opacity: 1;
+		--primary-highlight-inverse: var(--surface-0);
+		--primary-highlight-hover-opacity: 0.8;
+	}
+	&.dark {
+		--primary: var(--primary-50);
+		--primary-inverse: var(--surface-950);
+		--primary-hover: var(--primary-100);
+		--primary-active-color: var(--primary-100);
+
+		--primary-highlight-opacity: 0.1;
+		--primary-highlight-inverse: var(--surface-0);
+		--primary-highlight-hover-opacity: 0.2;
+	}
+}

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/Accordion.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// Can potentially merge this and Testimonial
+import { type Accordion } from './types/Accordion'
+import AccordionItem from './AccordionItem.vue'
+
+defineProps<Accordion>()
+</script>
+
+<template>
+	<component :is="isChild ? 'div' : 'section'" class="accordion-module">
+		<h3
+			v-if="headline"
+			:class="`accordion-module-headline ${pt?.headline ?? ''}`"
+		>
+			{{ headline }}
+		</h3>
+		<div
+			v-if="modules"
+			:class="`accordion-module-container container ${type === 'List' ? 'flex-col' : ''} flex ${pt?.container ?? ''}`"
+		>
+			<template v-for="(item, index) in modules">
+				<AccordionItem
+					:itemNumber="index"
+					:isFirst="index === 0"
+					:isLast="index === modules.length - 1"
+					v-bind="item"
+				/>
+			</template>
+		</div>
+	</component>
+</template>
+
+<style></style>

package/src/components/AccordionItem.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { type AccordionItem } from './types/AccordionItem'
+import { computed, ref } from 'vue'
+
+const props = defineProps<AccordionItem>()
+const showDescription = ref(false)
+</script>
+
+<template>
+	<div
+		:class="{
+			[`accordion-item-${itemNumber}`]: true,
+			active: showDescription,
+			first: isFirst,
+			last: isLast,
+		}"
+		class="accordion-item group"
+	>
+		<h3
+			:class="`flex accordion-item-headline ${pt?.headline ?? ''}`"
+			:id="`accordion-collapse-headline-${itemNumber}`"
+		>
+			<img
+				v-if="imageIcon"
+				:src="imageIcon.src"
+				alt="imageIcon.alt"
+				:class="` ${pt.imageIcon}`"
+			/>
+			<button
+				type="button"
+				:class="`flex items-center justify-between w-full ${pt?.button ?? ''}`"
+				data-accordion-target="#accordion-collapse-body-1"
+				aria-expanded="true"
+				:aria-controls="`accordion-collapse-body-${itemNumber}`"
+				@click.prevent="showDescription = !showDescription"
+			>
+				<span>{{ title }}</span>
+				<IconChevron
+					:class="`accordion-icon ps-5 ${pt?.icon ?? ''}`"
+					:orientation="showDescription ? 'up' : 'down'"
+					:bold="true"
+				/>
+			</button>
+		</h3>
+		<div
+			:id="`accordion-collapse-body-${itemNumber}`"
+			:class="`accordion-item-body ${!showDescription ? 'hidden' : 'active'} ${pt?.content ?? ''}`"
+			:aria-labelledby="`accordion-collapse-heading-${itemNumber}`"
+		>
+			{{ content }}
+		</div>
+	</div>
+</template>

package/src/components/CTA.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { CTA } from './types/CTA'
+import { CTAOptions } from '../types'
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+const props = defineProps<CTA>()
+
+const buttonTypeValue = computed(() => {
+	return CTAOptions[props?.buttonType]
+})
+
+const fullClassname = computed(() => `cta ${props.class ?? ''}`)
+
+const computedStyle = computed(() => {
+	return {
+		color: props.textColor,
+		'background-color':
+			buttonTypeValue.value == CTAOptions.fill ? props.color : 'transparent',
+		'border-color':
+			buttonTypeValue.value != CTAOptions.link ? props.color : 'transparent',
+	}
+})
+
+// Update to support url vs page
+const url = computed(() => {
+	return props?.url?.link
+})
+</script>
+
+<template>
+	<Button
+		:class="fullClassname"
+		:label="title"
+		:style="computedStyle"
+		:aria-label="ariaLabel"
+		:link="buttonTypeValue == CTAOptions.link"
+	/>
+</template>

package/src/components/CarouselModule.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Carousel as CarouselType } from './types/CarouselModule'
+import Carousel from 'primevue/carousel'
+import { computed } from 'vue'
+// import { getComponent } from '../utils/getComponent'
+
+// Still need to figure out how to configure where buttons go
+// as defaults do not match cordblood site.
+
+const props = withDefaults(defineProps<CarouselType>(), {
+	variant: 'Default',
+})
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		'background-image': `url(${props.backgroundImage ?? ''})`,
+		'background-size': 'cover',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<Carousel
+		:value="modules"
+		:numVisible="1"
+		:numScroll="1"
+		:style="computedStyle"
+		:class="`carousel ${variant.toLowerCase()}`"
+		:pt:item:class="`carousel-item w-full ${pt?.item ?? ''}`"
+	>
+		<template v-if="headline" #header>
+			<h2 :class="`carousel-headline ${pt?.headline ?? ''}`">{{ headline }}</h2>
+		</template>
+		<template v-for="(item, index) in modules" #item="slotProps">
+			<component
+				v-bind="slotProps.data"
+				:is="slotProps.data.__typename"
+				:isChild="true"
+			/>
+		</template>
+		<template #footer></template>
+		<template #nexticon></template>
+	</Carousel>
+</template>

package/src/components/ContainerCollectionModule.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ContainerCollectionModule } from './types/ContainerCollectionModule'
+
+const props = defineProps<ContainerCollectionModule>()
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+	}
+})
+</script>
+
+<template>
+	<section class="container-collection" :style="computedStyle">
+		<h2
+			v-if="headline"
+			:class="`container-collection-headline ${pt?.headline}`"
+		>
+			{{ headline }}
+		</h2>
+		<div
+			:class="`container-collection-content mx-auto container ${pt?.content}`"
+		>
+			<component
+				v-for="subModule in modules"
+				:is="subModule.__typename"
+				v-bind="subModule"
+				:isChild="true"
+			/>
+		</div>
+	</section>
+</template>

package/src/components/ContainerModule.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ContainerModule as ContainerModuleType } from './types/ContainerModule'
+import { VariantOptions, MediaOptions } from '../types'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<ContainerModuleType>(), {
+	isChild: false,
+	variant: 'Centered',
+})
+
+const isHero = computed(() => {
+	return VariantOptions[props.variant] === VariantOptions.Hero
+})
+
+const isCentered = computed(() => {
+	return VariantOptions[props.variant] === VariantOptions.Centered
+})
+
+const mediaTypeLeftValue = computed(() => {
+	if (!props?.start?.mediaType) {
+		return null
+	}
+	return MediaOptions[props.start.mediaType]
+})
+
+const mediaTypeRightValue = computed(() => {
+	if (!props?.end?.mediaType) {
+		return null
+	}
+	return MediaOptions[props.end.mediaType]
+})
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		'background-image': `url(${props.backgroundImage ?? ''})`,
+		'background-size': 'cover',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<component
+		:is="isChild ? 'div' : 'section'"
+		:style="computedStyle"
+		class="container-module"
+	>
+		<div
+			:class="`container-module-inner h-full ${isHero ? 'container' : ''} mx-auto ${pt?.inner ?? ''}`"
+		>
+			<h2
+				v-if="headline"
+				:class="`container-module-headline ${isCentered ? 'text-center' : ''} ${pt?.headline ?? ''}`"
+			>
+				{{ headline }}
+			</h2>
+
+			<p
+				v-if="subHeadline"
+				:class="`container-module-subheadline ${isCentered ? 'text-center' : ''} ${pt?.subheadline ?? ''}`"
+			>
+				{{ subHeadline }}
+			</p>
+
+			<div
+				:class="`container-module-content flex flex-row gap-5 h-full ${pt?.content ?? ''}`"
+			>
+				<template v-if="fullWidthContent">
+					<div
+						:class="`container-module ${pt?.fullWidthContent ?? ''} ${isCentered ? 'mx-auto' : ''}`"
+					>
+						<template v-if="fullWidthContent?.mediaType">
+							<component :is="mediaTypeLeftValue" :="fullWidthContent" />
+						</template>
+						<template v-else-if="fullWidthContent.__typename">
+							<component
+								v-bind="fullWidthContent"
+								:is="fullWidthContent.__typename"
+								:isChild="true"
+							/>
+						</template>
+					</div>
+				</template>
+
+				<template v-else>
+					<div
+						v-if="start"
+						:class="`container-module-start basis-1/2 ${pt?.start ?? ''}`"
+					>
+						<template v-if="start?.mediaType">
+							<component :is="mediaTypeLeftValue" :="start" />
+						</template>
+						<template v-else-if="start?.__typename">
+							<component
+								v-bind="start"
+								:is="start.__typename"
+								:isChild="true"
+							/>
+						</template>
+					</div>
+
+					<div :class="`container-module-end basis-1/2 ${pt?.end ?? ''}`">
+						<template v-if="end?.mediaType">
+							<component :is="mediaTypeRightValue" :="end" />
+						</template>
+						<template v-else-if="end?.__typename">
+							<component v-bind="end" :is="end.__typename" :isChild="true" />
+						</template>
+					</div>
+				</template>
+			</div>
+		</div>
+		<slot />
+	</component>
+</template>

package/src/components/ContentAndImage.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// Can potentially merge this and Testimonial
+import { type ContentAndImage } from './types/ContentAndImage'
+import { computed } from 'vue'
+import ContentModule from './ContentModule.vue'
+
+const props = defineProps<ContentAndImage>()
+
+const computedStyle = computed(() => {
+	return {
+		'background-color': props.backgroundColor ?? 'transparent',
+		color: props.textColor ?? 'inherit',
+	}
+})
+</script>
+
+<template>
+	<component
+		:is="isChild ? 'div' : 'section'"
+		:style="computedStyle"
+		class="content-and-image"
+	>
+		<div
+			class="content-and-image-inner container flex flex-col lg:flex-row content-between justify-between mx-auto"
+			:class="{ 'text-center': fullWidthContent }"
+		>
+			<div v-if="content" class="content">
+				<ContentModule :="content" />
+			</div>
+
+			<img v-if="image" class="image" :="image" />
+		</div>
+	</component>
+</template>