@abgov/react-components 4.0.0-alpha.24 → 4.0.0-alpha.25
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/package.json +1 -1
- package/react-components.esm.js +3 -1
- package/react-components.umd.js +3 -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/
|
|
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
|
```
|
package/package.json
CHANGED
package/react-components.esm.js
CHANGED
|
@@ -12025,7 +12025,9 @@ function create_fragment$7(ctx) {
|
|
|
12025
12025
|
return {
|
|
12026
12026
|
c() {
|
|
12027
12027
|
div = element("div");
|
|
12028
|
-
div.innerHTML = `<slot></slot
|
|
12028
|
+
div.innerHTML = `<slot></slot>
|
|
12029
|
+
|
|
12030
|
+
<span tabindex="0"></span>`;
|
|
12029
12031
|
this.c = noop;
|
|
12030
12032
|
},
|
|
12031
12033
|
|
package/react-components.umd.js
CHANGED
|
@@ -12071,7 +12071,9 @@
|
|
|
12071
12071
|
return {
|
|
12072
12072
|
c() {
|
|
12073
12073
|
div = element("div");
|
|
12074
|
-
div.innerHTML = `<slot></slot
|
|
12074
|
+
div.innerHTML = `<slot></slot>
|
|
12075
|
+
|
|
12076
|
+
<span tabindex="0"></span>`;
|
|
12075
12077
|
this.c = noop;
|
|
12076
12078
|
},
|
|
12077
12079
|
|