LSUITE-67 Documentation

src/components/Alert/Alert.types.ts

@@ -14,6 +14,9 @@ export enum AlertVariant {
 /**
  * Properties for the `Alert` component.
  * @param {AlertVariant} [variant] - Optional. The type of Alert. Default: `Info`
+ * @see {@link PropsWithChildren}
+ * @see {@link PropsWithClassName}
+ * @see {@link PropsWithTestId}
  */
 export interface AlertProps extends PropsWithChildren, PropsWithClassName, PropsWithTestId {
   variant?: AlertVariant;

src/components/Button/Button.tsx

@@ -3,6 +3,11 @@ import classNames from 'classnames';
 
 import { ButtonProps, ButtonVariant } from './Button.types';
 
+/**
+ * The `Button` React componentformats and renders a styled button.
+ * @param {ButtonProps} props - Component properties, `ButtonProps`.
+ * @returns {JSX.Element} JSX
+ */
 const Button: React.FC<ButtonProps> = ({
   children,
   className,
@@ -11,7 +16,7 @@ const Button: React.FC<ButtonProps> = ({
   testId = 'button',
   type = 'button',
   ...props
-}: ButtonProps): JSX.Element => { 
+}: ButtonProps): JSX.Element => {
   const getVariantClasses = (variant: ButtonVariant): string => {
     switch (variant) {
       case ButtonVariant.Secondary:

src/components/Button/Button.types.ts

@@ -1,12 +1,27 @@
 import { AriaRole, MouseEventHandler, PropsWithChildren } from 'react';
 import { PropsWithClassName, PropsWithTestId } from '../../utils/types';
 
+/**
+ * The `ButtonVariant` enumerates types of Buttons.
+ */
 export enum ButtonVariant {
   Primary = 'Primary',
   Secondary = 'Secondary',
   Text = 'Text',
 }
 
+/**
+ * Properties for the `Button` component.
+ * @param {boolean} [disabled] - Optional. The button disabled state. Default: `false`
+ * @param {MouseEventHandler<HTMLButtonElement>} [onClick] - Optional. A function invoked when the button is clicked.
+ * @param {AriaRole} [role] - Optional. An Aria role value. Default: `button`
+ * @param {string} [title] - Optional. The title attribute of the HTML button element.
+ * @param {string} [type] - Optional. The type attribute of the HTML button element. Default: `button`
+ * @param {ButtonVariant} [variant] - Optional. The type of Button. Default: `Primary`
+ * @see {@link PropsWithClassName}
+ * @see {@link PropsWithTestId}
+ * @see {@link PropsWithChildren}
+ */
 export interface ButtonProps extends PropsWithChildren, PropsWithClassName, PropsWithTestId {
   disabled?: boolean;
   onClick?: MouseEventHandler<HTMLButtonElement>;

src/components/Currency/Currency.types.ts

@@ -3,12 +3,13 @@ import { PropsWithClassName, PropsWithTestId } from '../../utils/types';
 
 /**
  * Properties for the `Currency` component.
- * @param {string} [className] - Optional. CSS classes to apply to the component.
  * @param {CurrencyCode} [currency] - Optional. The ISO 4217 currency code. Default: `USD`.
  * @param {CurrencyDisplay} [currencyDisplay]  - Optional. How the currency is displayed. Default: `symbol`.
  * @param {CurrencySign} [currencySign] - Optional. How negative values are displayed. Default: `standard`.
  * @param {number} value - The amount.
- * @param {string} [testId] - Optional. A test library identifier. Default: `currency`.
+ * @see {@link PropsWithClassName}
+ * @see {@link PropsWithTestId}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options | NumberFormatOptions}
  */
 export interface CurrencyProps extends PropsWithClassName, PropsWithTestId {
   currency?: CurrencyCode;

src/components/Date/Date.tsx

@@ -3,6 +3,12 @@ import dayjs from 'dayjs';
 
 import { DateFormat, DateProps } from './Date.types';
 
+/**
+ * The `Date` React component formats and renders a date. Use the `format`
+ * property to apply a pattern to format the date.
+ * @param {Date} props - Component properties, `DateProps`.
+ * @returns {JSX.Element} JSX
+ */
 const Date: React.FC<DateProps> = ({
   className,
   date,

src/components/Date/Date.types.ts

@@ -1,5 +1,8 @@
-import { PropsWithClassName, PropsWithTestId } from "../../utils/types";
+import { PropsWithClassName, PropsWithTestId } from '../../utils/types';
 
+/**
+ * The `DateFormat` enumerates patterns for formatting dates.
+ */
 export enum DateFormat {
   DATE = 'MM/DD/YYYY',
   DAY_OF_WEEK = 'dddd',
@@ -9,6 +12,14 @@ export enum DateFormat {
   TIMESTAMP = 'dddd MMMM D [at] h:mma',
 }
 
+/**
+ * Properties for the `Date` component.
+ * @param {string|number} date - The date value expressed as an ISO 8601 date string or as a number of milliseconds.
+ * @param {DateFormat} [format] - Optional. The format of the Date. Default: `DATE`
+ * @see {@link PropsWithClassName}
+ * @see {@link PropsWithTestId}
+ * @see {@link https://en.wikipedia.org/wiki/ISO_8601 | ISO 8601}
+ */
 export interface DateProps extends PropsWithClassName, PropsWithTestId {
   date: string | number;
   format?: DateFormat;

src/components/DayOfTheWeek/DayOfTheWeek.tsx

@@ -16,6 +16,12 @@ const TODAY = 'Today';
 const TOMORROW = 'Tomorrow';
 const YESTERDAY = 'Yesterday';
 
+/**
+ * The `DayOfTheWeek` React component renders the day of the week,
+ * e.g. `Monday`, for the supplied date value.
+ * @param {DayOfTheWeekProps} props - Component properties, `DayOfTheWeekProps`.
+ * @returns {JSX.Element} JSX
+ */
 const DayOfTheWeek: React.FC<DayOfTheWeekProps> = ({
   className,
   date,

src/components/DayOfTheWeek/DayOfTheWeek.types.ts

@@ -1,5 +1,13 @@
-import { PropsWithClassName, PropsWithTestId } from "../../utils/types";
+import { PropsWithClassName, PropsWithTestId } from '../../utils/types';
 
+/**
+ * Properties for the `DayOfTheWeek` component.
+ * @param {string|number} date - The date value expressed as an ISO 8601 date string or as a number of milliseconds.
+ * @param {boolean} [relative] - Optional. Indicates if the day of the week should be expressed relative to the current day, i.e. `Yesterday`, `Today`, `Tomorrow`.
+ * @see {@link PropsWithClassName}
+ * @see {@link PropsWithTestId}
+ * @see {@link https://en.wikipedia.org/wiki/ISO_8601 | ISO 8601}
+ */
 export interface DayOfTheWeekProps extends PropsWithClassName, PropsWithTestId {
   date: string | number;
   relative?: boolean;

src/components/Decimal/Decimal.types.ts

@@ -3,7 +3,15 @@ import { PropsWithClassName, PropsWithTestId } from '../../utils/types';
 
 /**
  * Properties for the `Decimal` component.
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+ * @param {number} [minimumFractionDigits] - Optional. The minimum number of fraction digits to use. Default: `0`
+ * @param {number} [maximumFractionDigits] - Optional. The maximum number of fraction digits to use. Default: the larger of `minimumFractionDigits` and `0`
+ * @param {SignDisplay} [signDisplay] - Optional. When to display the sign for the number. Default: `auto`
+ * @param {Unit} [unit] - Optional. When included, formatted value includes unit of measurement.
+ * @param {UnitDisplay} [unitDisplay] - Optional. Display of the unit of measurement. Default: `short`
+ * @param {number} value - The decimal value, e.g. `0.34` renders: 0.34
+ * @see {@link PropsWithClassName}
+ * @see {@link PropsWithTestId}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options | NumberFormatOptions}
  */
 export interface DecimalProps extends PropsWithClassName, PropsWithTestId {
   maximumFractionDigits?: number;

src/components/Integer/Integer.tsx

@@ -4,7 +4,7 @@ import { IntegerProps } from './Integer.types';
 import { formatNumber } from '../../utils/numbers';
 
 /**
- * Format and display an integer number.
+ * The `Integer` React component formats and renders an integer number.
  * @param {IntegerProps} props - Component properties.
  * @returns {JSX.Element} JSX
  */

src/components/Integer/Integer.types.ts

@@ -3,7 +3,13 @@ import { PropsWithClassName, PropsWithTestId } from '../../utils/types';
 
 /**
  * Properties for the `Integer` component.
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+ * @param {SignDisplay} [signDisplay] - Optional. When to display the sign for the number. Default: `auto`
+ * @param {Unit} [unit] - Optional. When included, formatted value includes unit of measurement.
+ * @param {UnitDisplay} [unitDisplay] - Optional. Display of the unit of measurement. Default: `short`
+ * @param {number} value - The integer value, e.g. `100`.
+ * @see {@link PropsWithClassName}
+ * @see {@link PropsWithTestId}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options NumberFormatOptions}
  */
 export interface IntegerProps extends PropsWithClassName, PropsWithTestId {
   signDisplay?: SignDisplay;

src/components/Percent/Percent.types.ts

@@ -7,6 +7,9 @@ import { SignDisplay } from '../../utils';
  * @param {number} [maximumFractionDigits] - Optional. The maximum number of fraction digits to use. Default: the larger of `minimumFractionDigits` and `0`
  * @param {SignDisplay} [signDisplay] - Optional. When to display the sign for the number. Default: `auto`
  * @param {number} value - The percent as a decimal value, e.g. `0.34` renders 34%.
+ * @see {@link PropsWithClassName}
+ * @see {@link PropsWithTestId}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options NumberFormatOptions}
  */
 export interface PercentProps extends PropsWithClassName, PropsWithTestId {
   maximumFractionDigits?: number;

src/components/Text/Text.tsx

@@ -3,6 +3,12 @@ import classNames from 'classnames';
 
 import { TextProps, TextVariant } from './Text.types';
 
+/**
+ * The `Text` React component formats and renders a text value. Use the
+ * `variant` property to apply predefined styles.
+ * @param {TextProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
 const Text: React.FC<TextProps> = ({
   children,
   className,

src/components/Text/Text.types.ts

@@ -1,14 +1,21 @@
 import { PropsWithChildren } from 'react';
-import { PropsWithTestId } from '../../utils/types';
+import { PropsWithClassName, PropsWithTestId } from '../../utils/types';
 
+/**
+ * The `TextVariant` enumerates types of Text. Use the `variant` property
+ * to specify the desired format.
+ */
 export enum TextVariant {
   Heading1 = 'Heading1',
   Heading2 = 'Heading2',
   Heading3 = 'Heading3',
   BodyCopy = 'BodyCopy',
 }
 
-export interface TextProps extends PropsWithChildren, PropsWithTestId {
-  className?: string;
+/**
+ * Properties for the `Text` component.
+ * @param {TextVariant} [variant] - Optional. The type of Text. Default: `BodyCopy`
+ */
+export interface TextProps extends PropsWithChildren, PropsWithClassName, PropsWithTestId {
   variant?: TextVariant;
 }

src/utils/constants.ts

@@ -1,6 +1,6 @@
 /**
  * ISO 4217 Currency Codes
- * @see https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes
+ * @see {@link https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes | ISO 4217 Currency Codes}
  */
 export enum CurrencyCode {
   CAD = 'CAD', // Canadian Dollar
@@ -13,7 +13,7 @@ export enum CurrencyCode {
 /**
  * Possible `currencyDisplay` values to use with `Intl.NumberFormat`.
  * Default: `symbol`.
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options | NumberFormatOptions}
  */
 export enum CurrencyDisplay {
   Code = 'code',
@@ -25,7 +25,7 @@ export enum CurrencyDisplay {
 /**
  * Possible `currencySign` values to use with `Intl.NumberFormat`.
  * Default: `standard`.
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options | NumberFormatOptions}
  */
 export enum CurrencySign {
   Accounting = 'accounting',
@@ -35,7 +35,7 @@ export enum CurrencySign {
 /**
  * Possible `signDisplay` values to use with `Intl.NumberFormat`. By default,
  * display sign for negative numbers only, including negative zero. Default: `auto`.
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options | NumberFormatOptions}
  */
 export enum SignDisplay {
   Auto = 'auto',
@@ -46,7 +46,7 @@ export enum SignDisplay {
 
 /**
  * Possible `unit` values to use with "unit" formatting style using `Intl.NumberFormat`.
- * @see https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers
+ * @see {@link https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers | ECMA Units of Measurement }
  */
 export enum Unit {
   Celsius = 'celsius',
@@ -64,6 +64,7 @@ export enum Unit {
 /**
  * Possible `unitDisplay` values to use with "unit" formatting style using
  * `Intl.NumberFormat`. Default: `short`, e.g. "10 cm".
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options | NumberFormatOptions}
  */
 export enum UnitDisplay {
   Long = 'long',

src/utils/numbers.ts

@@ -4,7 +4,7 @@
  * @param {Object} [options] - Optional options object.
  * @param {string} [locale] - Optional locale.
  * @returns {string} The formatted value.
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options | NumberFormatOptions}
  */
 export function formatNumber(
   value: number,