Merge pull request #107 from amir78729/docs/jsdoc/divider

docs: add JSDoc to `divider` component

Author: amir78729

src/divider/divider.stories.ts

@@ -1,9 +1,9 @@
-import { html, TemplateResult } from "lit";
-import "./index.js";
+import { html, TemplateResult } from 'lit';
+import './index.js';
 
 export default {
-  title: "Divider",
-  component: "tap-divider",
+  title: 'Divider',
+  component: 'tap-divider',
   argTypes: {},
 };
 

src/divider/divider.style.ts

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from 'lit';
 
 export default css`
   :host {
@@ -17,21 +17,27 @@ export default css`
 
   :host {
     display: block;
-    background-color: var(--tap-sys-color-border-primary);
+    background-color: var(
+      --tap-divider-background-color,
+      var(--tap-sys-color-border-primary)
+    );
     width: 100%;
-    margin: var(--tap-sys-spacing-4) 0;
+    margin: var(--tap-divider-margin, var(--tap-sys-spacing-4)) 0;
   }
 
-  :host([type="thin"]) {
-    height: var(--tap-sys-spacing-1);
+  :host([type='thin']) {
+    height: var(--tap-divider-thin-height, var(--tap-sys-spacing-1));
   }
 
-  :host([type="medium"]) {
-    height: var(--tap-sys-spacing-2);
+  :host([type='medium']) {
+    height: var(--tap-divider-medium-height, var(--tap-sys-spacing-2));
   }
 
-  :host([type="bold"]) {
-    background-color: var(--tap-sys-color-surface-secondary);
-    height: var(--tap-sys-spacing-4);
+  :host([type='bold']) {
+    background-color: var(
+      --tap-divider-bold-background-color,
+      var(--tap-sys-color-surface-secondary)
+    );
+    height: var(--tap-divider-bold-height, var(--tap-sys-spacing-4));
   }
 `;

src/divider/divider.ts

@@ -1,11 +1,11 @@
-import { LitElement } from "lit";
-import { property } from "lit/decorators.js";
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 
 export class Divider extends LitElement {
-  @property({ reflect: true }) type: "thin" | "medium" | "bold" = "medium";
+  @property({ reflect: true }) type: 'thin' | 'medium' | 'bold' = 'medium';
 
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "separator");
+    this.setAttribute('role', 'separator');
   }
 }

src/divider/index.ts

@@ -1,14 +1,45 @@
-import { customElement } from "lit/decorators.js";
-import { Divider } from "./divider.js";
-import styles from "./divider.style.js";
+import { customElement } from 'lit/decorators.js';
+import { Divider } from './divider.js';
+import styles from './divider.style.js';
 
-@customElement("tap-divider")
+/**
+ * ### Example
+ *
+ *
+ * ##### Simple
+ *
+ * ```html
+ * <tap-divider></tap-divider>
+ * ```
+ *
+ * ##### Different Types
+ *
+ * ```html
+ * <tap-divider type="thin"></tap-divider>
+ * <tap-divider type="medium"></tap-divider>
+ * <tap-divider type="bold"></tap-divider>
+ * ```
+ *
+ * @summary A divider component used to separate content.
+ *
+ * @prop {`'thin'` \| `'medium'` \| `'bold'`} [`type`=`'medium'`] - The thickness of the divider.
+ *
+ * @csspart [`divider`] - The main container for the divider.
+ *
+ * @cssprop [`--tap-divider-background-color`=`--tap-sys-color-border-primary`] - The background color of the divider.
+ * @cssprop [`--tap-divider-margin`=`--tap-sys-spacing-4`] - The margin around the divider.
+ * @cssprop [`--tap-divider-thin-height`=`--tap-sys-spacing-1`] - The height of the thin divider.
+ * @cssprop [`--tap-divider-medium-height`=`--tap-sys-spacing-2`] - The height of the medium divider.
+ * @cssprop [`--tap-divider-bold-background-color`=`--tap-sys-color-surface-secondary`] - The background color of the bold divider.
+ * @cssprop [`--tap-divider-bold-height`=`--tap-sys-spacing-4`] - The height of the bold divider.
+ */
+@customElement('tap-divider')
 export class TapDivider extends Divider {
   static readonly styles = [styles];
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "tap-divider": TapDivider;
+    'tap-divider': TapDivider;
   }
 }