@abgov/react-components 4.1.0 → 4.3.0

package/common/styling.d.ts

@@ -0,0 +1,9 @@
+export declare type Spacing = "none" | "3xs" | "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl";
+export interface Margins {
+    mt?: Spacing;
+    mr?: Spacing;
+    mb?: Spacing;
+    ml?: Spacing;
+}
+export declare type Direction = "row" | "column";
+export declare type Alignment = "center" | "start" | "end";

package/index.d.ts

@@ -1,8 +1,9 @@
 import "@abgov/web-components";
-export type { GoAIconType } from "./lib/icons";
+export type { GoAIconType } from "./lib/icon/icon";
 export type { GoABadgeType } from "./lib/badge/badge";
 export * from "./lib/app-header/app-header";
 export * from "./lib/badge/badge";
+export * from "./lib/block/block";
 export * from "./lib/button-group/button-group";
 export * from "./lib/button/button";
 export * from "./lib/callout/callout";
@@ -12,23 +13,26 @@ export * from "./lib/circular-progress/circular-progress";
 export * from "./lib/container/container";
 export * from "./lib/divider/divider";
 export * from "./lib/dropdown/dropdown";
-export * from "./lib/flex-column/flex-column";
-export * from "./lib/flex-row/flex-row";
+export * from "./lib/dropdown/dropdown-item";
 export * from "./lib/footer-meta-section/footer-meta-section";
 export * from "./lib/footer-nav-section/footer-nav-section";
 export * from "./lib/footer/footer";
 export * from "./lib/form";
+export * from "./lib/grid/grid";
 export * from "./lib/hero-banner/hero-banner";
 export * from "./lib/hero-banner/hero-banner-actions";
-export * from "./lib/icons";
+export * from "./lib/icon-button/icon-button";
+export * from "./lib/icon/icon";
 export * from "./lib/input/input";
 export * from "./lib/microsite-header/microsite-header";
 export * from "./lib/modal/modal";
 export * from "./lib/notification/notification";
-export * from "./lib/page-block/page-block";
 export * from "./lib/one-column-layout/one-column-layout";
+export * from "./lib/page-block/page-block";
 export * from "./lib/radio-group/radio-group";
 export * from "./lib/skeleton/skeleton";
+export * from "./lib/spacer/spacer";
 export * from "./lib/spinner/spinner";
+export * from "./lib/table/table";
 export * from "./lib/textarea/textarea";
 export * from "./lib/two-column-layout/two-column-layout";

package/lib/badge/badge.d.ts

@@ -1,12 +1,13 @@
 import React, { FC } from "react";
+import { Margins } from "../../common/styling";
 export declare type GoABadgeType = "information" | "success" | "important" | "emergency" | "dark" | "midtone" | "light";
-interface GoABadgeProps {
+interface GoABadgeProps extends Margins {
     type: GoABadgeType;
     icon?: boolean;
     content?: string;
     testId?: string;
 }
-interface WCProps {
+interface WCProps extends Margins {
     type: GoABadgeType;
     icon?: boolean;
     content?: string;
@@ -20,8 +21,20 @@ declare global {
     }
 }
 export declare const GoABadge: FC<GoABadgeProps>;
+/**
+ * @deprecated
+ */
 export declare const GoAInfoBadge: FC<GoABadgeProps>;
+/**
+ * @deprecated
+ */
 export declare const GoASuccessBadge: FC<GoABadgeProps>;
+/**
+ * @deprecated
+ */
 export declare const GoAImportantBadge: FC<GoABadgeProps>;
+/**
+ * @deprecated
+ */
 export declare const GoAEmergencyBadge: FC<GoABadgeProps>;
 export {};

package/lib/block/block.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import { Alignment, Direction, Margins, Spacing } from "../../common/styling";
+export interface WCProps extends Margins {
+    gap?: Spacing;
+    direction?: Direction;
+    alignment?: Alignment;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-block": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface BlockProps extends Margins {
+    gap?: Spacing;
+    direction?: Direction;
+    alignment?: Alignment;
+    children?: ReactNode;
+}
+export declare function GoABlock(props: BlockProps): JSX.Element;

package/lib/button/button.d.ts

@@ -1,10 +1,10 @@
 import React, { FC, ReactNode } from "react";
-import "./button.css";
-import { GoAIconType } from "../icons";
+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";
-interface WCProps {
+interface WCProps extends Margins {
     type?: ButtonType;
     size?: ButtonSize;
     variant?: ButtonVariant;
@@ -20,7 +20,7 @@ declare global {
         }
     }
 }
-declare type ButtonProps = {
+interface ButtonProps extends Margins {
     type?: ButtonType;
     size?: ButtonSize;
     variant?: ButtonVariant;
@@ -29,6 +29,6 @@ declare type ButtonProps = {
     trailingIcon?: GoAIconType;
     onClick?: () => void;
     children?: ReactNode;
-};
+}
 export declare const GoAButton: FC<ButtonProps>;
 export default GoAButton;

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

@@ -1,8 +1,8 @@
 import React, { FC } from "react";
-import "./button-group.css";
+import { Margins } from "../../common/styling";
 declare type Alignment = "start" | "end" | "center";
 export declare type Gap = "relaxed" | "compact";
-interface WCProps {
+interface WCProps extends Margins {
     alignment: Alignment;
     gap?: Gap;
 }
@@ -13,10 +13,10 @@ declare global {
         }
     }
 }
-declare type ButtonGroupProps = {
+interface ButtonGroupProps extends Margins {
     alignment: Alignment;
     gap?: Gap;
     children?: React.ReactNode;
-};
+}
 export declare const GoAButtonGroup: FC<ButtonGroupProps>;
 export default GoAButtonGroup;

package/lib/callout/callout.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { Margins } from "../../common/styling";
 declare type CalloutType = "important" | "information" | "event" | "success" | "emergency";
-interface WCProps {
+interface WCProps extends Margins {
     heading?: string;
     type?: CalloutType;
 }
@@ -11,10 +12,10 @@ declare global {
         }
     }
 }
-export interface CalloutProps {
+export interface CalloutProps extends Margins {
     heading?: string;
     type?: CalloutType;
     children?: React.ReactNode;
 }
-export declare const GoACallout: ({ heading, type, children, }: CalloutProps) => JSX.Element;
+export declare const GoACallout: ({ heading, type, children, mt, mr, mb, ml, }: CalloutProps) => JSX.Element;
 export default GoACallout;

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

@@ -1,11 +1,8 @@
-import React, { FC } from "react";
-interface WCProps {
-    children: React.ReactNode;
-}
+import { FC } from "react";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            "goa-card-actions": WCProps & React.HTMLAttributes<HTMLElement>;
+            "goa-card-actions": React.HTMLAttributes<HTMLElement>;
         }
     }
 }

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

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 declare global {
     namespace JSX {
         interface IntrinsicElements {

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

@@ -1,11 +1,8 @@
-import React, { FC } from "react";
-interface WCProps {
-    children: React.ReactNode;
-}
+import { FC } from "react";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            "goa-card-group": WCProps & React.HTMLAttributes<HTMLElement>;
+            "goa-card-group": React.HTMLAttributes<HTMLElement>;
         }
     }
 }

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

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 interface WCProps {
     src: string;
     height: string;

package/lib/card/card.d.ts

@@ -1,6 +1,8 @@
-import React, { FC } from "react";
-interface WCProps {
-    elevation: number;
+import { FC } from "react";
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
+    elevation?: number;
+    width?: string;
     children: React.ReactNode;
 }
 declare global {
@@ -10,8 +12,9 @@ declare global {
         }
     }
 }
-interface Props {
-    elevation: number;
+interface Props extends Margins {
+    elevation?: number;
+    width?: string;
     children?: React.ReactNode;
 }
 export declare const GoACard: FC<Props>;

package/lib/checkbox/checkbox.d.ts

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { Margins } from "../../common/styling";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -6,7 +7,7 @@ declare global {
         }
     }
 }
-interface CheckboxProps {
+interface CheckboxProps extends Margins {
     ref: React.RefObject<HTMLElement>;
     id?: string;
     name: string;
@@ -15,8 +16,9 @@ interface CheckboxProps {
     error?: boolean;
     text?: string;
     value?: string | number | boolean;
+    arialabel?: string;
 }
-export interface Props {
+export interface Props extends Margins {
     id?: string;
     name: string;
     checked: boolean;
@@ -26,6 +28,7 @@ export interface Props {
     value?: string | number | boolean;
     children?: React.ReactNode;
     testId?: string;
+    ariaLabel?: string;
     onChange?: (name: string, checked: boolean, value: string) => void;
 }
 export declare const GoACheckbox: FC<Props>;

package/lib/chip/chip.d.ts

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

package/lib/container/container.d.ts

@@ -1,8 +1,9 @@
 import React, { FC, 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";
-interface WCProps {
+interface WCProps extends Margins {
     type?: ContainerType;
     accent?: Accent;
     padding?: ContainerPadding;
@@ -14,7 +15,7 @@ declare global {
         }
     }
 }
-interface Props {
+interface Props extends Margins {
     accent?: Accent;
     type?: ContainerType;
     title?: ReactNode;

package/lib/divider/divider.d.ts

@@ -1,17 +1,11 @@
-/// <reference types="react" />
-declare type DividerSpacing = "small" | "medium" | "large";
-interface WCDividerProps {
-    spacing: DividerSpacing;
-}
+import React from "react";
+import { Margins } from "../../common/styling";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            "goa-divider": WCDividerProps & React.HTMLAttributes<HTMLElement>;
+            "goa-divider": Margins & React.HTMLAttributes<HTMLElement>;
         }
     }
 }
-export interface DividerProps {
-    spacing: DividerSpacing;
-}
-export declare function GoADivider(props: DividerProps): JSX.Element;
+export declare function GoADivider(props: Margins): JSX.Element;
 export default GoADivider;

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

@@ -0,0 +1,22 @@
+import React from "react";
+interface WCProps {
+    value: string;
+    label?: string;
+    name?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-dropdown-item": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    value: string;
+    label?: string;
+    testId?: string;
+    name?: string;
+}
+export declare function GoADropdownOption(props: Props): JSX.Element;
+export declare function GoADropdownItem({ value, label, name, testId }: Props): JSX.Element;
+export {};

package/lib/dropdown/dropdown.d.ts

@@ -1,19 +1,21 @@
 import React, { FC } from "react";
-import { GoAIconType } from "../icons";
-export * from "./dropdown-option";
-interface WCProps {
+import { Margins } from "../../common/styling";
+import { GoAIconType } from "../icon/icon";
+interface WCProps extends Margins {
     ref: React.MutableRefObject<HTMLElement | null>;
-    name: string;
-    value: string;
-    leadingicon?: string;
-    maxheight?: string;
-    placeholder?: string;
-    filterable?: boolean;
+    arialabel?: string;
     disabled?: boolean;
     error?: boolean;
+    filterable?: boolean;
+    leadingicon?: string;
+    maxheight?: string;
     multiselect?: boolean;
-    width?: string;
+    name?: string;
+    native?: boolean;
+    placeholder?: string;
     testid?: string;
+    value?: string;
+    width?: string;
 }
 declare global {
     namespace JSX {
@@ -22,20 +24,22 @@ declare global {
         }
     }
 }
-interface Props {
-    name: string;
-    value: string[] | string;
+interface Props extends Margins {
+    name?: string;
+    value?: string[] | string;
     onChange: (name: string, values: string[] | string) => void;
+    ariaLabel?: string;
+    children?: React.ReactNode;
     disabled?: boolean;
+    error?: boolean;
     filterable?: boolean;
     leadingIcon?: GoAIconType;
     maxHeight?: string;
-    error?: boolean;
     multiselect?: boolean;
+    native?: boolean;
     placeholder?: string;
     testId?: string;
     width?: string;
-    children?: React.ReactNode;
 }
 export declare const GoADropdown: FC<Props>;
 export default GoADropdown;

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

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
+import { Margins } from "../../common/styling";
 declare type RequirementType = "optional" | "required";
-interface WCProps {
+interface WCProps extends Margins {
     label: string;
     requirement?: RequirementType;
     error?: string;
@@ -13,7 +14,7 @@ declare global {
         }
     }
 }
-interface GoAFormItemProps {
+interface GoAFormItemProps extends Margins {
     label: string;
     requirement?: RequirementType;
     error?: string;

package/lib/grid/grid.d.ts

@@ -0,0 +1,20 @@
+import React, { FC } from "react";
+import { Margins, Spacing } from "../../common/styling";
+interface WCProps extends Margins {
+    gap?: Spacing;
+    minchildwidth: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-grid": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props extends Margins {
+    gap?: Spacing;
+    minChildWidth: string;
+    children?: React.ReactNode;
+}
+export declare const GoAGrid: FC<Props>;
+export default GoAGrid;

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

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 interface WCProps {
     heading: string;
     backgroundurl: string;
+    minheight?: string;
 }
 declare global {
     namespace JSX {
@@ -13,6 +14,7 @@ declare global {
 interface Props {
     heading: string;
     backgroundUrl: string;
+    minHeight?: string;
     children?: React.ReactNode;
 }
 export declare const GoAHeroBanner: FC<Props>;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Margins } from "../../common/styling";
 declare type GoAIconFilledType = `${GoAIconType}-${IconTheme}`;
 interface IonIconProps {
     name: GoAIconType | GoAIconFilledType;
@@ -23,15 +24,15 @@ export declare type GoAIconType = "accessibility" | "add-circle" | "add" | "airp
 export declare type IconSize = "small" | "medium" | "large" | "xlarge";
 export declare type IconVariant = "primary" | "secondary" | "tertiary";
 export declare type IconTheme = "outline" | "filled" | "sharp";
-interface Props {
+interface Props extends Margins {
     type: GoAIconType;
     size?: IconSize;
     theme?: IconTheme;
 }
-interface WCProps {
+interface WCProps extends Margins {
     type: GoAIconType;
-    theme: IconTheme;
-    size: IconSize;
+    theme?: IconTheme;
+    size?: IconSize;
 }
-export declare function GoAIcon({ type, theme, size, }: Props): JSX.Element;
+export declare function GoAIcon({ type, theme, size, mt, mr, mb, ml, }: Props): JSX.Element;
 export {};

package/lib/{icons → icon-button}/icon-button.d.ts

@@ -1,7 +1,8 @@
 import React, { FC } from "react";
-import { IconSize, GoAIconType } from "./icon";
+import { Margins } from "../../common/styling";
+import { IconSize, GoAIconType } from "../icon/icon";
 declare type IconVariant = "color" | "nocolor" | "dark";
-interface WCProps {
+interface WCProps extends Margins {
     ref: React.RefObject<HTMLElement>;
     icon: GoAIconType;
     size?: IconSize;
@@ -16,7 +17,7 @@ declare global {
         }
     }
 }
-interface Props {
+interface Props extends Margins {
     icon: GoAIconType;
     size?: IconSize;
     variant?: IconVariant;

package/lib/input/input.d.ts

@@ -1,9 +1,10 @@
 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 {
+interface WCProps extends Margins {
     ref?: React.MutableRefObject<HTMLInputElement | null>;
     type?: GoAInputType;
     name: string;
@@ -23,6 +24,7 @@ interface WCProps {
     prefix?: string;
     suffix?: string;
     testid?: string;
+    arialabel?: string;
     min?: string | number;
     max?: string | number;
     step?: number;
@@ -34,7 +36,7 @@ declare global {
         }
     }
 }
-interface BaseProps {
+interface BaseProps extends Margins {
     name: string;
     id?: string;
     disabled?: boolean;
@@ -51,6 +53,9 @@ interface BaseProps {
     prefix?: string;
     suffix?: string;
     testId?: string;
+    ariaLabel?: string;
+    leadingContent?: React.ReactNode;
+    trailingContent?: React.ReactNode;
 }
 declare type OnChange = (name: string, value: string) => void;
 export interface InputProps extends BaseProps {

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

@@ -1,12 +1,14 @@
 import React, { FC } from "react";
+import { Margins } from "../../common/styling";
 export * from "./radio";
-interface RadioGroupProps {
+interface RadioGroupProps extends Margins {
     ref: React.RefObject<HTMLElement>;
     name: string;
     value?: string;
     orientation: string;
     disabled: boolean;
     error: boolean;
+    arialabel?: string;
 }
 declare global {
     namespace JSX {
@@ -15,13 +17,14 @@ declare global {
         }
     }
 }
-interface Props {
+interface Props extends Margins {
     name: string;
     value?: string;
     disabled?: boolean;
     orientation?: "horizontal" | "vertical";
     testId?: string;
     error?: boolean;
+    ariaLabel?: string;
     children?: React.ReactNode;
     onChange: (name: string, value: string) => void;
 }

package/lib/skeleton/skeleton.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import { Margins } from "../../common/styling";
 export declare type SkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile";
 declare type SkeletonSize = 1 | 2 | 3 | 4;
-interface WCProps {
+interface WCProps extends Margins {
     maxwidth?: string;
     size?: SkeletonSize;
     linecount?: number;
@@ -14,11 +15,11 @@ declare global {
         }
     }
 }
-export interface SkeletonProps {
+export interface SkeletonProps extends Margins {
     maxWidth?: string;
     size?: SkeletonSize;
     lineCount?: number;
     type: SkeletonType;
 }
-export declare const GoASkeleton: ({ maxWidth, size, lineCount, type, }: SkeletonProps) => JSX.Element;
+export declare const GoASkeleton: ({ maxWidth, size, lineCount, type, mt, mr, mb, ml, }: SkeletonProps) => JSX.Element;
 export default GoASkeleton;

package/lib/spacer/spacer.d.ts

@@ -0,0 +1,19 @@
+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;
+}
+export declare function GoASpacer(props: SpacerProps): JSX.Element;
+export default GoASpacer;