fix(tab): optional badge

Neovici · May 18, 2022 · 0c0ce5f · 0c0ce5f
1 parent 816992e
commit 0c0ce5f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/next/cosmoz-tab.js b/src/next/cosmoz-tab.js
@@ -1,4 +1,5 @@
-import { html, component, useLayoutEffect } from 'haunted';
+import { component, useLayoutEffect } from 'haunted';
+import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import computeScroll from 'compute-scroll-into-view';
 
@@ -37,7 +38,9 @@ const Tab = (host) => {
 		<a part="link" href=${ifDefined(href)}>
 			<slot id="iconSlot" name="icon"></slot>
 			<slot id="contentSlot"></slot>
-			<span class="badge" part="badge">${badge}</span>
+			${badge
+				? html`<span class="badge" part="badge">${badge}</span>`
+				: nothing}
 		</a>
 	`;
 };

diff --git a/stories/cosmoz-tabs-next.stories.js b/stories/cosmoz-tabs-next.stories.js
@@ -15,10 +15,7 @@ const basics = () => html`
 		<cosmoz-tab-next badge="4" active href="#123">Tab4</cosmoz-tab-next>
 		${Array(6)
 			.fill()
-			.map(
-				(_, i) =>
-					html`<cosmoz-tab-next badge=${5 + i}>Tab ${5 + i}</cosmoz-tab-next>`
-			)}
+			.map((_, i) => html`<cosmoz-tab-next>Tab ${5 + i}</cosmoz-tab-next>`)}
 	</cosmoz-tabs-next>
 `;