From 6da66d5db42d5630d4d5c50b7f6f5725bfa97a6a Mon Sep 17 00:00:00 2001
From: Carlo Barone <carlo.barone@neovici.se>
Date: Wed, 31 Jan 2024 16:41:32 +0100
Subject: [PATCH] fix: vscode settings not to be included

---
 src/cosmoz-tab-card.js             | 20 ++++++++------------
 stories/cosmoz-tab-card.stories.js |  2 +-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/cosmoz-tab-card.js b/src/cosmoz-tab-card.js
index a177ce0..54a6140 100644
--- a/src/cosmoz-tab-card.js
+++ b/src/cosmoz-tab-card.js
@@ -22,8 +22,8 @@ Custom property                         | Description              | Default
 `--cosmoz-tab-card-content-padding`     | Card content padding     | `initial`
 */
 
-const CosmozTabCard = ({ heading, collapsable }) => {
-	const [collapsed, setCollapsed] = useState(false);
+const CosmozTabCard = ({ heading, collapsable, collapsed }) => {
+	const [isCollapsed, setCollapsed] = useState(collapsed);
 	return html` <style>
 			:host {
 				display: block;
@@ -65,10 +65,10 @@ const CosmozTabCard = ({ heading, collapsable }) => {
 
 		<div id="header" part="header">
 			${collapsable
-				? html`<input
-						type="checkbox"
-						@change=${() => setCollapsed((c) => !c)}
-				  />`
+				? html`<iron-icon
+						icon="icons:info"
+						@click=${() => setCollapsed((c) => !c)}
+				  ></iron-icon>`
 				: nothing}
 			<h1 class="heading" part="heading">
 				${heading}<slot name="after-title"></slot>
@@ -77,16 +77,12 @@ const CosmozTabCard = ({ heading, collapsable }) => {
 		</div>
 
 		<div id="content" part="content">
-			${collapsable
-				? html`<cosmoz-collapse ?opened=${collapsed}
-						><slot></slot
-				  ></cosmoz-collapse>`
-				: html`<slot></slot>`}
+			<cosmoz-collapse ?opened=${!isCollapsed}><slot></slot></cosmoz-collapse>
 		</div>`;
 };
 customElements.define(
 	'cosmoz-tab-card',
 	component(CosmozTabCard, {
-		observedAttributes: ['heading', 'collapsable'],
+		observedAttributes: ['heading', 'collapsable', 'collapsed'],
 	})
 );
diff --git a/stories/cosmoz-tab-card.stories.js b/stories/cosmoz-tab-card.stories.js
index 360768a..bd9fe3a 100644
--- a/stories/cosmoz-tab-card.stories.js
+++ b/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 collapsable heading="Card2 - Collapsable!">
+    <cosmoz-tab-card collapsable collapsed="false" heading="Card2 - Collapsable!">
       <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.