Merge pull request #99 from amir78729/feat/badge-wrapper-jsDoc

docs: add JSDoc to `badge-wrapper` component

src/badge-wrapper/badge-wrapper.stories.ts

@@ -1,11 +1,11 @@
-import { html, TemplateResult } from "lit";
-import "./index.js";
-import "../badge";
-import "../button";
+import { html, TemplateResult } from 'lit';
+import './index.js';
+import '../badge';
+import '../button';
 
 export default {
-  title: "Badge",
-  component: "tap-badge-wrapper",
+  title: 'Badge',
+  component: 'tap-badge-wrapper',
   argTypes: {},
 };
 

src/badge-wrapper/badge-wrapper.style.ts

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from 'lit';
 
 export default css`
   .wrapper {

src/badge-wrapper/badge-wrapper.ts

@@ -1,11 +1,11 @@
-import { html, LitElement } from "lit";
+import { html, LitElement } from 'lit';
 
 export class BadgeWrapper extends LitElement {
   render() {
     return html`
-      <span class="wrapper">
+      <span class="wrapper" part="wrapper">
         <slot></slot>
-        <slot class="badge" name="badge"></slot>
+        <slot class="badge" name="badge" part="badge"></slot>
       </span>
     `;
   }

src/badge-wrapper/index.ts

@@ -1,14 +1,37 @@
-import { customElement } from "lit/decorators.js";
-import { BadgeWrapper } from "./badge-wrapper";
-import styles from "./badge-wrapper.style";
+// index.ts
 
-@customElement("tap-badge-wrapper")
+import { customElement } from 'lit/decorators.js';
+import { BadgeWrapper } from './badge-wrapper';
+import styles from './badge-wrapper.style';
+
+/**
+ * ### Example
+ *
+ *
+ * ##### Simple
+ *
+ * ```html
+ * <tap-badge-wrapper>
+ *   <tap-button>Click!</tap-button>
+ *   <tap-badge slot="badge" value="99+"></tap-badge>
+ * </tap-badge-wrapper>
+ * ```
+ *
+ * @summary A wrapper component to position a badge relative to its content.
+ *
+ * @slot - The default slot for the main content.
+ * @slot `badge` - The slot for the badge to be positioned.
+ *
+ * @csspart `wrapper` - The container that wraps the main content and the badge.
+ * @csspart `badge` - The container that positions the badge.
+ */
+@customElement('tap-badge-wrapper')
 export class TapBadgeWrapper extends BadgeWrapper {
   static readonly styles = [styles];
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "tap-badge-wrapper": TapBadgeWrapper;
+    'tap-badge-wrapper': TapBadgeWrapper;
   }
 }