@abgov/react-components 4.0.0-alpha.24 → 4.0.0-alpha.27
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 +9 -42
- package/lib/circular-progress/circular-progress.d.ts +3 -6
- package/package.json +1 -1
- package/react-components.esm.js +183 -238
- package/react-components.umd.js +184 -239
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/
|
|
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
|
|
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
|
```
|
|
@@ -1,11 +1,9 @@
|
|
|
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
|
-
size
|
|
6
|
+
size?: CircularProgressSize;
|
|
9
7
|
message?: string;
|
|
10
8
|
visible?: string;
|
|
11
9
|
progress?: number;
|
|
@@ -18,12 +16,11 @@ declare global {
|
|
|
18
16
|
}
|
|
19
17
|
}
|
|
20
18
|
export interface CircularProgressProps {
|
|
21
|
-
type?: CircularProgressType;
|
|
22
19
|
variant?: CircularProgressVariant;
|
|
23
|
-
size
|
|
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;
|
package/package.json
CHANGED