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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/README.md +20 -45
  2. package/common/styling.d.ts +9 -0
  3. package/experimental/package.json +2 -1
  4. package/index.d.ts +54 -39
  5. package/lib/accordion/accordion.d.ts +28 -0
  6. package/lib/app-header/app-header.d.ts +8 -4
  7. package/lib/app-header-menu/app-header-menu.d.ts +20 -0
  8. package/lib/badge/badge.d.ts +23 -10
  9. package/lib/block/block.d.ts +22 -0
  10. package/lib/button/button.d.ts +13 -14
  11. package/lib/button-group/button-group.d.ts +13 -8
  12. package/lib/callout/callout.d.ts +13 -8
  13. package/lib/card/card-actions.d.ts +2 -5
  14. package/lib/card/card-content.d.ts +2 -2
  15. package/lib/card/card-group.d.ts +2 -5
  16. package/lib/card/card-image.d.ts +2 -2
  17. package/lib/card/card.d.ts +10 -6
  18. package/lib/card/index.d.ts +5 -5
  19. package/lib/checkbox/checkbox.d.ts +8 -4
  20. package/lib/chip/chip.d.ts +10 -5
  21. package/lib/circular-progress/circular-progress.d.ts +6 -8
  22. package/lib/container/container.d.ts +17 -13
  23. package/lib/details/details.d.ts +20 -0
  24. package/lib/divider/divider.d.ts +6 -10
  25. package/lib/dropdown/dropdown-item.d.ts +22 -0
  26. package/lib/dropdown/dropdown.d.ts +19 -15
  27. package/lib/file-upload-card/file-upload-card.d.ts +27 -0
  28. package/lib/file-upload-input/file-upload-input.d.ts +23 -0
  29. package/lib/footer/footer.d.ts +18 -0
  30. package/lib/footer-meta-section/footer-meta-section.d.ts +13 -0
  31. package/lib/footer-nav-section/footer-nav-section.d.ts +20 -0
  32. package/lib/form/form-item.d.ts +10 -6
  33. package/lib/form/index.d.ts +1 -1
  34. package/lib/form-step/form-step.d.ts +19 -0
  35. package/lib/form-stepper/form-stepper.d.ts +21 -0
  36. package/lib/grid/grid.d.ts +21 -0
  37. package/lib/hero-banner/hero-banner-actions.d.ts +5 -3
  38. package/lib/hero-banner/hero-banner.d.ts +10 -4
  39. package/lib/icon/icon.d.ts +39 -0
  40. package/lib/icon-button/icon-button.d.ts +31 -0
  41. package/lib/input/input.d.ts +62 -40
  42. package/lib/microsite-header/microsite-header.d.ts +8 -5
  43. package/lib/modal/modal.d.ts +13 -6
  44. package/lib/notification/notification.d.ts +13 -5
  45. package/lib/one-column-layout/one-column-layout.d.ts +13 -0
  46. package/lib/page-block/page-block.d.ts +4 -3
  47. package/lib/pages/pages.d.ts +18 -0
  48. package/lib/pagination/pagination.d.ts +26 -0
  49. package/lib/popover/popover.d.ts +25 -0
  50. package/lib/radio-group/radio-group.d.ts +10 -6
  51. package/lib/radio-group/radio.d.ts +3 -2
  52. package/lib/side-menu/side-menu.d.ts +13 -0
  53. package/lib/side-menu-group/side-menu-group.d.ts +17 -0
  54. package/lib/skeleton/skeleton.d.ts +15 -8
  55. package/lib/spacer/spacer.d.ts +20 -0
  56. package/lib/spinner/spinner.d.ts +3 -4
  57. package/lib/table/table-sort-header.d.ts +20 -0
  58. package/lib/table/table.d.ts +25 -0
  59. package/lib/textarea/textarea.d.ts +7 -4
  60. package/lib/three-column-layout/three-column-layout.d.ts +26 -0
  61. package/lib/tooltip/tooltip.d.ts +22 -0
  62. package/lib/two-column-layout/two-column-layout.d.ts +22 -0
  63. package/package.json +6 -6
  64. package/react-components.esm.js +1771 -418
  65. package/react-components.umd.js +2317 -957
  66. package/lib/app-footer/app-footer.d.ts +0 -26
  67. package/lib/app-footer/meta-link.d.ts +0 -20
  68. package/lib/app-footer/navigation-link.d.ts +0 -22
  69. package/lib/dropdown/dropdown-option.d.ts +0 -21
  70. package/lib/flex-column/flex-column.d.ts +0 -16
  71. package/lib/flex-row/flex-row.d.ts +0 -16
  72. package/lib/icons/icon-button.d.ts +0 -27
  73. package/lib/icons/icon.d.ts +0 -37
  74. package/lib/icons/index.d.ts +0 -2
  75. package/lib/page/page.d.ts +0 -13
package/README.md CHANGED
@@ -1,59 +1,34 @@
1
1
  # React UI Components
2
2
 
3
- This library contains react components from the Government of Alberta.
3
+ ![npm (scoped)](https://img.shields.io/npm/v/@abgov/react-components?color=%230081a2&label=react-components&style=flat-square)
4
4
 
5
- Create react app
6
- ```bash
7
- npm init vite@latest
8
- ```
5
+ This library contains react components from the Government of Alberta.
9
6
 
10
- Add Dependencies
11
7
  ```bash
12
- npm i
13
- npm i @abgov/react-components@3.4.0-alpha.7
14
- npm i @abgov/styles
8
+ npm i @abgov/react-components
9
+ npm i @abgov/web-components
15
10
  ```
16
11
 
17
12
  Link ionicons in app/index.html
18
- ```html
19
- <!DOCTYPE html>
20
- <html lang="en">
21
- <head>
22
- <meta charset="UTF-8" />
23
- <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
24
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
25
- <title>Vite App</title>
26
- <!-- Ionicons -->
27
- <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
28
- <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
29
- <!-- -->
30
- </head>
31
- <body>
32
- <div id="root"></div>
33
- <script type="module" src="/src/main.tsx"></script>
34
- </body>
35
- </html>
13
+ Add the following to the head element
36
14
 
15
+ ```html
16
+ <script
17
+ type="module"
18
+ src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
19
+ ></script>
20
+ <script
21
+ nomodule
22
+ src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
23
+ ></script>
37
24
  ```
38
25
 
39
- ```typescript
40
- // App.tsx
41
- import './App.css'
42
-
43
- import { GoABadge } from '@abgov/react-components';
26
+ Import the web-component styles in the `src/index.css` file
44
27
 
45
- function App() {
46
- return (
47
- <GoABadge type="information" content="Some info" icon={true} />
48
- )
49
- }
50
-
51
- export default App
52
-
53
-
54
- ```
55
-
56
- Import the styles in the `src/index.css` file
57
28
  ```css
58
- @import '@abgov/styles/styles.esm.css';
29
+ @import "@abgov/web-components/index.css";
59
30
  ```
31
+
32
+ ---
33
+
34
+ [Visit Design System](https://ui-components.alberta.ca)
package/common/styling.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ export declare type Spacing = "none" | "3xs" | "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl";
2
+ export interface Margins {
3
+ mt?: Spacing;
4
+ mr?: Spacing;
5
+ mb?: Spacing;
6
+ ml?: Spacing;
7
+ }
8
+ export declare type Direction = "row" | "column";
9
+ export declare type Alignment = "center" | "start" | "end";
package/experimental/package.json CHANGED
@@ -5,6 +5,7 @@
5
5
  "typings": "./index.d.ts",
6
6
  "dependencies": {},
7
7
  "peerDependencies": {
8
- "react": "17.0.2"
8
+ "react": "17.0.2",
9
+ "date-fns": "^2.29.2"
9
10
  }
10
11
  }
package/index.d.ts CHANGED
@@ -1,39 +1,54 @@
1
- /**
2
- * IMPORTANT: Do NOT export experimental components in this file.
3
- */
4
- import '@abgov/web-components';
5
- import { GoABadge, GoAInfoBadge, GoAEmergencyBadge, GoASuccessBadge, GoAWarningBadge } from './lib/badge/badge';
6
- import { GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange } from './lib/input/input';
7
- import { GoAAppHeader } from './lib/app-header/app-header';
8
- import { GoAAppFooter } from './lib/app-footer/app-footer';
9
- import { GoAMetaLink } from './lib/app-footer/meta-link';
10
- import { GoANavigationLink } from './lib/app-footer/navigation-link';
11
- import { GoAButton } from './lib/button/button';
12
- import { GoAButtonGroup } from './lib/button-group/button-group';
13
- import { GoACallout } from './lib/callout/callout';
14
- import { GoACheckbox } from './lib/checkbox/checkbox';
15
- import { GoAChip } from './lib/chip/chip';
16
- import { GoACircularProgress } from './lib/circular-progress/circular-progress';
17
- import { GoAContainer } from './lib/container/container';
18
- import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
19
- import { GoAFlexRow } from './lib/flex-row/flex-row';
20
- import { GoAFormItem } from './lib/form';
21
- import { GoAHeroBanner } from './lib/hero-banner/hero-banner';
22
- import { GoAHeroBannerActions } from './lib/hero-banner/hero-banner-actions';
23
- import { GoAIcon, GoAIconButton } from './lib/icons';
24
- import { GoAMicrositeHeader } from './lib/microsite-header/microsite-header';
25
- import { GoAModal } from './lib/modal/modal';
26
- import { GoANotification } from './lib/notification/notification';
27
- import { GoAPageBlock } from './lib/page-block/page-block';
28
- import { GoARadioGroup, GoARadioItem } from './lib/radio-group/radio-group';
29
- import { GoASkeleton } from './lib/skeleton/skeleton';
30
- import { GoASpinner } from './lib/spinner/spinner';
31
- import { GoATextArea } from './lib/textarea/textarea';
32
- import type { GoAIconType } from './lib/icons';
33
- import type { GoABadgeType } from './lib/badge/badge';
34
- export * from './lib/flex-column/flex-column';
35
- export * from './lib/page/page';
36
- export * from './lib/divider/divider';
37
- export type { GoAIconType };
38
- export type { GoABadgeType };
39
- export { GoAAppHeader, GoAAppFooter, GoAMetaLink, GoANavigationLink, 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, };
1
+ import "@abgov/web-components";
2
+ export * from "./lib/side-menu-group/side-menu-group";
3
+ export * from "./lib/side-menu/side-menu";
4
+ export * from "./lib/app-header-menu/app-header-menu";
5
+ export * from "./lib/pages/pages";
6
+ export * from "./lib/file-upload-card/file-upload-card";
7
+ export * from "./lib/file-upload-input/file-upload-input";
8
+ export type { GoAIconType } from "./lib/icon/icon";
9
+ export type { GoABadgeType } from "./lib/badge/badge";
10
+ export type { GoAFormStepStatusType } from "./lib/form-step/form-step";
11
+ export * from "./lib/accordion/accordion";
12
+ export * from "./lib/form-step/form-step";
13
+ export * from "./lib/form-stepper/form-stepper";
14
+ export * from "./lib/app-header/app-header";
15
+ export * from "./lib/badge/badge";
16
+ export * from "./lib/block/block";
17
+ export * from "./lib/button-group/button-group";
18
+ export * from "./lib/button/button";
19
+ export * from "./lib/callout/callout";
20
+ export * from "./lib/checkbox/checkbox";
21
+ export * from "./lib/chip/chip";
22
+ export * from "./lib/circular-progress/circular-progress";
23
+ export * from "./lib/container/container";
24
+ export * from "./lib/details/details";
25
+ export * from "./lib/divider/divider";
26
+ export * from "./lib/dropdown/dropdown";
27
+ export * from "./lib/dropdown/dropdown-item";
28
+ export * from "./lib/footer-meta-section/footer-meta-section";
29
+ export * from "./lib/footer-nav-section/footer-nav-section";
30
+ export * from "./lib/footer/footer";
31
+ export * from "./lib/form";
32
+ export * from "./lib/grid/grid";
33
+ export * from "./lib/hero-banner/hero-banner";
34
+ export * from "./lib/hero-banner/hero-banner-actions";
35
+ export * from "./lib/icon-button/icon-button";
36
+ export * from "./lib/icon/icon";
37
+ export * from "./lib/input/input";
38
+ export * from "./lib/microsite-header/microsite-header";
39
+ export * from "./lib/modal/modal";
40
+ export * from "./lib/notification/notification";
41
+ export * from "./lib/one-column-layout/one-column-layout";
42
+ export * from "./lib/page-block/page-block";
43
+ export * from "./lib/radio-group/radio-group";
44
+ export * from "./lib/pagination/pagination";
45
+ export * from "./lib/popover/popover";
46
+ export * from "./lib/skeleton/skeleton";
47
+ export * from "./lib/spacer/spacer";
48
+ export * from "./lib/spinner/spinner";
49
+ export * from "./lib/table/table";
50
+ export * from "./lib/table/table-sort-header";
51
+ export * from "./lib/textarea/textarea";
52
+ export * from "./lib/tooltip/tooltip";
53
+ export * from "./lib/two-column-layout/two-column-layout";
54
+ export * from "./lib/three-column-layout/three-column-layout";
package/lib/accordion/accordion.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import React, { FC, ReactNode } from "react";
2
+ import { Margins } from "../../common/styling";
3
+ declare type HeadingSize = "small" | "medium";
4
+ interface WCProps extends Margins {
5
+ open?: boolean;
6
+ headingSize?: HeadingSize;
7
+ heading: string;
8
+ secondaryText?: string;
9
+ headingContent?: ReactNode;
10
+ }
11
+ declare global {
12
+ namespace JSX {
13
+ interface IntrinsicElements {
14
+ "goa-accordion": WCProps & React.HTMLAttributes<HTMLElement>;
15
+ }
16
+ }
17
+ }
18
+ interface Props extends Margins {
19
+ open?: boolean;
20
+ headingSize?: HeadingSize;
21
+ secondaryText?: string;
22
+ heading: string;
23
+ headingContent?: ReactNode;
24
+ testid?: string;
25
+ children: ReactNode;
26
+ }
27
+ export declare const GoAAccordion: FC<Props>;
28
+ export default GoAAccordion;
package/lib/app-header/app-header.d.ts CHANGED
@@ -1,18 +1,22 @@
1
- import React, { FC } from 'react';
1
+ import React, { FC } from "react";
2
2
  interface WCProps {
3
- title: string;
3
+ heading?: string;
4
4
  url?: string;
5
+ maxcontentwidth?: string;
5
6
  }
6
7
  declare global {
7
8
  namespace JSX {
8
9
  interface IntrinsicElements {
9
- 'goa-app-header': WCProps & React.HTMLAttributes<HTMLElement>;
10
+ "goa-app-header": WCProps & React.HTMLAttributes<HTMLElement>;
10
11
  }
11
12
  }
12
13
  }
13
14
  interface Props {
14
- title: string;
15
+ heading?: string;
15
16
  url?: string;
17
+ maxContentWidth?: string;
18
+ children?: React.ReactNode;
19
+ testId?: string;
16
20
  }
17
21
  export declare const GoAAppHeader: FC<Props>;
18
22
  export default GoAAppHeader;
package/lib/app-header-menu/app-header-menu.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import React, { ReactNode } from "react";
2
+ import { GoAIconType } from "../icon/icon";
3
+ interface WCProps {
4
+ heading: string;
5
+ leadingicon?: GoAIconType;
6
+ }
7
+ export interface GoAAppHeaderMenuProps {
8
+ heading: string;
9
+ leadingIcon?: GoAIconType;
10
+ children?: ReactNode;
11
+ }
12
+ declare global {
13
+ namespace JSX {
14
+ interface IntrinsicElements {
15
+ "goa-app-header-menu": WCProps & React.HTMLAttributes<HTMLElement>;
16
+ }
17
+ }
18
+ }
19
+ export declare function GoAAppHeaderMenu(props: GoAAppHeaderMenuProps): JSX.Element;
20
+ export default GoAAppHeaderMenu;
package/lib/badge/badge.d.ts CHANGED
@@ -1,28 +1,41 @@
1
- import React, { FC } from 'react';
2
- import { GoAIconType } from '../icons';
3
- export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
4
- interface GoABadgeProps {
1
+ import React, { FC } from "react";
2
+ import { Margins } from "../../common/styling";
3
+ export declare type GoABadgeType = "information" | "success" | "important" | "emergency" | "dark" | "midtone" | "light";
4
+ interface GoABadgeProps extends Margins {
5
5
  type: GoABadgeType;
6
- icon?: GoAIconType;
6
+ icon?: boolean;
7
7
  content?: string;
8
8
  testId?: string;
9
+ ariaLabel?: string;
9
10
  }
10
- interface WCProps {
11
+ interface WCProps extends Margins {
11
12
  type: GoABadgeType;
12
- icon?: GoAIconType;
13
+ icon?: boolean;
13
14
  content?: string;
14
- testid?: string;
15
+ arialabel?: string;
15
16
  }
16
17
  declare global {
17
18
  namespace JSX {
18
19
  interface IntrinsicElements {
19
- 'goa-badge': WCProps & React.HTMLAttributes<HTMLElement>;
20
+ "goa-badge": WCProps & React.HTMLAttributes<HTMLElement>;
20
21
  }
21
22
  }
22
23
  }
23
24
  export declare const GoABadge: FC<GoABadgeProps>;
25
+ /**
26
+ * @deprecated
27
+ */
24
28
  export declare const GoAInfoBadge: FC<GoABadgeProps>;
29
+ /**
30
+ * @deprecated
31
+ */
25
32
  export declare const GoASuccessBadge: FC<GoABadgeProps>;
26
- export declare const GoAWarningBadge: FC<GoABadgeProps>;
33
+ /**
34
+ * @deprecated
35
+ */
36
+ export declare const GoAImportantBadge: FC<GoABadgeProps>;
37
+ /**
38
+ * @deprecated
39
+ */
27
40
  export declare const GoAEmergencyBadge: FC<GoABadgeProps>;
28
41
  export {};
package/lib/block/block.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import React, { ReactNode } from "react";
2
+ import { Alignment, Direction, Margins, Spacing } from "../../common/styling";
3
+ export interface WCProps extends Margins {
4
+ gap?: Spacing;
5
+ direction?: Direction;
6
+ alignment?: Alignment;
7
+ }
8
+ declare global {
9
+ namespace JSX {
10
+ interface IntrinsicElements {
11
+ "goa-block": WCProps & React.HTMLAttributes<HTMLElement>;
12
+ }
13
+ }
14
+ }
15
+ export interface BlockProps extends Margins {
16
+ gap?: Spacing;
17
+ direction?: Direction;
18
+ alignment?: Alignment;
19
+ testId?: string;
20
+ children?: ReactNode;
21
+ }
22
+ export declare function GoABlock(props: BlockProps): JSX.Element;
package/lib/button/button.d.ts CHANGED
@@ -1,15 +1,14 @@
1
- import React, { FC, ReactNode } from 'react';
2
- import './button.css';
3
- import { GoAIconType } from '../icons';
4
- export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'start';
5
- export declare type ButtonSize = 'compact' | '';
6
- export declare type ButtonVariant = '' | 'danger';
7
- interface WCProps {
1
+ import React, { FC, ReactNode } from "react";
2
+ import { Margins } from "../../common/styling";
3
+ import { GoAIconType } from "../icon/icon";
4
+ export declare type ButtonType = "primary" | "submit" | "secondary" | "tertiary" | "start";
5
+ export declare type ButtonSize = "compact" | "normal";
6
+ export declare type ButtonVariant = "normal" | "destructive";
7
+ interface WCProps extends Margins {
8
8
  type?: ButtonType;
9
9
  size?: ButtonSize;
10
10
  variant?: ButtonVariant;
11
11
  disabled?: boolean;
12
- title?: string;
13
12
  leadingicon?: string;
14
13
  trailingicon?: string;
15
14
  ref: React.RefObject<HTMLElement>;
@@ -17,20 +16,20 @@ interface WCProps {
17
16
  declare global {
18
17
  namespace JSX {
19
18
  interface IntrinsicElements {
20
- 'goa-button': WCProps & React.HTMLAttributes<HTMLElement>;
19
+ "goa-button": WCProps & React.HTMLAttributes<HTMLElement>;
21
20
  }
22
21
  }
23
22
  }
24
- declare type ButtonProps = {
23
+ interface ButtonProps extends Margins {
25
24
  type?: ButtonType;
26
- title?: string;
27
25
  size?: ButtonSize;
28
26
  variant?: ButtonVariant;
29
27
  disabled?: boolean;
30
28
  leadingIcon?: GoAIconType;
31
29
  trailingIcon?: GoAIconType;
32
- onClick: (e: any) => void;
33
- children: ReactNode;
34
- };
30
+ onClick?: () => void;
31
+ testId?: string;
32
+ children?: ReactNode;
33
+ }
35
34
  export declare const GoAButton: FC<ButtonProps>;
36
35
  export default GoAButton;
package/lib/button-group/button-group.d.ts CHANGED
@@ -1,18 +1,23 @@
1
- import React, { FC } from 'react';
2
- import './button-group.css';
3
- declare type Alignment = "start" | "end";
4
- interface WCProps {
5
- alignment?: Alignment;
1
+ import React, { FC } from "react";
2
+ import { Margins } from "../../common/styling";
3
+ declare type Alignment = "start" | "end" | "center";
4
+ export declare type Gap = "relaxed" | "compact";
5
+ interface WCProps extends Margins {
6
+ alignment: Alignment;
7
+ gap?: Gap;
6
8
  }
7
9
  declare global {
8
10
  namespace JSX {
9
11
  interface IntrinsicElements {
10
- 'goa-button-group': WCProps & React.HTMLAttributes<HTMLElement>;
12
+ "goa-button-group": WCProps & React.HTMLAttributes<HTMLElement>;
11
13
  }
12
14
  }
13
15
  }
14
- declare type ButtonGroupProps = {
16
+ interface ButtonGroupProps extends Margins {
15
17
  alignment: Alignment;
16
- };
18
+ gap?: Gap;
19
+ testId?: string;
20
+ children?: React.ReactNode;
21
+ }
17
22
  export declare const GoAButtonGroup: FC<ButtonGroupProps>;
18
23
  export default GoAButtonGroup;
package/lib/callout/callout.d.ts CHANGED
@@ -1,20 +1,25 @@
1
- import React from 'react';
2
- declare type CalloutType = "important" | 'information' | 'event' | 'success' | 'emergency';
3
- interface WCProps {
4
- title?: string;
1
+ import React from "react";
2
+ import { Margins } from "../../common/styling";
3
+ declare type CalloutType = "important" | "information" | "event" | "success" | "emergency";
4
+ declare type CalloutSize = "medium" | "large";
5
+ interface WCProps extends Margins {
6
+ heading?: string;
5
7
  type?: CalloutType;
8
+ size?: CalloutSize;
6
9
  }
7
10
  declare global {
8
11
  namespace JSX {
9
12
  interface IntrinsicElements {
10
- 'goa-callout': WCProps & React.HTMLAttributes<HTMLElement>;
13
+ "goa-callout": WCProps & React.HTMLAttributes<HTMLElement>;
11
14
  }
12
15
  }
13
16
  }
14
- export interface CalloutProps {
15
- title?: string;
17
+ export interface CalloutProps extends Margins {
18
+ heading?: string;
16
19
  type?: CalloutType;
20
+ size?: CalloutSize;
21
+ testId?: string;
17
22
  children?: React.ReactNode;
18
23
  }
19
- export declare const GoACallout: ({ title, type, children }: CalloutProps) => JSX.Element;
24
+ export declare const GoACallout: ({ heading, type, size, testId, children, mt, mr, mb, ml, }: CalloutProps) => JSX.Element;
20
25
  export default GoACallout;
package/lib/card/card-actions.d.ts CHANGED
@@ -1,11 +1,8 @@
1
- import React, { FC } from 'react';
2
- interface WCProps {
3
- children: React.ReactNode;
4
- }
1
+ import { FC } from "react";
5
2
  declare global {
6
3
  namespace JSX {
7
4
  interface IntrinsicElements {
8
- 'goa-card-actions': WCProps & React.HTMLAttributes<HTMLElement>;
5
+ "goa-card-actions": React.HTMLAttributes<HTMLElement>;
9
6
  }
10
7
  }
11
8
  }
package/lib/card/card-content.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import React, { FC } from 'react';
1
+ import { FC } from "react";
2
2
  declare global {
3
3
  namespace JSX {
4
4
  interface IntrinsicElements {
5
- 'goa-card-content': React.HTMLAttributes<HTMLElement>;
5
+ "goa-card-content": React.HTMLAttributes<HTMLElement>;
6
6
  }
7
7
  }
8
8
  }
package/lib/card/card-group.d.ts CHANGED
@@ -1,11 +1,8 @@
1
- import React, { FC } from 'react';
2
- interface WCProps {
3
- children: React.ReactNode;
4
- }
1
+ import { FC } from "react";
5
2
  declare global {
6
3
  namespace JSX {
7
4
  interface IntrinsicElements {
8
- 'goa-card-group': WCProps & React.HTMLAttributes<HTMLElement>;
5
+ "goa-card-group": React.HTMLAttributes<HTMLElement>;
9
6
  }
10
7
  }
11
8
  }
package/lib/card/card-image.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { FC } from 'react';
1
+ import { FC } from "react";
2
2
  interface WCProps {
3
3
  src: string;
4
4
  height: string;
@@ -6,7 +6,7 @@ interface WCProps {
6
6
  declare global {
7
7
  namespace JSX {
8
8
  interface IntrinsicElements {
9
- 'goa-card-image': WCProps & React.HTMLAttributes<HTMLElement>;
9
+ "goa-card-image": WCProps & React.HTMLAttributes<HTMLElement>;
10
10
  }
11
11
  }
12
12
  }
package/lib/card/card.d.ts CHANGED
@@ -1,17 +1,21 @@
1
- import React, { FC } from 'react';
2
- interface WCProps {
3
- elevation: number;
1
+ import { FC } from "react";
2
+ import { Margins } from "../../common/styling";
3
+ interface WCProps extends Margins {
4
+ elevation?: number;
5
+ width?: string;
4
6
  children: React.ReactNode;
5
7
  }
6
8
  declare global {
7
9
  namespace JSX {
8
10
  interface IntrinsicElements {
9
- 'goa-card': WCProps & React.HTMLAttributes<HTMLElement>;
11
+ "goa-card": WCProps & React.HTMLAttributes<HTMLElement>;
10
12
  }
11
13
  }
12
14
  }
13
- interface Props {
14
- elevation: number;
15
+ interface Props extends Margins {
16
+ elevation?: number;
17
+ width?: string;
18
+ testId?: string;
15
19
  children?: React.ReactNode;
16
20
  }
17
21
  export declare const GoACard: FC<Props>;
package/lib/card/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export * from './card-content';
2
- export * from './card-image';
3
- export * from './card-actions';
4
- export * from './card-group';
5
- export * from './card';
1
+ export * from "./card-content";
2
+ export * from "./card-image";
3
+ export * from "./card-actions";
4
+ export * from "./card-group";
5
+ export * from "./card";
package/lib/checkbox/checkbox.d.ts CHANGED
@@ -1,12 +1,13 @@
1
- import React, { FC } from 'react';
1
+ import React, { FC } from "react";
2
+ import { Margins } from "../../common/styling";
2
3
  declare global {
3
4
  namespace JSX {
4
5
  interface IntrinsicElements {
5
- 'goa-checkbox': CheckboxProps & React.HTMLAttributes<HTMLElement>;
6
+ "goa-checkbox": CheckboxProps & React.HTMLAttributes<HTMLElement>;
6
7
  }
7
8
  }
8
9
  }
9
- interface CheckboxProps {
10
+ interface CheckboxProps extends Margins {
10
11
  ref: React.RefObject<HTMLElement>;
11
12
  id?: string;
12
13
  name: string;
@@ -15,8 +16,9 @@ interface CheckboxProps {
15
16
  error?: boolean;
16
17
  text?: string;
17
18
  value?: string | number | boolean;
19
+ arialabel?: string;
18
20
  }
19
- export interface Props {
21
+ export interface Props extends Margins {
20
22
  id?: string;
21
23
  name: string;
22
24
  checked: boolean;
@@ -24,7 +26,9 @@ export interface Props {
24
26
  error?: boolean;
25
27
  text?: string;
26
28
  value?: string | number | boolean;
29
+ children?: React.ReactNode;
27
30
  testId?: string;
31
+ ariaLabel?: string;
28
32
  onChange?: (name: string, checked: boolean, value: string) => void;
29
33
  }
30
34
  export declare const GoACheckbox: FC<Props>;
package/lib/chip/chip.d.ts CHANGED
@@ -1,24 +1,29 @@
1
- import React from 'react';
2
- interface WCProps {
1
+ import React from "react";
2
+ import { Margins } from "../../common/styling";
3
+ declare type ChipVariant = "filter";
4
+ interface WCProps extends Margins {
3
5
  ref: React.RefObject<HTMLElement>;
4
6
  leadingicon: string;
5
7
  error: boolean;
6
8
  deletable: boolean;
7
9
  content: string;
10
+ variant?: string;
8
11
  }
9
12
  declare global {
10
13
  namespace JSX {
11
14
  interface IntrinsicElements {
12
- 'goa-chip': WCProps & React.HTMLAttributes<HTMLElement>;
15
+ "goa-chip": WCProps & React.HTMLAttributes<HTMLElement>;
13
16
  }
14
17
  }
15
18
  }
16
- export interface Props {
19
+ interface Props extends Margins {
17
20
  onClick?: () => void;
18
21
  deletable?: boolean;
19
22
  leadingIcon?: string;
20
23
  error?: boolean;
21
24
  content: string;
25
+ variant?: ChipVariant;
26
+ testId?: string;
22
27
  }
23
- export declare const GoAChip: ({ leadingIcon, deletable, error, content, onClick }: Props) => JSX.Element;
28
+ export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick, mt, mr, mb, ml, testId, }: Props) => JSX.Element;
24
29
  export default GoAChip;