@cooperco/cooper-component-library 0.1.0 → 0.1.1

package/package.json

@@ -1,94 +1,94 @@
 {
-	"name": "@cooperco/cooper-component-library",
-	"private": false,
-	"version": "0.1.0",
-	"type": "module",
-	"files": [
-		"dist",
-		"src/components/",
-		"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/*",
-		"./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",
-		"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"
-	},
-	"devDependencies": {
-		"@cooperco/contentful-cli-migrations": "^0.5.0",
-		"@chromatic-com/storybook": "^1.6.1",
-		"@eslint/js": "^9.4.0",
-		"@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.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.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",
-		"vue-eslint-parser": "^9.4.3",
-		"vue-router": "^4.4.3",
-		"vue-tsc": "^2.0.29"
-	},
-	"peerDependencies": {
-		"primevue": "^3.0.0",
-		"tailwindcss": "^3.0.0",
-		"vue": "^3.0.0"
-	},
-	"lint-staged": {
-		"*.{json,js,ts,jsx,tsx,html,vue}": [
-			"prettier --write --ignore-unknown"
-		]
-	}
-}
+  "name": "@cooperco/cooper-component-library",
+  "private": false,
+  "version": "0.1.1",
+  "type": "module",
+  "files": [
+    "dist",
+    "src/components/",
+    "src/assets/",
+    "src/config/"
+  ],
+  "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/*",
+    "./assets/*": "./dist/assets/*"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@cooperco/contentful-cli-migrations": "^0.5.0",
+    "@eslint/js": "^9.4.0",
+    "@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.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.2.8",
+    "storybook-vue3-router": "^5.0.0",
+    "tailwind-config-viewer": "^2.0.2",
+    "tailwindcss": "^3.4.4",
+    "typescript": "~5.3.3",
+    "typescript-eslint": "^7.17.0",
+    "unplugin-vue-components": "^0.27.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",
+    "tailwindcss": "^3.0.0",
+    "vue": "^3.0.0"
+  },
+  "lint-staged": {
+    "*.{json,js,ts,jsx,tsx,html,vue}": [
+      "prettier --write --ignore-unknown"
+    ]
+  },
+  "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",
+    "lint": "eslint . --no-fix",
+    "lint:fix": "eslint . --fix --quiet"
+  }
+}

package/src/config/defaultPassthrough.ts

@@ -0,0 +1,261 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { twMerge } from 'tailwind-merge'
+import { ComponentPassthrough } from '../types'
+import { ContainerModulePassthrough } from '../components/ContainerModule/ContainerModule'
+import { AccordionItemPassthrough } from '../components/Accordion/AccordionItem'
+import { AccordionPassthrough } from '../components/Accordion/Accordion'
+import { CarouselPassthrough } from '../components/CarouselModule/CarouselModule'
+import { ContentModulePassthrough } from '../components/ContentModule/ContentModule'
+import { TestimonialModulePassthrough } from '../components/TestimonialModule/TestimonialModule'
+import { TileContentPassthrough } from '../components/TileContent/TileContent'
+import { CTAPassthrough } from '../components/CTA/CTA'
+
+export const DEFAULT_PASSTHROUGH: ComponentPassthrough = {
+	headline:
+		'mb-12 text-4xl md:text-5xl font-bold leading-tight text-center text-primary',
+	subheadline: 'mb-2',
+	content: '',
+	description: '',
+	start: '',
+	center: '',
+	end: '',
+	container: 'max-w-[1024px] mx-auto',
+}
+
+interface GenericComponentPassthrough
+	extends ComponentPassthrough,
+		AccordionPassthrough,
+		AccordionItemPassthrough,
+		CarouselPassthrough,
+		ContainerModulePassthrough,
+		ContentModulePassthrough,
+		CTAPassthrough,
+		TestimonialModulePassthrough,
+		TileContentPassthrough {}
+
+/**
+ * TODO: Need to define the types for the passthroughs.
+ * REMOVE eslint-disable once types are defined
+ */
+export const combinePassthroughs = <
+	PtType extends GenericComponentPassthrough,
+	OverrideType extends GenericComponentPassthrough,
+>(
+	passthrough: PtType,
+	overrides: OverrideType
+) => {
+	const built: GenericComponentPassthrough = {}
+
+	// First combine the core passthroughs
+	for (const key in passthrough) {
+		;(built as any)[key] = twMerge(
+			(passthrough as any)[key] ?? '',
+			(overrides as any)[key] ?? ''
+		)
+	}
+
+	// Combine any overrides
+	for (const key in overrides) {
+		;(built as any)[key] = twMerge(
+			(built as any)[key] ?? '',
+			(overrides as any)[key] ?? ''
+		)
+	}
+
+	return built
+}
+
+export interface AccordionPtVariants {
+	List: AccordionPassthrough
+	Tile: AccordionPassthrough
+}
+
+export const AccordionPt: AccordionPtVariants = {
+	List: combinePassthroughs(DEFAULT_PASSTHROUGH, {
+		container: 'flex flex-col',
+	}),
+	Tile: combinePassthroughs(DEFAULT_PASSTHROUGH, {
+		container: 'flex flex-wrap gap-4 items-stretch relative',
+		// we should make the "has-.." class programmatic, so it goes off the height of the opened item.
+		root: 'mb-0 relative transition-all duration-200 has-[.active]:mb-[550px]',
+	}),
+}
+
+export const AccordionItemPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	headline: 'text-lg md:text-lg mb-0 *:text-left',
+	image: 'w-14 mr-4',
+})
+
+export const AccordionListItemPt = combinePassthroughs(AccordionItemPt, {
+	root: 'border-b first:border-t first:border-t-black border-b-black',
+	headline:
+		'text-primary-950 text-xl md:text-xl py-6 pr-2 *:text-left font-bold ',
+	icon: 'text-primary-950',
+	content: 'pb-6',
+})
+
+export const AccordionTileItemPt = combinePassthroughs(AccordionItemPt, {
+	root: ' w-full md:w-[23%]',
+	headline:
+		'transition-height mb-0 h-[90%] duration-200 py-16 md:text-3xl text-3xl text-center relative rounded-2xl text-white h-[90%] bg-primary group-[.active]:rounded-t-2lg group-[.active]:rounded-b-none group-[.active]:h-full flex items-center justify-center',
+	button:
+		'h-full w-fit text-center *:text-center justify-center md:*:[word-spacing:100px]', // word-spacing so that text wraps when not in mobile
+	icon: 'absolute top-4 right-6',
+	content:
+		'group-[.first]:rounded-tl-none group-[.last]:rounded-tr-none transition-opacity duration-200 opacity-0 left-0 absolute w-full p-12 text-white rounded-2xl bg-primary group-[.active]:opacity-100',
+})
+
+export const CarouselModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const CarouselModuleAltPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const ContainerCollectionModulePt = combinePassthroughs(
+	DEFAULT_PASSTHROUGH,
+	{
+		root: 'px-8 md:px-0',
+		content: 'max-w-[1024px]',
+	}
+)
+
+export interface ContainerModulePtVariants {
+	Hero: ContainerModulePassthrough
+	Centered: ContainerModulePassthrough
+}
+
+export const ContainerModulePt: ContainerModulePtVariants = {
+	Centered: combinePassthroughs(DEFAULT_PASSTHROUGH, {
+		root: 'px-8 md:px-0',
+		inner: 'h-full mx-auto max-w-[1024px]',
+		fullWidthContent: 'max-w-full w-full',
+	}),
+	Hero: combinePassthroughs(DEFAULT_PASSTHROUGH, {
+		root: 'md:h-[500px] mb-12',
+		inner: 'md:flex md:items-center h-full py-16 px-4 md:px-16 mb-8',
+		headline:
+			'md:text-left text-primary-950 text-[8.75vmin] md:text-6xl text-center',
+	}),
+}
+
+export const ContentModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	root: 'p-5',
+	headline: 'mb-4 text-4xl md:text-4xl',
+	description: '',
+	ctas: 'mt-4',
+	cta: '',
+})
+
+export interface CTAPtVariants {
+	fill: CTAPassthrough
+	logo: CTAPassthrough
+	link: CTAPassthrough
+	outline: CTAPassthrough
+}
+
+export const CTAPt: CTAPtVariants = {
+	link: {
+		logo: 'p-2 bg-[#18a589] rounded-full',
+	},
+	logo: {
+		logo: 'p-2 bg-[#18a589] rounded-full',
+	},
+	fill: {},
+	outline: {},
+}
+
+export const FooterNavigationPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const ImagePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const LogoCollectionModulePt = combinePassthroughs(
+	DEFAULT_PASSTHROUGH,
+	{}
+)
+
+export const NavigationElementPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	icon: 'ps-2 text-xs',
+})
+
+export const PrimaryNavigationPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})
+
+export const SplitModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	root: 'px-8 md:px-0',
+	content:
+		'max-w-[1024px] flex justify-evenly gap-4 mx-auto flex-col md:flex-row',
+})
+
+export const TestimonialModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	headline: 'text-primary-950',
+	quote: 'text-primary-950 text-lg font-bold',
+	text: 'space-y-4 w-full md:w-1/2',
+	author: 'text-lg text-gray-600',
+	details: 'text-lg text-gray-600',
+	media: 'md:w-1/2 w-full',
+})
+
+export interface TileCollectionPtVariants {
+	IconTile: ComponentPassthrough
+	ImageTile: ComponentPassthrough
+	VideoTile: ComponentPassthrough
+	TextTile: ComponentPassthrough
+	ImageStackedAnimatedTile: ComponentPassthrough
+}
+
+export const TileCollectionModulePt = combinePassthroughs(DEFAULT_PASSTHROUGH, {
+	root: 'px-8 md:px-0',
+})
+
+export const TileContentPt = {
+	root: 'w-full md:w-[48%] lg:w-[30%] relative flex-auto rounded overflow-visible mx-auto shadow-none flex-none !m-0',
+	label:
+		'bg-[#18a589] w-[120px] p-2 rounded-[50%] rounded-lg text-2xl text-white flex items-center justify-center leading-none font-bold absolute right-[-4%] top-8',
+	numericLabel:
+		'absolute rounded-full bg-primary w-[25%] h-[25%] left-4 top-8 md:left-0 md:top-2 text-4xl text-white font-bold flex items-center justify-center',
+	headline: 'mb-4 text-4xl md:text-3xl text-center text-primary-950 font-bold',
+	// media: 'h-auto w-full mx-auto mb-8 flex items-center justify-center',
+	cta: 'text-xl *:font-bold mx-auto text-center font-bold',
+	ctas: 'flex gap-2',
+	container: 'h-full',
+	description: 'leading-normal text-lg',
+	body: 'h-full flex flex-col justify-between',
+	footer: 'font-bold text-center mt-4 space-y-2',
+	footerContent: 'font-bold text-center',
+}
+
+export const TileContentIconTilePt = combinePassthroughs(TileContentPt, {
+	root: 'bg-white rounded-2xl p-8',
+	ctas: 'text-center',
+	media: 'mb-6 mx-auto',
+	numericLabel:
+		'bg-[#18a589] w-[50px] p-2 rounded-[50%] h-[40px] rounded-lg text-3xl md:text-3xl text-white flex items-center justify-center leading-none font-bold absolute left-[-4%] md:left-[-4%] top-8 md:top-8',
+})
+
+export const TileContentImageStackedAnimatedTilePt = combinePassthroughs(
+	TileContentPt,
+	{
+		root: '!w-full',
+		inner: 'justify-center',
+		label:
+			'rounded-full flex items-center justify-center font-bold absolute text-white bg-primary z-20 w-auto w-20 h-20 text-4xl rounded-full font-bold',
+		media: 'flex-[1_0_26%] md:flex-[1_0_20%]',
+		headline: 'font-bold text-left max-w-[400px]',
+		subheadline:
+			'text-[4.5vmin] md:text-3xl font-bold text-white max-w-[400px]',
+		description: 'text-lg max-w-[400px]',
+	}
+)
+export const TileContentImageTilePt = combinePassthroughs(TileContentPt, {
+	media: 'relative mb-4 md:w-3/4 mx-auto',
+})
+export const TileContentTextTilePt = combinePassthroughs(TileContentPt, {
+	ctas: 'flex-col gap-4',
+	description: 'text-center',
+})
+export const TileContentVideoTilePt = combinePassthroughs(TileContentPt, {
+	root: 'bg-white p-8 rounded-xl',
+	headline: 'text-3xl md:text-3xl mb-2 text-primary font-bold',
+	subheadline: 'text-base md:text-base text-primary-950 text-center',
+	media: 'mb-4 mt-6',
+	description: 'text-left',
+})
+
+export const VideoPt = combinePassthroughs(DEFAULT_PASSTHROUGH, {})