From ef39557d24deb3ab68dbcff5346288a8c082b970 Mon Sep 17 00:00:00 2001 From: Deeya Upadhyay <58636958+2020Deeya@users.noreply.github.com> Date: Wed, 13 Nov 2024 10:47:46 +0530 Subject: [PATCH] fix: add defaults in tsdoc (#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 | 5 +++++ .../src/components/badge/badge.component.ts | 4 ++++ .../src/components/badge/badge.stories.ts | 5 ----- .../iconprovider/iconprovider.component.ts | 9 ++++++--- .../iconprovider/iconprovider.constants.ts | 13 +++++++------ .../iconprovider/iconprovider.e2e-test.ts | 6 +++--- .../src/components/presence/presence.component.ts | 4 ++-- .../src/components/text/text.component.ts | 1 + packages/components/src/tsdoc.json | 7 ++++++- 9 files changed, 34 insertions(+), 20 deletions(-) diff --git a/packages/components/conventions/component-tsdoc.md b/packages/components/conventions/component-tsdoc.md index 81888c557..b97dce97a 100644 --- a/packages/components/conventions/component-tsdoc.md +++ b/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 diff --git a/packages/components/src/components/badge/badge.component.ts b/packages/components/src/components/badge/badge.component.ts index 15913082d..02dae7e71 100644 --- a/packages/components/src/components/badge/badge.component.ts +++ b/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; diff --git a/packages/components/src/components/badge/badge.stories.ts b/packages/components/src/components/badge/badge.stories.ts index 932afdd53..6629cd301 100644 --- a/packages/components/src/components/badge/badge.stories.ts +++ b/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', diff --git a/packages/components/src/components/iconprovider/iconprovider.component.ts b/packages/components/src/components/iconprovider/iconprovider.component.ts index 616cb2af8..03833c48f 100644 --- a/packages/components/src/components/iconprovider/iconprovider.component.ts +++ b/packages/components/src/components/iconprovider/iconprovider.component.ts @@ -41,13 +41,15 @@ class IconProvider extends Provider { 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; @@ -55,9 +57,10 @@ class IconProvider extends Provider { /** * 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 diff --git a/packages/components/src/components/iconprovider/iconprovider.constants.ts b/packages/components/src/components/iconprovider/iconprovider.constants.ts index c17589e0c..2bc92d54b 100644 --- a/packages/components/src/components/iconprovider/iconprovider.constants.ts +++ b/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; const DEFAULTS = { FILE_EXTENSION: 'svg', LENGTH_UNIT: 'em', - LENGTH_UNIT_SIZE: { - px: 16, - em: 1, - rem: 1, - } as Record, + 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 }; diff --git a/packages/components/src/components/iconprovider/iconprovider.e2e-test.ts b/packages/components/src/components/iconprovider/iconprovider.e2e-test.ts index 2fef44e91..1d48ef5dc 100644 --- a/packages/components/src/components/iconprovider/iconprovider.e2e-test.ts +++ b/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}`); diff --git a/packages/components/src/components/presence/presence.component.ts b/packages/components/src/components/presence/presence.component.ts index 5fd4c63e3..f5cad530a 100644 --- a/packages/components/src/components/presence/presence.component.ts +++ b/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; diff --git a/packages/components/src/components/text/text.component.ts b/packages/components/src/components/text/text.component.ts index 1b7f0bb55..dab964cd1 100644 --- a/packages/components/src/components/text/text.component.ts +++ b/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; diff --git a/packages/components/src/tsdoc.json b/packages/components/src/tsdoc.json index 23499668e..6afce23aa 100644 --- a/packages/components/src/tsdoc.json +++ b/packages/components/src/tsdoc.json @@ -30,6 +30,11 @@ "tagName": "@dependency", "syntaxKind": "modifier", "allowMultiple": true + }, + { + "tagName": "@default", + "syntaxKind": "modifier", + "allowMultiple": false } ] -} \ No newline at end of file +}