@abgov/react-components 3.4.0-alpha.1 → 3.4.0-alpha.5

package/index.d.ts

@@ -1,24 +1,30 @@
 /**
  * IMPORTANT: Do NOT export experimental components in this file.
  */
-import '../../core-css/src/lib/styles/v2/reset.scss';
-import '../../core-css/src/lib/styles/fonts/fonts.scss';
-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 '@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 { 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 { GoAHeroBannerContent } from './lib/hero-banner/hero-banner-content';
+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 { GoAModal } from './lib/modal/modal';
+import { GoANotification } from './lib/notification/notification';
+import { GoAPageLoader } from './lib/page-loader/page-loader';
 import { GoARadioGroup, GoARadio } from './lib/radio-group/radio-group';
-import { GoASkeletonContent } from './lib/skeleton/skeleton-titled-content';
-import { GoASkeletonGridColumnContent } from './lib/skeleton/skeleton-grid-column';
-import { GoASkeletonImageContent } from './lib/skeleton/skeleton-image-content';
-import GoACard from './lib/card/card.component';
-import GoACardGroup from './lib/card-group/card.group.component';
-import GoACheckbox from './lib/checkbox/checkbox';
-import GoAHeroBannerContent from './lib/hero-banner/content/hero-banner-content.component';
-import GoAHeroBannerLink from './lib/hero-banner/link/hero-banner-link.component';
-import GoAPageLoader from './lib/page-loader/page-loader';
-import { GoAElementLoader } from './lib/element-loader/element-loader';
-export { GoAPageLoader, GoAElementLoader, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent, GoANotification, GoARadioGroup, GoARadio, GoACallout, GoAButton, GoAHeader, GoAMicrositeLogo, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoACard, GoACardGroup, GoADropdown, GoADropdownOption, GoACheckbox, };
+import { GoAServiceLevelHeader } from './lib/service-level-header/service-level-header';
+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, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, 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/{experimental/experimental/badge/badge.component.d.ts → lib/badge/badge.d.ts}

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { GoAIconType } from '../icons';
+import './badge.scss';
 export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
 interface GoABadgeProps {
     type: GoABadgeType;
@@ -7,6 +8,19 @@ interface GoABadgeProps {
     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>;

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' | 'borderless' | 'red';
-declare type ButtonSize = 'small' | 'normal';
+import React, { FC, ReactNode } from 'react';
+import './button.css';
+declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'borderless';
+declare type ButtonSize = 'small' | 'medium' | 'large';
+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: () => 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,28 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-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,13 +1,31 @@
-import { FC } from 'react';
-import './checkbox.scss';
-export interface CheckboxProps {
+import React, { FC } from 'react';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-checkbox': CheckboxProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface CheckboxProps {
+    ref: React.RefObject<HTMLElement>;
+    name: string;
+    checked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    error?: boolean;
+    text?: string;
+    value?: string | number | boolean;
+}
+export interface Props {
     name: string;
     checked?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
-    content?: string;
+    error?: boolean;
+    text?: string;
     value?: string | number | boolean;
-    onChange?: (name: string, value: string) => void;
+    testId?: string;
+    onChange?: (name: string, checked: boolean, value: string) => void;
 }
-export declare const GoACheckbox: FC<CheckboxProps>;
+export declare const GoACheckbox: FC<Props>;
 export default GoACheckbox;

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

@@ -1,7 +1,24 @@
-import { FC } from 'react';
-import type { GoAIconType } from '../../experimental';
-import './dropdown.scss';
-export { GoADropdownOption } from './option';
+import React, { FC } from "react";
+import { GoAIconType } from "../icons";
+export * from './dropdown-option';
+interface DropdownProps {
+    ref: React.MutableRefObject<HTMLElement | null>;
+    name: string;
+    values: string;
+    leadingicon?: string;
+    maxheight?: number;
+    placeholder?: string;
+    autocomplete?: boolean;
+    disabled?: boolean;
+    multiselect?: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-dropdown': DropdownProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 interface Props {
     name: string;
     selectedValues: string[];
@@ -12,6 +29,7 @@ interface Props {
     maxHeight?: number;
     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 * as GoAFlexRow from './row';

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

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+interface WCProps {
+    name: string;
+    label: string;
+    optional?: boolean;
+    error?: string;
+    helptext?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-form-item': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface GoAFormItemProps {
+    name: string;
+    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 * as GoAFormItem from './form-item';

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-content.d.ts

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

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 {};

package/{experimental/experimental/icons/icon.component.d.ts → lib/icons/icon.d.ts}

@@ -1,13 +1,37 @@
-/// <reference types="react" />
-import './icons.scss';
+import React from 'react';
+declare type GoAIconFilledType = `${GoAIconType}-${IconTheme}`;
+interface IonIconProps {
+    name: GoAIconType | GoAIconFilledType;
+}
+interface IonIconElement extends HTMLElement {
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ion-icon': IonIconProps & React.HTMLAttributes<IonIconElement>;
+        }
+    }
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-icon': WCProps & React.HTMLAttributes<IonIconElement>;
+        }
+    }
+}
 export declare type GoAIconType = 'accessibility' | 'add-circle' | 'add' | 'airplane' | 'alarm' | 'albums' | 'alert-circle' | 'alert' | 'american-football' | 'analytics' | 'aperture' | 'apps' | 'archive' | 'arrow-back-circle' | 'arrow-back' | 'arrow-down-circle' | 'arrow-down' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-redo-circle' | 'arrow-redo' | 'arrow-undo-circle' | 'arrow-undo' | 'arrow-up-circle' | 'arrow-up' | 'at-circle' | 'at' | 'attach' | 'backspace' | 'bag-add' | 'bag-check' | 'bag-handle' | 'bag' | 'bag-remove' | 'balloon' | 'ban' | 'bandage' | 'bar-chart' | 'barbell' | 'barcode' | 'baseball' | 'basket' | 'basketball' | 'battery-charging' | 'battery-dead' | 'battery-full' | 'battery-half' | 'beaker' | 'bed' | 'beer' | 'bicycle' | 'bluetooth' | 'boat' | 'body' | 'bonfire' | 'book' | 'bookmark' | 'bookmarks' | 'bowling-ball' | 'briefcase' | 'browsers' | 'brush' | 'bug' | 'build' | 'bulb' | 'bus' | 'business' | 'cafe' | 'calculator' | 'calendar-clear' | 'calendar-number' | 'calendar' | 'call' | 'camera' | 'camera-reverse' | 'car' | 'car-sport' | 'card' | 'caret-back-circle' | 'caret-back' | 'caret-down-circle' | 'caret-down' | 'caret-forward-circle' | 'caret-forward' | 'caret-up-circle' | 'caret-up' | 'cart' | 'cash' | 'cellular' | 'chatbox-ellipses' | 'chatbox' | 'chatbubble-ellipses' | 'chatbubble' | 'chatbubbles' | 'checkbox' | 'checkmark-circle' | 'checkmark-done-circle' | 'checkmark-done' | 'checkmark' | 'chevron-back-circle' | 'chevron-back' | 'chevron-down-circle' | 'chevron-down' | 'chevron-forward-circle' | 'chevron-forward' | 'chevron-up-circle' | 'chevron-up' | 'clipboard' | 'close-circle' | 'close' | 'cloud-circle' | 'cloud-done' | 'cloud-download' | 'cloud-offline' | 'cloud' | 'cloud-upload' | 'cloudy-night' | 'cloudy' | 'code-download' | 'code' | 'code-slash' | 'code-working' | 'cog' | 'color-fill' | 'color-filter' | 'color-palette' | 'color-wand' | 'compass' | 'construct' | 'contract' | 'contrast' | 'copy' | 'create' | 'crop' | 'cube' | 'cut' | 'desktop' | 'diamond' | 'dice' | 'disc' | 'document-attach' | 'document-lock' | 'document' | 'document-text' | 'documents' | 'download' | 'duplicate' | 'ear' | 'earth' | 'easel' | 'egg' | 'ellipse' | 'ellipsis-horizontal-circle' | 'ellipsis-horizontal' | 'ellipsis-vertical-circle' | 'ellipsis-vertical' | 'enter' | 'exit' | 'expand' | 'extension-puzzle' | 'eye-off' | 'eye' | 'eyedrop' | 'fast-food' | 'female' | 'file-tray-full' | 'file-tray' | 'file-tray-stacked' | 'filenames.ps1' | 'film' | 'filter-circle' | 'filter' | 'finger-print' | 'fish' | 'fitness' | 'flag' | 'flame' | 'flash-off' | 'flash' | 'flashlight' | 'flask' | 'flower' | 'folder-open' | 'folder' | 'football' | 'footsteps' | 'funnel' | 'game-controller' | 'gift' | 'git-branch' | 'git-commit' | 'git-compare' | 'git-merge' | 'git-network' | 'git-pull-request' | 'glasses' | 'globe' | 'golf' | 'grid' | 'hammer' | 'hand-left' | 'hand-right' | 'happy' | 'hardware-chip' | 'headset' | 'heart-circle' | 'heart-dislike-circle' | 'heart-dislike' | 'heart-half' | 'heart' | 'help-buoy' | 'help-circle' | 'help' | 'home' | 'hourglass' | 'ice-cream' | 'id-card' | 'image' | 'images' | 'infinite' | 'information-circle' | 'information' | 'invert-mode' | 'journal' | 'key' | 'keypad' | 'language' | 'laptop' | 'layers' | 'leaf' | 'library' | 'link' | 'list-circle' | 'list' | 'locate' | 'location' | 'lock-closed' | 'lock-open' | 'log-in' | 'log-out' | 'magnet' | 'mail-open' | 'mail' | 'mail-unread' | 'male-female' | 'male' | 'man' | 'map' | 'medal' | 'medical' | 'medkit' | 'megaphone' | 'menu' | 'mic-circle' | 'mic-off-circle' | 'mic-off' | 'mic' | 'moon' | 'move' | 'musical-note' | 'musical-notes' | 'navigate-circle' | 'navigate' | 'newspaper' | 'notifications-circle' | 'notifications-off-circle' | 'notifications-off' | 'notifications' | 'nuclear' | 'nutrition' | 'open' | 'options' | 'paper-plane' | 'partly-sunny' | 'pause-circle' | 'pause' | 'paw' | 'pencil' | 'people-circle' | 'people' | 'person-add' | 'person-circle' | 'person' | 'person-remove' | 'phone-landscape' | 'phone-portrait' | 'pie-chart' | 'pin' | 'pint' | 'pizza' | 'planet' | 'play-back-circle' | 'play-back' | 'play-circle' | 'play-forward-circle' | 'play-forward' | 'play' | 'play-skip-back-circle' | 'play-skip-back' | 'play-skip-forward-circle' | 'play-skip-forward' | 'podium' | 'power' | 'pricetag' | 'pricetags' | 'print' | 'prism' | 'pulse' | 'push' | 'qr-code' | 'radio-button-off' | 'radio-button-on' | 'radio' | 'rainy' | 'reader' | 'receipt' | 'recording' | 'refresh-circle' | 'refresh' | 'reload-circle' | 'reload' | 'remove-circle' | 'remove' | 'reorder-four' | 'reorder-three' | 'reorder-two' | 'repeat' | 'resize' | 'restaurant' | 'return-down-back' | 'return-down-forward' | 'return-up-back' | 'return-up-forward' | 'ribbon' | 'rocket' | 'rose' | 'sad' | 'save' | 'scale' | 'scan-circle' | 'scan' | 'school' | 'search-circle' | 'search' | 'send' | 'server' | 'settings' | 'shapes' | 'share' | 'share-social' | 'shield-checkmark' | 'shield-half' | 'shield' | 'shirt' | 'shuffle' | 'skull' | 'snow' | 'sparkles' | 'speedometer' | 'square' | 'star-half' | 'star' | 'stats-chart' | 'stop-circle' | 'stop' | 'stopwatch' | 'storefront' | 'subway' | 'sunny' | 'swap-horizontal' | 'swap-vertical' | 'sync-circle' | 'sync' | 'tablet-landscape' | 'tablet-portrait' | 'telescope' | 'tennisball' | 'terminal' | 'text' | 'thermometer' | 'thumbs-down' | 'thumbs-up' | 'thunderstorm' | 'ticket' | 'time' | 'timer' | 'today' | 'toggle' | 'trail-sign' | 'train' | 'transgender' | 'trash-bin' | 'trash' | 'trending-down' | 'trending-up' | 'triangle' | 'trophy' | 'tv' | 'umbrella' | 'unlink' | 'videocam-off' | 'videocam' | 'volume-high' | 'volume-low' | 'volume-medium' | 'volume-mute' | 'volume-off' | 'walk' | 'wallet' | 'warning' | 'watch' | 'water' | 'wifi' | 'wine' | 'woman';
 export declare type IconSize = 'small' | 'medium' | 'large' | 'xlarge';
 export declare type IconVariant = 'primary' | 'secondary' | 'tertiary';
-export declare type IconStyle = 'outline' | 'filled' | 'sharp';
+export declare type IconTheme = 'outline' | 'filled' | 'sharp';
 interface Props {
     type: GoAIconType;
     size?: IconSize;
-    style?: IconStyle;
+    theme?: IconTheme;
+}
+interface WCProps {
+    type: GoAIconType;
+    theme: IconTheme;
+    size: IconSize;
 }
-export declare function GoAIcon({ type, style, size }: Props): JSX.Element;
+export declare function GoAIcon({ type, theme, size }: Props): JSX.Element;
 export {};

package/lib/icons/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon';
+export * from './icon-button';

package/{experimental/experimental/input/input.component.d.ts → lib/input/input.d.ts}

@@ -1,11 +1,31 @@
-import { FC } from 'react';
-import { GoAIconType } from '../icons';
-import { OnChange } from '../../lib/_common/input';
-import './input.scss';
+import React, { FC } from 'react';
+import { GoAIconType } from '../..';
+interface WCProps {
+    ref?: React.MutableRefObject<HTMLInputElement | null>;
+    type: string;
+    name: string;
+    value: string;
+    id?: string;
+    placeholder?: string;
+    leadingicon?: string;
+    trailingicon?: string;
+    variant: string;
+    disabled?: boolean;
+    error?: string;
+    readonly?: boolean;
+    handletrailingiconclick: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-input': WCProps & React.HTMLAttributes<HTMLInputElement>;
+        }
+    }
+}
 interface Props {
     name: string;
     value: string;
-    onChange: OnChange;
+    onChange: (name: string, value: string) => void;
     id?: string;
     disabled?: boolean;
     placeholder?: string;
@@ -15,6 +35,7 @@ interface Props {
     variant?: 'goa' | 'bare';
     focused?: boolean;
     readonly?: boolean;
+    error?: string;
 }
 export declare const GoAInput: FC<Props & {
     type: string;