@abgov/react-components 4.0.0-alpha.9 → 4.0.0-alpha.90

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 (57) hide show
  1. package/README.md +16 -44
  2. package/common/styling.d.ts +9 -0
  3. package/experimental/package.json +2 -1
  4. package/index.d.ts +36 -36
  5. package/lib/app-header/app-header.d.ts +7 -4
  6. package/lib/badge/badge.d.ts +21 -9
  7. package/lib/block/block.d.ts +21 -0
  8. package/lib/button/button.d.ts +12 -14
  9. package/lib/button-group/button-group.d.ts +12 -8
  10. package/lib/callout/callout.d.ts +9 -8
  11. package/lib/card/card-actions.d.ts +2 -5
  12. package/lib/card/card-content.d.ts +2 -2
  13. package/lib/card/card-group.d.ts +2 -5
  14. package/lib/card/card-image.d.ts +2 -2
  15. package/lib/card/card.d.ts +9 -6
  16. package/lib/card/index.d.ts +5 -5
  17. package/lib/checkbox/checkbox.d.ts +8 -6
  18. package/lib/chip/chip.d.ts +9 -5
  19. package/lib/circular-progress/circular-progress.d.ts +3 -6
  20. package/lib/container/container.d.ts +15 -11
  21. package/lib/divider/divider.d.ts +11 -0
  22. package/lib/dropdown/dropdown-option.d.ts +1 -1
  23. package/lib/dropdown/dropdown.d.ts +15 -10
  24. package/lib/footer/footer.d.ts +17 -0
  25. package/lib/footer-meta-section/footer-meta-section.d.ts +13 -0
  26. package/lib/footer-nav-section/footer-nav-section.d.ts +19 -0
  27. package/lib/form/form-item.d.ts +9 -6
  28. package/lib/form/index.d.ts +1 -1
  29. package/lib/grid/grid.d.ts +20 -0
  30. package/lib/hero-banner/hero-banner-actions.d.ts +5 -3
  31. package/lib/hero-banner/hero-banner.d.ts +5 -4
  32. package/lib/icon/icon.d.ts +38 -0
  33. package/lib/icon-button/icon-button.d.ts +30 -0
  34. package/lib/input/input.d.ts +55 -38
  35. package/lib/microsite-header/microsite-header.d.ts +5 -5
  36. package/lib/modal/modal.d.ts +10 -4
  37. package/lib/notification/notification.d.ts +4 -4
  38. package/lib/one-column-layout/one-column-layout.d.ts +13 -0
  39. package/lib/page-block/page-block.d.ts +10 -3
  40. package/lib/radio-group/radio-group.d.ts +8 -6
  41. package/lib/radio-group/radio.d.ts +3 -2
  42. package/lib/skeleton/skeleton.d.ts +13 -7
  43. package/lib/spacer/spacer.d.ts +19 -0
  44. package/lib/spinner/spinner.d.ts +3 -3
  45. package/lib/textarea/textarea.d.ts +7 -4
  46. package/lib/two-column-layout/two-column-layout.d.ts +22 -0
  47. package/package.json +6 -6
  48. package/react-components.esm.js +16430 -215
  49. package/react-components.umd.js +17180 -922
  50. package/lib/app-footer/app-footer.d.ts +0 -26
  51. package/lib/app-footer/meta-link.d.ts +0 -20
  52. package/lib/app-footer/navigation-link.d.ts +0 -22
  53. package/lib/flex/index.d.ts +0 -1
  54. package/lib/flex/row.d.ts +0 -16
  55. package/lib/icons/icon-button.d.ts +0 -27
  56. package/lib/icons/icon.d.ts +0 -37
  57. package/lib/icons/index.d.ts +0 -2
package/README.md CHANGED
@@ -2,58 +2,30 @@
2
2
 
3
3
  This library contains react components from the Government of Alberta.
4
4
 
5
- Create react app
6
- ```bash
7
- npm init vite@latest
8
- ```
9
-
10
5
  Add Dependencies
6
+
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@alpha
9
+ npm i @abgov/web-components@alpha
10
+ npm i @abgov/styles@alpha
15
11
  ```
16
12
 
17
13
  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>
36
-
37
- ```
38
-
39
- ```typescript
40
- // App.tsx
41
- import './App.css'
42
-
43
- import { GoABadge } from '@abgov/react-components';
44
-
45
- function App() {
46
- return (
47
- <GoABadge type="information" content="Some info" icon={true} />
48
- )
49
- }
50
-
51
- export default App
52
-
14
+ Add the following to the head element
53
15
 
16
+ ```html
17
+ <script
18
+ type="module"
19
+ src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
20
+ ></script>
21
+ <script
22
+ nomodule
23
+ src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
24
+ ></script>
54
25
  ```
55
26
 
56
27
  Import the styles in the `src/index.css` file
28
+
57
29
  ```css
58
- @import '@abgov/styles/styles.esm.css';
30
+ @import "@abgov/styles/styles.esm.css";
59
31
  ```
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";
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,36 +1,36 @@
1
- /**
2
- * IMPORTANT: Do NOT export experimental components in this file.
3
- */
4
- import '@abgov/web-components';
5
- import { GoAAppHeader } from './lib/app-header/app-header';
6
- import { GoAAppFooter } from './lib/app-footer/app-footer';
7
- import { GoAMetaLink } from './lib/app-footer/meta-link';
8
- import { GoANavigationLink } from './lib/app-footer/navigation-link';
9
- import { GoABadge, GoAInfoBadge, GoAEmergencyBadge, GoASuccessBadge, GoAWarningBadge } from './lib/badge/badge';
10
- import { GoAButton } from './lib/button/button';
11
- import { GoAButtonGroup } from './lib/button-group/button-group';
12
- import { GoACallout } from './lib/callout/callout';
13
- import { GoACheckbox } from './lib/checkbox/checkbox';
14
- import { GoAChip } from './lib/chip/chip';
15
- import { GoACircularProgress } from './lib/circular-progress/circular-progress';
16
- import { GoAContainer } from './lib/container/container';
17
- import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
18
- import { GoAFlexRow } from './lib/flex';
19
- import { GoAFormItem } from './lib/form';
20
- import { GoAHeroBanner } from './lib/hero-banner/hero-banner';
21
- import { GoAHeroBannerActions } from './lib/hero-banner/hero-banner-actions';
22
- import { GoAIcon, GoAIconButton } from './lib/icons';
23
- import { GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange } from './lib/input/input';
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 type { GoAIconType };
35
- export type { GoABadgeType };
36
- 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 type { GoAIconType } from "./lib/icon/icon";
3
+ export type { GoABadgeType } from "./lib/badge/badge";
4
+ export * from "./lib/app-header/app-header";
5
+ export * from "./lib/badge/badge";
6
+ export * from "./lib/block/block";
7
+ export * from "./lib/button-group/button-group";
8
+ export * from "./lib/button/button";
9
+ export * from "./lib/callout/callout";
10
+ export * from "./lib/checkbox/checkbox";
11
+ export * from "./lib/chip/chip";
12
+ export * from "./lib/circular-progress/circular-progress";
13
+ export * from "./lib/container/container";
14
+ export * from "./lib/divider/divider";
15
+ export * from "./lib/dropdown/dropdown";
16
+ export * from "./lib/grid/grid";
17
+ export * from "./lib/footer-meta-section/footer-meta-section";
18
+ export * from "./lib/footer-nav-section/footer-nav-section";
19
+ export * from "./lib/footer/footer";
20
+ export * from "./lib/form";
21
+ export * from "./lib/hero-banner/hero-banner";
22
+ export * from "./lib/hero-banner/hero-banner-actions";
23
+ export * from "./lib/icon/icon";
24
+ export * from "./lib/icon-button/icon-button";
25
+ export * from "./lib/input/input";
26
+ export * from "./lib/microsite-header/microsite-header";
27
+ export * from "./lib/modal/modal";
28
+ export * from "./lib/notification/notification";
29
+ export * from "./lib/page-block/page-block";
30
+ export * from "./lib/one-column-layout/one-column-layout";
31
+ export * from "./lib/radio-group/radio-group";
32
+ export * from "./lib/skeleton/skeleton";
33
+ export * from "./lib/spacer/spacer";
34
+ export * from "./lib/spinner/spinner";
35
+ export * from "./lib/textarea/textarea";
36
+ export * from "./lib/two-column-layout/two-column-layout";
package/lib/app-header/app-header.d.ts CHANGED
@@ -1,18 +1,21 @@
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;
16
19
  }
17
20
  export declare const GoAAppHeader: FC<Props>;
18
21
  export default GoAAppHeader;
package/lib/badge/badge.d.ts CHANGED
@@ -1,28 +1,40 @@
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
9
  }
10
- interface WCProps {
10
+ interface WCProps extends Margins {
11
11
  type: GoABadgeType;
12
- icon?: GoAIconType;
12
+ icon?: boolean;
13
13
  content?: string;
14
14
  testid?: string;
15
15
  }
16
16
  declare global {
17
17
  namespace JSX {
18
18
  interface IntrinsicElements {
19
- 'goa-badge': WCProps & React.HTMLAttributes<HTMLElement>;
19
+ "goa-badge": WCProps & React.HTMLAttributes<HTMLElement>;
20
20
  }
21
21
  }
22
22
  }
23
23
  export declare const GoABadge: FC<GoABadgeProps>;
24
+ /**
25
+ * @deprecated
26
+ */
24
27
  export declare const GoAInfoBadge: FC<GoABadgeProps>;
28
+ /**
29
+ * @deprecated
30
+ */
25
31
  export declare const GoASuccessBadge: FC<GoABadgeProps>;
26
- export declare const GoAWarningBadge: FC<GoABadgeProps>;
32
+ /**
33
+ * @deprecated
34
+ */
35
+ export declare const GoAImportantBadge: FC<GoABadgeProps>;
36
+ /**
37
+ * @deprecated
38
+ */
27
39
  export declare const GoAEmergencyBadge: FC<GoABadgeProps>;
28
40
  export {};
package/lib/block/block.d.ts ADDED
@@ -0,0 +1,21 @@
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
+ children?: ReactNode;
20
+ }
21
+ 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' | 'normal';
6
- export declare type ButtonVariant = 'default' | '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,19 @@ 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
+ children?: ReactNode;
32
+ }
35
33
  export declare const GoAButton: FC<ButtonProps>;
36
34
  export default GoAButton;
package/lib/button-group/button-group.d.ts CHANGED
@@ -1,18 +1,22 @@
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
+ children?: React.ReactNode;
20
+ }
17
21
  export declare const GoAButtonGroup: FC<ButtonGroupProps>;
18
22
  export default GoAButtonGroup;
package/lib/callout/callout.d.ts CHANGED
@@ -1,20 +1,21 @@
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
+ interface WCProps extends Margins {
5
+ heading?: string;
5
6
  type?: CalloutType;
6
7
  }
7
8
  declare global {
8
9
  namespace JSX {
9
10
  interface IntrinsicElements {
10
- 'goa-callout': WCProps & React.HTMLAttributes<HTMLElement>;
11
+ "goa-callout": WCProps & React.HTMLAttributes<HTMLElement>;
11
12
  }
12
13
  }
13
14
  }
14
- export interface CalloutProps {
15
- title?: string;
15
+ export interface CalloutProps extends Margins {
16
+ heading?: string;
16
17
  type?: CalloutType;
17
18
  children?: React.ReactNode;
18
19
  }
19
- export declare const GoACallout: ({ title, type, children }: CalloutProps) => JSX.Element;
20
+ export declare const GoACallout: ({ heading, type, children, mt, mr, mb, ml, }: CalloutProps) => JSX.Element;
20
21
  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,20 @@
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;
15
18
  children?: React.ReactNode;
16
19
  }
17
20
  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,29 +1,31 @@
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;
13
- checked?: boolean;
14
+ checked: boolean;
14
15
  disabled?: boolean;
15
16
  error?: boolean;
16
17
  text?: string;
17
18
  value?: string | number | boolean;
18
19
  }
19
- export interface Props {
20
+ export interface Props extends Margins {
20
21
  id?: string;
21
22
  name: string;
22
- checked?: boolean;
23
+ checked: boolean;
23
24
  disabled?: boolean;
24
25
  error?: boolean;
25
26
  text?: string;
26
27
  value?: string | number | boolean;
28
+ children?: React.ReactNode;
27
29
  testId?: string;
28
30
  onChange?: (name: string, checked: boolean, value: string) => void;
29
31
  }
package/lib/chip/chip.d.ts CHANGED
@@ -1,24 +1,28 @@
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;
22
26
  }
23
- export declare const GoAChip: ({ leadingIcon, deletable, error, content, onClick }: Props) => JSX.Element;
27
+ export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick, mt, mr, mb, ml, }: Props) => JSX.Element;
24
28
  export default GoAChip;
package/lib/circular-progress/circular-progress.d.ts CHANGED
@@ -1,9 +1,7 @@
1
- import React from 'react';
2
- export declare type CircularProgressType = 'infinite' | 'progress';
1
+ import React from "react";
3
2
  export declare type CircularProgressVariant = "fullscreen" | "inline";
4
3
  export declare type CircularProgressSize = "small" | "large";
5
4
  interface WCProps {
6
- type?: CircularProgressType;
7
5
  variant?: CircularProgressVariant;
8
6
  size?: CircularProgressSize;
9
7
  message?: string;
@@ -13,17 +11,16 @@ interface WCProps {
13
11
  declare global {
14
12
  namespace JSX {
15
13
  interface IntrinsicElements {
16
- 'goa-circular-progress': WCProps & React.HTMLAttributes<HTMLElement>;
14
+ "goa-circular-progress": WCProps & React.HTMLAttributes<HTMLElement>;
17
15
  }
18
16
  }
19
17
  }
20
18
  export interface CircularProgressProps {
21
- type?: CircularProgressType;
22
19
  variant?: CircularProgressVariant;
23
20
  size?: CircularProgressSize;
24
21
  message?: string;
25
22
  visible?: boolean;
26
23
  progress?: number;
27
24
  }
28
- export declare const GoACircularProgress: ({ type, visible, message, progress, variant, size }: CircularProgressProps) => JSX.Element;
25
+ export declare const GoACircularProgress: ({ visible, message, progress, variant, size, }: CircularProgressProps) => JSX.Element;
29
26
  export default GoACircularProgress;
package/lib/container/container.d.ts CHANGED
@@ -1,23 +1,27 @@
1
- import React, { FC, ReactNode } from 'react';
2
- declare type ContainerVariant = 'primary' | 'info' | 'error' | 'success' | 'warning' | 'default';
3
- declare type HeadingSize = 'large' | 'small' | 'none';
4
- interface WCProps {
5
- variant: ContainerVariant;
6
- headingsize: HeadingSize;
1
+ import React, { FC, ReactNode } from "react";
2
+ import { Margins } from "../../common/styling";
3
+ declare type ContainerType = "interactive" | "non-interactive" | "info" | "error" | "success" | "important";
4
+ declare type Accent = "thick" | "thin" | "filled";
5
+ declare type ContainerPadding = "relaxed" | "compact";
6
+ interface WCProps extends Margins {
7
+ type?: ContainerType;
8
+ accent?: Accent;
9
+ padding?: ContainerPadding;
7
10
  }
8
11
  declare global {
9
12
  namespace JSX {
10
13
  interface IntrinsicElements {
11
- 'goa-container': WCProps & React.HTMLAttributes<HTMLElement>;
14
+ "goa-container": WCProps & React.HTMLAttributes<HTMLElement>;
12
15
  }
13
16
  }
14
17
  }
15
- interface Props {
16
- headingSize: HeadingSize;
17
- variant?: ContainerVariant;
18
+ interface Props extends Margins {
19
+ accent?: Accent;
20
+ type?: ContainerType;
18
21
  title?: ReactNode;
22
+ padding?: ContainerPadding;
19
23
  actions?: ReactNode;
20
- children: ReactNode;
24
+ children?: ReactNode;
21
25
  }
22
26
  export declare const GoAContainer: FC<Props>;
23
27
  export default GoAContainer;
package/lib/divider/divider.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ import { Margins } from "../../common/styling";
3
+ declare global {
4
+ namespace JSX {
5
+ interface IntrinsicElements {
6
+ "goa-divider": Margins & React.HTMLAttributes<HTMLElement>;
7
+ }
8
+ }
9
+ }
10
+ export declare function GoADivider(props: Margins): JSX.Element;
11
+ export default GoADivider;