@sb1/ffe-chart-donut-react 3.1.0 → 5.0.2

package/README.md

@@ -9,8 +9,5 @@ npm install --save @sb1/ffe-chart-donut-react
 ## Usage
 
 ```css
-@import 'path/to/node_modules/@sb1/ffe-chart-donut-react/lib/ffe-chart-donut';
+@import 'path/to/node_modules/@sb1/ffe-chart-donut-react/less/ffe-chart-donut';
 ```
-
-Run Styleguidist from the repository root to see live examples and documentation,
-or see the markdown files next to the component code in `src/`.

package/es/ChartDonut.js

@@ -30,7 +30,7 @@ function ChartDonut(_ref) {
       transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)")
     }
   }, percentage < 95.7 && /*#__PURE__*/React.createElement("circle", {
-    className: "ffe-chart-donut--cobalt",
+    className: "ffe-chart-donut--vann",
     fill: "none",
     strokeWidth: "15",
     strokeLinecap: "round",
@@ -48,7 +48,7 @@ function ChartDonut(_ref) {
       transform: "rotate(".concat(percentage ? -85 : -90, "deg)")
     }
   }, percentage > 3.2 && /*#__PURE__*/React.createElement("circle", {
-    className: "ffe-chart-donut--sky",
+    className: "ffe-chart-donut--frost",
     fill: "none",
     strokeWidth: "15",
     strokeLinecap: "round",
@@ -66,13 +66,13 @@ function ChartDonut(_ref) {
   }, name), firstLabel && lastLabel && /*#__PURE__*/React.createElement("div", {
     className: "ffe-chart-donut__fractions"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--cobalt"
+    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann"
   }, /*#__PURE__*/React.createElement("div", {
     className: "ffe-chart-donut__amount ffe-strong-text"
   }, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/React.createElement("div", {
     className: "ffe-chart-donut__type ffe-micro-text"
   }, firstLabel)), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--sky"
+    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost"
   }, /*#__PURE__*/React.createElement("div", {
     className: "ffe-chart-donut__amount ffe-strong-text"
   }, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/React.createElement("div", {

package/{lib → less}/ffe-chart-donut.less

@@ -4,12 +4,12 @@
     text-align: left;
     width: 200px;
 
-    &--cobalt {
-        stroke: @ffe-blue-cobalt;
+    &--vann {
+        stroke: @ffe-farge-vann;
     }
 
-    &--sky {
-        stroke: @ffe-blue-sky;
+    &--frost {
+        stroke: @ffe-farge-frost-70;
     }
 
     &__circle {
@@ -36,8 +36,14 @@
     }
 
     &__name {
-        color: @ffe-grey-charcoal;
+        color: @ffe-farge-koksgraa;
         text-align: center;
+
+        .native & {
+            @media (prefers-color-scheme: dark) {
+                color: @ffe-farge-graa;
+            }
+        }
     }
 
     &__fractions {
@@ -47,8 +53,14 @@
 
     &__fraction {
         > .ffe-chart-donut__amount {
-            color: @ffe-grey-charcoal;
+            color: @ffe-farge-koksgraa;
             text-align: center;
+
+            .native & {
+                @media (prefers-color-scheme: dark) {
+                    color: @ffe-farge-graa;
+                }
+            }
         }
 
         &:last-child {
@@ -57,7 +69,7 @@
             }
 
             > .ffe-chart-donut__amount {
-                border-left: 1px solid @ffe-grey;
+                border-left: 1px solid @ffe-farge-graa;
                 padding-left: 20px;
             }
         }

package/lib/ChartDonut.js

@@ -41,7 +41,7 @@ function ChartDonut(_ref) {
       transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)")
     }
   }, percentage < 95.7 && /*#__PURE__*/_react.default.createElement("circle", {
-    className: "ffe-chart-donut--cobalt",
+    className: "ffe-chart-donut--vann",
     fill: "none",
     strokeWidth: "15",
     strokeLinecap: "round",
@@ -59,7 +59,7 @@ function ChartDonut(_ref) {
       transform: "rotate(".concat(percentage ? -85 : -90, "deg)")
     }
   }, percentage > 3.2 && /*#__PURE__*/_react.default.createElement("circle", {
-    className: "ffe-chart-donut--sky",
+    className: "ffe-chart-donut--frost",
     fill: "none",
     strokeWidth: "15",
     strokeLinecap: "round",
@@ -77,13 +77,13 @@ function ChartDonut(_ref) {
   }, name), firstLabel && lastLabel && /*#__PURE__*/_react.default.createElement("div", {
     className: "ffe-chart-donut__fractions"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--cobalt"
+    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "ffe-chart-donut__amount ffe-strong-text"
   }, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/_react.default.createElement("div", {
     className: "ffe-chart-donut__type ffe-micro-text"
   }, firstLabel)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--sky"
+    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "ffe-chart-donut__amount ffe-strong-text"
   }, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/_react.default.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/ffe-chart-donut-react",
-  "version": "3.1.0",
+  "version": "5.0.2",
   "description": "Donut chart in SVG",
   "keywords": [
     "ffe"
@@ -20,11 +20,9 @@
     "url": "ssh://git@github.com:SpareBank1/designsystem.git"
   },
   "scripts": {
-    "build": "npm run build:cjs && npm run build:es && npm run build:less",
-    "build:cjs": "babel -d lib/. --root-mode=upward  --env-name=cjs --ignore=*.spec.js src/.",
-    "build:es": "babel -d es/. --root-mode=upward --env-name=es --ignore=*.spec.js src/.",
-    "build:less": "copyfiles -f src/ffe-chart-donut.less lib/",
-    "lint": "eslint src/.",
+    "build": "ffe-buildtool babel",
+    "watch": "ffe-buildtool babel-watch",
+    "lint": "eslint src",
     "test": "jest",
     "test:watch": "jest --watch"
   },
@@ -32,10 +30,10 @@
     "setupTestFrameworkScriptFile": "../../test-setup.js"
   },
   "dependencies": {
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "copyfiles": "^2.1.0",
+    "@sb1/ffe-buildtool": "^0.3.0",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "jest": "^26.0.0",
@@ -48,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1e712d5ac86ce5fe81f1f7742872e5f38891d039"
+  "gitHead": "1960685a8b6055efc0653aa1643138cf4a7054fc"
 }

package/es/ChartDonut.spec.js

@@ -1,37 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import ChartDonut from '../src';
-var defaultProps = {
-  firstLabel: 'Foo',
-  lastLabel: 'Bar',
-  name: 'Baz',
-  percentage: 42
-};
-
-var renderShallow = function renderShallow() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return shallow( /*#__PURE__*/React.createElement(ChartDonut, _extends({}, defaultProps, props)));
-};
-
-describe('ChartDonut', function () {
-  it('renders two SVGs', function () {
-    var el = renderShallow();
-    expect(el.find('svg')).toHaveLength(2);
-  });
-  it('renders html for the name of the circle', function () {
-    var el = renderShallow();
-    expect(el.find('.ffe-chart-donut__name')).toHaveLength(1);
-    expect(el.find('.ffe-chart-donut__name').text()).toBe('Baz');
-  });
-  it('renders html for the labels and their percentages', function () {
-    var el = renderShallow();
-    expect(el.find('.ffe-chart-donut__type')).toHaveLength(2);
-    expect(el.find('.ffe-chart-donut__amount')).toHaveLength(2);
-    expect(el.find('.ffe-chart-donut__type').at(0).text()).toBe('Foo');
-    expect(el.find('.ffe-chart-donut__amount').at(0).text()).toMatch(/58/);
-    expect(el.find('.ffe-chart-donut__type').at(1).text()).toBe('Bar');
-    expect(el.find('.ffe-chart-donut__amount').at(1).text()).toMatch(/42/);
-  });
-});

package/lib/ChartDonut.spec.js

@@ -1,44 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _enzyme = require("enzyme");
-
-var _src = _interopRequireDefault(require("../src"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var defaultProps = {
-  firstLabel: 'Foo',
-  lastLabel: 'Bar',
-  name: 'Baz',
-  percentage: 42
-};
-
-var renderShallow = function renderShallow() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_src.default, _extends({}, defaultProps, props)));
-};
-
-describe('ChartDonut', function () {
-  it('renders two SVGs', function () {
-    var el = renderShallow();
-    expect(el.find('svg')).toHaveLength(2);
-  });
-  it('renders html for the name of the circle', function () {
-    var el = renderShallow();
-    expect(el.find('.ffe-chart-donut__name')).toHaveLength(1);
-    expect(el.find('.ffe-chart-donut__name').text()).toBe('Baz');
-  });
-  it('renders html for the labels and their percentages', function () {
-    var el = renderShallow();
-    expect(el.find('.ffe-chart-donut__type')).toHaveLength(2);
-    expect(el.find('.ffe-chart-donut__amount')).toHaveLength(2);
-    expect(el.find('.ffe-chart-donut__type').at(0).text()).toBe('Foo');
-    expect(el.find('.ffe-chart-donut__amount').at(0).text()).toMatch(/58/);
-    expect(el.find('.ffe-chart-donut__type').at(1).text()).toBe('Bar');
-    expect(el.find('.ffe-chart-donut__amount').at(1).text()).toMatch(/42/);
-  });
-});