@ukic/canary-web-components 2.0.0-canary.1 → 2.0.0-canary.3
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +13 -23
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# The UK Intelligence Community Web Components UI Kit
|
|
1
|
+
# [Canary]: The UK Intelligence Community Web Components UI Kit
|
|
2
2
|
|
|
3
3
|
[](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
|
|
4
4
|
[](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
|
|
@@ -7,17 +7,6 @@ The [Intelligence Community Design System](https://design.sis.gov.uk) helps the
|
|
|
7
7
|
|
|
8
8
|
This is a joint project led by [MI6](https://www.sis.gov.uk), working with [GCHQ](https://www.gchq.gov.uk) and [MI5](https://www.mi5.gov.uk).
|
|
9
9
|
|
|
10
|
-
## Using the components
|
|
11
|
-
|
|
12
|
-
Web components can be used without the need for a framework. To use web components without a framework, follow the [web components instructions](#installing).
|
|
13
|
-
|
|
14
|
-
To use the components in a particular framework, follow the framework instructions.
|
|
15
|
-
|
|
16
|
-
- [Angular](https://design.sis.gov.uk/get-started/install-components/angular)
|
|
17
|
-
- [Vue](https://design.sis.gov.uk/get-started/install-components/vue)
|
|
18
|
-
- [Svelte](https://design.sis.gov.uk/get-started/install-components/svelte)
|
|
19
|
-
- [React](https://design.sis.gov.uk/get-started/install-components/react)
|
|
20
|
-
|
|
21
10
|
## Installing
|
|
22
11
|
|
|
23
12
|
To install the components:
|
|
@@ -28,11 +17,11 @@ In the root of your project:
|
|
|
28
17
|
|
|
29
18
|
```shell
|
|
30
19
|
// using npm
|
|
31
|
-
npm install @ukic/web-components @ukic/fonts
|
|
20
|
+
npm install @ukic/canary-web-components @ukic/fonts
|
|
32
21
|
|
|
33
22
|
// using yarn
|
|
34
23
|
rm package-lock.json
|
|
35
|
-
yarn add @ukic/web-components @ukic/fonts
|
|
24
|
+
yarn add @ukic/canary-web-components @ukic/fonts
|
|
36
25
|
```
|
|
37
26
|
|
|
38
27
|
### Step two
|
|
@@ -40,7 +29,7 @@ yarn add @ukic/web-components @ukic/fonts
|
|
|
40
29
|
Import `defineCustomElements` in your file. Where you do this will depend on your framework or build tool, but the format is as follows:
|
|
41
30
|
|
|
42
31
|
```jsx
|
|
43
|
-
import { defineCustomElements } from "@ukic/web-components/loader";
|
|
32
|
+
import { defineCustomElements } from "@ukic/canary-web-components/loader";
|
|
44
33
|
```
|
|
45
34
|
|
|
46
35
|
### Step three
|
|
@@ -58,7 +47,7 @@ defineCustomElements();
|
|
|
58
47
|
In your HTML, you can now declare a component as follows:
|
|
59
48
|
|
|
60
49
|
```jsx
|
|
61
|
-
<ic-
|
|
50
|
+
<ic-data-table ...></ic-data-table>
|
|
62
51
|
```
|
|
63
52
|
|
|
64
53
|
### Step five
|
|
@@ -69,7 +58,7 @@ Add the following into the top level CSS file for your project.
|
|
|
69
58
|
|
|
70
59
|
```css
|
|
71
60
|
@import "@ukic/fonts/dist/fonts.css";
|
|
72
|
-
@import "@ukic/web-components/dist/core/core.css";
|
|
61
|
+
@import "@ukic/canary-web-components/dist/core/core.css";
|
|
73
62
|
```
|
|
74
63
|
|
|
75
64
|
In order to be rendered consistently across browsers and in line with modern standards, each of the ICDS components uses styles from a global CSS file based on [Normalize.css](https://necolas.github.io/normalize.css/).
|
|
@@ -77,7 +66,7 @@ In order to be rendered consistently across browsers and in line with modern sta
|
|
|
77
66
|
If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the ICDS components, add the following into the top level CSS file as well.
|
|
78
67
|
|
|
79
68
|
```css
|
|
80
|
-
@import "@ukic/web-components/dist/core/normalize.css";
|
|
69
|
+
@import "@ukic/canary-web-components/dist/core/normalize.css";
|
|
81
70
|
```
|
|
82
71
|
|
|
83
72
|
## Webpack example
|
|
@@ -112,11 +101,11 @@ module.exports = {
|
|
|
112
101
|
|
|
113
102
|
```shell
|
|
114
103
|
// using npm
|
|
115
|
-
npm install @ukic/web-components @ukic/fonts
|
|
104
|
+
npm install @ukic/canary-web-components @ukic/fonts
|
|
116
105
|
|
|
117
106
|
// using yarn
|
|
118
107
|
rm package-lock.json
|
|
119
|
-
yarn add @ukic/web-components @ukic/fonts
|
|
108
|
+
yarn add @ukic/canary-web-components @ukic/fonts
|
|
120
109
|
|
|
121
110
|
```
|
|
122
111
|
|
|
@@ -127,9 +116,10 @@ In the file defined as the `entry` in the `webpack.config.js`, add the following
|
|
|
127
116
|
```jsx
|
|
128
117
|
//src/index.js
|
|
129
118
|
import "@ukic/fonts/dist/fonts.css";
|
|
130
|
-
import "@ukic/web-components/dist/core/core.css";
|
|
119
|
+
import "@ukic/canary-web-components/dist/core/core.css";
|
|
120
|
+
|
|
121
|
+
import { defineCustomElements } from "@ukic/canary-web-components/loader";
|
|
131
122
|
|
|
132
|
-
import { defineCustomElements } from "@ukic/web-components/loader";
|
|
133
123
|
defineCustomElements();
|
|
134
124
|
```
|
|
135
125
|
|
|
@@ -146,7 +136,7 @@ You can now use any of the ICDS components so long as your HTML page includes th
|
|
|
146
136
|
</head>
|
|
147
137
|
<body>
|
|
148
138
|
<script src="dist/main.js"></script>
|
|
149
|
-
<ic-
|
|
139
|
+
<ic-data-table ....></ic-data-table>
|
|
150
140
|
</body>
|
|
151
141
|
</html>
|
|
152
142
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukic/canary-web-components",
|
|
3
|
-
"version": "2.0.0-canary.
|
|
3
|
+
"version": "2.0.0-canary.3",
|
|
4
4
|
"description": "A web component UI library compiled with StencilJS",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
"webpack": "^5.76.0"
|
|
80
80
|
},
|
|
81
81
|
"license": "MIT",
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "7b5b2b9ab729be5ec1ebee35a87ab20cf4ac09ba"
|
|
83
83
|
}
|