@sb1/ffe-chart-donut-react 100.8.2 → 100.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.
Files changed (2) hide show
  1. package/README.md +43 -22
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,49 +1,70 @@
1
1
  # @sb1/ffe-chart-donut-react
2
2
 
3
- ## Install
3
+ ## Beskrivelse
4
+
5
+ Ringdiagram som viser prosentvis fordeling mellom to verdier. Viser alltid to segmenter: `percentage` (hoyre) og `100 - percentage` (venstre).
6
+
7
+ ## Installasjon
4
8
 
5
9
  ```bash
6
10
  npm install --save @sb1/ffe-chart-donut-react
7
11
  ```
8
12
 
9
- ## Usage
13
+ ## Bruk
10
14
 
11
- Full documentation on chart donut usage is available at https://design.sparebank1.no/komponenter/diagram/.
15
+ Full dokumentasjon: https://sparebank1.github.io/designsystem/
12
16
 
13
- ### Styling import
17
+ ### Importere styling
14
18
 
15
19
  ```css
16
- @import 'path/to/node_modules/@sb1/ffe-chart-donut-react/less/ffe-chart-donut';
20
+ @import '@sb1/ffe-chart-donut-react/less/ffe-chart-donut';
17
21
  ```
18
22
 
19
- ### Importing compiled CSS
20
-
21
- If your project does not use Less, you can import the compiled styling:
23
+ Eller kompilert CSS:
22
24
 
23
25
  ```css
24
- @import '~@sb1/ffe-chart-donut-react/css/ffe-chart-donut.css';
26
+ @import '@sb1/ffe-chart-donut-react/css/ffe-chart-donut.css';
25
27
  ```
26
28
 
27
- ## Theming with CSS custom properties
29
+ ## Eksempler
28
30
 
29
- In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.
31
+ ### Grunnleggende bruk med to etiketter
30
32
 
31
- If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:
33
+ ```tsx
34
+ import { ChartDonut } from '@sb1/ffe-chart-donut-react';
32
35
 
33
- ```css
34
- @import '~@sb1/ffe-core/less/theme';
36
+ <ChartDonut
37
+ name="Avstemning"
38
+ percentage={42}
39
+ firstLabel="Sa nei"
40
+ lastLabel="Sa ja"
41
+ />;
35
42
  ```
36
43
 
37
- ## Development
44
+ ### Bruk med egendefinert label
38
45
 
39
- To start a local development server, run the following from the designsystem root folder:
46
+ ```tsx
47
+ import { ChartDonut } from '@sb1/ffe-chart-donut-react';
40
48
 
41
- ```bash
42
- npm install
43
- npm run build
44
- npm start
49
+ <ChartDonut
50
+ name="Prosjektstatus"
51
+ percentage={75}
52
+ label={<span>75% fullfort</span>}
53
+ />;
45
54
  ```
46
55
 
47
- A local instance of `Storybook` with live reloading will run at http://localhost:6006/.
56
+ ## Theming med CSS custom properties
57
+
58
+ Krever base-tema fra `ffe-core`:
59
+
60
+ ```css
61
+ @import '@sb1/ffe-core/less/theme';
62
+ ```
63
+
64
+ ## Utvikling
65
+
66
+ ```bash
67
+ npm install && npm run build && npm start
68
+ ```
48
69
 
49
- Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
70
+ Storybook kjorer pa http://localhost:6006/.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-chart-donut-react",
3
- "version": "100.8.2",
3
+ "version": "100.9.0",
4
4
  "description": "Donut chart in SVG",
5
5
  "keywords": [
6
6
  "ffe"
@@ -28,10 +28,10 @@
28
28
  "test:watch": "ffe-buildtool jest --watch"
29
29
  },
30
30
  "dependencies": {
31
- "@sb1/ffe-core": "^100.8.2"
31
+ "@sb1/ffe-core": "^100.9.0"
32
32
  },
33
33
  "devDependencies": {
34
- "@sb1/ffe-buildtool": "^100.8.2",
34
+ "@sb1/ffe-buildtool": "^100.9.0",
35
35
  "react": "^18.2.0",
36
36
  "react-dom": "^18.2.0"
37
37
  },
@@ -41,5 +41,5 @@
41
41
  "publishConfig": {
42
42
  "access": "public"
43
43
  },
44
- "gitHead": "50fbbbdb2023a60add7158e8c5bd6443c4f9c95e"
44
+ "gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
45
45
  }