@abgov/react-components 4.0.0-alpha.9 → 4.0.0
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.
- package/README.md +16 -44
- package/experimental/package.json +2 -1
- package/index.d.ts +34 -36
- package/lib/app-header/app-header.d.ts +7 -4
- package/lib/badge/badge.d.ts +6 -7
- package/lib/button/button.d.ts +9 -11
- package/lib/button-group/button-group.d.ts +4 -3
- package/lib/callout/callout.d.ts +6 -6
- package/lib/card/card-actions.d.ts +2 -2
- package/lib/card/card-content.d.ts +2 -2
- package/lib/card/card-group.d.ts +2 -2
- package/lib/card/card-image.d.ts +2 -2
- package/lib/card/card.d.ts +2 -2
- package/lib/card/index.d.ts +5 -5
- package/lib/checkbox/checkbox.d.ts +5 -4
- package/lib/chip/chip.d.ts +7 -4
- package/lib/circular-progress/circular-progress.d.ts +3 -6
- package/lib/container/container.d.ts +12 -9
- package/lib/divider/divider.d.ts +17 -0
- package/lib/dropdown/dropdown-option.d.ts +1 -1
- package/lib/dropdown/dropdown.d.ts +11 -7
- package/lib/flex-column/flex-column.d.ts +17 -0
- package/lib/{flex/row.d.ts → flex-row/flex-row.d.ts} +5 -4
- package/lib/footer/footer.d.ts +17 -0
- package/lib/footer-meta-section/footer-meta-section.d.ts +13 -0
- package/lib/footer-nav-section/footer-nav-section.d.ts +19 -0
- package/lib/form/form-item.d.ts +6 -4
- package/lib/form/index.d.ts +1 -1
- package/lib/hero-banner/hero-banner-actions.d.ts +5 -3
- package/lib/hero-banner/hero-banner.d.ts +5 -4
- package/lib/icons/icon-button.d.ts +8 -6
- package/lib/icons/icon.d.ts +8 -8
- package/lib/icons/index.d.ts +2 -2
- package/lib/input/input.d.ts +53 -37
- package/lib/microsite-header/microsite-header.d.ts +5 -5
- package/lib/modal/modal.d.ts +6 -4
- package/lib/notification/notification.d.ts +4 -4
- package/lib/one-column-layout/one-column-layout.d.ts +13 -0
- package/lib/page-block/page-block.d.ts +10 -3
- package/lib/radio-group/radio-group.d.ts +5 -4
- package/lib/radio-group/radio.d.ts +3 -2
- package/lib/skeleton/skeleton.d.ts +10 -5
- package/lib/spinner/spinner.d.ts +3 -3
- package/lib/textarea/textarea.d.ts +4 -2
- package/lib/two-column-layout/two-column-layout.d.ts +22 -0
- package/package.json +6 -6
- package/react-components.esm.js +14107 -166
- package/react-components.umd.js +14909 -921
- package/lib/app-footer/app-footer.d.ts +0 -26
- package/lib/app-footer/meta-link.d.ts +0 -20
- package/lib/app-footer/navigation-link.d.ts +0 -22
- package/lib/flex/index.d.ts +0 -1
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/
|
|
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
|
-
|
|
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
|
|
30
|
+
@import "@abgov/styles/styles.esm.css";
|
|
59
31
|
```
|
package/index.d.ts
CHANGED
|
@@ -1,36 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
export
|
|
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/icons";
|
|
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/button-group/button-group";
|
|
7
|
+
export * from "./lib/button/button";
|
|
8
|
+
export * from "./lib/callout/callout";
|
|
9
|
+
export * from "./lib/checkbox/checkbox";
|
|
10
|
+
export * from "./lib/chip/chip";
|
|
11
|
+
export * from "./lib/circular-progress/circular-progress";
|
|
12
|
+
export * from "./lib/container/container";
|
|
13
|
+
export * from "./lib/divider/divider";
|
|
14
|
+
export * from "./lib/dropdown/dropdown";
|
|
15
|
+
export * from "./lib/flex-column/flex-column";
|
|
16
|
+
export * from "./lib/flex-row/flex-row";
|
|
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/icons";
|
|
24
|
+
export * from "./lib/input/input";
|
|
25
|
+
export * from "./lib/microsite-header/microsite-header";
|
|
26
|
+
export * from "./lib/modal/modal";
|
|
27
|
+
export * from "./lib/notification/notification";
|
|
28
|
+
export * from "./lib/page-block/page-block";
|
|
29
|
+
export * from "./lib/one-column-layout/one-column-layout";
|
|
30
|
+
export * from "./lib/radio-group/radio-group";
|
|
31
|
+
export * from "./lib/skeleton/skeleton";
|
|
32
|
+
export * from "./lib/spinner/spinner";
|
|
33
|
+
export * from "./lib/textarea/textarea";
|
|
34
|
+
export * from "./lib/two-column-layout/two-column-layout";
|
|
@@ -1,18 +1,21 @@
|
|
|
1
|
-
import React, { FC } from
|
|
1
|
+
import React, { FC } from "react";
|
|
2
2
|
interface WCProps {
|
|
3
|
-
|
|
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
|
-
|
|
10
|
+
"goa-app-header": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
10
11
|
}
|
|
11
12
|
}
|
|
12
13
|
}
|
|
13
14
|
interface Props {
|
|
14
|
-
|
|
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,27 @@
|
|
|
1
|
-
import React, { FC } from
|
|
2
|
-
|
|
3
|
-
export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
|
|
1
|
+
import React, { FC } from "react";
|
|
2
|
+
export declare type GoABadgeType = "information" | "success" | "important" | "emergency" | "dark" | "midtone" | "light";
|
|
4
3
|
interface GoABadgeProps {
|
|
5
4
|
type: GoABadgeType;
|
|
6
|
-
icon?:
|
|
5
|
+
icon?: boolean;
|
|
7
6
|
content?: string;
|
|
8
7
|
testId?: string;
|
|
9
8
|
}
|
|
10
9
|
interface WCProps {
|
|
11
10
|
type: GoABadgeType;
|
|
12
|
-
icon?:
|
|
11
|
+
icon?: boolean;
|
|
13
12
|
content?: string;
|
|
14
13
|
testid?: string;
|
|
15
14
|
}
|
|
16
15
|
declare global {
|
|
17
16
|
namespace JSX {
|
|
18
17
|
interface IntrinsicElements {
|
|
19
|
-
|
|
18
|
+
"goa-badge": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
20
19
|
}
|
|
21
20
|
}
|
|
22
21
|
}
|
|
23
22
|
export declare const GoABadge: FC<GoABadgeProps>;
|
|
24
23
|
export declare const GoAInfoBadge: FC<GoABadgeProps>;
|
|
25
24
|
export declare const GoASuccessBadge: FC<GoABadgeProps>;
|
|
26
|
-
export declare const
|
|
25
|
+
export declare const GoAImportantBadge: FC<GoABadgeProps>;
|
|
27
26
|
export declare const GoAEmergencyBadge: FC<GoABadgeProps>;
|
|
28
27
|
export {};
|
package/lib/button/button.d.ts
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import React, { FC, ReactNode } from
|
|
2
|
-
import
|
|
3
|
-
import { GoAIconType } from
|
|
4
|
-
export declare type ButtonType =
|
|
5
|
-
export declare type ButtonSize =
|
|
6
|
-
export declare type ButtonVariant =
|
|
1
|
+
import React, { FC, ReactNode } from "react";
|
|
2
|
+
import "./button.css";
|
|
3
|
+
import { GoAIconType } from "../icons";
|
|
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
7
|
interface WCProps {
|
|
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
|
-
|
|
19
|
+
"goa-button": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
21
20
|
}
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
23
|
declare type ButtonProps = {
|
|
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
|
|
33
|
-
children
|
|
30
|
+
onClick?: () => void;
|
|
31
|
+
children?: ReactNode;
|
|
34
32
|
};
|
|
35
33
|
export declare const GoAButton: FC<ButtonProps>;
|
|
36
34
|
export default GoAButton;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { FC } from
|
|
2
|
-
import
|
|
1
|
+
import React, { FC } from "react";
|
|
2
|
+
import "./button-group.css";
|
|
3
3
|
declare type Alignment = "start" | "end";
|
|
4
4
|
interface WCProps {
|
|
5
5
|
alignment?: Alignment;
|
|
@@ -7,12 +7,13 @@ interface WCProps {
|
|
|
7
7
|
declare global {
|
|
8
8
|
namespace JSX {
|
|
9
9
|
interface IntrinsicElements {
|
|
10
|
-
|
|
10
|
+
"goa-button-group": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
declare type ButtonGroupProps = {
|
|
15
15
|
alignment: Alignment;
|
|
16
|
+
children?: React.ReactNode;
|
|
16
17
|
};
|
|
17
18
|
export declare const GoAButtonGroup: FC<ButtonGroupProps>;
|
|
18
19
|
export default GoAButtonGroup;
|
package/lib/callout/callout.d.ts
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
declare type CalloutType = "important" |
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare type CalloutType = "important" | "information" | "event" | "success" | "emergency";
|
|
3
3
|
interface WCProps {
|
|
4
|
-
|
|
4
|
+
heading?: string;
|
|
5
5
|
type?: CalloutType;
|
|
6
6
|
}
|
|
7
7
|
declare global {
|
|
8
8
|
namespace JSX {
|
|
9
9
|
interface IntrinsicElements {
|
|
10
|
-
|
|
10
|
+
"goa-callout": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
export interface CalloutProps {
|
|
15
|
-
|
|
15
|
+
heading?: string;
|
|
16
16
|
type?: CalloutType;
|
|
17
17
|
children?: React.ReactNode;
|
|
18
18
|
}
|
|
19
|
-
export declare const GoACallout: ({
|
|
19
|
+
export declare const GoACallout: ({ heading, type, children, }: CalloutProps) => JSX.Element;
|
|
20
20
|
export default GoACallout;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React, { FC } from
|
|
1
|
+
import React, { FC } from "react";
|
|
2
2
|
interface WCProps {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
}
|
|
5
5
|
declare global {
|
|
6
6
|
namespace JSX {
|
|
7
7
|
interface IntrinsicElements {
|
|
8
|
-
|
|
8
|
+
"goa-card-actions": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React, { FC } from
|
|
1
|
+
import React, { FC } from "react";
|
|
2
2
|
declare global {
|
|
3
3
|
namespace JSX {
|
|
4
4
|
interface IntrinsicElements {
|
|
5
|
-
|
|
5
|
+
"goa-card-content": React.HTMLAttributes<HTMLElement>;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
}
|
package/lib/card/card-group.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React, { FC } from
|
|
1
|
+
import React, { FC } from "react";
|
|
2
2
|
interface WCProps {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
}
|
|
5
5
|
declare global {
|
|
6
6
|
namespace JSX {
|
|
7
7
|
interface IntrinsicElements {
|
|
8
|
-
|
|
8
|
+
"goa-card-group": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
}
|
package/lib/card/card-image.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { FC } from
|
|
1
|
+
import React, { 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
|
-
|
|
9
|
+
"goa-card-image": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
}
|
package/lib/card/card.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { FC } from
|
|
1
|
+
import React, { FC } from "react";
|
|
2
2
|
interface WCProps {
|
|
3
3
|
elevation: number;
|
|
4
4
|
children: React.ReactNode;
|
|
@@ -6,7 +6,7 @@ interface WCProps {
|
|
|
6
6
|
declare global {
|
|
7
7
|
namespace JSX {
|
|
8
8
|
interface IntrinsicElements {
|
|
9
|
-
|
|
9
|
+
"goa-card": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
}
|
package/lib/card/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
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,8 +1,8 @@
|
|
|
1
|
-
import React, { FC } from
|
|
1
|
+
import React, { FC } from "react";
|
|
2
2
|
declare global {
|
|
3
3
|
namespace JSX {
|
|
4
4
|
interface IntrinsicElements {
|
|
5
|
-
|
|
5
|
+
"goa-checkbox": CheckboxProps & React.HTMLAttributes<HTMLElement>;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
}
|
|
@@ -10,7 +10,7 @@ interface CheckboxProps {
|
|
|
10
10
|
ref: React.RefObject<HTMLElement>;
|
|
11
11
|
id?: string;
|
|
12
12
|
name: string;
|
|
13
|
-
checked
|
|
13
|
+
checked: boolean;
|
|
14
14
|
disabled?: boolean;
|
|
15
15
|
error?: boolean;
|
|
16
16
|
text?: string;
|
|
@@ -19,11 +19,12 @@ interface CheckboxProps {
|
|
|
19
19
|
export interface Props {
|
|
20
20
|
id?: string;
|
|
21
21
|
name: string;
|
|
22
|
-
checked
|
|
22
|
+
checked: boolean;
|
|
23
23
|
disabled?: boolean;
|
|
24
24
|
error?: boolean;
|
|
25
25
|
text?: string;
|
|
26
26
|
value?: string | number | boolean;
|
|
27
|
+
children?: React.ReactNode;
|
|
27
28
|
testId?: string;
|
|
28
29
|
onChange?: (name: string, checked: boolean, value: string) => void;
|
|
29
30
|
}
|
package/lib/chip/chip.d.ts
CHANGED
|
@@ -1,24 +1,27 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare type ChipVariant = "filter";
|
|
2
3
|
interface WCProps {
|
|
3
4
|
ref: React.RefObject<HTMLElement>;
|
|
4
5
|
leadingicon: string;
|
|
5
6
|
error: boolean;
|
|
6
7
|
deletable: boolean;
|
|
7
8
|
content: string;
|
|
9
|
+
variant?: string;
|
|
8
10
|
}
|
|
9
11
|
declare global {
|
|
10
12
|
namespace JSX {
|
|
11
13
|
interface IntrinsicElements {
|
|
12
|
-
|
|
14
|
+
"goa-chip": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
13
15
|
}
|
|
14
16
|
}
|
|
15
17
|
}
|
|
16
|
-
|
|
18
|
+
interface Props {
|
|
17
19
|
onClick?: () => void;
|
|
18
20
|
deletable?: boolean;
|
|
19
21
|
leadingIcon?: string;
|
|
20
22
|
error?: boolean;
|
|
21
23
|
content: string;
|
|
24
|
+
variant?: ChipVariant;
|
|
22
25
|
}
|
|
23
|
-
export declare const GoAChip: ({ leadingIcon, deletable, error, content, onClick }: Props) => JSX.Element;
|
|
26
|
+
export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick, }: Props) => JSX.Element;
|
|
24
27
|
export default GoAChip;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import React from
|
|
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
|
-
|
|
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: ({
|
|
25
|
+
export declare const GoACircularProgress: ({ visible, message, progress, variant, size, }: CircularProgressProps) => JSX.Element;
|
|
29
26
|
export default GoACircularProgress;
|
|
@@ -1,23 +1,26 @@
|
|
|
1
|
-
import React, { FC, ReactNode } from
|
|
2
|
-
declare type
|
|
3
|
-
declare type
|
|
1
|
+
import React, { FC, ReactNode } from "react";
|
|
2
|
+
declare type ContainerType = "interactive" | "non-interactive" | "info" | "error" | "success" | "important";
|
|
3
|
+
declare type Accent = "thick" | "thin" | "filled";
|
|
4
|
+
declare type ContainerPadding = "relaxed" | "compact";
|
|
4
5
|
interface WCProps {
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
type?: ContainerType;
|
|
7
|
+
accent?: Accent;
|
|
8
|
+
padding?: ContainerPadding;
|
|
7
9
|
}
|
|
8
10
|
declare global {
|
|
9
11
|
namespace JSX {
|
|
10
12
|
interface IntrinsicElements {
|
|
11
|
-
|
|
13
|
+
"goa-container": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
12
14
|
}
|
|
13
15
|
}
|
|
14
16
|
}
|
|
15
17
|
interface Props {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
accent?: Accent;
|
|
19
|
+
type?: ContainerType;
|
|
18
20
|
title?: ReactNode;
|
|
21
|
+
padding?: ContainerPadding;
|
|
19
22
|
actions?: ReactNode;
|
|
20
|
-
children
|
|
23
|
+
children?: ReactNode;
|
|
21
24
|
}
|
|
22
25
|
export declare const GoAContainer: FC<Props>;
|
|
23
26
|
export default GoAContainer;
|
|
@@ -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;
|
|
@@ -2,7 +2,7 @@ import React, { FC } from "react";
|
|
|
2
2
|
declare global {
|
|
3
3
|
namespace JSX {
|
|
4
4
|
interface IntrinsicElements {
|
|
5
|
-
|
|
5
|
+
"goa-dropdown-item": DropdownOptionProps & React.HTMLAttributes<HTMLElement>;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
}
|
|
@@ -1,37 +1,41 @@
|
|
|
1
1
|
import React, { FC } from "react";
|
|
2
2
|
import { GoAIconType } from "../icons";
|
|
3
|
-
export * from
|
|
3
|
+
export * from "./dropdown-option";
|
|
4
4
|
interface WCProps {
|
|
5
5
|
ref: React.MutableRefObject<HTMLElement | null>;
|
|
6
6
|
name: string;
|
|
7
|
-
|
|
7
|
+
value: string;
|
|
8
8
|
leadingicon?: string;
|
|
9
|
-
maxheight?:
|
|
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 {
|
|
18
20
|
interface IntrinsicElements {
|
|
19
|
-
|
|
21
|
+
"goa-dropdown": WCProps & React.HTMLAttributes<HTMLElement>;
|
|
20
22
|
}
|
|
21
23
|
}
|
|
22
24
|
}
|
|
23
25
|
interface Props {
|
|
24
26
|
name: string;
|
|
25
|
-
|
|
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?:
|
|
32
|
+
maxHeight?: string;
|
|
31
33
|
error?: boolean;
|
|
32
34
|
multiselect?: boolean;
|
|
33
35
|
placeholder?: string;
|
|
34
36
|
testId?: string;
|
|
37
|
+
width?: string;
|
|
38
|
+
children?: React.ReactNode;
|
|
35
39
|
}
|
|
36
40
|
export declare const GoADropdown: FC<Props>;
|
|
37
41
|
export default GoADropdown;
|
|
@@ -0,0 +1,17 @@
|
|
|
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
|
+
interface Props {
|
|
13
|
+
gap?: "small" | "medium" | "large";
|
|
14
|
+
children?: React.ReactNode;
|
|
15
|
+
}
|
|
16
|
+
export declare const GoAFlexCol: FC<Props>;
|
|
17
|
+
export default GoAFlexCol;
|