@amsterdam/design-system-react 0.9.0 → 0.11.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 +1 -36
- package/dist/index.cjs.js +722 -548
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +375 -190
- package/dist/index.esm.js +721 -548
- package/dist/index.esm.js.map +1 -1
- package/package.json +18 -18
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ The `@amsterdam/design-system-react` package contains React implementations of v
|
|
|
6
6
|
You can use this package in React apps.
|
|
7
7
|
|
|
8
8
|
The design tokens and CSS used in these components are published in separate npm packages,
|
|
9
|
-
|
|
9
|
+
so don’t forget to install and include `@amsterdam/design-system-tokens` and `@amsterdam/design-system-css` too.
|
|
10
10
|
|
|
11
11
|
## Stability of the components
|
|
12
12
|
|
|
@@ -16,38 +16,3 @@ Components that have known issues, or for which we anticipate API changes, show
|
|
|
16
16
|
|
|
17
17
|
Make sure you specify the exact version as dependency.
|
|
18
18
|
You can then schedule an upgrade to the latest version when you have time to test for regressions.
|
|
19
|
-
|
|
20
|
-
## Getting started
|
|
21
|
-
|
|
22
|
-
Install the React package:
|
|
23
|
-
|
|
24
|
-
`npm install @amsterdam/design-system-react`
|
|
25
|
-
|
|
26
|
-
This will automatically add separate packages containing our design tokens, assets, icons, and stylesheets.
|
|
27
|
-
|
|
28
|
-
Import the components and stylesheets you need, for example:
|
|
29
|
-
|
|
30
|
-
```javascript
|
|
31
|
-
import { Paragraph } from "@amsterdam/design-system-react";
|
|
32
|
-
|
|
33
|
-
import "@amsterdam/design-system-tokens/dist/index.css";
|
|
34
|
-
import "@amsterdam/design-system-assets/font/index.css";
|
|
35
|
-
import "@amsterdam/design-system-css/dist/index.css";
|
|
36
|
-
|
|
37
|
-
function App() {
|
|
38
|
-
return <Paragraph>Hello world</Paragraph>;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export default App;
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Compact mode
|
|
45
|
-
|
|
46
|
-
For applications, the large text and ample white space of the theme can be counterproductive.
|
|
47
|
-
That’s why there is a compact mode.
|
|
48
|
-
To use the compact mode, import the compact CSS **after** the theme CSS, like so:
|
|
49
|
-
|
|
50
|
-
```javascript
|
|
51
|
-
import "@amsterdam/design-system-tokens/dist/index.css";
|
|
52
|
-
import "@amsterdam/design-system-tokens/dist/compact.css";
|
|
53
|
-
```
|