@amsterdam/design-system-react 0.10.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 +0 -33
- package/dist/index.cjs.js +399 -348
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +128 -33
- package/dist/index.esm.js +399 -347
- package/dist/index.esm.js.map +1 -1
- package/package.json +15 -15
package/README.md
CHANGED
|
@@ -16,36 +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 packages you need, for instance:
|
|
23
|
-
|
|
24
|
-
`npm install @amsterdam/design-system-assets @amsterdam/design-system-tokens @amsterdam/design-system-css @amsterdam/design-system-react @amsterdam/design-system-react-icons`
|
|
25
|
-
|
|
26
|
-
Import the components and stylesheets you need, for example:
|
|
27
|
-
|
|
28
|
-
```javascript
|
|
29
|
-
import { Paragraph } from "@amsterdam/design-system-react";
|
|
30
|
-
|
|
31
|
-
import "@amsterdam/design-system-assets/font/index.css";
|
|
32
|
-
import "@amsterdam/design-system-css/dist/index.css";
|
|
33
|
-
import "@amsterdam/design-system-tokens/dist/index.css";
|
|
34
|
-
|
|
35
|
-
function App() {
|
|
36
|
-
return <Paragraph>Hello world</Paragraph>;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export default App;
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
## Compact mode
|
|
43
|
-
|
|
44
|
-
For applications, the large text and ample white space of the theme can be counterproductive.
|
|
45
|
-
That’s why there is a compact mode.
|
|
46
|
-
To use the compact mode, import the compact CSS **after** the theme CSS, like so:
|
|
47
|
-
|
|
48
|
-
```javascript
|
|
49
|
-
import "@amsterdam/design-system-tokens/dist/index.css";
|
|
50
|
-
import "@amsterdam/design-system-tokens/dist/compact.css";
|
|
51
|
-
```
|