@amsterdam/design-system-react 0.7.1 → 0.9.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 +13 -11
- package/dist/index.cjs.js +335 -122
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +324 -166
- package/dist/index.esm.js +327 -121
- package/dist/index.esm.js.map +1 -1
- package/package.json +23 -22
package/README.md
CHANGED
|
@@ -5,25 +5,27 @@
|
|
|
5
5
|
The `@amsterdam/design-system-react` package contains React implementations of various components.
|
|
6
6
|
You can use this package in React apps.
|
|
7
7
|
|
|
8
|
-
The design tokens and
|
|
9
|
-
|
|
10
|
-
<!-- TODO: make this easier? -->
|
|
8
|
+
The design tokens and CSS used in these components are published in separate npm packages,
|
|
9
|
+
which are automatically installed when you install the React package.
|
|
11
10
|
|
|
12
11
|
## Stability of the components
|
|
13
12
|
|
|
14
|
-
The React
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
The React Library has not yet reached a 1.0.0 version.
|
|
14
|
+
However, most of them are stable enough to be used in production.
|
|
15
|
+
Components that have known issues, or for which we anticipate API changes, show a ‘beta’ badge on their page.
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
Make sure you specify the exact version as dependency.
|
|
18
|
+
You can then schedule an upgrade to the latest version when you have time to test for regressions.
|
|
19
19
|
|
|
20
20
|
## Getting started
|
|
21
21
|
|
|
22
|
-
Install the
|
|
22
|
+
Install the React package:
|
|
23
|
+
|
|
24
|
+
`npm install @amsterdam/design-system-react`
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
This will automatically add separate packages containing our design tokens, assets, icons, and stylesheets.
|
|
25
27
|
|
|
26
|
-
Import the
|
|
28
|
+
Import the components and stylesheets you need, for example:
|
|
27
29
|
|
|
28
30
|
```javascript
|
|
29
31
|
import { Paragraph } from "@amsterdam/design-system-react";
|
|
@@ -43,7 +45,7 @@ export default App;
|
|
|
43
45
|
|
|
44
46
|
For applications, the large text and ample white space of the theme can be counterproductive.
|
|
45
47
|
That’s why there is a compact mode.
|
|
46
|
-
To use the compact mode, import the compact
|
|
48
|
+
To use the compact mode, import the compact CSS **after** the theme CSS, like so:
|
|
47
49
|
|
|
48
50
|
```javascript
|
|
49
51
|
import "@amsterdam/design-system-tokens/dist/index.css";
|