@abgov/react-components 3.4.0-alpha.5 → 3.4.0-alpha.50

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 (27) hide show
  1. package/README.md +48 -6
  2. package/index.d.ts +7 -5
  3. package/lib/app-header/app-header.d.ts +2 -2
  4. package/lib/badge/badge.d.ts +0 -1
  5. package/lib/button/button.d.ts +1 -1
  6. package/lib/checkbox/checkbox.d.ts +2 -2
  7. package/lib/circular-progress/circular-progress.d.ts +29 -0
  8. package/lib/container/container.d.ts +3 -3
  9. package/lib/dropdown/dropdown.d.ts +8 -6
  10. package/lib/flex/index.d.ts +1 -1
  11. package/lib/flex/row.d.ts +0 -1
  12. package/lib/form/form-item.d.ts +0 -2
  13. package/lib/form/index.d.ts +1 -1
  14. package/lib/input/input.d.ts +4 -1
  15. package/lib/{service-level-header/service-level-header.d.ts → microsite-header/microsite-header.d.ts} +7 -3
  16. package/lib/modal/modal.d.ts +8 -6
  17. package/lib/page-block/page-block.d.ts +9 -0
  18. package/lib/radio-group/radio-group.d.ts +3 -0
  19. package/lib/radio-group/radio.d.ts +2 -2
  20. package/lib/skeleton/skeleton.d.ts +1 -1
  21. package/lib/spinner/spinner.d.ts +10 -8
  22. package/lib/textarea/textarea.d.ts +5 -2
  23. package/package.json +2 -2
  24. package/react-components.esm.js +138 -115
  25. package/react-components.umd.js +148 -125
  26. package/lib/hero-banner/hero-banner-content.d.ts +0 -4
  27. package/lib/page-loader/page-loader.d.ts +0 -26
package/README.md CHANGED
@@ -2,16 +2,58 @@
2
2
 
3
3
  This library contains react components from the Government of Alberta.
4
4
 
5
- ## Installation
5
+ Create react app
6
+ ```bash
7
+ npm init vite@latest
8
+ ```
6
9
 
10
+ Add Dependencies
7
11
  ```bash
8
- npm add --save @abgov/react-components
12
+ npm i
13
+ npm i @abgov/react-components@3.4.0-alpha.7
14
+ npm i @abgov/styles
9
15
  ```
10
16
 
11
- ## Usage
17
+ 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
+ ```
12
38
 
13
- Insert the following into your base index.html file's `<head>` section:
39
+ ```typescript
40
+ // App.tsx
41
+ import './App.css'
14
42
 
15
- ```html
16
- <script src="https://unpkg.com/ionicons@5.5.3/dist/ionicons.js"></script>
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
+
53
+
54
+ ```
55
+
56
+ Import the styles in the `src/index.css` file
57
+ ```css
58
+ @import '@abgov/styles/styles.esm.css';
17
59
  ```
package/index.d.ts CHANGED
@@ -8,23 +8,25 @@ import { GoAButton } from './lib/button/button';
8
8
  import { GoAButtonGroup } from './lib/button-group/button-group';
9
9
  import { GoACallout } from './lib/callout/callout';
10
10
  import { GoACheckbox } from './lib/checkbox/checkbox';
11
+ import { GoACircularProgress } from './lib/circular-progress/circular-progress';
11
12
  import { GoAContainer } from './lib/container/container';
12
13
  import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
13
14
  import { GoAFlexRow } from './lib/flex';
14
15
  import { GoAFormItem } from './lib/form';
15
16
  import { GoAHeroBanner } from './lib/hero-banner/hero-banner';
16
- import { GoAHeroBannerContent } from './lib/hero-banner/hero-banner-content';
17
17
  import { GoAHeroBannerActions } from './lib/hero-banner/hero-banner-actions';
18
18
  import { GoAIcon, GoAIconButton } from './lib/icons';
19
19
  import { GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange } from './lib/input/input';
20
+ import { GoAMicrositeHeader } from './lib/microsite-header/microsite-header';
20
21
  import { GoAModal } from './lib/modal/modal';
21
22
  import { GoANotification } from './lib/notification/notification';
22
- import { GoAPageLoader } from './lib/page-loader/page-loader';
23
- import { GoARadioGroup, GoARadio } from './lib/radio-group/radio-group';
24
- import { GoAServiceLevelHeader } from './lib/service-level-header/service-level-header';
23
+ import { GoAPageBlock } from './lib/page-block/page-block';
24
+ import { GoARadioGroup, GoARadioItem } from './lib/radio-group/radio-group';
25
+ import { GoASkeleton } from './lib/skeleton/skeleton';
26
+ import { GoASpinner } from './lib/spinner/spinner';
25
27
  import { GoATextArea } from './lib/textarea/textarea';
26
28
  import type { GoAIconType } from './lib/icons';
27
29
  import type { GoABadgeType } from './lib/badge/badge';
28
30
  export type { GoAIconType };
29
31
  export type { GoABadgeType };
30
- export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoATextArea, GoAWarningBadge, };
32
+ export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, 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,7 +1,7 @@
1
1
  import React, { FC } from 'react';
2
2
  interface WCProps {
3
3
  title: string;
4
- url: string;
4
+ url?: string;
5
5
  }
6
6
  declare global {
7
7
  namespace JSX {
@@ -12,7 +12,7 @@ declare global {
12
12
  }
13
13
  interface Props {
14
14
  title: string;
15
- url: string;
15
+ url?: string;
16
16
  }
17
17
  export declare const GoAAppHeader: FC<Props>;
18
18
  export default GoAAppHeader;
package/lib/badge/badge.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { FC } from 'react';
2
2
  import { GoAIconType } from '../icons';
3
- import './badge.scss';
4
3
  export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
5
4
  interface GoABadgeProps {
6
5
  type: GoABadgeType;
package/lib/button/button.d.ts CHANGED
@@ -24,7 +24,7 @@ declare type ButtonProps = {
24
24
  size?: ButtonSize;
25
25
  variant?: ButtonVariant;
26
26
  disabled?: boolean;
27
- onClick: () => void;
27
+ onClick: (e: any) => void;
28
28
  children: ReactNode;
29
29
  };
30
30
  export declare const GoAButton: FC<ButtonProps>;
package/lib/checkbox/checkbox.d.ts CHANGED
@@ -8,19 +8,19 @@ declare global {
8
8
  }
9
9
  interface CheckboxProps {
10
10
  ref: React.RefObject<HTMLElement>;
11
+ id?: string;
11
12
  name: string;
12
13
  checked?: boolean;
13
14
  disabled?: boolean;
14
- indeterminate?: boolean;
15
15
  error?: boolean;
16
16
  text?: string;
17
17
  value?: string | number | boolean;
18
18
  }
19
19
  export interface Props {
20
+ id?: string;
20
21
  name: string;
21
22
  checked?: boolean;
22
23
  disabled?: boolean;
23
- indeterminate?: boolean;
24
24
  error?: boolean;
25
25
  text?: string;
26
26
  value?: string | number | boolean;
package/lib/circular-progress/circular-progress.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ export declare type CircularProgressType = 'infinite' | 'progress';
3
+ export declare type CircularProgressVariant = "fullscreen" | "inline";
4
+ export declare type CircularProgressSize = "small" | "large";
5
+ interface WCProps {
6
+ type?: CircularProgressType;
7
+ variant?: CircularProgressVariant;
8
+ size?: CircularProgressSize;
9
+ message?: string;
10
+ visible?: string;
11
+ progress?: number;
12
+ }
13
+ declare global {
14
+ namespace JSX {
15
+ interface IntrinsicElements {
16
+ 'goa-circular-progress': WCProps & React.HTMLAttributes<HTMLElement>;
17
+ }
18
+ }
19
+ }
20
+ export interface CircularProgressProps {
21
+ type?: CircularProgressType;
22
+ variant?: CircularProgressVariant;
23
+ size?: CircularProgressSize;
24
+ message?: string;
25
+ visible?: boolean;
26
+ progress?: number;
27
+ }
28
+ export declare const GoACircularProgress: ({ type, visible, message, progress, variant, size }: CircularProgressProps) => JSX.Element;
29
+ export default GoACircularProgress;
package/lib/container/container.d.ts CHANGED
@@ -14,9 +14,9 @@ declare global {
14
14
  }
15
15
  interface Props {
16
16
  headingSize: HeadingSize;
17
- variant: ContainerVariant;
18
- title: ReactNode;
19
- actions: ReactNode;
17
+ variant?: ContainerVariant;
18
+ title?: ReactNode;
19
+ actions?: ReactNode;
20
20
  children: ReactNode;
21
21
  }
22
22
  export declare const GoAContainer: FC<Props>;
package/lib/dropdown/dropdown.d.ts CHANGED
@@ -1,33 +1,35 @@
1
1
  import React, { FC } from "react";
2
2
  import { GoAIconType } from "../icons";
3
3
  export * from './dropdown-option';
4
- interface DropdownProps {
4
+ interface WCProps {
5
5
  ref: React.MutableRefObject<HTMLElement | null>;
6
6
  name: string;
7
7
  values: string;
8
8
  leadingicon?: string;
9
9
  maxheight?: number;
10
10
  placeholder?: string;
11
- autocomplete?: boolean;
11
+ filterable?: boolean;
12
12
  disabled?: boolean;
13
+ error?: boolean;
13
14
  multiselect?: boolean;
14
15
  }
15
16
  declare global {
16
17
  namespace JSX {
17
18
  interface IntrinsicElements {
18
- 'goa-dropdown': DropdownProps & React.HTMLAttributes<HTMLElement>;
19
+ 'goa-dropdown': WCProps & React.HTMLAttributes<HTMLElement>;
19
20
  }
20
21
  }
21
22
  }
22
23
  interface Props {
23
24
  name: string;
24
- selectedValues: string[];
25
+ values: string[];
25
26
  onChange: (name: string, values: string[]) => void;
26
27
  disabled?: boolean;
27
- autoComplete?: boolean;
28
+ filterable?: boolean;
28
29
  leadingIcon?: GoAIconType;
29
30
  maxHeight?: number;
30
- multiSelect?: boolean;
31
+ error?: boolean;
32
+ multiselect?: boolean;
31
33
  placeholder?: string;
32
34
  testId?: string;
33
35
  }
package/lib/flex/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * as GoAFlexRow from './row';
1
+ export { GoAFlexRow } from './row';
package/lib/flex/row.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { FC } from "react";
2
- import './row.scss';
3
2
  interface Props {
4
3
  gap?: 'small' | 'medium' | 'large';
5
4
  minWidth?: number | string;
package/lib/form/form-item.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { FC } from 'react';
2
2
  interface WCProps {
3
- name: string;
4
3
  label: string;
5
4
  optional?: boolean;
6
5
  error?: string;
@@ -14,7 +13,6 @@ declare global {
14
13
  }
15
14
  }
16
15
  interface GoAFormItemProps {
17
- name: string;
18
16
  label: string;
19
17
  optional?: boolean;
20
18
  error?: string;
package/lib/form/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * as GoAFormItem from './form-item';
1
+ export { GoAFormItem } from './form-item';
package/lib/input/input.d.ts CHANGED
@@ -13,7 +13,9 @@ interface WCProps {
13
13
  disabled?: boolean;
14
14
  error?: string;
15
15
  readonly?: boolean;
16
+ focused?: boolean;
16
17
  handletrailingiconclick: boolean;
18
+ testid?: string;
17
19
  }
18
20
  declare global {
19
21
  namespace JSX {
@@ -22,7 +24,7 @@ declare global {
22
24
  }
23
25
  }
24
26
  }
25
- interface Props {
27
+ export interface Props {
26
28
  name: string;
27
29
  value: string;
28
30
  onChange: (name: string, value: string) => void;
@@ -36,6 +38,7 @@ interface Props {
36
38
  focused?: boolean;
37
39
  readonly?: boolean;
38
40
  error?: string;
41
+ testId?: string;
39
42
  }
40
43
  export declare const GoAInput: FC<Props & {
41
44
  type: string;
package/lib/{service-level-header/service-level-header.d.ts → microsite-header/microsite-header.d.ts} RENAMED
@@ -2,16 +2,20 @@ import React, { FC } from 'react';
2
2
  declare global {
3
3
  namespace JSX {
4
4
  interface IntrinsicElements {
5
- 'goa-service-level-header': WebComponentProps & React.HTMLAttributes<HTMLElement>;
5
+ 'goa-microsite-header': WebComponentProps & React.HTMLAttributes<HTMLElement>;
6
6
  }
7
7
  }
8
8
  }
9
9
  export declare type ServiceLevel = 'alpha' | 'beta' | 'live';
10
10
  interface WebComponentProps {
11
11
  level: ServiceLevel;
12
+ version?: string;
13
+ feedbackurl?: string;
12
14
  }
13
15
  export interface HeaderProps {
14
16
  level: ServiceLevel;
17
+ version?: string;
18
+ feedbackUrl?: string;
15
19
  }
16
- export declare const GoAServiceLevelHeader: FC<HeaderProps>;
17
- export default GoAServiceLevelHeader;
20
+ export declare const GoAMicrositeHeader: FC<HeaderProps>;
21
+ export default GoAMicrositeHeader;
package/lib/modal/modal.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React, { FC } from 'react';
2
2
  interface WCProps {
3
3
  ref: React.RefObject<HTMLElement>;
4
- title: string;
5
- closable: boolean;
6
- scrollable: boolean;
4
+ title?: string;
7
5
  open?: boolean;
6
+ width?: string;
7
+ closable?: boolean;
8
+ scrollable?: boolean;
8
9
  }
9
10
  declare global {
10
11
  namespace JSX {
@@ -14,10 +15,11 @@ declare global {
14
15
  }
15
16
  }
16
17
  interface Props {
17
- title: string;
18
- closable: boolean;
19
- open?: boolean;
18
+ title?: string;
19
+ width?: string;
20
+ actions?: React.ReactElement;
20
21
  onClose?: () => void;
22
+ open?: boolean;
21
23
  }
22
24
  export declare const GoAModal: FC<Props>;
23
25
  export default GoAModal;
package/lib/page-block/page-block.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React, { FC } from 'react';
2
+ declare global {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'goa-page-block': React.HTMLAttributes<HTMLElement>;
6
+ }
7
+ }
8
+ }
9
+ export declare const GoAPageBlock: FC;
package/lib/radio-group/radio-group.d.ts CHANGED
@@ -5,6 +5,8 @@ interface RadioGroupProps {
5
5
  name: string;
6
6
  value?: string;
7
7
  orientation: string;
8
+ disabled: boolean;
9
+ error: boolean;
8
10
  }
9
11
  declare global {
10
12
  namespace JSX {
@@ -19,6 +21,7 @@ interface Props {
19
21
  disabled?: boolean;
20
22
  orientation?: 'horizontal' | 'vertical';
21
23
  testId?: string;
24
+ error?: boolean;
22
25
  onChange: (name: string, value: string) => void;
23
26
  }
24
27
  export declare const GoARadioGroup: FC<Props>;
package/lib/radio-group/radio.d.ts CHANGED
@@ -23,5 +23,5 @@ interface Props {
23
23
  error?: boolean;
24
24
  testId?: string;
25
25
  }
26
- export declare const GoARadio: FC<Props>;
27
- export default GoARadio;
26
+ export declare const GoARadioItem: FC<Props>;
27
+ export default GoARadioItem;
package/lib/skeleton/skeleton.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare type SkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile";
2
+ export declare type SkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile";
3
3
  interface WCProps {
4
4
  size: number;
5
5
  type: SkeletonType;
package/lib/spinner/spinner.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
- declare type SpinnerType = "infinite" | "progress";
3
- declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
2
+ export declare type SpinnerType = "infinite" | "progress";
3
+ export declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
4
4
  interface WCProps {
5
5
  size: SpinnerSize;
6
6
  type: SpinnerType;
7
- invert: boolean;
8
- progress: number;
7
+ invert?: boolean;
8
+ progress?: number;
9
+ testid?: string;
9
10
  }
10
11
  declare global {
11
12
  namespace JSX {
@@ -16,9 +17,10 @@ declare global {
16
17
  }
17
18
  export interface SpinnerProps {
18
19
  type: SpinnerType;
19
- size?: SpinnerSize;
20
- invert: boolean;
21
- progress: number;
20
+ size: SpinnerSize;
21
+ invert?: boolean;
22
+ progress?: number;
23
+ testId?: string;
22
24
  }
23
- export declare const GoASpinner: ({ type, size, progress, invert }: SpinnerProps) => JSX.Element;
25
+ export declare const GoASpinner: ({ type, size, progress, invert, testId }: SpinnerProps) => JSX.Element;
24
26
  export default GoASpinner;
package/lib/textarea/textarea.d.ts CHANGED
@@ -4,7 +4,8 @@ interface WCProps {
4
4
  name: string;
5
5
  value: string;
6
6
  placeholder?: string;
7
- rows: number;
7
+ rows?: number;
8
+ error: boolean;
8
9
  disabled: boolean;
9
10
  }
10
11
  declare global {
@@ -19,8 +20,10 @@ interface Props {
19
20
  value: string;
20
21
  id?: string;
21
22
  placeholder?: string;
22
- rows: number;
23
+ rows?: number;
24
+ error: boolean;
23
25
  disabled: boolean;
26
+ testId: string;
24
27
  onChange: (name: string, value: string) => void;
25
28
  }
26
29
  export declare const GoATextArea: FC<Props>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/react-components",
3
- "version": "3.4.0-alpha.5",
3
+ "version": "3.4.0-alpha.50",
4
4
  "description": "Government of Alberta - UI components for React",
5
5
  "bugs": {
6
6
  "url": "https://github.com/GovAlta/ui-components/issues"
@@ -17,7 +17,7 @@
17
17
  "directory": "libs/react-components"
18
18
  },
19
19
  "dependencies": {
20
- "@abgov/web-components": "^0.0.1"
20
+ "@abgov/web-components": "^1.0.0-alpha.23"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": "^17.0.2",