@abgov/react-components 4.0.0-alpha.3 → 4.0.0-alpha.30

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 (30) hide show
  1. package/README.md +9 -42
  2. package/index.d.ts +11 -7
  3. package/lib/app-header/app-header.d.ts +2 -2
  4. package/lib/button/button.d.ts +8 -3
  5. package/lib/callout/callout.d.ts +3 -3
  6. package/lib/checkbox/checkbox.d.ts +2 -2
  7. package/lib/chip/chip.d.ts +3 -2
  8. package/lib/circular-progress/circular-progress.d.ts +1 -4
  9. package/lib/container/container.d.ts +2 -0
  10. package/lib/divider/divider.d.ts +17 -0
  11. package/lib/dropdown/dropdown.d.ts +8 -5
  12. package/lib/flex-column/flex-column.d.ts +16 -0
  13. package/lib/{flex/row.d.ts → flex-row/flex-row.d.ts} +2 -2
  14. package/lib/footer/footer.d.ts +13 -0
  15. package/lib/footer-meta-section/footer-meta-section.d.ts +13 -0
  16. package/lib/footer-nav-section/footer-nav-section.d.ts +19 -0
  17. package/lib/hero-banner/hero-banner.d.ts +2 -2
  18. package/lib/icons/icon.d.ts +1 -1
  19. package/lib/input/input.d.ts +7 -1
  20. package/lib/modal/modal.d.ts +2 -0
  21. package/lib/page/page.d.ts +13 -0
  22. package/lib/page-block/page-block.d.ts +10 -3
  23. package/lib/textarea/textarea.d.ts +11 -5
  24. package/package.json +1 -4
  25. package/react-components.esm.js +13835 -265
  26. package/react-components.umd.js +14525 -903
  27. package/lib/app-footer/app-footer.d.ts +0 -24
  28. package/lib/app-footer/meta-link.d.ts +0 -20
  29. package/lib/app-footer/navigation-link.d.ts +0 -22
  30. package/lib/flex/index.d.ts +0 -1
package/README.md CHANGED
@@ -2,58 +2,25 @@
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
14
+ Add the following to the head element
52
15
 
16
+ ```html
17
+ <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
18
+ <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
53
19
 
54
20
  ```
55
21
 
56
22
  Import the styles in the `src/index.css` file
23
+
57
24
  ```css
58
25
  @import '@abgov/styles/styles.esm.css';
59
26
  ```
package/index.d.ts CHANGED
@@ -2,11 +2,9 @@
2
2
  * IMPORTANT: Do NOT export experimental components in this file.
3
3
  */
4
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
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';
10
8
  import { GoAButton } from './lib/button/button';
11
9
  import { GoAButtonGroup } from './lib/button-group/button-group';
12
10
  import { GoACallout } from './lib/callout/callout';
@@ -15,12 +13,11 @@ import { GoAChip } from './lib/chip/chip';
15
13
  import { GoACircularProgress } from './lib/circular-progress/circular-progress';
16
14
  import { GoAContainer } from './lib/container/container';
17
15
  import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
18
- import { GoAFlexRow } from './lib/flex';
16
+ import { GoAFlexRow } from './lib/flex-row/flex-row';
19
17
  import { GoAFormItem } from './lib/form';
20
18
  import { GoAHeroBanner } from './lib/hero-banner/hero-banner';
21
19
  import { GoAHeroBannerActions } from './lib/hero-banner/hero-banner-actions';
22
20
  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
21
  import { GoAMicrositeHeader } from './lib/microsite-header/microsite-header';
25
22
  import { GoAModal } from './lib/modal/modal';
26
23
  import { GoANotification } from './lib/notification/notification';
@@ -31,6 +28,13 @@ import { GoASpinner } from './lib/spinner/spinner';
31
28
  import { GoATextArea } from './lib/textarea/textarea';
32
29
  import type { GoAIconType } from './lib/icons';
33
30
  import type { GoABadgeType } from './lib/badge/badge';
31
+ export * from './lib/page/page';
32
+ export * from './lib/footer/footer';
33
+ export * from './lib/footer-nav-section/footer-nav-section';
34
+ export * from './lib/footer-meta-section/footer-meta-section';
35
+ export * from './lib/flex-column/flex-column';
36
+ export * from './lib/page/page';
37
+ export * from './lib/divider/divider';
34
38
  export type { GoAIconType };
35
39
  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, };
40
+ export { GoAAppHeader, 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, };
package/lib/app-header/app-header.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { FC } from 'react';
2
2
  interface WCProps {
3
- title: string;
3
+ heading?: string;
4
4
  url?: string;
5
5
  }
6
6
  declare global {
@@ -11,7 +11,7 @@ declare global {
11
11
  }
12
12
  }
13
13
  interface Props {
14
- title: string;
14
+ heading?: string;
15
15
  url?: string;
16
16
  }
17
17
  export declare const GoAAppHeader: FC<Props>;
package/lib/button/button.d.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  import React, { FC, ReactNode } from 'react';
2
2
  import './button.css';
3
- export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'get-started';
4
- export declare type ButtonSize = 'compact' | 'normal';
5
- export declare type ButtonVariant = 'default' | 'danger';
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';
6
7
  interface WCProps {
7
8
  type?: ButtonType;
8
9
  size?: ButtonSize;
9
10
  variant?: ButtonVariant;
10
11
  disabled?: boolean;
11
12
  title?: string;
13
+ leadingicon?: string;
14
+ trailingicon?: string;
12
15
  ref: React.RefObject<HTMLElement>;
13
16
  }
14
17
  declare global {
@@ -24,6 +27,8 @@ declare type ButtonProps = {
24
27
  size?: ButtonSize;
25
28
  variant?: ButtonVariant;
26
29
  disabled?: boolean;
30
+ leadingIcon?: GoAIconType;
31
+ trailingIcon?: GoAIconType;
27
32
  onClick: (e: any) => void;
28
33
  children: ReactNode;
29
34
  };
package/lib/callout/callout.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  declare type CalloutType = "important" | 'information' | 'event' | 'success' | 'emergency';
3
3
  interface WCProps {
4
- title?: string;
4
+ heading?: string;
5
5
  type?: CalloutType;
6
6
  }
7
7
  declare global {
@@ -12,9 +12,9 @@ declare global {
12
12
  }
13
13
  }
14
14
  export interface CalloutProps {
15
- title?: string;
15
+ heading?: string;
16
16
  type?: CalloutType;
17
17
  children?: React.ReactNode;
18
18
  }
19
- export declare const GoACallout: ({ title, type, children }: CalloutProps) => JSX.Element;
19
+ export declare const GoACallout: ({ heading, type, children }: CalloutProps) => JSX.Element;
20
20
  export default GoACallout;
package/lib/checkbox/checkbox.d.ts CHANGED
@@ -10,7 +10,7 @@ interface CheckboxProps {
10
10
  ref: React.RefObject<HTMLElement>;
11
11
  id?: string;
12
12
  name: string;
13
- checked?: boolean;
13
+ checked: boolean;
14
14
  disabled?: boolean;
15
15
  error?: boolean;
16
16
  text?: string;
@@ -19,7 +19,7 @@ interface CheckboxProps {
19
19
  export interface Props {
20
20
  id?: string;
21
21
  name: string;
22
- checked?: boolean;
22
+ checked: boolean;
23
23
  disabled?: boolean;
24
24
  error?: boolean;
25
25
  text?: string;
package/lib/chip/chip.d.ts CHANGED
@@ -14,10 +14,11 @@ declare global {
14
14
  }
15
15
  }
16
16
  export interface Props {
17
- onDeleteIconClick?: () => void;
17
+ onClick?: () => void;
18
+ deletable?: boolean;
18
19
  leadingIcon?: string;
19
20
  error?: boolean;
20
21
  content: string;
21
22
  }
22
- export declare const GoAChip: ({ leadingIcon, error, content, onDeleteIconClick }: Props) => JSX.Element;
23
+ export declare const GoAChip: ({ leadingIcon, deletable, error, content, onClick }: Props) => JSX.Element;
23
24
  export default GoAChip;
package/lib/circular-progress/circular-progress.d.ts CHANGED
@@ -1,9 +1,7 @@
1
1
  import React from 'react';
2
- export declare type CircularProgressType = 'infinite' | 'progress';
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;
@@ -18,12 +16,11 @@ declare global {
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
@@ -4,6 +4,7 @@ declare type HeadingSize = 'large' | 'small' | 'none';
4
4
  interface WCProps {
5
5
  variant: ContainerVariant;
6
6
  headingsize: HeadingSize;
7
+ colored: boolean;
7
8
  }
8
9
  declare global {
9
10
  namespace JSX {
@@ -16,6 +17,7 @@ interface Props {
16
17
  headingSize: HeadingSize;
17
18
  variant?: ContainerVariant;
18
19
  title?: ReactNode;
20
+ colored?: boolean;
19
21
  actions?: ReactNode;
20
22
  children: ReactNode;
21
23
  }
package/lib/divider/divider.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ declare type DividerSpacing = "small" | "medium" | "large";
3
+ interface WCDividerProps {
4
+ spacing: DividerSpacing;
5
+ }
6
+ declare global {
7
+ namespace JSX {
8
+ interface IntrinsicElements {
9
+ 'goa-divider': WCDividerProps & React.HTMLAttributes<HTMLElement>;
10
+ }
11
+ }
12
+ }
13
+ export interface DividerProps {
14
+ spacing: DividerSpacing;
15
+ }
16
+ export declare function GoADivider(props: DividerProps): JSX.Element;
17
+ export default GoADivider;
package/lib/dropdown/dropdown.d.ts CHANGED
@@ -4,14 +4,16 @@ export * from './dropdown-option';
4
4
  interface WCProps {
5
5
  ref: React.MutableRefObject<HTMLElement | null>;
6
6
  name: string;
7
- values: string;
7
+ value: string;
8
8
  leadingicon?: string;
9
- maxheight?: number;
9
+ maxheight?: string;
10
10
  placeholder?: string;
11
11
  filterable?: boolean;
12
12
  disabled?: boolean;
13
13
  error?: boolean;
14
14
  multiselect?: boolean;
15
+ width?: string;
16
+ testid?: string;
15
17
  }
16
18
  declare global {
17
19
  namespace JSX {
@@ -22,16 +24,17 @@ declare global {
22
24
  }
23
25
  interface Props {
24
26
  name: string;
25
- values: string[];
26
- onChange: (name: string, values: string[]) => void;
27
+ value: string[] | string;
28
+ onChange: (name: string, values: string[] | string) => void;
27
29
  disabled?: boolean;
28
30
  filterable?: boolean;
29
31
  leadingIcon?: GoAIconType;
30
- maxHeight?: number;
32
+ maxHeight?: string;
31
33
  error?: boolean;
32
34
  multiselect?: boolean;
33
35
  placeholder?: string;
34
36
  testId?: string;
37
+ width?: string;
35
38
  }
36
39
  export declare const GoADropdown: FC<Props>;
37
40
  export default GoADropdown;
package/lib/flex-column/flex-column.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import React, { FC } from "react";
2
+ interface WCProps {
3
+ gap?: 'small' | 'medium' | 'large';
4
+ }
5
+ declare global {
6
+ namespace JSX {
7
+ interface IntrinsicElements {
8
+ 'goa-flex-col': WCProps & React.HTMLAttributes<HTMLElement>;
9
+ }
10
+ }
11
+ }
12
+ export interface Props {
13
+ gap?: 'small' | 'medium' | 'large';
14
+ }
15
+ export declare const GoAFlexCol: FC<Props>;
16
+ export default GoAFlexCol;
package/lib/{flex/row.d.ts → flex-row/flex-row.d.ts} RENAMED
@@ -1,6 +1,6 @@
1
1
  import React, { FC } from "react";
2
2
  interface WCProps {
3
- gap: 'small' | 'medium' | 'large';
3
+ gap?: 'small' | 'medium' | 'large';
4
4
  }
5
5
  declare global {
6
6
  namespace JSX {
@@ -10,7 +10,7 @@ declare global {
10
10
  }
11
11
  }
12
12
  export interface Props {
13
- gap: 'small' | 'medium' | 'large';
13
+ gap?: 'small' | 'medium' | 'large';
14
14
  }
15
15
  export declare const GoAFlexRow: FC<Props>;
16
16
  export default GoAFlexRow;
package/lib/footer/footer.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import React, { ReactNode } from "react";
2
+ declare global {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'goa-app-footer': React.HTMLAttributes<HTMLElement>;
6
+ }
7
+ }
8
+ }
9
+ export interface FooterProps {
10
+ children: ReactNode;
11
+ }
12
+ export declare function GoAAppFooter({ children }: FooterProps): JSX.Element;
13
+ export default GoAAppFooter;
package/lib/footer-meta-section/footer-meta-section.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import React, { ReactNode } from "react";
2
+ declare global {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'goa-app-footer-meta-section': React.HTMLAttributes<HTMLElement>;
6
+ }
7
+ }
8
+ }
9
+ export interface FooterMetaSectionProps {
10
+ children: ReactNode;
11
+ }
12
+ export declare function GoAAppFooterMetaSection({ children }: FooterMetaSectionProps): JSX.Element;
13
+ export default GoAAppFooterMetaSection;
package/lib/footer-nav-section/footer-nav-section.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import React, { ReactNode } from "react";
2
+ interface WCProps {
3
+ name?: string;
4
+ maxcolumncount?: number;
5
+ }
6
+ declare global {
7
+ namespace JSX {
8
+ interface IntrinsicElements {
9
+ 'goa-app-footer-nav-section': WCProps & React.HTMLAttributes<HTMLElement>;
10
+ }
11
+ }
12
+ }
13
+ interface FooterNavSectionProps {
14
+ name: string;
15
+ maxColumnCount?: number;
16
+ children: ReactNode;
17
+ }
18
+ export declare function GoAAppFooterNavSection({ name, maxColumnCount, children }: FooterNavSectionProps): JSX.Element;
19
+ export default GoAAppFooterNavSection;
package/lib/hero-banner/hero-banner.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { FC } from 'react';
2
2
  interface WCProps {
3
- title: string;
3
+ heading: string;
4
4
  backgroundurl: string;
5
5
  }
6
6
  declare global {
@@ -11,7 +11,7 @@ declare global {
11
11
  }
12
12
  }
13
13
  interface Props {
14
- title: string;
14
+ heading: string;
15
15
  backgroundUrl: string;
16
16
  }
17
17
  export declare const GoAHeroBanner: FC<Props>;
package/lib/icons/icon.d.ts CHANGED
@@ -19,7 +19,7 @@ declare global {
19
19
  }
20
20
  }
21
21
  }
22
- export declare type GoAIconType = 'accessibility' | 'add-circle' | 'add' | 'airplane' | 'alarm' | 'albums' | 'alert-circle' | 'alert' | 'american-football' | 'analytics' | 'aperture' | 'apps' | 'archive' | 'arrow-back-circle' | 'arrow-back' | 'arrow-down-circle' | 'arrow-down' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-redo-circle' | 'arrow-redo' | 'arrow-undo-circle' | 'arrow-undo' | 'arrow-up-circle' | 'arrow-up' | 'at-circle' | 'at' | 'attach' | 'backspace' | 'bag-add' | 'bag-check' | 'bag-handle' | 'bag' | 'bag-remove' | 'balloon' | 'ban' | 'bandage' | 'bar-chart' | 'barbell' | 'barcode' | 'baseball' | 'basket' | 'basketball' | 'battery-charging' | 'battery-dead' | 'battery-full' | 'battery-half' | 'beaker' | 'bed' | 'beer' | 'bicycle' | 'bluetooth' | 'boat' | 'body' | 'bonfire' | 'book' | 'bookmark' | 'bookmarks' | 'bowling-ball' | 'briefcase' | 'browsers' | 'brush' | 'bug' | 'build' | 'bulb' | 'bus' | 'business' | 'cafe' | 'calculator' | 'calendar-clear' | 'calendar-number' | 'calendar' | 'call' | 'camera' | 'camera-reverse' | 'car' | 'car-sport' | 'card' | 'caret-back-circle' | 'caret-back' | 'caret-down-circle' | 'caret-down' | 'caret-forward-circle' | 'caret-forward' | 'caret-up-circle' | 'caret-up' | 'cart' | 'cash' | 'cellular' | 'chatbox-ellipses' | 'chatbox' | 'chatbubble-ellipses' | 'chatbubble' | 'chatbubbles' | 'checkbox' | 'checkmark-circle' | 'checkmark-done-circle' | 'checkmark-done' | 'checkmark' | 'chevron-back-circle' | 'chevron-back' | 'chevron-down-circle' | 'chevron-down' | 'chevron-forward-circle' | 'chevron-forward' | 'chevron-up-circle' | 'chevron-up' | 'clipboard' | 'close-circle' | 'close' | 'cloud-circle' | 'cloud-done' | 'cloud-download' | 'cloud-offline' | 'cloud' | 'cloud-upload' | 'cloudy-night' | 'cloudy' | 'code-download' | 'code' | 'code-slash' | 'code-working' | 'cog' | 'color-fill' | 'color-filter' | 'color-palette' | 'color-wand' | 'compass' | 'construct' | 'contract' | 'contrast' | 'copy' | 'create' | 'crop' | 'cube' | 'cut' | 'desktop' | 'diamond' | 'dice' | 'disc' | 'document-attach' | 'document-lock' | 'document' | 'document-text' | 'documents' | 'download' | 'duplicate' | 'ear' | 'earth' | 'easel' | 'egg' | 'ellipse' | 'ellipsis-horizontal-circle' | 'ellipsis-horizontal' | 'ellipsis-vertical-circle' | 'ellipsis-vertical' | 'enter' | 'exit' | 'expand' | 'extension-puzzle' | 'eye-off' | 'eye' | 'eyedrop' | 'fast-food' | 'female' | 'file-tray-full' | 'file-tray' | 'file-tray-stacked' | 'filenames.ps1' | 'film' | 'filter-circle' | 'filter' | 'finger-print' | 'fish' | 'fitness' | 'flag' | 'flame' | 'flash-off' | 'flash' | 'flashlight' | 'flask' | 'flower' | 'folder-open' | 'folder' | 'football' | 'footsteps' | 'funnel' | 'game-controller' | 'gift' | 'git-branch' | 'git-commit' | 'git-compare' | 'git-merge' | 'git-network' | 'git-pull-request' | 'glasses' | 'globe' | 'golf' | 'grid' | 'hammer' | 'hand-left' | 'hand-right' | 'happy' | 'hardware-chip' | 'headset' | 'heart-circle' | 'heart-dislike-circle' | 'heart-dislike' | 'heart-half' | 'heart' | 'help-buoy' | 'help-circle' | 'help' | 'home' | 'hourglass' | 'ice-cream' | 'id-card' | 'image' | 'images' | 'infinite' | 'information-circle' | 'information' | 'invert-mode' | 'journal' | 'key' | 'keypad' | 'language' | 'laptop' | 'layers' | 'leaf' | 'library' | 'link' | 'list-circle' | 'list' | 'locate' | 'location' | 'lock-closed' | 'lock-open' | 'log-in' | 'log-out' | 'magnet' | 'mail-open' | 'mail' | 'mail-unread' | 'male-female' | 'male' | 'man' | 'map' | 'medal' | 'medical' | 'medkit' | 'megaphone' | 'menu' | 'mic-circle' | 'mic-off-circle' | 'mic-off' | 'mic' | 'moon' | 'move' | 'musical-note' | 'musical-notes' | 'navigate-circle' | 'navigate' | 'newspaper' | 'notifications-circle' | 'notifications-off-circle' | 'notifications-off' | 'notifications' | 'nuclear' | 'nutrition' | 'open' | 'options' | 'paper-plane' | 'partly-sunny' | 'pause-circle' | 'pause' | 'paw' | 'pencil' | 'people-circle' | 'people' | 'person-add' | 'person-circle' | 'person' | 'person-remove' | 'phone-landscape' | 'phone-portrait' | 'pie-chart' | 'pin' | 'pint' | 'pizza' | 'planet' | 'play-back-circle' | 'play-back' | 'play-circle' | 'play-forward-circle' | 'play-forward' | 'play' | 'play-skip-back-circle' | 'play-skip-back' | 'play-skip-forward-circle' | 'play-skip-forward' | 'podium' | 'power' | 'pricetag' | 'pricetags' | 'print' | 'prism' | 'pulse' | 'push' | 'qr-code' | 'radio-button-off' | 'radio-button-on' | 'radio' | 'rainy' | 'reader' | 'receipt' | 'recording' | 'refresh-circle' | 'refresh' | 'reload-circle' | 'reload' | 'remove-circle' | 'remove' | 'reorder-four' | 'reorder-three' | 'reorder-two' | 'repeat' | 'resize' | 'restaurant' | 'return-down-back' | 'return-down-forward' | 'return-up-back' | 'return-up-forward' | 'ribbon' | 'rocket' | 'rose' | 'sad' | 'save' | 'scale' | 'scan-circle' | 'scan' | 'school' | 'search-circle' | 'search' | 'send' | 'server' | 'settings' | 'shapes' | 'share' | 'share-social' | 'shield-checkmark' | 'shield-half' | 'shield' | 'shirt' | 'shuffle' | 'skull' | 'snow' | 'sparkles' | 'speedometer' | 'square' | 'star-half' | 'star' | 'stats-chart' | 'stop-circle' | 'stop' | 'stopwatch' | 'storefront' | 'subway' | 'sunny' | 'swap-horizontal' | 'swap-vertical' | 'sync-circle' | 'sync' | 'tablet-landscape' | 'tablet-portrait' | 'telescope' | 'tennisball' | 'terminal' | 'text' | 'thermometer' | 'thumbs-down' | 'thumbs-up' | 'thunderstorm' | 'ticket' | 'time' | 'timer' | 'today' | 'toggle' | 'trail-sign' | 'train' | 'transgender' | 'trash-bin' | 'trash' | 'trending-down' | 'trending-up' | 'triangle' | 'trophy' | 'tv' | 'umbrella' | 'unlink' | 'videocam-off' | 'videocam' | 'volume-high' | 'volume-low' | 'volume-medium' | 'volume-mute' | 'volume-off' | 'walk' | 'wallet' | 'warning' | 'watch' | 'water' | 'wifi' | 'wine' | 'woman';
22
+ export declare type GoAIconType = 'accessibility' | 'add-circle' | 'add' | 'airplane' | 'alarm' | 'albums' | 'alert-circle' | 'alert' | 'american-football' | 'analytics' | 'aperture' | 'apps' | 'archive' | 'arrow-back-circle' | 'arrow-back' | 'arrow-down-circle' | 'arrow-down' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-redo-circle' | 'arrow-redo' | 'arrow-undo-circle' | 'arrow-undo' | 'arrow-up-circle' | 'arrow-up' | 'at-circle' | 'at' | 'attach' | 'backspace' | 'bag-add' | 'bag-check' | 'bag-handle' | 'bag' | 'bag-remove' | 'balloon' | 'ban' | 'bandage' | 'bar-chart' | 'barbell' | 'barcode' | 'baseball' | 'basket' | 'basketball' | 'battery-charging' | 'battery-dead' | 'battery-full' | 'battery-half' | 'beaker' | 'bed' | 'beer' | 'bicycle' | 'bluetooth' | 'boat' | 'body' | 'bonfire' | 'book' | 'bookmark' | 'bookmarks' | 'bowling-ball' | 'briefcase' | 'browsers' | 'brush' | 'bug' | 'build' | 'bulb' | 'bus' | 'business' | 'cafe' | 'calculator' | 'calendar-clear' | 'calendar-number' | 'calendar' | 'call' | 'camera' | 'camera-reverse' | 'car' | 'car-sport' | 'card' | 'caret-back-circle' | 'caret-back' | 'caret-down-circle' | 'caret-down' | 'caret-forward-circle' | 'caret-forward' | 'caret-up-circle' | 'caret-up' | 'cart' | 'cash' | 'cellular' | 'chatbox-ellipses' | 'chatbox' | 'chatbubble-ellipses' | 'chatbubble' | 'chatbubbles' | 'checkbox' | 'checkmark-circle' | 'checkmark-done-circle' | 'checkmark-done' | 'checkmark' | 'chevron-back-circle' | 'chevron-back' | 'chevron-down-circle' | 'chevron-down' | 'chevron-forward-circle' | 'chevron-forward' | 'chevron-up-circle' | 'chevron-up' | 'clipboard' | 'close-circle' | 'close' | 'cloud-circle' | 'cloud-done' | 'cloud-download' | 'cloud-offline' | 'cloud' | 'cloud-upload' | 'cloudy-night' | 'cloudy' | 'code-download' | 'code' | 'code-slash' | 'code-working' | 'cog' | 'color-fill' | 'color-filter' | 'color-palette' | 'color-wand' | 'compass' | 'construct' | 'contract' | 'contrast' | 'copy' | 'create' | 'crop' | 'cube' | 'cut' | 'desktop' | 'diamond' | 'dice' | 'disc' | 'document-attach' | 'document-lock' | 'document' | 'document-text' | 'documents' | 'download' | 'duplicate' | 'ear' | 'earth' | 'easel' | 'egg' | 'ellipse' | 'ellipsis-horizontal-circle' | 'ellipsis-horizontal' | 'ellipsis-vertical-circle' | 'ellipsis-vertical' | 'enter' | 'exit' | 'expand' | 'extension-puzzle' | 'eye-off' | 'eye' | 'eyedrop' | 'fast-food' | 'female' | 'file-tray-full' | 'file-tray' | 'file-tray-stacked' | 'filenames.ps1' | 'film' | 'filter-circle' | 'filter' | 'finger-print' | 'fish' | 'fitness' | 'flag' | 'flame' | 'flash-off' | 'flash' | 'flashlight' | 'flask' | 'flower' | 'folder-open' | 'folder' | 'football' | 'footsteps' | 'funnel' | 'game-controller' | 'gift' | 'git-branch' | 'git-commit' | 'git-compare' | 'git-merge' | 'git-network' | 'git-pull-request' | 'glasses' | 'globe' | 'golf' | 'grid' | 'hammer' | 'hand-left' | 'hand-right' | 'happy' | 'hardware-chip' | 'headset' | 'heart-circle' | 'heart-dislike-circle' | 'heart-dislike' | 'heart-half' | 'heart' | 'help-buoy' | 'help-circle' | 'help' | 'home' | 'hourglass' | 'ice-cream' | 'id-card' | 'image' | 'images' | 'infinite' | 'information-circle' | 'information' | 'invert-mode' | 'journal' | 'key' | 'keypad' | 'language' | 'laptop' | 'layers' | 'leaf' | 'library' | 'link' | 'list-circle' | 'list' | 'locate' | 'location' | 'lock-closed' | 'lock-open' | 'log-in' | 'log-out' | 'magnet' | 'mail-open' | 'mail' | 'mail-unread' | 'male-female' | 'male' | 'man' | 'map' | 'medal' | 'medical' | 'medkit' | 'megaphone' | 'menu' | 'mic-circle' | 'mic-off-circle' | 'mic-off' | 'mic' | 'moon' | 'move' | 'musical-note' | 'musical-notes' | 'navigate-circle' | 'navigate' | 'newspaper' | 'notifications-circle' | 'notifications-off-circle' | 'notifications-off' | 'notifications' | 'nuclear' | 'nutrition' | 'open' | 'options' | 'paper-plane' | 'partly-sunny' | 'pause-circle' | 'pause' | 'paw' | 'pencil' | 'people-circle' | 'people' | 'person-add' | 'person-circle' | 'person' | 'person-remove' | 'phone-landscape' | 'phone-portrait' | 'pie-chart' | 'pin' | 'pint' | 'pizza' | 'planet' | 'play-back-circle' | 'play-back' | 'play-circle' | 'play-forward-circle' | 'play-forward' | 'play' | 'play-skip-back-circle' | 'play-skip-back' | 'play-skip-forward-circle' | 'play-skip-forward' | 'podium' | 'power' | 'pricetag' | 'pricetags' | 'print' | 'prism' | 'pulse' | 'push' | 'qr-code' | 'radio-button-off' | 'radio-button-on' | 'radio' | 'rainy' | 'reader' | 'receipt' | 'recording' | 'refresh-circle' | 'refresh' | 'reload-circle' | 'reload' | 'remove-circle' | 'remove' | 'reorder-four' | 'reorder-three' | 'reorder-two' | 'repeat' | 'resize' | 'restaurant' | 'return-down-back' | 'return-down-forward' | 'return-up-back' | 'return-up-forward' | 'ribbon' | 'rocket' | 'rose' | 'sad' | 'save' | 'scale' | 'scan-circle' | 'scan' | 'school' | 'search-circle' | 'search' | 'send' | 'server' | 'settings' | 'shapes' | 'share' | 'share-social' | 'shield-checkmark' | 'shield-half' | 'shield' | 'shirt' | 'shuffle' | 'skull' | 'snow' | 'sparkles' | 'speedometer' | 'square' | 'star-half' | 'star' | 'stats-chart' | 'stop-circle' | 'stop' | 'stopwatch' | 'storefront' | 'subway' | 'sunny' | 'swap-horizontal' | 'swap-vertical' | 'sync-circle' | 'sync' | 'tablet-landscape' | 'tablet-portrait' | 'telescope' | 'tennisball' | 'terminal' | 'text' | 'thermometer' | 'thumbs-down' | 'thumbs-up' | 'thunderstorm' | 'ticket' | 'time' | 'timer' | 'today' | 'toggle' | 'trail-sign' | 'train' | 'transgender' | 'trash-bin' | 'trash' | 'trending-down' | 'trending-up' | 'triangle' | 'trophy' | 'tv' | 'umbrella' | 'unlink' | 'videocam-off' | 'videocam' | 'volume-high' | 'volume-low' | 'volume-medium' | 'volume-mute' | 'volume-off' | 'walk' | 'wallet' | 'warning' | 'watch' | 'water' | 'wifi' | 'wine' | 'woman' | "logo-alipay" | "logo-amazon" | "logo-amplify" | "logo-android" | "logo-angular" | "logo-apple" | "logo-apple-appstore" | "logo-apple-ar" | "logo-behance" | "logo-bitbucket" | "logo-bitcoin" | "logo-buffer" | "logo-capacitor" | "logo-chrome" | "logo-closed-captioning" | "logo-codepen" | "logo-css3" | "logo-designernews" | "logo-deviantart" | "logo-discord" | "logo-docker" | "logo-dribbble" | "logo-dropbox" | "logo-edge" | "logo-electron" | "logo-euro" | "logo-facebook" | "logo-figma" | "logo-firebase" | "logo-firefox" | "logo-flickr" | "logo-foursquare" | "logo-github" | "logo-gitlab" | "logo-google" | "logo-google-playstore" | "logo-hackernews" | "logo-html5" | "logo-instagram" | "logo-ionic" | "logo-ionitron" | "logo-javascript" | "logo-laravel" | "logo-linkedin" | "logo-markdown" | "logo-mastodon" | "logo-medium" | "logo-microsoft" | "logo-no-smoking" | "logo-nodejs" | "logo-npm" | "logo-octocat" | "logo-paypal" | "logo-pinterest" | "logo-playstation" | "logo-pwa" | "logo-python" | "logo-react" | "logo-reddit" | "logo-rss" | "logo-sass" | "logo-skype" | "logo-slack" | "logo-snapchat" | "logo-soundcloud" | "logo-stackoverflow" | "logo-steam" | "logo-stencil" | "logo-tableau" | "logo-tiktok" | "logo-tumblr" | "logo-tux" | "logo-twitch" | "logo-twitter" | "logo-usd" | "logo-venmo" | "logo-vercel" | "logo-vimeo" | "logo-vk" | "logo-vue" | "logo-web-component" | "logo-wechat" | "logo-whatsapp" | "logo-windows" | "logo-wordpress" | "logo-xbox" | "logo-xing" | "logo-yahoo" | "logo-yen" | "logo-youtube";
23
23
  export declare type IconSize = 'small' | 'medium' | 'large' | 'xlarge';
24
24
  export declare type IconVariant = 'primary' | 'secondary' | 'tertiary';
25
25
  export declare type IconTheme = 'outline' | 'filled' | 'sharp';
package/lib/input/input.d.ts CHANGED
@@ -14,6 +14,8 @@ interface WCProps {
14
14
  error?: boolean;
15
15
  readonly?: boolean;
16
16
  focused?: boolean;
17
+ showcounter?: boolean;
18
+ maxcharcount?: number;
17
19
  handletrailingiconclick: boolean;
18
20
  width?: string;
19
21
  testid?: string;
@@ -40,6 +42,8 @@ export interface Props {
40
42
  readonly?: boolean;
41
43
  error?: boolean;
42
44
  width?: string;
45
+ showCounter?: boolean;
46
+ maxCharCount?: number;
43
47
  testId?: string;
44
48
  }
45
49
  export declare const GoAInput: FC<Props & {
@@ -62,7 +66,9 @@ export declare const GoAInputUrl: FC<Props>;
62
66
  export declare const GoAInputTel: FC<Props>;
63
67
  export declare const GoAInputFile: FC<Props>;
64
68
  export declare const GoAInputMonth: FC<Props>;
65
- export declare const GoAInputNumber: FC<Props & {
69
+ export declare const GoAInputNumber: FC<Omit<Props, "value"> & {
70
+ value: number;
71
+ } & {
66
72
  min?: number;
67
73
  max?: number;
68
74
  step?: number;
package/lib/modal/modal.d.ts CHANGED
@@ -6,6 +6,7 @@ interface WCProps {
6
6
  width?: string;
7
7
  closable?: boolean;
8
8
  scrollable?: boolean;
9
+ transition?: "fast" | "slow" | "none";
9
10
  }
10
11
  declare global {
11
12
  namespace JSX {
@@ -19,6 +20,7 @@ interface Props {
19
20
  width?: string;
20
21
  actions?: React.ReactElement;
21
22
  onClose?: () => void;
23
+ transition?: "fast" | "slow" | "none";
22
24
  open?: boolean;
23
25
  }
24
26
  export declare const GoAModal: FC<Props>;
package/lib/page/page.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import React, { ReactNode } from "react";
2
+ declare global {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'goa-page': React.HTMLAttributes<HTMLElement>;
6
+ }
7
+ }
8
+ }
9
+ export interface PageProps {
10
+ children: ReactNode;
11
+ }
12
+ export declare function GoAPage(props: PageProps): JSX.Element;
13
+ export default GoAPage;
package/lib/page-block/page-block.d.ts CHANGED
@@ -1,9 +1,16 @@
1
- import React, { FC } from 'react';
1
+ import React, { FC, ReactNode } from 'react';
2
+ export interface WCPageBlockProps {
3
+ width: "full" | string;
4
+ }
2
5
  declare global {
3
6
  namespace JSX {
4
7
  interface IntrinsicElements {
5
- 'goa-page-block': React.HTMLAttributes<HTMLElement>;
8
+ 'goa-page-block': WCPageBlockProps & React.HTMLAttributes<HTMLElement>;
6
9
  }
7
10
  }
8
11
  }
9
- export declare const GoAPageBlock: FC;
12
+ export interface PageBlockProps {
13
+ width: "full" | string;
14
+ children: ReactNode;
15
+ }
16
+ export declare const GoAPageBlock: FC<PageBlockProps>;
package/lib/textarea/textarea.d.ts CHANGED
@@ -5,8 +5,11 @@ interface WCProps {
5
5
  value: string;
6
6
  placeholder?: string;
7
7
  rows?: number;
8
- error: boolean;
9
- disabled: boolean;
8
+ error?: boolean;
9
+ disabled?: boolean;
10
+ showcounter?: boolean;
11
+ maxcharcount?: number;
12
+ width?: string;
10
13
  }
11
14
  declare global {
12
15
  namespace JSX {
@@ -21,9 +24,12 @@ interface Props {
21
24
  id?: string;
22
25
  placeholder?: string;
23
26
  rows?: number;
24
- error: boolean;
25
- disabled: boolean;
26
- testId: string;
27
+ error?: boolean;
28
+ disabled?: boolean;
29
+ showCounter?: boolean;
30
+ maxCharCount?: number;
31
+ width?: string;
32
+ testId?: string;
27
33
  onChange: (name: string, value: string) => void;
28
34
  }
29
35
  export declare const GoATextArea: FC<Props>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/react-components",
3
- "version": "4.0.0-alpha.3",
3
+ "version": "4.0.0-alpha.30",
4
4
  "description": "Government of Alberta - UI components for React",
5
5
  "bugs": {
6
6
  "url": "https://github.com/GovAlta/ui-components/issues"
@@ -16,9 +16,6 @@
16
16
  "url": "https://github.com/GovAlta/ui-components.git",
17
17
  "directory": "libs/react-components"
18
18
  },
19
- "dependencies": {
20
- "@abgov/web-components": "^1.0.0-alpha.23"
21
- },
22
19
  "peerDependencies": {
23
20
  "react": "^17.0.2",
24
21
  "react-dom": "^17.0.2"