@abgov/react-components 3.4.0-beta.8 → 4.0.0-alpha.2

package/index.d.ts

@@ -1,16 +1,33 @@
-import GoACallout from './lib/callout/callout';
-import GoANotification from './lib/notification/notification';
-import GoAButton from './lib/button/button';
-import GoAHeader from './lib/header/header';
-import GoAMicrositeLogo from './lib/microsite-logo/microsite-logo';
-import GoAHeroBanner from './lib/hero-banner/hero-banner.component';
-import GoAHeroBannerContent from './lib/hero-banner/content/hero-banner-content.component';
-import GoAHeroBannerLink from './lib/hero-banner/link/hero-banner-link.component';
-import GoACard from './lib/card/card.component';
-import { GoARadioGroup, GoARadio } from './lib/radio-group/radio-group';
-import GoACardGroup from './lib/card-group/card.group.component';
-import { GoADropdown, GoAOption, GoAOptionGroup } from './lib/dropdown/dropdown.component';
-import GoACheckbox from './lib/checkbox/checkbox';
-import GoAPageLoader from './lib/page-loader/page-loader';
-import { GoABadge, GoAElementLoader, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent, GoAFormItem, GoAFormActions, GoAForm, GoAInput } from './experimental';
-export { GoABadge, GoAPageLoader, GoAElementLoader, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent, GoAFormItem, GoAFormActions, GoAForm, GoAInput, GoANotification, GoARadioGroup, GoARadio, GoACallout, GoAButton, GoAHeader, GoAMicrositeLogo, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoACard, GoACardGroup, GoADropdown, GoAOption, GoAOptionGroup, GoACheckbox, };
+/**
+ * IMPORTANT: Do NOT export experimental components in this file.
+ */
+import '@abgov/web-components';
+import { GoAAppHeader } from './lib/app-header/app-header';
+import { GoABadge, GoAInfoBadge, GoAEmergencyBadge, GoASuccessBadge, GoAWarningBadge } from './lib/badge/badge';
+import { GoAButton } from './lib/button/button';
+import { GoAButtonGroup } from './lib/button-group/button-group';
+import { GoACallout } from './lib/callout/callout';
+import { GoACheckbox } from './lib/checkbox/checkbox';
+import { GoAChip } from './lib/chip/chip';
+import { GoACircularProgress } from './lib/circular-progress/circular-progress';
+import { GoAContainer } from './lib/container/container';
+import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
+import { GoAFlexRow } from './lib/flex';
+import { GoAFormItem } from './lib/form';
+import { GoAHeroBanner } from './lib/hero-banner/hero-banner';
+import { GoAHeroBannerActions } from './lib/hero-banner/hero-banner-actions';
+import { GoAIcon, GoAIconButton } from './lib/icons';
+import { GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange } from './lib/input/input';
+import { GoAMicrositeHeader } from './lib/microsite-header/microsite-header';
+import { GoAModal } from './lib/modal/modal';
+import { GoANotification } from './lib/notification/notification';
+import { GoAPageBlock } from './lib/page-block/page-block';
+import { GoARadioGroup, GoARadioItem } from './lib/radio-group/radio-group';
+import { GoASkeleton } from './lib/skeleton/skeleton';
+import { GoASpinner } from './lib/spinner/spinner';
+import { GoATextArea } from './lib/textarea/textarea';
+import type { GoAIconType } from './lib/icons';
+import type { GoABadgeType } from './lib/badge/badge';
+export type { GoAIconType };
+export type { GoABadgeType };
+export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge, };

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

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+interface WCProps {
+    title: string;
+    url?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-app-header': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    title: string;
+    url?: string;
+}
+export declare const GoAAppHeader: FC<Props>;
+export default GoAAppHeader;

package/lib/badge/badge.d.ts

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { GoAIconType } from '../icons';
+export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
+interface GoABadgeProps {
+    type: GoABadgeType;
+    icon?: GoAIconType;
+    content?: string;
+    testId?: string;
+}
+interface WCProps {
+    type: GoABadgeType;
+    icon?: GoAIconType;
+    content?: string;
+    testid?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-badge': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export declare const GoABadge: FC<GoABadgeProps>;
+export declare const GoAInfoBadge: FC<GoABadgeProps>;
+export declare const GoASuccessBadge: FC<GoABadgeProps>;
+export declare const GoAWarningBadge: FC<GoABadgeProps>;
+export declare const GoAEmergencyBadge: FC<GoABadgeProps>;
+export {};

package/lib/button/button.d.ts

@@ -1,39 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.scss';
-declare type ButtonType = 'primary' | 'secondary' | 'tertiary';
-declare type ButtonSize = 'small' | 'normal';
+import React, { FC, ReactNode } from 'react';
+import './button.css';
+export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'get-started';
+export declare type ButtonSize = 'compact' | 'normal';
+export declare type ButtonVariant = 'default' | 'danger';
+interface WCProps {
+    type?: ButtonType;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    title?: string;
+    ref: React.RefObject<HTMLElement>;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-button': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 declare type ButtonProps = {
-    /**
-     * Type of button
-     */
-    buttonType?: ButtonType;
-    /**
-     * Size of button
-     */
-    buttonSize?: ButtonSize;
-    /**
-     * Mouseover popup description
-     */
+    type?: ButtonType;
     title?: string;
-    /**
-     * Action to take on button click
-     */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Button content (between button tags)
-     */
-    children?: React.ReactNode;
-    [key: string]: any;
-};
-export declare const GoAButton: {
-    ({ buttonType, buttonSize, title, children, onClick, ...props }: ButtonProps): JSX.Element;
-    propTypes: {
-        buttonSize: PropTypes.Requireable<string>;
-        buttonType: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    onClick: (e: any) => void;
+    children: ReactNode;
 };
+export declare const GoAButton: FC<ButtonProps>;
 export default GoAButton;

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

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import './button-group.css';
+declare type Alignment = "start" | "end";
+interface WCProps {
+    alignment?: Alignment;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-button-group': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+declare type ButtonGroupProps = {
+    alignment: Alignment;
+};
+export declare const GoAButtonGroup: FC<ButtonGroupProps>;
+export default GoAButtonGroup;

package/lib/callout/callout.d.ts

@@ -1,29 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import '../../theme.scss';
-import '../../../../core-css/src/lib/styles/callout/callout.scss';
-declare type calloutType = "important" | 'information' | 'event' | 'success' | 'emergency';
+declare type CalloutType = "important" | 'information' | 'event' | 'success' | 'emergency';
+interface WCProps {
+    title?: string;
+    type?: CalloutType;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-callout': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 export interface CalloutProps {
-    /**
-     * Callout title.
-    */
     title?: string;
-    /**
-     * The type of the callout, changes stylings and icons.
-    */
-    type?: calloutType;
-    /**
-     * Callout description
-    */
-    content?: string;
+    type?: CalloutType;
     children?: React.ReactNode;
 }
-export declare const GoACallout: {
-    ({ title, type, content, children, ...props }: CalloutProps): JSX.Element;
-    propTypes: {
-        title: PropTypes.Requireable<string>;
-        type: PropTypes.Validator<string>;
-        content: PropTypes.Requireable<string>;
-    };
-};
+export declare const GoACallout: ({ title, type, children }: CalloutProps) => JSX.Element;
 export default GoACallout;

package/lib/card/card-actions.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+interface WCProps {
+    children: React.ReactNode;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-card-actions': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    children?: React.ReactNode;
+}
+export declare const GoACardActions: FC<Props>;
+export default GoACardActions;

package/lib/card/card-content.d.ts

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-card-content': React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    children?: React.ReactNode;
+}
+export declare const GoACardContent: FC<Props>;
+export default GoACardContent;

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

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+interface WCProps {
+    children: React.ReactNode;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-card-group': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    children?: React.ReactNode;
+}
+export declare const GoACardGroup: FC<Props>;
+export default GoACardGroup;

package/lib/card/card-image.d.ts

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+interface WCProps {
+    src: string;
+    height: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-card-image': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    src: string;
+    height: string;
+}
+export declare const GoACardImage: FC<Props>;
+export default GoACardImage;

package/lib/card/card.d.ts

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+interface WCProps {
+    elevation: number;
+    children: React.ReactNode;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-card': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    elevation: number;
+    children?: React.ReactNode;
+}
+export declare const GoACard: FC<Props>;
+export default GoACard;

package/lib/card/index.d.ts

@@ -0,0 +1,5 @@
+export * from './card-content';
+export * from './card-image';
+export * from './card-actions';
+export * from './card-group';
+export * from './card';

package/lib/checkbox/checkbox.d.ts

@@ -1,40 +1,31 @@
-import React from 'react';
-import './checkbox.scss';
-declare type LabelPosition = "before" | "after";
-export interface CheckboxProps {
-    /**
-     * Boolean indicating whether or not the checkbox is checked/selected.
-    */
+import React, { FC } from 'react';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-checkbox': CheckboxProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface CheckboxProps {
+    ref: React.RefObject<HTMLElement>;
+    id?: string;
+    name: string;
+    checked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    text?: string;
+    value?: string | number | boolean;
+}
+export interface Props {
+    id?: string;
+    name: string;
     checked?: boolean;
-    /**
-     * Boolean indicating whether or not the checkbox is required.
-    */
-    required?: boolean;
-    /**
-     * Boolean indicating whether or not the checkbox is disabled.
-    */
     disabled?: boolean;
-    /**
-     * Boolean indicating whether or not the checkbox should display as indeterminate (i.e. it has associated 'child' checkboxes, some of which are selected)
-    */
-    indeterminate?: boolean;
-    /**
-     * The position to display the label/text for the checkbox. Valid values are before and after.
-    */
-    labelPosition?: LabelPosition;
-    /**
-     * The content of the checkbox label.
-    */
-    content?: string;
-    /**
-     * The value of the checkbox.
-    */
-    value?: string;
-    children?: React.ReactNode;
-    /**
-     * Callback which returns whether button is checked.
-    */
-    selectionChange?: (value: boolean) => void;
+    error?: boolean;
+    text?: string;
+    value?: string | number | boolean;
+    testId?: string;
+    onChange?: (name: string, checked: boolean, value: string) => void;
 }
-export declare const GoACheckbox: ({ checked, required, disabled, indeterminate, labelPosition, value, content, children, selectionChange }: CheckboxProps) => JSX.Element;
+export declare const GoACheckbox: FC<Props>;
 export default GoACheckbox;

package/lib/chip/chip.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface WCProps {
+    ref: React.RefObject<HTMLElement>;
+    leadingicon: string;
+    error: boolean;
+    deletable: boolean;
+    content: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-chip': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface Props {
+    onDeleteIconClick?: () => void;
+    leadingIcon?: string;
+    error?: boolean;
+    content: string;
+}
+export declare const GoAChip: ({ leadingIcon, error, content, onDeleteIconClick }: Props) => JSX.Element;
+export default GoAChip;

package/lib/circular-progress/circular-progress.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export declare type CircularProgressType = 'infinite' | 'progress';
+export declare type CircularProgressVariant = "fullscreen" | "inline";
+export declare type CircularProgressSize = "small" | "large";
+interface WCProps {
+    type?: CircularProgressType;
+    variant?: CircularProgressVariant;
+    size?: CircularProgressSize;
+    message?: string;
+    visible?: string;
+    progress?: number;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-circular-progress': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface CircularProgressProps {
+    type?: CircularProgressType;
+    variant?: CircularProgressVariant;
+    size?: CircularProgressSize;
+    message?: string;
+    visible?: boolean;
+    progress?: number;
+}
+export declare const GoACircularProgress: ({ type, visible, message, progress, variant, size }: CircularProgressProps) => JSX.Element;
+export default GoACircularProgress;

package/lib/container/container.d.ts

@@ -0,0 +1,23 @@
+import React, { FC, ReactNode } from 'react';
+declare type ContainerVariant = 'primary' | 'info' | 'error' | 'success' | 'warning' | 'default';
+declare type HeadingSize = 'large' | 'small' | 'none';
+interface WCProps {
+    variant: ContainerVariant;
+    headingsize: HeadingSize;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-container': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    headingSize: HeadingSize;
+    variant?: ContainerVariant;
+    title?: ReactNode;
+    actions?: ReactNode;
+    children: ReactNode;
+}
+export declare const GoAContainer: FC<Props>;
+export default GoAContainer;

package/lib/dropdown/dropdown-option.d.ts

@@ -0,0 +1,21 @@
+import React, { FC } from "react";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-dropdown-item': DropdownOptionProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface DropdownOptionProps {
+    name: string;
+    value: string;
+    label?: string;
+}
+interface Props {
+    name: string;
+    value: string;
+    label?: string;
+    testId?: string;
+}
+export declare const GoADropdownOption: FC<Props>;
+export default GoADropdownOption;

package/lib/dropdown/dropdown.d.ts

@@ -0,0 +1,37 @@
+import React, { FC } from "react";
+import { GoAIconType } from "../icons";
+export * from './dropdown-option';
+interface WCProps {
+    ref: React.MutableRefObject<HTMLElement | null>;
+    name: string;
+    values: string;
+    leadingicon?: string;
+    maxheight?: number;
+    placeholder?: string;
+    filterable?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    multiselect?: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-dropdown': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    name: string;
+    values: string[];
+    onChange: (name: string, values: string[]) => void;
+    disabled?: boolean;
+    filterable?: boolean;
+    leadingIcon?: GoAIconType;
+    maxHeight?: number;
+    error?: boolean;
+    multiselect?: boolean;
+    placeholder?: string;
+    testId?: string;
+}
+export declare const GoADropdown: FC<Props>;
+export default GoADropdown;

package/lib/flex/index.d.ts

@@ -0,0 +1 @@
+export { GoAFlexRow } from './row';

package/lib/flex/row.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface Props {
+    gap?: 'small' | 'medium' | 'large';
+    minWidth?: number | string;
+}
+export declare const GoAFlexRow: FC<Props>;
+export default GoAFlexRow;

package/lib/form/form-item.d.ts

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+interface WCProps {
+    label: string;
+    optional?: boolean;
+    error?: string;
+    helptext?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-form-item': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface GoAFormItemProps {
+    label: string;
+    optional?: boolean;
+    error?: string;
+    helpText?: string;
+}
+export declare const GoAFormItem: FC<GoAFormItemProps>;
+export default GoAFormItem;

package/lib/form/index.d.ts

@@ -0,0 +1 @@
+export { GoAFormItem } from './form-item';

package/lib/form/validators.d.ts

@@ -0,0 +1,10 @@
+export declare type FormValidatorFn = (val: string) => [boolean, string];
+export declare class FormValidator {
+    private items;
+    constructor();
+    add(fieldName: string, validators: FormValidatorFn[]): void;
+    validate(data: Record<string, string>): Record<string, string>;
+}
+export declare const requiredFieldValidator: FormValidatorFn;
+export declare const emailFormatValidator: FormValidatorFn;
+export declare const phoneNumberFormatValidator: FormValidatorFn;

package/lib/hero-banner/hero-banner-actions.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+export declare type GoAHeroBannerActionsType = FC;
+export declare const GoAHeroBannerActions: GoAHeroBannerActionsType;
+export default GoAHeroBannerActions;

package/lib/hero-banner/hero-banner.d.ts

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+interface WCProps {
+    title: string;
+    backgroundurl: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-hero-banner': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    title: string;
+    backgroundUrl: string;
+}
+export declare const GoAHeroBanner: FC<Props>;
+export default GoAHeroBanner;

package/lib/icons/icon-button.d.ts

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { IconSize, GoAIconType, IconVariant } from './icon';
+interface WCProps {
+    ref: React.RefObject<HTMLElement>;
+    type: GoAIconType;
+    size?: IconSize;
+    variant?: IconVariant;
+    title?: string;
+    disabled?: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-icon-button': WCProps & React.HTMLAttributes<HTMLButtonElement>;
+        }
+    }
+}
+interface Props {
+    type: GoAIconType;
+    size?: IconSize;
+    variant?: IconVariant;
+    title?: string;
+    disabled?: boolean;
+    onClick: () => void;
+}
+export declare const GoAIconButton: FC<Props>;
+export {};