@abgov/react-components 3.4.0-alpha.5 → 3.4.0-alpha.9
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 +48 -6
- package/package.json +2 -2
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
|
-
|
|
5
|
+
Create react app
|
|
6
|
+
```bash
|
|
7
|
+
npm init vite@latest
|
|
8
|
+
```
|
|
6
9
|
|
|
10
|
+
Add Dependencies
|
|
7
11
|
```bash
|
|
8
|
-
npm
|
|
12
|
+
npm i
|
|
13
|
+
npm i @abgov/react-components@3.4.0-alpha.7
|
|
14
|
+
npm i @abgov/styles
|
|
9
15
|
```
|
|
10
16
|
|
|
11
|
-
|
|
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
|
-
|
|
39
|
+
```typescript
|
|
40
|
+
// App.tsx
|
|
41
|
+
import './App.css'
|
|
14
42
|
|
|
15
|
-
|
|
16
|
-
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abgov/react-components",
|
|
3
|
-
"version": "3.4.0-alpha.
|
|
3
|
+
"version": "3.4.0-alpha.9",
|
|
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.
|
|
20
|
+
"@abgov/web-components": "^1.0.0-alpha.4"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": "^17.0.2",
|