@abgov/react-components 4.0.0-alpha.17 → 4.0.0-alpha.170

package/lib/input/input.d.ts

@@ -1,11 +1,17 @@
-import React, { FC } from 'react';
-import { GoAIconType } from '../..';
-interface WCProps {
+import React, { FC } from "react";
+import { GoAIconType } from "../..";
+import { Margins } from "../../common/styling";
+export declare type GoADate = Date | string;
+declare type GoAInputType = "text" | "password" | "email" | "number" | "date" | "datetime-local" | "month" | "range" | "search" | "tel" | "time" | "url" | "week";
+declare type GoAAutoCapitalize = "on" | "off" | "none" | "sentences" | "words" | "characters";
+interface WCProps extends Margins {
     ref?: React.MutableRefObject<HTMLInputElement | null>;
-    type: string;
+    type?: GoAInputType;
     name: string;
     value: string;
     id?: string;
+    autocapitalize?: GoAAutoCapitalize;
+    debounce?: number;
     placeholder?: string;
     leadingicon?: string;
     trailingicon?: string;
@@ -14,68 +20,84 @@ interface WCProps {
     error?: boolean;
     readonly?: boolean;
     focused?: boolean;
-    showcounter?: boolean;
-    maxcharcount?: number;
     handletrailingiconclick: boolean;
     width?: string;
-    testid?: string;
+    prefix?: string;
+    suffix?: string;
+    arialabel?: string;
+    min?: string | number;
+    max?: string | number;
+    step?: number;
+    maxlength?: number;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-input': WCProps & React.HTMLAttributes<HTMLInputElement>;
+            "goa-input": WCProps & React.HTMLAttributes<HTMLInputElement>;
         }
     }
 }
-export interface Props {
+interface BaseProps extends Margins {
     name: string;
-    value: string;
-    onChange: (name: string, value: string) => void;
     id?: string;
+    debounce?: number;
     disabled?: boolean;
+    autoCapitalize?: GoAAutoCapitalize;
     placeholder?: string;
     leadingIcon?: GoAIconType;
     trailingIcon?: GoAIconType;
     onTrailingIconClick?: () => void;
-    variant?: 'goa' | 'bare';
+    variant?: "goa" | "bare";
     focused?: boolean;
     readonly?: boolean;
     error?: boolean;
     width?: string;
-    showCounter?: boolean;
-    maxCharCount?: number;
+    prefix?: string;
+    suffix?: string;
     testId?: string;
+    ariaLabel?: string;
+    leadingContent?: React.ReactNode;
+    trailingContent?: React.ReactNode;
+    maxLength?: number;
 }
-export declare const GoAInput: FC<Props & {
-    type: string;
-}>;
-export declare const GoAInputText: FC<Props>;
-export declare const GoAInputPassword: FC<Props>;
-export declare const GoAInputDate: FC<Props & {
-    min?: string;
-    max?: string;
-}>;
-export declare const GoAInputTime: FC<Props>;
-export declare const GoAInputDateTime: FC<Props & {
-    min?: string;
-    max?: string;
-}>;
-export declare const GoAInputEmail: FC<Props>;
-export declare const GoAInputSearch: FC<Props>;
-export declare const GoAInputUrl: FC<Props>;
-export declare const GoAInputTel: FC<Props>;
-export declare const GoAInputFile: FC<Props>;
-export declare const GoAInputMonth: FC<Props>;
-export declare const GoAInputNumber: FC<Omit<Props, "value"> & {
+declare type OnChange = (name: string, value: string) => void;
+export interface InputProps extends BaseProps {
+    onChange: OnChange;
+    value: string;
+    min?: number | string;
+    max?: number | string;
+    step?: number;
+}
+declare type OnNumberChange = (name: string, value: number) => void;
+interface NumberInputProps extends BaseProps {
+    onChange: OnNumberChange;
     value: number;
-} & {
     min?: number;
     max?: number;
     step?: number;
-}>;
-export declare const GoAInputRange: FC<Props & {
-    min?: number;
-    max?: number;
+}
+declare type OnDateChange = (name: string, value: GoADate) => void;
+interface DateInputProps extends BaseProps {
+    onChange: OnDateChange;
+    value: GoADate;
+    min?: GoADate;
+    max?: GoADate;
     step?: number;
+}
+export declare const GoAInput: FC<InputProps & {
+    type?: GoAInputType;
 }>;
+export declare const GoAInputText: FC<InputProps>;
+export declare const GoAInputPassword: FC<InputProps>;
+export declare const GoAInputDate: FC<DateInputProps>;
+export declare const GoAInputTime: FC<InputProps>;
+export declare const GoAInputDateTime: FC<DateInputProps>;
+export declare const GoAInputEmail: FC<InputProps>;
+export declare const GoAInputSearch: FC<InputProps>;
+export declare const GoAInputUrl: FC<InputProps>;
+export declare const GoAInputTel: FC<InputProps>;
+export declare const GoAInputFile: FC<InputProps>;
+export declare const GoAInputMonth: FC<InputProps>;
+export declare const GoAInputNumber: FC<NumberInputProps>;
+export declare const GoAInputRange: FC<InputProps>;
 export default GoAInput;

package/lib/microsite-header/microsite-header.d.ts

@@ -1,21 +1,24 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-microsite-header': WebComponentProps & React.HTMLAttributes<HTMLElement>;
+            "goa-microsite-header": WebComponentProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
-export declare type ServiceLevel = 'alpha' | 'beta' | 'live';
+export declare type ServiceLevel = "alpha" | "beta" | "live";
 interface WebComponentProps {
-    level: ServiceLevel;
+    type: ServiceLevel;
     version?: string;
     feedbackurl?: string;
+    maxcontentwidth?: string;
 }
 export interface HeaderProps {
-    level: ServiceLevel;
+    type: ServiceLevel;
     version?: string;
     feedbackUrl?: string;
+    testId?: string;
+    maxContentWidth?: string;
 }
 export declare const GoAMicrositeHeader: FC<HeaderProps>;
 export default GoAMicrositeHeader;

package/lib/modal/modal.d.ts

@@ -1,27 +1,34 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
+export declare type ModalTransition = "fast" | "slow" | "none";
+export declare type CalloutVariant = "information" | "important" | "emergency" | "success" | "event";
 interface WCProps {
     ref: React.RefObject<HTMLElement>;
-    heading?: string;
+    heading?: React.ReactNode;
     open?: boolean;
     width?: string;
     closable?: boolean;
     scrollable?: boolean;
-    transition?: "fast" | "slow" | "none";
+    transition?: ModalTransition;
+    calloutVariant?: CalloutVariant;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-modal': WCProps & React.HTMLAttributes<HTMLElement>;
+            "goa-modal": WCProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
 interface Props {
-    heading?: string;
+    heading?: React.ReactNode;
     width?: string;
     actions?: React.ReactElement;
     onClose?: () => void;
-    transition?: "fast" | "slow" | "none";
+    transition?: ModalTransition;
+    children?: React.ReactNode;
     open?: boolean;
+    type?: string;
+    calloutVariant?: CalloutVariant;
+    testId?: string;
 }
 export declare const GoAModal: FC<Props>;
 export default GoAModal;

package/lib/notification/notification.d.ts

@@ -1,18 +1,26 @@
-import React from 'react';
-declare type NotificationType = "important" | 'information' | 'event' | 'emergency';
+import React from "react";
+export declare type NotificationType = "important" | "information" | "event" | "emergency";
+export declare type AriaLiveType = "polite" | "assertive" | "off";
 interface WCProps {
+    ref: React.RefObject<HTMLElement>;
     type: NotificationType;
+    maxcontentwidth?: string;
+    arialive?: AriaLiveType;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-notification': WCProps & React.HTMLAttributes<HTMLButtonElement>;
+            "goa-notification": WCProps & React.HTMLAttributes<HTMLButtonElement>;
         }
     }
 }
-export interface Props {
+interface Props {
     type?: NotificationType;
+    ariaLive?: AriaLiveType;
+    maxContentWidth?: string;
     children?: React.ReactNode;
+    onDismiss?: () => void;
+    testId?: string;
 }
-export declare const GoANotification: ({ type, children }: Props) => JSX.Element;
+export declare const GoANotification: ({ type, ariaLive, maxContentWidth, children, testId, onDismiss, }: Props) => JSX.Element;
 export default GoANotification;

package/lib/one-column-layout/one-column-layout.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-one-column-layout": React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface PageProps {
+    children?: ReactNode;
+}
+export declare function GoAOneColumnLayout(props: PageProps): JSX.Element;
+export default GoAOneColumnLayout;

package/lib/page-block/page-block.d.ts

@@ -1,16 +1,17 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode } from "react";
 export interface WCPageBlockProps {
     width: "full" | string;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-page-block': WCPageBlockProps & React.HTMLAttributes<HTMLElement>;
+            "goa-page-block": WCPageBlockProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
 export interface PageBlockProps {
     width: "full" | string;
-    children: ReactNode;
+    testId?: string;
+    children?: ReactNode;
 }
 export declare const GoAPageBlock: FC<PageBlockProps>;

package/lib/pages/pages.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
+    current?: number;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-pages": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface PagesProps extends Margins {
+    current?: number;
+    children?: ReactNode;
+}
+export declare function GoAPages(props: PagesProps): JSX.Element;
+export default GoAPages;

package/lib/pagination/pagination.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
+    ref?: React.MutableRefObject<HTMLElement | undefined>;
+    itemcount: number;
+    perpagecount?: number;
+    pagenumber: number;
+    variant?: "all" | "links-only";
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-pagination": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface PaginationProps extends Margins {
+    itemCount: number;
+    perPageCount?: number;
+    pageNumber: number;
+    variant?: "all" | "links-only";
+    onChange: (page: number) => void;
+    testId?: string;
+}
+export declare function GoAPagination(props: PaginationProps): JSX.Element;
+export default GoAPagination;

package/lib/popover/popover.d.ts

@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from "react";
+import { Margins } from "../../common/styling";
+declare type Position = "above" | "below" | "auto";
+interface WCProps extends Margins {
+    maxwidth?: string;
+    padded?: boolean;
+    position?: Position;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-popover": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props extends Margins {
+    target?: ReactNode;
+    testId?: string;
+    maxWidth?: string;
+    padded?: boolean;
+    position?: Position;
+    children: ReactNode;
+}
+export declare const GoAPopover: FC<Props>;
+export default GoAPopover;

package/lib/radio-group/radio-group.d.ts

@@ -1,27 +1,31 @@
-import React, { FC } from 'react';
-export * from './radio';
-interface RadioGroupProps {
+import React, { FC } from "react";
+import { Margins } from "../../common/styling";
+export * from "./radio";
+interface RadioGroupProps extends Margins {
     ref: React.RefObject<HTMLElement>;
     name: string;
     value?: string;
     orientation: string;
     disabled: boolean;
     error: boolean;
+    arialabel?: string;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-radio-group': RadioGroupProps & React.HTMLAttributes<HTMLElement>;
+            "goa-radio-group": RadioGroupProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
-interface Props {
+interface Props extends Margins {
     name: string;
     value?: string;
     disabled?: boolean;
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: "horizontal" | "vertical";
     testId?: string;
     error?: boolean;
+    ariaLabel?: string;
+    children?: React.ReactNode;
     onChange: (name: string, value: string) => void;
 }
 export declare const GoARadioGroup: FC<Props>;

package/lib/radio-group/radio.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
 interface RadioItemProps {
     name: string;
     value: string;
@@ -10,7 +10,7 @@ interface RadioItemProps {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-radio-item': RadioItemProps & React.HTMLAttributes<HTMLElement>;
+            "goa-radio-item": RadioItemProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
@@ -21,6 +21,7 @@ interface Props {
     disabled?: boolean;
     checked?: boolean;
     error?: boolean;
+    children?: React.ReactNode;
     testId?: string;
 }
 export declare const GoARadioItem: FC<Props>;

package/lib/side-menu/side-menu.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-side-menu": React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface SideMenuProps {
+    children: ReactNode;
+}
+export declare function GoASideMenu(props: SideMenuProps): JSX.Element;
+export default GoASideMenu;

package/lib/side-menu-group/side-menu-group.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+interface WCProps {
+    heading: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-side-menu-group": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface SideMenuGroupProps {
+    heading: string;
+    children?: ReactNode;
+}
+export declare function GoASideMenuGroup(props: SideMenuGroupProps): JSX.Element;
+export default GoASideMenuGroup;

package/lib/skeleton/skeleton.d.ts

@@ -1,19 +1,26 @@
-import React from 'react';
-export declare type SkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile";
-interface WCProps {
-    size: number;
+import React from "react";
+import { Margins } from "../../common/styling";
+export declare type SkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile" | "article";
+declare type SkeletonSize = 1 | 2 | 3 | 4;
+interface WCProps extends Margins {
+    maxwidth?: string;
+    size?: SkeletonSize;
+    linecount?: number;
     type: SkeletonType;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-skeleton': WCProps & React.HTMLAttributes<HTMLElement>;
+            "goa-skeleton": WCProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
-export interface SkeletonProps {
+export interface SkeletonProps extends Margins {
+    maxWidth?: string;
+    size?: SkeletonSize;
+    lineCount?: number;
     type: SkeletonType;
-    size?: number;
+    testId?: string;
 }
-export declare const GoASkeleton: ({ type, size }: SkeletonProps) => JSX.Element;
+export declare const GoASkeleton: ({ maxWidth, size, lineCount, type, testId, mt, mr, mb, ml, }: SkeletonProps) => JSX.Element;
 export default GoASkeleton;

package/lib/spacer/spacer.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { Spacing } from "../../common/styling";
+interface WCProps {
+    hspacing?: Spacing | "fill";
+    vspacing?: Spacing;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-spacer": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface SpacerProps {
+    hSpacing?: Spacing | "fill";
+    vSpacing?: Spacing;
+    testId?: string;
+}
+export declare function GoASpacer(props: SpacerProps): JSX.Element;
+export default GoASpacer;

package/lib/spinner/spinner.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export declare type SpinnerType = "infinite" | "progress";
 export declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
 interface WCProps {
@@ -6,12 +6,11 @@ interface WCProps {
     type: SpinnerType;
     invert?: boolean;
     progress?: number;
-    testid?: string;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-spinner': WCProps & React.HTMLAttributes<HTMLElement>;
+            "goa-spinner": WCProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
@@ -22,5 +21,5 @@ export interface SpinnerProps {
     progress?: number;
     testId?: string;
 }
-export declare const GoASpinner: ({ type, size, progress, invert, testId }: SpinnerProps) => JSX.Element;
+export declare const GoASpinner: ({ type, size, progress, invert, testId, }: SpinnerProps) => JSX.Element;
 export default GoASpinner;

package/lib/table/table-sort-header.d.ts

@@ -0,0 +1,20 @@
+import React, { FC } from "react";
+export declare type Direction = "asc" | "desc" | "none";
+interface WCProps {
+    name?: string;
+    direction?: Direction;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-table-sort-header": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    name?: string;
+    direction?: Direction;
+    children?: React.ReactNode;
+}
+export declare const GoATableSortHeader: FC<Props>;
+export default GoATableSortHeader;

package/lib/table/table.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+import { Margins } from "../../common/styling";
+export declare type TableVariant = "normal" | "relaxed";
+interface WCProps extends Margins {
+    ref?: React.MutableRefObject<HTMLElement | null>;
+    width?: string;
+    stickyheader?: boolean;
+    variant?: TableVariant;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-table": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface TableProps extends Margins {
+    width?: string;
+    onSort?: (sortBy: string, sortDir: number) => void;
+    variant?: TableVariant;
+    testId?: string;
+    children: ReactNode;
+}
+export declare function GoATable(props: TableProps): JSX.Element;
+export default GoATable;

package/lib/textarea/textarea.d.ts

@@ -1,5 +1,6 @@
-import React, { FC } from 'react';
-interface WCProps {
+import React, { FC } from "react";
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
     ref: React.Ref<HTMLTextAreaElement>;
     name: string;
     value: string;
@@ -10,15 +11,16 @@ interface WCProps {
     showcounter?: boolean;
     maxcharcount?: number;
     width?: string;
+    arialabel?: string;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'goa-textarea': WCProps & React.HTMLAttributes<HTMLElement>;
+            "goa-textarea": WCProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
-interface Props {
+interface Props extends Margins {
     name: string;
     value: string;
     id?: string;
@@ -30,6 +32,7 @@ interface Props {
     maxCharCount?: number;
     width?: string;
     testId?: string;
+    ariaLabel?: string;
     onChange: (name: string, value: string) => void;
 }
 export declare const GoATextArea: FC<Props>;

package/lib/three-column-layout/three-column-layout.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from "react";
+interface WCProps {
+    leftcolumnwidth?: string;
+    maxcontentwidth?: string;
+    rightcolumnwidth?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-three-column-layout": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    leftColumnWidth?: string;
+    rightColumnWidth?: string;
+    maxContentWidth?: string;
+    header?: ReactNode;
+    footer?: ReactNode;
+    nav?: ReactNode;
+    sidebar?: ReactNode;
+    sideMenu?: ReactNode;
+    children: ReactNode;
+}
+export declare function GoAThreeColumnLayout(props: Props): JSX.Element;
+export default GoAThreeColumnLayout;

package/lib/tooltip/tooltip.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
+    position?: string;
+    content?: string;
+    halign?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-tooltip": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface TooltipProps extends Margins {
+    position?: string;
+    content?: string;
+    hAlign?: string;
+    testId?: string;
+}
+export declare const GoATooltip: React.FC<TooltipProps>;
+export default GoATooltip;