@sb1/ffe-chart-donut-react 100.8.3 → 100.9.0

package/README.md

@@ -1,49 +1,70 @@
 # @sb1/ffe-chart-donut-react
 
-## Install
+## Beskrivelse
+
+Ringdiagram som viser prosentvis fordeling mellom to verdier. Viser alltid to segmenter: `percentage` (hoyre) og `100 - percentage` (venstre).
+
+## Installasjon
 
 ```bash
 npm install --save @sb1/ffe-chart-donut-react
 ```
 
-## Usage
+## Bruk
 
-Full documentation on chart donut usage is available at https://design.sparebank1.no/komponenter/diagram/.
+Full dokumentasjon: https://sparebank1.github.io/designsystem/
 
-### Styling import
+### Importere styling
 
 ```css
-@import 'path/to/node_modules/@sb1/ffe-chart-donut-react/less/ffe-chart-donut';
+@import '@sb1/ffe-chart-donut-react/less/ffe-chart-donut';
 ```
 
-### Importing compiled CSS
-
-If your project does not use Less, you can import the compiled styling:
+Eller kompilert CSS:
 
 ```css
-@import '~@sb1/ffe-chart-donut-react/css/ffe-chart-donut.css';
+@import '@sb1/ffe-chart-donut-react/css/ffe-chart-donut.css';
 ```
 
-## Theming with CSS custom properties
+## Eksempler
 
-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`.
+### Grunnleggende bruk med to etiketter
 
-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`:
+```tsx
+import { ChartDonut } from '@sb1/ffe-chart-donut-react';
 
-```css
-@import '~@sb1/ffe-core/less/theme';
+<ChartDonut
+    name="Avstemning"
+    percentage={42}
+    firstLabel="Sa nei"
+    lastLabel="Sa ja"
+/>;
 ```
 
-## Development
+### Bruk med egendefinert label
 
-To start a local development server, run the following from the designsystem root folder:
+```tsx
+import { ChartDonut } from '@sb1/ffe-chart-donut-react';
 
-```bash
-npm install
-npm run build
-npm start
+<ChartDonut
+    name="Prosjektstatus"
+    percentage={75}
+    label={<span>75% fullfort</span>}
+/>;
 ```
 
-A local instance of `Storybook` with live reloading will run at http://localhost:6006/.
+## Theming med CSS custom properties
+
+Krever base-tema fra `ffe-core`:
+
+```css
+@import '@sb1/ffe-core/less/theme';
+```
+
+## Utvikling
+
+```bash
+npm install && npm run build && npm start
+```
 
-Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
+Storybook kjorer pa http://localhost:6006/.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-chart-donut-react",
-    "version": "100.8.3",
+    "version": "100.9.0",
     "description": "Donut chart in SVG",
     "keywords": [
         "ffe"
@@ -28,10 +28,10 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-core": "^100.8.3"
+        "@sb1/ffe-core": "^100.9.0"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^100.8.3",
+        "@sb1/ffe-buildtool": "^100.9.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
@@ -41,5 +41,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f33cf64a467cb430540d1320e763a4f223a8012c"
+    "gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
 }