feat: collapsible tab card

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",

src/cosmoz-tab-card.js

@@ -1,6 +1,7 @@
 // @license Copyright (C) 2015 Neovici AB - Apache 2 License
 import { html, component } from '@pionjs/pion';
-
+import '@neovici/cosmoz-collapse';
+import { useState } from 'haunted';
 /**
 
 @demo demo/card.html
@@ -19,8 +20,11 @@ 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>
+
+const CosmozTabCard = ({ heading, canCollapse }) => {
+	const [collapsed, setCollapsed] = useState(false);
+
+	return html` <style>
 			:host {
 				display: block;
 				position: relative;
@@ -60,19 +64,27 @@ const CosmozTabCard = ({ heading }) =>
 		</style>
 
 		<div id="header" part="header">
-			<h1 class="heading" part="heading">
+			<h1
+				class="heading"
+				part="heading"
+				@click=${() => setCollapsed((c) => !c)}
+			>
 				${heading}<slot name="after-title"></slot>
 			</h1>
 			<slot name="card-actions"></slot>
 		</div>
 
 		<div id="content" part="content">
-			<slot></slot>
+			${canCollapse
+				? html`<cosmoz-collapse ?opened=${collapsed}
+						><slot></slot
+				  ></cosmoz-collapse>`
+				: html`<slot></slot>`}
 		</div>`;
-
+};
 customElements.define(
 	'cosmoz-tab-card',
 	component(CosmozTabCard, {
-		observedAttributes: ['heading'],
-	}),
+		observedAttributes: ['heading', 'can-collapse'],
+	})
 );

stories/cosmoz-tab-card.stories.js

@@ -20,7 +20,7 @@ const basics = () => html`
     </cosmoz-tab-card>
   </cosmoz-tab>
   <cosmoz-tab heading="Tab2" name="tab2">
-    <cosmoz-tab-card heading="Card2">
+    <cosmoz-tab-card can-collapse 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.