@sb1/ffe-chart-donut-react 5.3.0 → 5.3.2

package/less/chart-donut.less

@@ -1,8 +1,11 @@
 .ffe-chart-donut {
-    height: 200px;
+    display: grid;
+    width: fit-content;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    place-items: center;
     position: relative;
     text-align: left;
-    width: 200px;
 
     &--first {
         stroke: var(--ffe-v-chart-donut-first-color);
@@ -12,27 +15,19 @@
         stroke: var(--ffe-v-chart-donut-last-color);
     }
 
-    &__circle {
-        height: 100%;
-        margin: 0 auto;
-        position: absolute;
-        width: 100%;
+    &__circle,
+    &__description {
+        grid-column: 1/1;
+        grid-row: 1/1;
+    }
 
-        @media (min-width: @breakpoint-md) {
-            margin: inherit;
-            width: 200px;
-        }
+    &__circle {
+        width: 12.5rem;
+        aspect-ratio: 1;
     }
 
     &__description {
-        left: calc(~'50% - 75px');
-        position: absolute;
-        top: 60px;
-        width: 150px;
-
-        @media (min-width: @breakpoint-md) {
-            left: 25px;
-        }
+        z-index: 1;
     }
 
     &__name {
@@ -41,31 +36,35 @@
     }
 
     &__fractions {
-        display: flex;
-        justify-content: space-around;
+        display: grid;
+        grid-template-columns: auto 1px auto;
+        grid-template-rows: auto auto;
+        grid-column-gap: var(--ffe-spacing-xs);
+        &:after {
+            grid-column: 2/3;
+            grid-row: 1/2;
+            display: flex;
+            background: var(--ffe-v-chart-donut-text-color);
+            height: 1lh;
+            content: '';
+        }
     }
 
     &__fraction {
-        > .ffe-chart-donut__amount {
-            color: var(--ffe-v-chart-donut-text-color);
-            text-align: center;
-        }
-
-        &:last-child {
-            > .ffe-chart-donut__type {
-                padding-left: 20px;
-            }
+        display: grid;
+        place-items: center;
+    }
 
-            > .ffe-chart-donut__amount {
-                border-left: 1px solid var(--ffe-farge-graa);
-                padding-left: 20px;
+    .ffe-chart-donut__amount {
+        color: var(--ffe-v-chart-donut-text-color);
+    }
 
-                .native & {
-                    @media (prefers-color-scheme: dark) {
-                        color: var(--ffe-v-chart-donut-text-color);
-                    }
-                }
-            }
-        }
+    &__fraction:first-of-type {
+        grid-column: 1/2;
+        grid-row: 1/3;
+    }
+    &__fraction:last-of-type {
+        grid-column: 3/4;
+        grid-row: 1/3;
     }
 }

package/lib/ChartDonut.js

@@ -97,5 +97,4 @@ ChartDonut.propTypes = {
   /** The percentage for the right-most value */
   percentage: _propTypes.number.isRequired
 };
-var _default = ChartDonut;
-exports.default = _default;
+var _default = exports.default = ChartDonut;

package/lib/index.js

@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _ChartDonut = _interopRequireDefault(require("./ChartDonut"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _ChartDonut.default;
-exports.default = _default;
+var _default = exports.default = _ChartDonut.default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-chart-donut-react",
-    "version": "5.3.0",
+    "version": "5.3.2",
     "description": "Donut chart in SVG",
     "keywords": [
         "ffe"
@@ -30,7 +30,7 @@
         "prop-types": "^15.7.2"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^0.5.0",
+        "@sb1/ffe-buildtool": "^0.5.1",
         "react": "^16.9.0",
         "react-dom": "^16.9.0"
     },
@@ -40,5 +40,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2717d62c2fe4125c7160d0253f4bcc56fde9e06e"
+    "gitHead": "5a97b2a67e41d2f06645cf8ece8ba15d5c4abc7c"
 }