fix: add defaults in tsdoc (momentum-design#951)

* fix: add defaults in tsdoc

* minor eslint fix

* Fix eslint

* fix: updated convention doc

* Minor fix

* Minor update

* minor fix in components

* refactored code

packages/components/conventions/component-tsdoc.md

@@ -40,6 +40,11 @@ Usage: can be multiple
 Describes an event that can be emitted by the component, detailing the specific actions or occurrences that can trigger it.
 Usage: can be multiple
 
+### @default
+
+Indicates the initial value a property of the component takes if none is provided.
+Usage: only once
+
 Example:
 
 ```javascript

packages/components/src/components/badge/badge.component.ts

@@ -48,6 +48,7 @@ class Badge extends Component {
   /**
    * Type of the variant can be `primary` or `secondary`.
    * It defines the background and foreground color of the icon.
+   * @default primary
    */
   @property({ type: String, reflect: true })
   variant = DEFAULTS.VARIANT;
@@ -61,6 +62,7 @@ class Badge extends Component {
   /**
    * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
    * The max counter can be `9`, `99` or `999`.
+   * @default 99
    */
   @property({ type: Number, attribute: 'max-counter', reflect: true })
   maxCounter: number = DEFAULTS.MAX_COUNTER;
@@ -69,12 +71,14 @@ class Badge extends Component {
    * Overlay is to add a thin outline to the badge.
    * This will help distinguish between the badge and the button,
    * where the badge will be layered on top of a button.
+   * @default false
    */
   @property({ type: Boolean })
   overlay = false;
 
   /**
    * Aria-label attribute to be set for accessibility
+   * @default null
    */
   @property({ type: String, attribute: 'aria-label' })
   override ariaLabel: string | null = null;

packages/components/src/components/badge/badge.stories.ts

@@ -76,11 +76,6 @@ const meta: Meta = {
       },
       control: 'select',
       options: Object.values(ICON_VARIANT),
-      table: {
-        defaultValue: {
-          summary: DEFAULTS.VARIANT,
-        },
-      },
     },
     'aria-label': {
       control: 'text',

packages/components/src/components/iconprovider/iconprovider.component.ts

@@ -41,23 +41,26 @@ class IconProvider extends Provider<IconProviderContext> {
   url?: string;
 
   /**
-   * File extension of icons, default: 'svg'
+   * File extension of icons
+   * @default svg
    */
   @property({ type: String, attribute: 'file-extension', reflect: true })
   fileExtension?: string = DEFAULTS.FILE_EXTENSION;
 
   /**
-   * Length unit used for sizing of icons, default: 'em'
+   * Length unit used for sizing of icons
+   * @default em
    */
   @property({ type: String, attribute: 'length-unit', reflect: true })
   lengthUnit: string = DEFAULTS.LENGTH_UNIT;
 
   /**
    * The default size of the icon.
    * If not set, it falls back to the size defined by the length unit.
+   * @default 1
    */
   @property({ type: Number, reflect: true })
-  size?: number = DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT];
+  size?: number = DEFAULTS.SIZE;
 
   private updateValuesInContext() {
     // only update fileExtension on context if its an allowed fileExtension

packages/components/src/components/iconprovider/iconprovider.constants.ts

@@ -4,15 +4,16 @@ const TAG_NAME = utils.constructTagName('iconprovider');
 
 const ALLOWED_FILE_EXTENSIONS = ['svg'];
 const ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px'];
+const LENGTH_UNIT_SIZE = {
+  px: 16,
+  em: 1,
+  rem: 1,
+} as Record<string, number>;
 
 const DEFAULTS = {
   FILE_EXTENSION: 'svg',
   LENGTH_UNIT: 'em',
-  LENGTH_UNIT_SIZE: {
-    px: 16,
-    em: 1,
-    rem: 1,
-  } as Record<string, number>,
+  SIZE: LENGTH_UNIT_SIZE.em,
 };
 
-export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };

packages/components/src/components/iconprovider/iconprovider.e2e-test.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 import { ComponentsPage, test } from '../../../config/playwright/setup';
-import { DEFAULTS } from './iconprovider.constants';
+import { DEFAULTS, LENGTH_UNIT_SIZE } from './iconprovider.constants';
 
 type SetupOptions = {
   componentsPage: ComponentsPage;
@@ -95,7 +95,7 @@ const testToRun = async (componentsPage: ComponentsPage, type: string) => {
       await expect(iconprovider).toHaveAttribute('length-unit', DEFAULTS.LENGTH_UNIT);
       await expect(iconprovider).toHaveAttribute(
         'size',
-        DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT].toString(),
+        LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT as keyof typeof LENGTH_UNIT_SIZE].toString(),
       );
       // SUBCOMPONENT
       await expect(subComponentLocator).toBeVisible();
@@ -107,7 +107,7 @@ const testToRun = async (componentsPage: ComponentsPage, type: string) => {
         await expect(nestedIconProvider).toHaveAttribute('length-unit', DEFAULTS.LENGTH_UNIT);
         await expect(nestedIconProvider).toHaveAttribute(
           'size',
-          DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT].toString(),
+          LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT as keyof typeof LENGTH_UNIT_SIZE].toString(),
         );
         await expect(nestedSubComponentLocator).toBeVisible();
         await expect(nestedSubComponentLocator).toContainText(`IconProvider Length Unit: ${DEFAULTS.LENGTH_UNIT}`);

packages/components/src/components/presence/presence.component.ts

@@ -32,7 +32,7 @@ class Presence extends Component {
    * - `presenting`
    * - `quiet`
    * - `scheduled`
-   *
+   * @default active
    */
   @property({ type: String, reflect: true })
   type = DEFAULTS.TYPE;
@@ -46,7 +46,7 @@ class Presence extends Component {
    * - LARGE
    * - X_LARGE
    * - XX_LARGE
-   *
+   * @default small
    */
   @property({ type: String, reflect: true })
   size = DEFAULTS.SIZE;

packages/components/src/components/text/text.component.ts

@@ -57,6 +57,7 @@ class Text extends Component {
    * - 'heading-xlarge-bold'
    * - 'headline-small-light'
    * - 'headline-small-regular'
+   * @default body-large-regular
    */
   @property({ attribute: 'type', reflect: true, type: String })
   public type = DEFAULTS.TYPE;

packages/components/src/tsdoc.json

@@ -30,6 +30,11 @@
       "tagName": "@dependency",
       "syntaxKind": "modifier",
       "allowMultiple": true
+    },
+    {
+      "tagName": "@default",
+      "syntaxKind": "modifier",
+      "allowMultiple": false
     }
   ]
-}
+}