docs: add JSDoc and update custom-elements.json

abdmmar · Dec 26, 2021 · e36c3b1 · e36c3b1
1 parent 0874a77
commit e36c3b1
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 13 deletions.
diff --git a/src/custom-elements.json b/src/custom-elements.json
@@ -115,6 +115,13 @@
           "kind": "class",
           "description": "",
           "name": "WCToastCloseButton",
+          "cssProperties": [
+            {
+              "description": "stroke. Default is #2a2a32;",
+              "name": "--wc-toast-stroke",
+              "default": "#2a2a32"
+            }
+          ],
           "members": [
             {
               "kind": "method",
@@ -134,6 +141,7 @@
             "name": "HTMLElement"
           },
           "tagName": "wc-toast-close-button",
+          "summary": "- button to dismiss toast item",
           "customElement": true
         }
       ],
@@ -164,6 +172,34 @@
           "kind": "class",
           "description": "",
           "name": "WCToastContent",
+          "cssProperties": [
+            {
+              "description": "margin of toast content",
+              "name": "--wc-toast-content-margin",
+              "default": "'4px 10px'"
+            },
+            {
+              "description": "color. Default is #000",
+              "name": "--wc-toast-color",
+              "default": "\"#000\""
+            },
+            {
+              "description": "font-family. Default is 'Roboto', 'Amiri', sans-serif;",
+              "name": "--wc-toast-font-family",
+              "default": "\"'Roboto', 'Amiri', sans-serif\""
+            },
+            {
+              "description": "font-size. Default is 16px",
+              "name": "--wc-toast-font-size",
+              "default": "\"16px\""
+            }
+          ],
+          "slots": [
+            {
+              "description": "add your custom content such as HTMLElement to toast item",
+              "name": "content"
+            }
+          ],
           "members": [
             {
               "kind": "method",
@@ -179,10 +215,20 @@
               "name": "innerHTML"
             }
           ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "message to be displayed in toast item",
+              "name": "message"
+            }
+          ],
           "superclass": {
             "name": "HTMLElement"
           },
           "tagName": "wc-toast-content",
+          "summary": "- message or content to be displayed in toast item",
           "customElement": true
         }
       ],
@@ -213,6 +259,12 @@
           "kind": "class",
           "description": "",
           "name": "WCToastIcon",
+          "slots": [
+            {
+              "description": "Put your custom svg icon here",
+              "name": "svg"
+            }
+          ],
           "members": [
             {
               "kind": "method",
@@ -242,10 +294,20 @@
               "name": "innerHTML"
             }
           ],
+          "attributes": [
+            {
+              "type": {
+                "text": "'blank' | 'success' | 'loading' | 'error' | 'custom' | 'svg'"
+              },
+              "description": "type of icon",
+              "name": "type"
+            }
+          ],
           "superclass": {
             "name": "HTMLElement"
           },
           "tagName": "wc-toast-icon",
+          "summary": "- custom element to add default icon, custom emoji, or svg icon to toast items",
           "customElement": true
         }
       ],
@@ -276,6 +338,49 @@
           "kind": "class",
           "description": "",
           "name": "WCToastItem",
+          "cssProperties": [
+            {
+              "description": "Background color of toast item and toast icon. Dark theme will use #2a2a32",
+              "name": "--wc-toast-background",
+              "default": "\"#fff\""
+            },
+            {
+              "description": "Stroke color of toast icon svg item (if any). Dark theme will use #f9f9fa",
+              "name": "--wc-toast-stroke",
+              "default": "\"#2a2a32\""
+            },
+            {
+              "description": "Text color of toast item. Dark theme will use #f9f9fa",
+              "name": "--wc-toast-color",
+              "default": "\"#000\""
+            },
+            {
+              "description": "margin of toast content",
+              "name": "--wc-toast-content-margin",
+              "default": "'4px 10px'"
+            },
+            {
+              "description": "color. Default is #000",
+              "name": "--wc-toast-color",
+              "default": "\"#000\""
+            },
+            {
+              "description": "font-family. Default is 'Roboto', 'Amiri', sans-serif;",
+              "name": "--wc-toast-font-family",
+              "default": "\"'Roboto', 'Amiri', sans-serif\""
+            },
+            {
+              "description": "font-size. Default is 16px",
+              "name": "--wc-toast-font-size",
+              "default": "\"16px\""
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "method",
@@ -316,12 +421,20 @@
           "attributes": [
             {
               "name": "class"
+            },
+            {
+              "type": {
+                "text": "'blank' | 'success' | 'loading' | 'error' | 'custom'"
+              },
+              "description": "type of toast items",
+              "name": "type"
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
           "tagName": "wc-toast-item",
+          "summary": "- item component that can be used to display toast notifications",
           "customElement": true
         }
       ],
@@ -350,26 +463,23 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Available toast position:\r\n- top-left\r\n- top-right\r\n- top-center\r\n- bottom-left\r\n- bottom-right\r\n- bottom-center",
+          "description": "",
           "name": "WCToast",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "method",
               "name": "arrangeToastPosition",
               "parameters": [
                 {
-                  "name": "position",
-                  "type": {
-                    "text": "string"
-                  }
+                  "name": "position"
                 }
-              ],
-              "description": "This method is to arrange the toast position based on the position attribute.",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              ]
             },
             {
               "kind": "method",
@@ -387,13 +497,18 @@
           ],
           "attributes": [
             {
-              "name": "position"
+              "name": "position",
+              "type": {
+                "text": "'top-center'|'top-left'|'top-right'|'bottom-center'|'bottom-left'|'bottom-right'"
+              },
+              "description": "toast item elements position"
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
           "tagName": "wc-toast",
+          "summary": "container for toast items",
           "customElement": true
         }
       ],

diff --git a/src/wc-toast-close-button.js b/src/wc-toast-close-button.js
@@ -1,3 +1,10 @@
+/**
+ * @cssprop [--wc-toast-stroke=#2a2a32] - stroke. Default is #2a2a32;
+ *
+ * @summary - button to dismiss toast item
+ *
+ * @tag wc-toast-close-button
+ */
 export default class WCToastCloseButton extends HTMLElement {
   constructor() {
     super();

diff --git a/src/wc-toast-content.js b/src/wc-toast-content.js
@@ -1,3 +1,17 @@
+/**
+ * @attr {string} message - message to be displayed in toast item
+ *
+ * @slot content - add your custom content such as HTMLElement to toast item
+ *
+ * @cssprop [--wc-toast-content-margin='4px 10px'] - margin of toast content
+ * @cssprop [--wc-toast-color="#000"] - color. Default is #000
+ * @cssprop [--wc-toast-font-family="'Roboto', 'Amiri', sans-serif"] - font-family. Default is 'Roboto', 'Amiri', sans-serif;
+ * @cssprop [--wc-toast-font-size="16px"] - font-size. Default is 16px
+ *
+ * @summary - message or content to be displayed in toast item
+ *
+ * @tag wc-toast-content
+ */
 export default class WCToastContent extends HTMLElement {
   constructor() {
     super();

diff --git a/src/wc-toast-icon.js b/src/wc-toast-icon.js
@@ -1,3 +1,12 @@
+/**
+ * @attr {'blank' | 'success' | 'loading' | 'error' | 'custom' | 'svg'} type - type of icon
+ *
+ * @slot svg - Put your custom svg icon here
+ *
+ * @summary - custom element to add default icon, custom emoji, or svg icon to toast items
+ *
+ * @tag wc-toast-icon
+ */
 export default class WCToastIcon extends HTMLElement {
   constructor() {
     super();

diff --git a/src/wc-toast-item.js b/src/wc-toast-item.js
@@ -1,3 +1,20 @@
+/**
+ * @attr {'blank' | 'success' | 'loading' | 'error' | 'custom'} type - type of toast items
+ *
+ * @slot - This is a default/unnamed slot
+ *
+ * @cssprop [--wc-toast-background="#fff"] - Background color of toast item and toast icon. Dark theme will use #2a2a32
+ * @cssprop [--wc-toast-stroke="#2a2a32"] - Stroke color of toast icon svg item (if any). Dark theme will use #f9f9fa
+ * @cssprop [--wc-toast-color="#000"] - Text color of toast item. Dark theme will use #f9f9fa
+ * @cssprop [--wc-toast-content-margin='4px 10px'] - margin of toast content
+ * @cssprop [--wc-toast-color="#000"] - color. Default is #000
+ * @cssprop [--wc-toast-font-family="'Roboto', 'Amiri', sans-serif"] - font-family. Default is 'Roboto', 'Amiri', sans-serif;
+ * @cssprop [--wc-toast-font-size="16px"] - font-size. Default is 16px
+ *
+ * @summary - item component that can be used to display toast notifications
+ *
+ * @tag wc-toast-item
+ */
 export default class WCToastItem extends HTMLElement {
   constructor() {
     super();

diff --git a/src/wc-toast.js b/src/wc-toast.js
@@ -1,3 +1,12 @@
+/**
+ * @attr {'top-center'|'top-left'|'top-right'|'bottom-center'|'bottom-left'|'bottom-right'} position - toast item elements position
+ *
+ * @slot - This is a default/unnamed slot
+ *
+ * @summary container for toast items
+ *
+ * @tag wc-toast
+ */
 export default class WCToast extends HTMLElement {
   constructor() {
     super();