Enhancement/angular highcharts menu support for @folkehelseinstitutte…

…t/style v6 (#512)
folkehelseinstituttet · Mar 18, 2024 · f60e60e · f60e60e
1 parent 1e30582
commit f60e60e
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 6 deletions.
diff --git a/projects/fhi-angular-highcharts/CHANGELOG.md b/projects/fhi-angular-highcharts/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 > Mar 18, 2024
 
+* :boom: **Breaking** Support for `@folkehelseinstituttet/style` v.6
 * :tada: **Enhancement** Add new property `decimals` on `FhiDiagramOptions`; user can now specify max number of decimal places in diagram type table.
 * :tada: **Enhancement** Add info to user about diagram types that can't be rendered based on the current data
 

diff --git a/projects/fhi-angular-highcharts/README.md b/projects/fhi-angular-highcharts/README.md
@@ -23,6 +23,7 @@ _An opinionated wrapper to the official minimal [Highcharts wrapper for Angular]
 
 | FHI Angular Highcharts | FHI Angular Componets | FHI Style | Bootstrap | NgBootstrap | Highcharts | Highcharts Angular | Angular | Node/NPM |
 | ---------------------- | --------------------- | --------- | --------- | ----------- | ---------- | ------------------ | ------- | -------- |
+| Unreleased             | 4.0.0                 | 6.0.0     | 5.3.2     | 16          | 11.1.0     | 4.0.0              | 17      | 18/10 *  |
 | 2.x.x                  | 3.1.0                 | 5.9       | 5.3.2     | 16          | 11.1.0     | 4.0.0              | 17      | 18/10 *  |
 | 1.x.x                  | -                     | 5         | 5         | 15          | 11.1.0     | 4.0.0              | 16      | 18/9 *   |
 | 0.7.0                  | -                     | 5         | 5         | 14          | 11.1.0     | 3.1.2              | 15      | 18/9 *   |

diff --git a/projects/fhi-angular-highcharts/package.json b/projects/fhi-angular-highcharts/package.json
@@ -12,7 +12,7 @@
   "peerDependencies": {
     "@angular/common": "^17.0.0",
     "@angular/core": "^17.0.0",
-    "@folkehelseinstituttet/style": "^5.9.0",
+    "@folkehelseinstituttet/style": "^6.0.0",
     "@folkehelseinstituttet/angular-components": "^3.1.0",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "bootstrap": "^5.3.2",

diff --git a/.../fhi-angular-highcharts/src/lib/fhi-diagram-type-navs/fhi-diagram-type-nav.component.html b/.../fhi-angular-highcharts/src/lib/fhi-diagram-type-navs/fhi-diagram-type-nav.component.html
@@ -1,5 +1,5 @@
 <div class="fhi-diagram-type-nav mb-3">
-  <div class="btn-group fhi-btn-group mb-1" role="group" aria-label="Velg tabell, kart eller graf">
+  <div class="btn-group fhi-btn-group mb-1 me-1" role="group" aria-label="Velg tabell, kart eller graf">
     <ng-container *ngFor="let group of navDiagramTypeGroups">
       <ng-container *ngIf="!group.excludeFromMenu">
         <input
@@ -22,7 +22,7 @@
   </div>
 
   <div
-    class="btn-group fhi-btn-group fhi-diagram-type-nav__chart-type mb-1"
+    class="btn-group fhi-btn-group fhi-diagram-type-nav__chart-type mb-1 shadow-none"
     role="group"
     aria-label="Velg graftype"
     *ngIf="chartSubmenuIsOpen && chartTypes.length > 1"

diff --git a/projects/fhi-angular-highcharts/src/styles/blocks/_fhi-diagram-type-nav.block.scss b/projects/fhi-angular-highcharts/src/styles/blocks/_fhi-diagram-type-nav.block.scss
@@ -6,14 +6,14 @@
     }
 
     [class*="icon"] {
-        transition: margin-top .1s;
+        transition: margin-top 0.1s;
     }
 
     .fhi-btn-group {
         &__check {
             &:checked + .btn {
                 [class*="icon-"] {
-                    filter: brightness(1000%);//sic
+                    filter: brightness(1000%); //sic
                 }
             }
         }
@@ -34,7 +34,10 @@
         .fhi-btn-group {
             &__check {
                 &:checked + .btn {
-                    background-color: transparent;
+                    &,
+                    &:hover {
+                        background-color: transparent;
+                    }
 
                     [class*="icon-"] {
                         filter: none;