From 48287e64cab880c8d39e459aacc7869e3d2c2e23 Mon Sep 17 00:00:00 2001
From: Carlo Barone <carlo.barone@neovici.se>
Date: Mon, 29 Jan 2024 16:52:21 +0100
Subject: [PATCH] feat: collapsible tab card

---
 package-lock.json                  |   6 +
 package.json                       |   1 +
 src/cosmoz-tab-card.js             | 138 +++++++++++++++-------
 src/utils.js                       |  55 +++++----
 stories/cosmoz-tab-card.stories.js | 182 ++++++++++++++++++-----------
 5 files changed, 240 insertions(+), 142 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 75193c5..72c7aa0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "8.0.0",
 			"license": "Apache-2.0",
 			"dependencies": {
+				"@neovici/cosmoz-collapse": "^1.3.0",
 				"@neovici/cosmoz-router": "^11.0.0",
 				"@neovici/cosmoz-utils": "^6.0.0",
 				"@pionjs/pion": "^2.0.0",
@@ -3327,6 +3328,11 @@
 				"typescript": "^5.1.0"
 			}
 		},
+		"node_modules/@neovici/cosmoz-collapse": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@neovici/cosmoz-collapse/-/cosmoz-collapse-1.3.0.tgz",
+			"integrity": "sha512-m+FMz2WW9RYrkBILNA5EE+CDTvo+YqxR7fvZb62Qab9bFScJwTxk/DbmMEL/Dsawr76YjrIfX76Z5DcvEZ468w=="
+		},
 		"node_modules/@neovici/cosmoz-router": {
 			"version": "11.0.0",
 			"resolved": "https://registry.npmjs.org/@neovici/cosmoz-router/-/cosmoz-router-11.0.0.tgz",
diff --git a/package.json b/package.json
index ecb8e6b..60ec4f6 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
 		"./next/*": "./src/next/*"
 	},
 	"dependencies": {
+		"@neovici/cosmoz-collapse": "^1.3.0",
 		"@neovici/cosmoz-router": "^11.0.0",
 		"@neovici/cosmoz-utils": "^6.0.0",
 		"@pionjs/pion": "^2.0.0",
diff --git a/src/cosmoz-tab-card.js b/src/cosmoz-tab-card.js
index 7da5af0..39343a7 100644
--- a/src/cosmoz-tab-card.js
+++ b/src/cosmoz-tab-card.js
@@ -1,5 +1,18 @@
 // @license Copyright (C) 2015 Neovici AB - Apache 2 License
-import { html, component } from '@pionjs/pion';
+import { html, component, useState, useEffect } from '@pionjs/pion';
+import '@neovici/cosmoz-collapse';
+import { when } from 'lit-html/directives/when.js';
+import { css } from './utils';
+
+const collapseIcon = html`<svg
+	width="16"
+	height="16"
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M5 1L10 8L5 15" stroke="#101010" stroke-width="1.5" />
+</svg>`;
 
 /**
 
@@ -19,60 +32,95 @@ Custom property                         | Description              | Default
 `--cosmoz-tab-card-content-line-height` | Card content line height | `initial`
 `--cosmoz-tab-card-content-padding`     | Card content padding     | `initial`
 */
-const CosmozTabCard = ({ heading }) =>
-	html` <style>
-			:host {
-				display: block;
-				position: relative;
-				box-sizing: border-box;
-				background-color: #fff;
-				border-radius: 3px;
-				margin: 15px;
-				align-self: flex-start;
-				padding: var(--cosmoz-tab-card-padding, 0);
-				width: var(--cosmoz-tab-card-width, 300px);
-				box-shadow: var(
-					--cosmoz-shadow-2dp,
-					var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5)
-				);
-			}
-
-			#content {
-				line-height: var(--cosmoz-tab-card-content-line-height, initial);
-				padding: var(--cosmoz-tab-card-content-padding, initial);
-			}
-
-			#header {
-				display: flex;
-				align-items: center;
-				background-color: #fff;
-				cursor: default;
-				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-			}
-
-			.heading {
-				font-family: inherit;
-				font-size: 17px;
-				font-weight: 400;
-				flex: 1;
-				margin: 0.67em 0 0;
-			}
-		</style>
-
-		<div id="header" part="header">
-			<h1 class="heading" part="heading">
+
+const CosmozTabCard = (host) => {
+	const { heading, collapsable, collapsed: isCollapsed } = host,
+		[collapsed, setCollapsed] = useState(Boolean(isCollapsed)),
+		toggleCollapsed = () => collapsable && setCollapsed((c) => !c);
+
+	useEffect(() => {
+		host.toggleAttribute('collapsed', collapsed);
+	}, [collapsed]);
+
+	return html`<div id="header" part="header">
+			${when(
+				collapsable,
+				() => html`
+					<div @click=${toggleCollapsed} part="collapse-icon">
+						<slot name="collapse-icon">${collapseIcon}</slot>
+					</div>
+				`,
+			)}
+			<h1 class="heading" @click=${toggleCollapsed} part="heading">
 				${heading}<slot name="after-title"></slot>
 			</h1>
 			<slot name="card-actions"></slot>
 		</div>
 
 		<div id="content" part="content">
-			<slot></slot>
+			<cosmoz-collapse ?opened=${!collapsed}><slot></slot></cosmoz-collapse>
 		</div>`;
+};
+
+const style = css`
+	:host {
+		display: block;
+		position: relative;
+		box-sizing: border-box;
+		background-color: #fff;
+		border-radius: 3px;
+		margin: 15px;
+		align-self: flex-start;
+		padding: var(--cosmoz-tab-card-padding, 0);
+		width: var(--cosmoz-tab-card-width, 300px);
+		box-shadow: var(
+			--cosmoz-shadow-2dp,
+			var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5)
+		);
+	}
+
+	#content {
+		line-height: var(--cosmoz-tab-card-content-line-height, initial);
+		padding: var(--cosmoz-tab-card-content-padding, initial);
+	}
+
+	#header {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		background-color: #fff;
+		cursor: default;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	}
+
+	.heading {
+		font-family: inherit;
+		font-size: 17px;
+		font-weight: 400;
+		flex: 1;
+	}
+
+	[part='collapse-icon'] {
+		order: var(--cosmoz-tab-card-collapse-icon-order);
+		transition: transform 250ms linear;
+		transform: rotate(90deg);
+	}
+
+	:host([collapsed]) [part='collapse-icon'] {
+		transform: rotate(0deg);
+	}
+
+	:host([collapsable]) [part='collapse-icon'],
+	:host([collapsable]) .heading {
+		cursor: pointer;
+		user-select: none;
+	}
+`;
 
 customElements.define(
 	'cosmoz-tab-card',
 	component(CosmozTabCard, {
-		observedAttributes: ['heading'],
+		observedAttributes: ['heading', 'collapsable', 'collapsed'],
+		styleSheets: [style],
 	}),
 );
diff --git a/src/utils.js b/src/utils.js
index ffb63e5..1adab5c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,5 +1,6 @@
-const isValid = tab => !tab.hidden && !tab.disabled,
+import { tagged } from '@neovici/cosmoz-utils';
 
+const isValid = (tab) => !tab.hidden && !tab.disabled,
 	/**
 	 * Gets the element icon name.
 	 *
@@ -7,10 +8,9 @@ const isValid = tab => !tab.hidden && !tab.disabled,
 	 * @param {boolean} isSelected Is the tab selected
 	 * @returns {string} Name of the element icon.
 	 */
-	getIcon = (tab, isSelected) => isSelected ? tab.selectedIcon ?? tab.icon : tab.icon,
-
-	getName = tab => tab.getAttribute('name'),
-
+	getIcon = (tab, isSelected) =>
+		isSelected ? tab.selectedIcon ?? tab.icon : tab.icon,
+	getName = (tab) => tab.getAttribute('name'),
 	/**
 	 * Gets the element icon style property and value if icon color is
 	 * set, otherwise return nothing.
@@ -18,19 +18,16 @@ const isValid = tab => !tab.hidden && !tab.disabled,
 	 * @param {HTMLElement} tab The tab to compute icon stype for
 	 * @returns {string/void} Style color property and value for the icon.
 	 */
-	getIconStyle = tab => {
+	getIconStyle = (tab) => {
 		const iconColor = tab.iconColor ?? '#15b0d3';
-		return ['color: ' + iconColor, tab.iconStyle]
-			.join(';');
+		return ['color: ' + iconColor, tab.iconStyle].join(';');
 	},
-
-	valid = tabs => tabs.find(isValid),
-
+	valid = (tabs) => tabs.find(isValid),
 	choose = (tabs, selected) => {
 		if (selected == null) {
 			return valid(tabs);
 		}
-		const selectedTab = tabs.find(tab => getName(tab) === selected);
+		const selectedTab = tabs.find((tab) => getName(tab) === selected);
 		if (selectedTab == null) {
 			return valid(tabs);
 		}
@@ -44,21 +41,21 @@ const isValid = tab => !tab.hidden && !tab.disabled,
 		}
 		return fallback;
 	},
-	collect = slot => slot.assignedElements().flatMap(el => {
-		if (el.matches('cosmoz-tab')) {
-			return [el];
-		}
-		if (el.matches('slot')) {
-			return collect(el);
-		}
-		return [];
-	});
+	collect = (slot) =>
+		slot.assignedElements().flatMap((el) => {
+			if (el.matches('cosmoz-tab')) {
+				return [el];
+			}
+			if (el.matches('slot')) {
+				return collect(el);
+			}
+			return [];
+		}),
+	sheet = (...styles) => {
+		const cs = new CSSStyleSheet();
+		cs.replaceSync(styles.join(''));
+		return cs;
+	},
+	css = (strings, ...values) => sheet(tagged(strings, ...values));
 
-export {
-	choose,
-	collect,
-	isValid,
-	getIcon,
-	getIconStyle,
-	getName
-};
+export { choose, collect, isValid, getIcon, getIconStyle, getName, sheet, css };
diff --git a/stories/cosmoz-tab-card.stories.js b/stories/cosmoz-tab-card.stories.js
index 00abd28..47941e9 100644
--- a/stories/cosmoz-tab-card.stories.js
+++ b/stories/cosmoz-tab-card.stories.js
@@ -4,74 +4,120 @@ import '../src/cosmoz-tabs';
 
 export default {
 	title: 'Card',
-	component: 'cosmoz-tab-card'
+	component: 'cosmoz-tab-card',
 };
 
-const basics = () => html`
-<cosmoz-tabs selected="tab2">
-  <cosmoz-tab heading="Tab1" name="tab1">
-    <cosmoz-tab-card heading="Card1">
-      <p>
-        Duis suscipit commodo commodo. Fusce hendrerit gravida urna. Pellentesque facilisis lacinia felis ut auctor.
-        Aenean nec diam tempus, suscipit est ut, finibus nulla. Vestibulum auctor diam risus, at interdum libero ultrices vitae.
-        Suspendisse tincidunt erat a ipsum aliquam, quis consequat tortor rutrum.
-        Morbi sapien erat, mollis a felis eget, faucibus laoreet ante.
-      </p>
-    </cosmoz-tab-card>
-  </cosmoz-tab>
-  <cosmoz-tab heading="Tab2" name="tab2">
-    <cosmoz-tab-card heading="Card2">
-      <p>
-        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce non libero eget lorem interdum lacinia.
-        Vivamus eu libero lacus. Vestibulum blandit ornare orci non imperdiet. Aliquam condimentum lacus mauris, id aliquet lectus faucibus vel.
-        Aliquam luctus vulputate iaculis. Vestibulum eu sagittis nisi, sed gravida ante.
-      </p>
-    </cosmoz-tab-card>
-    <cosmoz-tab-card heading="Card3">
-      <p>
-        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.
-        Sed laoreet mi eget consequat consequat. Fusce pretium ligula vel velit hendrerit sagittis. Aenean imperdiet interdum dolor sit amet dapibus.
-        Suspendisse eget accumsan odio, sit amet facilisis diam. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-        Praesent magna elit, tristique sed consectetur at, tristique nec leo. Nullam sit amet mauris mauris.
-      </p>
-    </cosmoz-tab-card>
-  </cosmoz-tab>
-  <cosmoz-tab heading="Tab3" name="tab3">
-    <cosmoz-tab-card heading="Card4">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum massa ante,
-        maximus in consectetur non, imperdiet ullamcorper risus. Donec vulputate justo nibh.
-        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-        Integer tempor, lorem eget porta maximus, lectus ligula varius eros, non pharetra magna magna
-        vel mauris. Mauris et nunc ligula. Donec quis cursus eros. Nam fermentum dictum erat,
-        quis suscipit dui. Etiam nec velit tellus. Pellentesque sed porttitor orci.
-        Cras eget imperdiet libero.
-      </p>
-    </cosmoz-tab-card>
-    <cosmoz-tab-card heading="Card5">
-      <p>
-        Fusce consectetur nisi at felis finibus rutrum. Vestibulum fermentum pharetra sem,
-        vitae tincidunt est mattis tristique. Donec blandit nulla non tellus tincidunt pretium.
-        Phasellus et purus id dolor venenatis mollis. Vivamus malesuada risus lorem,
-        vitae iaculis mauris viverra non. Integer quam sapien, pulvinar ut porta ac,
-        semper in velit. Donec consectetur, odio a efficitur maximus, nisl felis egestas sapien,
-        eu ullamcorper elit arcu eget urna. Sed ullamcorper felis nibh, in mattis diam iaculis id.
-        Aenean consequat nulla justo, ac commodo nulla congue non. Nam et dui in nunc mattis gravida
-        rutrum ac mauris.
-      </p>
-    </cosmoz-tab-card>
-    <cosmoz-tab-card heading="Card6">
-      <p>
-        Etiam ante dolor, commodo non vestibulum vel, malesuada a nunc. Vestibulum accumsan,
-        sapien eu gravida consectetur, purus felis lobortis massa, id consequat eros lacus sit amet quam.
-        Nunc bibendum elit turpis. Ut et convallis quam, ut elementum enim. Aenean semper mattis enim
-        quis luctus. Vivamus libero urna, dictum non lacus a, porta consequat lacus. Etiam eu nisi diam.
-        Nam varius non ex vitae scelerisque.
-      </p>
-    </cosmoz-tab-card>
-  </cosmoz-tab>
-</cosmoz-tabs>`;
+const alternateIcon = html`<svg
+	slot="collapse-icon"
+	width="11"
+	height="11"
+	viewBox="0 0 11 11"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M4 10L8 5.5L4 1"
+		stroke="black"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
+</svg>`;
 
-export {
-	basics
-};
+const basics = () =>
+	html` <style>
+			body {
+				--cosmoz-tab-card-padding: 1em;
+				font-family: 'Inter' sans-serif;
+			}
+		</style>
+		<cosmoz-tabs selected="tab2">
+			<cosmoz-tab heading="Tab1" name="tab1">
+				<cosmoz-tab-card heading="Card1">
+					<p>
+						Duis suscipit commodo commodo. Fusce hendrerit gravida urna.
+						Pellentesque facilisis lacinia felis ut auctor. Aenean nec diam
+						tempus, suscipit est ut, finibus nulla. Vestibulum auctor diam
+						risus, at interdum libero ultrices vitae. Suspendisse tincidunt erat
+						a ipsum aliquam, quis consequat tortor rutrum. Morbi sapien erat,
+						mollis a felis eget, faucibus laoreet ante.
+					</p>
+				</cosmoz-tab-card>
+			</cosmoz-tab>
+			<cosmoz-tab heading="Tab2" name="tab2">
+				<cosmoz-tab-card collapsable collapsed heading="Card2">
+					<p>
+						Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+						posuere cubilia Curae; Fusce non libero eget lorem interdum lacinia.
+						Vivamus eu libero lacus. Vestibulum blandit ornare orci non
+						imperdiet. Aliquam condimentum lacus mauris, id aliquet lectus
+						faucibus vel. Aliquam luctus vulputate iaculis. Vestibulum eu
+						sagittis nisi, sed gravida ante.
+					</p>
+				</cosmoz-tab-card>
+				<cosmoz-tab-card collapsable heading="Card3">
+					<p>
+						Class aptent taciti sociosqu ad litora torquent per conubia nostra,
+						per inceptos himenaeos. Nulla facilisi. Sed laoreet mi eget
+						consequat consequat. Fusce pretium ligula vel velit hendrerit
+						sagittis. Aenean imperdiet interdum dolor sit amet dapibus.
+						Suspendisse eget accumsan odio, sit amet facilisis diam. Interdum et
+						malesuada fames ac ante ipsum primis in faucibus. Praesent magna
+						elit, tristique sed consectetur at, tristique nec leo. Nullam sit
+						amet mauris mauris.
+					</p>
+				</cosmoz-tab-card>
+			</cosmoz-tab>
+			<cosmoz-tab heading="Tab3" name="tab3">
+				<style>
+					cosmoz-tab[name='tab3'] cosmoz-tab-card {
+						--cosmoz-tab-card-collapse-icon-order: 1;
+					}
+				</style>
+				<cosmoz-tab-card heading="Card4" collapsable collapsed>
+					${alternateIcon}
+
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+						massa ante, maximus in consectetur non, imperdiet ullamcorper risus.
+						Donec vulputate justo nibh. Pellentesque habitant morbi tristique
+						senectus et netus et malesuada fames ac turpis egestas. Integer
+						tempor, lorem eget porta maximus, lectus ligula varius eros, non
+						pharetra magna magna vel mauris. Mauris et nunc ligula. Donec quis
+						cursus eros. Nam fermentum dictum erat, quis suscipit dui. Etiam nec
+						velit tellus. Pellentesque sed porttitor orci. Cras eget imperdiet
+						libero.
+					</p>
+				</cosmoz-tab-card>
+				<cosmoz-tab-card heading="Card5" collapsable>
+					${alternateIcon}
+
+					<em slot="after-title"> Summary</em>
+
+					<p>
+						Fusce consectetur nisi at felis finibus rutrum. Vestibulum fermentum
+						pharetra sem, vitae tincidunt est mattis tristique. Donec blandit
+						nulla non tellus tincidunt pretium. Phasellus et purus id dolor
+						venenatis mollis. Vivamus malesuada risus lorem, vitae iaculis
+						mauris viverra non. Integer quam sapien, pulvinar ut porta ac,
+						semper in velit. Donec consectetur, odio a efficitur maximus, nisl
+						felis egestas sapien, eu ullamcorper elit arcu eget urna. Sed
+						ullamcorper felis nibh, in mattis diam iaculis id. Aenean consequat
+						nulla justo, ac commodo nulla congue non. Nam et dui in nunc mattis
+						gravida rutrum ac mauris.
+					</p>
+				</cosmoz-tab-card>
+				<cosmoz-tab-card heading="Card6">
+					<p>
+						Etiam ante dolor, commodo non vestibulum vel, malesuada a nunc.
+						Vestibulum accumsan, sapien eu gravida consectetur, purus felis
+						lobortis massa, id consequat eros lacus sit amet quam. Nunc bibendum
+						elit turpis. Ut et convallis quam, ut elementum enim. Aenean semper
+						mattis enim quis luctus. Vivamus libero urna, dictum non lacus a,
+						porta consequat lacus. Etiam eu nisi diam. Nam varius non ex vitae
+						scelerisque.
+					</p>
+				</cosmoz-tab-card>
+			</cosmoz-tab>
+		</cosmoz-tabs>`;
+
+export { basics };