From e36c3b19d419b007fc74a8c76ab2d85d6b7dbf84 Mon Sep 17 00:00:00 2001 From: abdmmar Date: Sun, 26 Dec 2021 23:43:14 +0700 Subject: [PATCH] docs: add JSDoc and update `custom-elements.json` --- src/custom-elements.json | 141 +++++++++++++++++++++++++++++++---- src/wc-toast-close-button.js | 7 ++ src/wc-toast-content.js | 14 ++++ src/wc-toast-icon.js | 9 +++ src/wc-toast-item.js | 17 +++++ src/wc-toast.js | 9 +++ 6 files changed, 184 insertions(+), 13 deletions(-) diff --git a/src/custom-elements.json b/src/custom-elements.json index eed7727..ec73332 100644 --- 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 index a61ba84..ef1b7ca 100644 --- 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 index 4b9c6be..d3aa0b2 100644 --- 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 index 3cafc48..cd2037b 100644 --- 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 index 154ac74..f803983 100644 --- 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 index f360647..0897333 100644 --- 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();