@abgov/react-components 4.17.0-alpha.1 → 4.17.0-alpha.3

package/lib/accordion/accordion.d.ts

@@ -1,9 +1,9 @@
-import React, { FC, ReactNode } from "react";
+import { ReactNode } from "react";
 import { Margins } from "../../common/styling";
-declare type HeadingSize = "small" | "medium";
+export declare type GoAHeadingSize = "small" | "medium";
 interface WCProps extends Margins {
     open?: boolean;
-    headingSize?: HeadingSize;
+    headingSize?: GoAHeadingSize;
     heading: string;
     secondaryText?: string;
     headingContent?: ReactNode;
@@ -15,14 +15,14 @@ declare global {
         }
     }
 }
-interface Props extends Margins {
+export interface GoAAccordionProps extends Margins {
     open?: boolean;
-    headingSize?: HeadingSize;
+    headingSize?: GoAHeadingSize;
     secondaryText?: string;
     heading: string;
     headingContent?: ReactNode;
     testid?: string;
     children: ReactNode;
 }
-export declare const GoAAccordion: FC<Props>;
+export declare function GoAAccordion({ open, heading, headingSize, secondaryText, headingContent, testid, children, mt, mr, mb, ml, }: GoAAccordionProps): JSX.Element;
 export default GoAAccordion;

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

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+/// <reference types="react" />
 interface WCProps {
     heading?: string;
     url?: string;
@@ -11,12 +11,12 @@ declare global {
         }
     }
 }
-interface Props {
+export interface GoAAppHeaderProps {
     heading?: string;
     url?: string;
     maxContentWidth?: string;
     children?: React.ReactNode;
     testId?: string;
 }
-export declare const GoAAppHeader: FC<Props>;
+export declare function GoAAppHeader({ heading, url, maxContentWidth, testId, children, }: GoAAppHeaderProps): JSX.Element;
 export default GoAAppHeader;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { GoAIconType } from "../icon/icon";
 interface WCProps {
     heading: string;

package/lib/badge/badge.d.ts

@@ -1,13 +1,6 @@
-import React, { FC } from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
 export declare type GoABadgeType = "information" | "success" | "important" | "emergency" | "dark" | "midtone" | "light";
-interface GoABadgeProps extends Margins {
-    type: GoABadgeType;
-    icon?: boolean;
-    content?: string;
-    testId?: string;
-    ariaLabel?: string;
-}
 interface WCProps extends Margins {
     type: GoABadgeType;
     icon?: boolean;
@@ -21,21 +14,28 @@ declare global {
         }
     }
 }
-export declare const GoABadge: FC<GoABadgeProps>;
+export interface GoABadgeProps extends Margins {
+    type: GoABadgeType;
+    icon?: boolean;
+    content?: string;
+    testId?: string;
+    ariaLabel?: string;
+}
+export declare function GoABadge({ type, content, icon, testId, mt, mr, mb, ml, ariaLabel, }: GoABadgeProps): JSX.Element;
 /**
  * @deprecated
  */
-export declare const GoAInfoBadge: FC<GoABadgeProps>;
+export declare function GoAInfoBadge({ content, testId, icon, mt, mr, mb, ml, ariaLabel, }: GoABadgeProps): JSX.Element;
 /**
  * @deprecated
  */
-export declare const GoASuccessBadge: FC<GoABadgeProps>;
+export declare function GoASuccessBadge({ content, testId, icon, mt, mr, mb, ml, ariaLabel, }: GoABadgeProps): JSX.Element;
 /**
  * @deprecated
  */
-export declare const GoAImportantBadge: FC<GoABadgeProps>;
+export declare function GoAImportantBadge({ content, testId, icon, mt, mr, mb, ml, ariaLabel, }: GoABadgeProps): JSX.Element;
 /**
  * @deprecated
  */
-export declare const GoAEmergencyBadge: FC<GoABadgeProps>;
+export declare function GoAEmergencyBadge({ content, testId, icon, mt, mr, mb, ml, ariaLabel, }: GoABadgeProps): JSX.Element;
 export {};

package/lib/block/block.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { Alignment, Direction, Margins, Spacing } from "../../common/styling";
 export interface WCProps extends Margins {
     gap?: Spacing;
@@ -12,11 +12,12 @@ declare global {
         }
     }
 }
-export interface BlockProps extends Margins {
+export interface GoABlockProps extends Margins {
     gap?: Spacing;
     direction?: Direction;
     alignment?: Alignment;
     testId?: string;
     children?: ReactNode;
 }
-export declare function GoABlock(props: BlockProps): JSX.Element;
+export declare type BlockProps = GoABlockProps;
+export declare function GoABlock(props: GoABlockProps): JSX.Element;

package/lib/button/button.d.ts

@@ -1,13 +1,16 @@
-import React, { FC, ReactNode } from "react";
+import { ReactNode } from "react";
 import { Margins } from "../../common/styling";
 import { GoAIconType } from "../icon/icon";
-export declare type ButtonType = "primary" | "submit" | "secondary" | "tertiary" | "start";
-export declare type ButtonSize = "compact" | "normal";
-export declare type ButtonVariant = "normal" | "destructive";
+export declare type GoAButtonType = "primary" | "submit" | "secondary" | "tertiary" | "start";
+export declare type GoAButtonSize = "compact" | "normal";
+export declare type GoAButtonVariant = "normal" | "destructive";
+export declare type ButtonType = GoAButtonType;
+export declare type ButtonSize = GoAButtonSize;
+export declare type ButtonVariant = GoAButtonVariant;
 interface WCProps extends Margins {
-    type?: ButtonType;
-    size?: ButtonSize;
-    variant?: ButtonVariant;
+    type?: GoAButtonType;
+    size?: GoAButtonSize;
+    variant?: GoAButtonVariant;
     disabled?: boolean;
     leadingicon?: string;
     trailingicon?: string;
@@ -20,10 +23,10 @@ declare global {
         }
     }
 }
-interface ButtonProps extends Margins {
-    type?: ButtonType;
-    size?: ButtonSize;
-    variant?: ButtonVariant;
+export interface GoAButtonProps extends Margins {
+    type?: GoAButtonType;
+    size?: GoAButtonSize;
+    variant?: GoAButtonVariant;
     disabled?: boolean;
     leadingIcon?: GoAIconType;
     trailingIcon?: GoAIconType;
@@ -31,5 +34,5 @@ interface ButtonProps extends Margins {
     testId?: string;
     children?: ReactNode;
 }
-export declare const GoAButton: FC<ButtonProps>;
+export declare function GoAButton({ disabled, type, size, variant, leadingIcon, trailingIcon, testId, children, onClick, mt, mr, mb, ml, }: GoAButtonProps): JSX.Element;
 export default GoAButton;

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

@@ -1,10 +1,11 @@
-import React, { FC } from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
-declare type Alignment = "start" | "end" | "center";
-export declare type Gap = "relaxed" | "compact";
+export declare type GoAButtonGroupAlignment = "start" | "end" | "center";
+export declare type GoAButtonGroupGap = "relaxed" | "compact";
+export declare type Gap = GoAButtonGroupGap;
 interface WCProps extends Margins {
-    alignment: Alignment;
-    gap?: Gap;
+    alignment: GoAButtonGroupAlignment;
+    gap?: GoAButtonGroupGap;
 }
 declare global {
     namespace JSX {
@@ -13,11 +14,11 @@ declare global {
         }
     }
 }
-interface ButtonGroupProps extends Margins {
-    alignment: Alignment;
-    gap?: Gap;
+export interface GoAButtonGroupProps extends Margins {
+    alignment: GoAButtonGroupAlignment;
+    gap?: GoAButtonGroupGap;
     testId?: string;
     children?: React.ReactNode;
 }
-export declare const GoAButtonGroup: FC<ButtonGroupProps>;
+export declare function GoAButtonGroup({ alignment, gap, testId, children, mt, mr, mb, ml, }: GoAButtonGroupProps): JSX.Element;
 export default GoAButtonGroup;

package/lib/calendar/calendar.d.ts

@@ -1,12 +1,5 @@
-import React, { FC } from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
-interface Props extends Margins {
-    name?: string;
-    value?: Date;
-    min?: Date;
-    max?: Date;
-    onChange: (name: string, value: Date) => void;
-}
 interface WCProps extends Margins {
     ref: React.RefObject<HTMLElement>;
     name?: string;
@@ -21,5 +14,12 @@ declare global {
         }
     }
 }
-export declare const GoACalendar: FC<Props>;
+export interface GoACalendarProps extends Margins {
+    name?: string;
+    value?: Date;
+    min?: Date;
+    max?: Date;
+    onChange: (name: string, value: Date) => void;
+}
+export declare function GoACalendar({ name, value, min, max, mt, mr, mb, ml, onChange, }: GoACalendarProps): JSX.Element;
 export default GoACalendar;

package/lib/callout/callout.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
-declare type CalloutType = "important" | "information" | "event" | "success" | "emergency";
-declare type CalloutSize = "medium" | "large";
+export declare type GoACalloutType = "important" | "information" | "event" | "success" | "emergency";
+export declare type GoACalloutSize = "medium" | "large";
 interface WCProps extends Margins {
     heading?: string;
-    type?: CalloutType;
-    size?: CalloutSize;
+    type?: GoACalloutType;
+    size?: GoACalloutSize;
 }
 declare global {
     namespace JSX {
@@ -14,12 +14,13 @@ declare global {
         }
     }
 }
-export interface CalloutProps extends Margins {
+export interface GoACalloutProps extends Margins {
     heading?: string;
-    type?: CalloutType;
-    size?: CalloutSize;
+    type?: GoACalloutType;
+    size?: GoACalloutSize;
     testId?: string;
     children?: React.ReactNode;
 }
-export declare const GoACallout: ({ heading, type, size, testId, children, mt, mr, mb, ml, }: CalloutProps) => JSX.Element;
+export declare type CalloutProps = GoACalloutProps;
+export declare const GoACallout: ({ heading, type, size, testId, children, mt, mr, mb, ml, }: GoACalloutProps) => JSX.Element;
 export default GoACallout;

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+/// <reference types="react" />
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -6,8 +6,8 @@ declare global {
         }
     }
 }
-interface Props {
+export interface GoACardActionsProps {
     children?: React.ReactNode;
 }
-export declare const GoACardActions: FC<Props>;
+export declare function GoACardActions({ children }: GoACardActionsProps): JSX.Element;
 export default GoACardActions;

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+/// <reference types="react" />
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -6,8 +6,8 @@ declare global {
         }
     }
 }
-interface Props {
+export interface GoACardContentProps {
     children?: React.ReactNode;
 }
-export declare const GoACardContent: FC<Props>;
+export declare function GoACardContent({ children }: GoACardContentProps): JSX.Element;
 export default GoACardContent;

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+/// <reference types="react" />
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -6,8 +6,8 @@ declare global {
         }
     }
 }
-interface Props {
+export interface GoACardGroupProps {
     children?: React.ReactNode;
 }
-export declare const GoACardGroup: FC<Props>;
+export declare function GoACardGroup({ children }: GoACardGroupProps): JSX.Element;
 export default GoACardGroup;

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+/// <reference types="react" />
 interface WCProps {
     src: string;
     height: string;
@@ -10,9 +10,9 @@ declare global {
         }
     }
 }
-interface Props {
+export interface GoACardImageProps {
     src: string;
     height: string;
 }
-export declare const GoACardImage: FC<Props>;
+export declare function GoACardImage({ src, height }: GoACardImageProps): JSX.Element;
 export default GoACardImage;

package/lib/card/card.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
 interface WCProps extends Margins {
     elevation?: number;
@@ -12,11 +12,11 @@ declare global {
         }
     }
 }
-interface Props extends Margins {
+export interface GoACardProps extends Margins {
     elevation?: number;
     width?: string;
     testId?: string;
     children?: React.ReactNode;
 }
-export declare const GoACard: FC<Props>;
+export declare function GoACard({ elevation, width, mt, mr, mb, ml, testId, children, }: GoACardProps): JSX.Element;
 export default GoACard;

package/lib/checkbox/checkbox.d.ts

@@ -1,13 +1,13 @@
-import React, { FC } from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            "goa-checkbox": CheckboxProps & React.HTMLAttributes<HTMLElement>;
+            "goa-checkbox": WCProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
-interface CheckboxProps extends Margins {
+interface WCProps extends Margins {
     ref: React.RefObject<HTMLElement>;
     id?: string;
     name: string;
@@ -19,7 +19,7 @@ interface CheckboxProps extends Margins {
     arialabel?: string;
     description?: string;
 }
-export interface Props extends Margins {
+export interface GoACheckboxProps extends Margins {
     id?: string;
     name: string;
     checked: boolean;
@@ -33,5 +33,6 @@ export interface Props extends Margins {
     description?: string;
     onChange?: (name: string, checked: boolean, value: string) => void;
 }
-export declare const GoACheckbox: FC<Props>;
+export declare type Props = GoACheckboxProps;
+export declare function GoACheckbox({ id, name, testId, error, disabled, checked, value, text, description, children, onChange, ariaLabel, mt, mr, mb, ml, }: GoACheckboxProps): JSX.Element;
 export default GoACheckbox;

package/lib/chip/chip.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
-declare type ChipVariant = "filter";
+export declare type GoAChipVariant = "filter";
 interface WCProps extends Margins {
     ref: React.RefObject<HTMLElement>;
     leadingicon: string;
     error: boolean;
     deletable: boolean;
     content: string;
-    variant?: string;
+    variant?: GoAChipVariant;
 }
 declare global {
     namespace JSX {
@@ -16,14 +16,14 @@ declare global {
         }
     }
 }
-interface Props extends Margins {
+export interface GoAChipProps extends Margins {
     onClick?: () => void;
     deletable?: boolean;
     leadingIcon?: string;
     error?: boolean;
     content: string;
-    variant?: ChipVariant;
+    variant?: GoAChipVariant;
     testId?: string;
 }
-export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick, mt, mr, mb, ml, testId, }: Props) => JSX.Element;
+export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick, mt, mr, mb, ml, testId, }: GoAChipProps) => JSX.Element;
 export default GoAChip;

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

@@ -1,9 +1,11 @@
-import React from "react";
-export declare type CircularProgressVariant = "fullscreen" | "inline";
-export declare type CircularProgressSize = "small" | "large";
+/// <reference types="react" />
+export declare type GoACircularProgressVariant = "fullscreen" | "inline";
+export declare type GoACircularProgressSize = "small" | "large";
+export declare type CircularProgressVariant = GoACircularProgressVariant;
+export declare type CircularProgressSize = GoACircularProgressSize;
 interface WCProps {
-    variant?: CircularProgressVariant;
-    size?: CircularProgressSize;
+    variant?: GoACircularProgressVariant;
+    size?: GoACircularProgressSize;
     message?: string;
     visible?: string;
     progress?: number;
@@ -15,13 +17,13 @@ declare global {
         }
     }
 }
-export interface CircularProgressProps {
-    variant?: CircularProgressVariant;
-    size?: CircularProgressSize;
+export interface GoACircularProgressProps {
+    variant?: GoACircularProgressVariant;
+    size?: GoACircularProgressSize;
     message?: string;
     visible?: boolean;
     progress?: number;
     testId?: string;
 }
-export declare const GoACircularProgress: ({ visible, message, progress, variant, size, testId, }: CircularProgressProps) => JSX.Element;
+export declare const GoACircularProgress: ({ visible, message, progress, variant, size, testId, }: GoACircularProgressProps) => JSX.Element;
 export default GoACircularProgress;

package/lib/container/container.d.ts

@@ -1,12 +1,12 @@
-import React, { FC, ReactNode } from "react";
+import { ReactNode } from "react";
 import { Margins } from "../../common/styling";
-declare type ContainerType = "interactive" | "non-interactive" | "info" | "error" | "success" | "important";
-declare type Accent = "thick" | "thin" | "filled";
-declare type ContainerPadding = "relaxed" | "compact";
+export declare type GoAContainerType = "interactive" | "non-interactive" | "info" | "error" | "success" | "important";
+export declare type GoAContainerAccent = "thick" | "thin" | "filled";
+export declare type GoAContainerPadding = "relaxed" | "compact";
 interface WCProps extends Margins {
-    type?: ContainerType;
-    accent?: Accent;
-    padding?: ContainerPadding;
+    type?: GoAContainerType;
+    accent?: GoAContainerAccent;
+    padding?: GoAContainerPadding;
 }
 declare global {
     namespace JSX {
@@ -15,15 +15,15 @@ declare global {
         }
     }
 }
-interface Props extends Margins {
-    accent?: Accent;
-    type?: ContainerType;
+export interface GoAContainerProps extends Margins {
+    accent?: GoAContainerAccent;
+    type?: GoAContainerType;
     heading?: ReactNode;
     title?: ReactNode;
-    padding?: ContainerPadding;
+    padding?: GoAContainerPadding;
     actions?: ReactNode;
     children?: ReactNode;
     testId?: string;
 }
-export declare const GoAContainer: FC<Props>;
+export declare function GoAContainer({ accent, heading, title, padding, children, actions, type, mt, mr, mb, ml, testId, }: GoAContainerProps): JSX.Element;
 export default GoAContainer;

package/lib/date-picker/date-picker.d.ts

@@ -1,12 +1,5 @@
-import React, { FC } from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
-interface Props extends Margins {
-    name?: string;
-    value?: Date;
-    min?: Date;
-    max?: Date;
-    onChange: (name: string, value: Date) => void;
-}
 interface WCProps extends Margins {
     ref: React.RefObject<HTMLElement>;
     name?: string;
@@ -21,5 +14,12 @@ declare global {
         }
     }
 }
-export declare const GoADatePicker: FC<Props>;
+export interface GoADatePickerProps extends Margins {
+    name?: string;
+    value?: Date;
+    min?: Date;
+    max?: Date;
+    onChange: (name: string, value: Date) => void;
+}
+export declare function GoADatePicker({ name, value, min, max, mt, mr, mb, ml, onChange, }: GoADatePickerProps): JSX.Element;
 export default GoADatePicker;

package/lib/details/details.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { Margins } from "../../common/styling";
 interface WCProps extends Margins {
     heading: string;
@@ -11,10 +11,11 @@ declare global {
         }
     }
 }
-export interface DetailsProps extends Margins {
+export interface GoADetailsProps extends Margins {
     heading: string;
     open?: boolean;
     children: ReactNode;
 }
-export declare function GoADetails(props: DetailsProps): JSX.Element;
+export declare type DetailsProps = GoADetailsProps;
+export declare function GoADetails(props: GoADetailsProps): JSX.Element;
 export default GoADetails;

package/lib/divider/divider.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
 declare global {
     namespace JSX {
@@ -7,7 +7,8 @@ declare global {
         }
     }
 }
-export declare function GoADivider(props: Margins & {
+export interface GoADividerProps extends Margins {
     testId?: string;
-}): JSX.Element;
+}
+export declare function GoADivider(props: GoADividerProps): JSX.Element;
 export default GoADivider;

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

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 interface WCProps {
     value: string;
     label?: string;
@@ -12,13 +12,13 @@ declare global {
         }
     }
 }
-interface Props {
+export interface GoADropdownItemProps {
     value: string;
     label?: string;
     filter?: string;
     testId?: string;
     name?: string;
 }
-export declare function GoADropdownOption(props: Props): JSX.Element;
-export declare function GoADropdownItem({ value, label, filter, name, testId }: Props): JSX.Element;
+export declare function GoADropdownOption(props: GoADropdownItemProps): JSX.Element;
+export declare function GoADropdownItem({ value, label, filter, name, testId }: GoADropdownItemProps): JSX.Element;
 export {};

package/lib/dropdown/dropdown.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+/// <reference types="react" />
 import { Margins } from "../../common/styling";
 import { GoAIconType } from "../icon/icon";
 interface WCProps extends Margins {
@@ -26,7 +26,7 @@ declare global {
         }
     }
 }
-interface Props extends Margins {
+export interface GoADropdownProps extends Margins {
     name?: string;
     value?: string[] | string;
     onChange: (name: string, values: string[] | string) => void;
@@ -46,5 +46,5 @@ interface Props extends Margins {
     width?: string;
     relative?: boolean;
 }
-export declare const GoADropdown: FC<Props>;
+export declare function GoADropdown(props: GoADropdownProps): JSX.Element;
 export default GoADropdown;

package/lib/file-upload-card/file-upload-card.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 interface WCProps {
     ref: React.MutableRefObject<HTMLElement | null>;
     filename: string;
@@ -14,7 +14,7 @@ declare global {
         }
     }
 }
-interface FileUploadCardProps {
+export interface GoAFileUploadCardProps {
     filename: string;
     size: number;
     type?: string;
@@ -23,5 +23,5 @@ interface FileUploadCardProps {
     onDelete?: () => void;
     onCancel?: () => void;
 }
-export declare function GoAFileUploadCard({ filename, size, type, progress, error, onDelete, onCancel, }: FileUploadCardProps): JSX.Element;
+export declare function GoAFileUploadCard({ filename, size, type, progress, error, onDelete, onCancel, }: GoAFileUploadCardProps): JSX.Element;
 export default GoAFileUploadCard;