Merge remote-tracking branch 'origin/develop'

packages/ui/src/components/accordion/accordion.types.ts

@@ -9,14 +9,17 @@ type Variants = VariantProps<typeof styles>;
 export type AccordionProps<T = any> = SpectrumAccordionProps<T> & {
   /**
    * Stretch the tab to fill the whole content
+   * @default false
    */
   justify?: boolean;
   /**
    * The look of the accordion
+   * @default soft
    */
   look?: AccordionItemProps['look'];
   /**
    * Whether the accordion is rounded
+   * @default true
    */
   rounded?: Variants['rounded'];
 } & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;

packages/ui/src/components/alert/alert.types.ts

@@ -1,10 +1,15 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 
 export type Look = 'info' | 'success' | 'warning' | 'danger' | 'system';
 
 export type AlertProps = {
+  /**
+   * The alert content
+   */
+  children?: React.ReactNode;
   /**
    * Enable dismissible mode
+   * @default false
    */
   dismissible?: boolean;
   /**
@@ -13,6 +18,7 @@ export type AlertProps = {
   heading?: string;
   /**
    * The alert heading tag is automatically defined, but may be overridden via this prop if required for semantic reasons.
+   * @default h2
    */
   headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /**
@@ -23,10 +29,12 @@ export type AlertProps = {
   icon?: React.ElementType;
   /**
    * Alert look style
+   * @default info
    */
   look?: Look;
   /**
    * Alert mode
+   * @default box
    */
   mode?: 'box' | 'text';
   /**
@@ -39,6 +47,7 @@ export type AlertProps = {
   open?: boolean;
   /**
    * Tag to render
+   * @default div
    */
   tag?: keyof JSX.IntrinsicElements;
 } & HTMLAttributes<Element>;

packages/ui/src/components/badge/badge.types.ts

@@ -8,14 +8,17 @@ type Variants = VariantProps<typeof styles>;
 export type BadgeProps = {
   /**
    * Color of badge
+   * @default hero
    */
   color?: Variants['color'];
   /**
    * Tag to render
+   * @default div
    */
   tag?: keyof JSX.IntrinsicElements;
   /**
    * Type of badge
+   * @default default
    */
   type?: Variants['type'];
 } & Omit<HTMLAttributes<Element>, 'color' | 'type'>;

packages/ui/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.types.ts

@@ -3,14 +3,17 @@ import { AnchorHTMLAttributes } from 'react';
 export type BreadcrumbItemProps = {
   /**
    * isCurrent flag
+   * @default false
    */
   isCurrent?: boolean;
   /**
    * isDisabled flag
+   * @default false
    */
   isDisabled?: boolean;
   /**
    * Tag to render
+   * @default span
    */
   tag?: keyof JSX.IntrinsicElements;
 } & AnchorHTMLAttributes<Element>;

packages/ui/src/components/button-dropdown/button-dropdown.types.ts

@@ -9,7 +9,7 @@ type Variants = VariantProps<typeof styles>;
 
 export type ButtonDropdownProps = {
   /**
-   * Size of the the dropdown panel
+   * Size of the dropdown panel
    */
   dropdownSize?: Variants['dropdownSize'];
   /**

packages/ui/src/components/button-dropdown/components/heading/heading.component.tsx

@@ -12,3 +12,4 @@ export function Heading({ className, tag: Tag = 'h1', children, ...props }: Head
     </Tag>
   );
 }
+Heading.displayName = 'ButtonDropdown.Heading';

packages/ui/src/components/button-dropdown/components/heading/heading.types.ts

@@ -3,6 +3,7 @@ import { HTMLAttributes } from 'react';
 export type HeadingProps = {
   /**
    * The tag of the heading element for semantic reasons
+   * @default h1
    */
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 } & HTMLAttributes<Element>;

packages/ui/src/components/button-group/components/button/button.component.tsx

@@ -34,3 +34,5 @@ export function Button({ className, children, ...props }: ButtonProps) {
     </label>
   );
 }
+
+Button.displayName = 'ButtonGroup.Button';

packages/ui/src/components/button/button.types.ts

@@ -10,6 +10,7 @@ type Variants = VariantProps<typeof styles>;
 export type ButtonProps = {
   /**
    * Fit button width to its parent width.
+   * @default false
    */
   block?: Variants['block'];
   /**
@@ -27,15 +28,18 @@ export type ButtonProps = {
    */
   iconColor?: IconProps['color'];
   /**
-   * Justify align button children
+   * Justify align button children. When true, content will justify-between
+   * @default false
    */
   justify?: Variants['justify'];
   /**
    * Button look
+   * @default hero
    */
   look?: Variants['look'];
   /**
    * Size of the button
+   * @default medium
    */
   size?: Variants['size'];
   /**
@@ -44,6 +48,7 @@ export type ButtonProps = {
   soft?: Variants['soft'];
   /**
    * Tag to render
+   * @default button
    */
   tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
 } & ButtonHTMLAttributes<Element> &

packages/ui/src/components/compacta/compacta.types.ts

@@ -11,6 +11,7 @@ export type CompactaProps = {
   children: (...props: ContentProps[]) => ReactNode;
   /**
    * Tag for primary title
+   * @default h3
    */
   titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 } & Omit<HTMLAttributes<Element>, 'children'>;

packages/ui/src/components/flexi-cell/flexi-cell.types.ts

@@ -24,6 +24,7 @@ type BaseFlexiCellProps = {
    * Wraps body with an 'a' tag for dual action styled component
    * - Requires href to be provided
    * - Tag prop should not be used when using this prop
+   * @default false
    */
   dualAction?: boolean;
   /**
@@ -32,10 +33,12 @@ type BaseFlexiCellProps = {
   href?: string;
   /**
    * Large adds more padding/spacing to the Flex Cell
+   * @default default
    */
   size?: Variants['size'];
   /**
    * The native tag that flexicell will be rendered
+   * @default div
    */
   tag?: keyof JSX.IntrinsicElements;
   /**
@@ -48,6 +51,7 @@ type BaseFlexiCellProps = {
   withArrow?: boolean;
   /**
    * Adds a border radius and a border
+   * @default false
    */
   withBorder?: boolean;
 } & HTMLAttributes<HTMLOrSVGElement>;

packages/ui/src/components/heading/heading.types.ts

@@ -23,4 +23,4 @@ export type HeadingProps = {
    * Whether heading should be uppercase
    */
   uppercase?: boolean;
-} & HTMLAttributes<Element>;
+} & HTMLAttributes<HTMLDivElement>;

packages/ui/src/components/input-field/input-field.types.ts

@@ -59,6 +59,7 @@ export type InputFieldProps = {
   supportingText?: ReactNode;
   /**
    * Tag to render
+   * @default div
    */
   // TODO: maybe we could limit the tags to be only fieldset or div?
   tag?: keyof JSX.IntrinsicElements;

packages/ui/src/components/input/input.types.ts

@@ -8,10 +8,12 @@ type Variants = VariantProps<typeof styles>;
 export type InputProps = {
   /**
    * Whether the input is invalid
+   * @default false
    */
   invalid?: boolean;
   /**
    * Size of input
+   * @default medium
    */
   size?: Variants['size'];
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;

packages/ui/src/components/link/link.types.ts

@@ -22,14 +22,17 @@ export type LinkProps = {
   iconBefore?: (props: IconProps) => JSX.Element;
   /**
    * set size of icon
+   * @default small
    */
   iconSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
    * Link type
+   * @default standalone
    */
   type?: 'inline' | 'standalone';
   /**
    * Visually style the (inline) link with an underline
+   * @default true
    */
   underline?: boolean;
 } & Omit<AriaLinkOptions, 'isDisabled' | 'elementType'> &

packages/ui/src/components/pagination/pagination.types.ts

@@ -38,6 +38,7 @@ export type PaginationHookProps = {
 export type PaginationProps = {
   /**
    * Back label
+   * @default Back
    */
   backLabel?: ReactNode;
   /**
@@ -46,6 +47,7 @@ export type PaginationProps = {
   current?: number;
   /**
    * Carousel feature
+   * @default false
    */
   infinite?: boolean;
   /**
@@ -54,10 +56,12 @@ export type PaginationProps = {
   linkComponent?: PaginationItemProps['tag'];
   /**
    * Next label
+   * @default Next
    */
   nextLabel?: ReactNode;
   /**
    * Tag to render
+   * @default nav
    */
   tag?: keyof JSX.IntrinsicElements;
 } & (PaginationAsLinkProps | PaginationAsButtonProps) &

packages/ui/src/components/panel/panel.types.ts

@@ -7,10 +7,12 @@ export type PanelProps = {
   heading: string;
   /**
    * Tag for heading defaults to h1
+   * @default h1
    */
   headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /**
    * The styling of the panel
+   * @default hero
    */
   look?: 'faint' | 'hero';
 } & HTMLAttributes<Element>;

packages/ui/src/components/popover/components/panel/panel.component.tsx

@@ -59,3 +59,4 @@ export function Panel({ state, heading, headingTag: Tag = 'h1', content, placeme
     </FocusScope>
   );
 }
+Panel.displayName = 'Popover.Panel';

packages/ui/src/components/popover/popover.types.ts

@@ -18,6 +18,7 @@ export type PopoverProps = {
   heading?: string;
   /**
    * Tag to render
+   * @default h1
    */
   headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
   /**
@@ -34,6 +35,7 @@ export type PopoverProps = {
   open?: boolean;
   /**
    * Placement of popover. If no placement provided it will default to top unless there is no space then will appear on bottom.
+   * @default top
    */
   placement?: 'top' | 'bottom';
 } & HTMLAttributes<Element> &

packages/ui/src/components/progress-bar/progress-bar.types.ts

@@ -7,14 +7,17 @@ export type ProgressBarProps = {
   className?: string;
   /**
    * look of bar
+   * @default default
    */
   look?: 'default' | 'skinny';
   /**
    * Whether or not label shows on default bar
+   * @default false
    */
   noLabel?: boolean;
   /**
    * The progress bar value as a percentage. Decimal numbers are rounded.
+   * @default 0
    */
   value?: number;
 } & Pick<AriaProgressBarProps, 'aria-label' | 'aria-describedby' | 'aria-details' | 'aria-labelledby' | 'id'>;

packages/ui/src/components/progress-rope/progress-rope.types.ts

@@ -17,6 +17,7 @@ export type ProgressRopeStepWithIndex =
 export type ProgressRopeProps = {
   /**
    * Current active step (zero-indexed)
+   * @default 0
    */
   current?: number;
   /**
@@ -32,6 +33,7 @@ export type ProgressRopeProps = {
   )[];
   /**
    * Tag to render
+   * @default nav
    */
   tag?: keyof JSX.IntrinsicElements;
 } & HTMLAttributes<Element>;