From 3e60c2046350517c873f87e7951674d2cb24e3e1 Mon Sep 17 00:00:00 2001
From: Carlo Barone <carlo.barone@neovici.se>
Date: Fri, 9 Feb 2024 15:37:39 +0100
Subject: [PATCH] feat(icon): rotating arrow for the dropdown

---
 src/cosmoz-tab-card.js | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/cosmoz-tab-card.js b/src/cosmoz-tab-card.js
index bfe1513..f40ad56 100644
--- a/src/cosmoz-tab-card.js
+++ b/src/cosmoz-tab-card.js
@@ -22,7 +22,7 @@ Custom property                         | Description              | Default
 `--cosmoz-tab-card-content-padding`     | Card content padding     | `initial`
 */
 
-const CosmozTabCard = ({ heading, collapsable, isCollapsed }) => {
+const CosmozTabCard = ({ heading, collapsable, isCollapsed, iconPath }) => {
 	const [collapsed, setCollapsed] = useState(isCollapsed);
 	return html` <style>
 			:host {
@@ -61,25 +61,31 @@ const CosmozTabCard = ({ heading, collapsable, isCollapsed }) => {
 				flex: 1;
 				margin: 0.67em 0 0;
 			}
+			.dropdown-arrow {
+				transform: rotate(-90deg);
+				transition-duration: 0.3s;
+			}
+			.dropdown-arrow[collapsed] {
+				transition-duration: 0.3s;
+				transform: rotate(0);
+			}
 		</style>
 
 		<div id="header" part="header">
 			${when(
 				collapsable,
-				() => html`<svg
-					width="10"
-					height="6"
-					viewBox="0 0 10 6"
-					class="dropdown-arrow"
-					xmlns="http://www.w3.org/2000/svg"
-					@click=${() => setCollapsed((c) => !c)}
-				>
-					<path
-						d="M1 1.00002L5 4.33002L9 1.00002"
-						stroke-width="1.5"
-						stroke-linejoin="round"
-					/>
-				</svg>`
+				() =>
+					html`<svg
+						width="10"
+						height="6"
+						viewBox="0 0 10 6"
+						class="dropdown-arrow"
+						xmlns="http://www.w3.org/2000/svg"
+						?collapsed=${!collapsed}
+						@click=${() => setCollapsed((c) => !c)}
+					>
+						<path d="M1 1.00002L5 4.33002L9 1.00002" stroke-width="1.5" />
+					</svg>`
 			)}
 			<h1 class="heading" part="heading">
 				${heading}<slot name="after-title"></slot>