fix: icon for collapse and logic tweaks

Neovici · Jan 31, 2024 · a2248a6 · a2248a6
1 parent 8237e21
commit a2248a6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 14 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,6 +2,6 @@
 {
 	"eslint.validate": [ "javascript" ],
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	}
 }
diff --git 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
@@ -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.