Merge branch 'feature/uppdatera_exempel'

Vastra-Gotalandsregionen · Sep 2, 2024 · bf66578 · bf66578
2 parents aa5f8c5 + 29796f6
commit bf66578
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 102 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "rxjs": "^7.5.7",
     "smoothscroll-polyfill": "^0.4.3",
     "tslib": "^2.3.1",
-    "vgr-komponentkartan": "^11.0.2",
+    "vgr-komponentkartan": "^12.0.1",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {

diff --git a/src/app/expandable-div/expandable-div.component.html b/src/app/expandable-div/expandable-div.component.html
@@ -15,18 +15,45 @@
     </p>
   </div>
   <div class="docs__examples ">
-    <h2>HTML</h2>
-    <section vgrHighlightCode [innerHTML]="exampleCodeMarkup"></section>
-    <h2>Resultat</h2>
-    <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged($event)">
+    <div style="margin: 10px 0;">
+      <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged($event)">
       <vgr-expandable-div-header>
-        <p>Denna div är collapsed från början</p>
-      </vgr-expandable-div-header>
-      <vgr-expandable-div-content>
-        <p>Lite innehåll</p>
-        <p>Mer innehåll</p>
-      </vgr-expandable-div-content>
-    </vgr-expandable-div>
+        <p><strong>Expandable div med ett underliggande expandable div</strong></p>
+        </vgr-expandable-div-header>
+        <vgr-expandable-div-content>
+          <div style="margin-left: 10px;">
+            <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged($event)">
+              <vgr-expandable-div-header>
+                <p><strong>Expandable div nivå 2</strong></p>
+                </vgr-expandable-div-header>
+                <vgr-expandable-div-content>
+                  <p style="margin-left: 10px;">Kan innehålla både text, tabeller eller interaktiva element</p>
+                </vgr-expandable-div-content>
+              </vgr-expandable-div>
+          </div>
+        </vgr-expandable-div-content>
+      </vgr-expandable-div>
+
+      <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged1($event)">
+        <vgr-expandable-div-header>
+          <p>En annan expandable div</p>
+        </vgr-expandable-div-header>
+        <vgr-expandable-div-content>
+          <p style="margin-left: 10px;">Lite innehåll</p>
+        </vgr-expandable-div-content>
+      </vgr-expandable-div>
+
+      <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged2($event)">
+        <vgr-expandable-div-header>
+          <p>Ytterligare en expandable div</p>
+        </vgr-expandable-div-header>
+        <vgr-expandable-div-content>
+          <p style="margin-left: 10px;">Mer innehåll</p>
+        </vgr-expandable-div-content>
+      </vgr-expandable-div>
+    </div>
+      <h2>HTML</h2>
+      <section vgrHighlightCode [innerHTML]="exampleCodeMarkup"></section>
   </div>
   <div class="docs__api ">
     <!-- API -->
@@ -73,6 +100,11 @@ <h3>Templatestruktur</h3>
     </table>
   </div>
   <div class="docs__wcag ">
-    <i>Under utveckling</i>
+    <ol>
+      <li>rubrik läsas upp av skärmläsaren, sedan om den är expanded eller inte</li>
+      <li>Både enter och mellanslag triggar om den expanderas eller stängas</li>
+      <li>Om [expanded]="false" ska tabb flytta fokus till nästa synlig</li>
+      <li>Om [expanded]="true" ska tabb flytta fokus till nästa underliggande rad</li>
+    </ol>
   </div>
 </app-component-docs>
diff --git a/src/app/expandable-div/expandable-div.component.ts b/src/app/expandable-div/expandable-div.component.ts
@@ -8,15 +8,43 @@ import { HtmlEncodeService } from '../html-encode.service';
 })
 export class ExpandableDivComponent {
 
-  exampleCode = `<vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged($event)">
-  <vgr-expandable-div-header>
-    <p>Denna div är collapsed från början</p>
-  </vgr-expandable-div-header>
-  <vgr-expandable-div-content>
-    <p>Lite innehåll</p>
-    <p>Mer innehåll</p>
-  </vgr-expandable-div-content>
-</vgr-expandable-div>`;
+  exampleCode = `<div style="margin: 10px 0;">
+      <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged($event)">
+      <vgr-expandable-div-header>
+        <p><strong>Expandable div med ett underliggande expandable div</strong></p>
+        </vgr-expandable-div-header>
+        <vgr-expandable-div-content>
+          <div style="margin-left: 10px;">
+            <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged($event)">
+              <vgr-expandable-div-header>
+                <p><strong>Expandable div nivå 2</strong></p>
+                </vgr-expandable-div-header>
+                <vgr-expandable-div-content>
+                  <p style="margin-left: 10px;">Kan innehålla både text, tabeller eller interaktiva element</p>
+                </vgr-expandable-div-content>
+              </vgr-expandable-div>
+          </div>
+        </vgr-expandable-div-content>
+      </vgr-expandable-div>
+
+      <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged1($event)">
+        <vgr-expandable-div-header>
+          <p>En annan expandable div</p>
+        </vgr-expandable-div-header>
+        <vgr-expandable-div-content>
+          <p style="margin-left: 10px;">Lite innehåll</p>
+        </vgr-expandable-div-content>
+      </vgr-expandable-div>
+
+      <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged2($event)">
+        <vgr-expandable-div-header>
+          <p>Ytterligare en expandable div</p>
+        </vgr-expandable-div-header>
+        <vgr-expandable-div-content>
+          <p style="margin-left: 10px;">Mer innehåll</p>
+        </vgr-expandable-div-content>
+      </vgr-expandable-div>
+    </div>`;
 
   exampleCodeMarkup;
 
@@ -25,4 +53,6 @@ export class ExpandableDivComponent {
       htmlEncoder.prepareHighlightedSection(this.exampleCode, 'HTML');
   }
   onExpandedChanged(flag: Boolean) { }
+  onExpandedChanged1(flag: Boolean) { }
+  onExpandedChanged2(flag: Boolean) { }
 }
diff --git a/src/app/filter-tag/filter-tag.component.html b/src/app/filter-tag/filter-tag.component.html
@@ -4,84 +4,86 @@
       <code>&lt;vgr-filter-tag&gt;</code> är avsedd att användas för att representera filter i en sökning. I kombination med
       <code>&lt;vgr-filter-tag-group&gt;</code> kan filtren navigeras med piltangenterna.
     </p>
-    <br>
-    <vgr-filter-tag>Filter</vgr-filter-tag>
-    <br>
-    <br>
+    <div class="oversikt">
+      <vgr-filter-tag>Aktiv</vgr-filter-tag>
+      <vgr-filter-tag [disabled]="true">Inaktiv</vgr-filter-tag>
+    </div>
     <p>Förändras med tema:
       <strong>ja</strong>
     </p>
   </div>
   <div class="docs__examples">
-    <div style="margin-bottom: 20px">
-      <div><span style="font-weight: bold">Enkelt exempel</span> - den filtrerade texten finns i För- eller Efternamn.</div>
-      <vgr-input width="130px" style="display: inline-block; " #filterInput></vgr-input>
-      <vgr-button (click)="addFilter(filterInput.value)">Lägg till filter</vgr-button>
-      <vgr-button (click)="removeAllFilters()" style="margin-left: 20px;">Ta bort alla filter</vgr-button>
-      <vgr-button (click)="disableFilters()" style="margin-left: 20px;">{{disabled ? 'Aktivera' : 'Inaktivera'}} filtertaggar</vgr-button>
-    </div>
-    <div style="margin-bottom: 20px" *ngIf="filters.length">
-      <vgr-filter-tag-group>
-        <vgr-filter-tag *ngFor="let filter of filters" (remove)="filter.remove(filter)" [disabled]="filter.disabled">{{filter.text}}</vgr-filter-tag>
-      </vgr-filter-tag-group>
-    </div>
-    <ul>
-      <div *ngIf="filteredValues.length > 0" class="list-row">
-        <div class="list-column list-header">Förnamn</div>
-        <div class="list-column list-header">Efternamn</div>
+    <div style="margin: 20px 0;"><span style="font-weight: bold">Enkelt exempel</span> - skriv in text och tryck sedan på "lägg till filter" -knappen för att filtrera resultat i listan nedan.</div>
+    <div style="margin-left: 10px; margin-bottom: 30px;">
+      <div style="margin-bottom: 20px">
+        <vgr-input width="130px" style="display: inline-block; " #filterInput></vgr-input>
+        <vgr-button (click)="addFilter(filterInput.value)" style="margin-left: 20px;">Lägg till filter</vgr-button>
+        <vgr-button (click)="removeAllFilters()" buttonStyle="discreet" style="margin-left: 20px;"><vgr-icon icon="trash-alt" [solid]="true"></vgr-icon><span style="margin-left: 5px;">Rensa filtrering</span></vgr-button>
+      </div>
+      <div style="margin-bottom: 20px" *ngIf="filters.length">
+        <vgr-filter-tag-group>
+          <vgr-filter-tag *ngFor="let filter of filters" (remove)="filter.remove(filter)" [disabled]="filter.disabled">{{filter.text}}</vgr-filter-tag>
+        </vgr-filter-tag-group>
       </div>
-      <li *ngFor="let value of filteredValues">
-        <div class="list-row">
-          <div class="list-column">{{value.firstName}}</div>
-          <div class="list-column">{{value.surname}}</div>
+      <ul>
+        <div *ngIf="filteredValues.length > 0" class="list-row">
+          <div class="list-column list-header">Förnamn</div>
+          <div class="list-column list-header">Efternamn</div>
         </div>
-      </li>
-    </ul>
-    <br>
-    <div><span style="font-weight: bold">Avancerat exempel</span> - Filtrera på Namn (För- eller Efternamn) samt möjlighet att filtrera på minimiålder och kön.</div>
-    <form [formGroup]="advancedSearchForm" (ngSubmit)="advancedFilter()" novalidate>
-      <div style="margin-bottom: 20px">
-        <div style="display: flex; align-items: flex-end">
-          <div>
-            <div>Namn:</div>
-            <div>
-              <vgr-input formControlName="name"></vgr-input>
-            </div>
+        <li *ngFor="let value of filteredValues">
+          <div class="list-row">
+            <div class="list-column">{{value.firstName}}</div>
+            <div class="list-column">{{value.surname}}</div>
           </div>
-          <div>
-            <div>Minimiålder:</div>
+        </li>
+      </ul>
+    </div>
+    <div style="margin: 20px 0;"><span style="font-weight: bold;">Avancerat exempel</span> - Filtrera på Namn (För- eller Efternamn) samt möjlighet att filtrera på minimiålder och kön.</div>
+    <div style="margin-left: 10px;">
+      <form [formGroup]="advancedSearchForm" (ngSubmit)="advancedFilter()" novalidate>
+        <div style="margin-bottom: 20px">
+          <div style="display: flex; align-items: flex-end">
+            <div style="margin-right: 20px;">
+              <div>Namn</div>
+              <div>
+                <vgr-input formControlName="name"></vgr-input>
+              </div>
+            </div>
+            <div style="margin-right: 20px;">
+              <div>Minimiålder</div>
+              <div>
+                <vgr-input formControlName="minimumAge" width="130px"></vgr-input>
+              </div>
+            </div>
             <div>
-              <vgr-input formControlName="minimumAge" width="130px"></vgr-input>
+              <vgr-checkbox formControlName="women" [label]="'Kvinnor'" style="display: inline-block;"></vgr-checkbox>
+              <vgr-checkbox formControlName="men" [label]="'Män'" style="display: inline-block; margin-left: 10px;"></vgr-checkbox>
             </div>
+            <vgr-button (click)="advancedFilter()" style="margin-left: 20px;">Filtrera</vgr-button>
+            <vgr-button (click)="removeAllAdvancedFilters()" buttonStyle="discreet" style="margin-left: 20px;"><vgr-icon icon="trash-alt" [solid]="true"></vgr-icon><span style="margin-left: 5px;">Rensa filtrering</span></vgr-button>
           </div>
-          <div>            
-            <vgr-checkbox formControlName="women" [label]="'Kvinnor'" style="display: inline-block;"></vgr-checkbox>
-            <vgr-checkbox formControlName="men" [label]="'Män'" style="display: inline-block; margin-left: 10px;"></vgr-checkbox>
-          </div>
-          <vgr-button (click)="advancedFilter()" style="margin-left: 20px;">Filtrera</vgr-button>
-          <vgr-button (click)="removeAllAdvancedFilters()" style="margin-left: 20px;">Ta bort alla filter</vgr-button>
         </div>
+      </form>
+      <div style="margin-bottom: 20px" *ngIf="advancedFilterTags.length">
+        <vgr-filter-tag-group>
+          <vgr-filter-tag *ngFor="let tag of advancedFilterTags" (remove)="tag.remove()">{{tag.text}}</vgr-filter-tag>
+        </vgr-filter-tag-group>
       </div>
-    </form>
-    <div style="margin-bottom: 20px" *ngIf="advancedFilterTags.length">
-      <vgr-filter-tag-group>
-        <vgr-filter-tag *ngFor="let tag of advancedFilterTags" (remove)="tag.remove()">{{tag.text}}</vgr-filter-tag>
-      </vgr-filter-tag-group>
-    </div>
-    <ul style="margin-bottom: 20px;">
-      <div *ngIf="advancedFilteredValues.length > 0" class="list-row">
-        <div class="list-column list-header">Förnamn</div>
-        <div class="list-column list-header">Efternamn</div>
-        <div class="list-column list-header">Ålder</div>
-      </div>
-      <li *ngFor="let value of advancedFilteredValues">
-        <div class="list-row">
-          <div class="list-column">{{value.firstName}}</div>
-          <div class="list-column">{{value.surname}}</div>
-          <div class="list-column">{{value.age}}</div>
+      <ul style="margin-bottom: 20px;">
+        <div *ngIf="advancedFilteredValues.length > 0" class="list-row">
+          <div class="list-column list-header">Förnamn</div>
+          <div class="list-column list-header">Efternamn</div>
+          <div class="list-column list-header">Ålder</div>
         </div>
-      </li>
-    </ul>
+        <li *ngFor="let value of advancedFilteredValues">
+          <div class="list-row">
+            <div class="list-column">{{value.firstName}}</div>
+            <div class="list-column">{{value.surname}}</div>
+            <div class="list-column">{{value.age}}</div>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
   <div class="docs__api">
     <table class="property-table">
@@ -118,14 +120,14 @@
         <td>focus()</td>
         <td>Metod för att flytta fokus till komponenten</td>
         <td>this.myFilterTag.focus()</td>
-      </tr>  
+      </tr>
     </table>
   </div>
   <div class="docs__wcag">
     <p>
-      <code>&lt;vgr-filter-tag&gt;</code> har ett intern element av typen button och har alla dess WCAG egenskaper. 
-      Default sätts <code>attr.aria-label</code> till "Ta bort filtrering [text]", där [text] är content för <code>&lt;vgr-filter-tag&gt;</code>. 
+      <code>&lt;vgr-filter-tag&gt;</code> har ett intern element av typen button och har alla dess WCAG egenskaper.
+      Default sätts <code>attr.aria-label</code> till "Ta bort filtrering [text]", där [text] är content för <code>&lt;vgr-filter-tag&gt;</code>.
       Om input variabeln [disabled] sätts till <code>true</code> sätts även <code> aria.aria-disabled</code> till <code>true</code>
     </p>
   </div>
-</app-component-docs>
+</app-component-docs>
diff --git a/src/app/filter-tag/filter-tag.component.scss b/src/app/filter-tag/filter-tag.component.scss
@@ -1,5 +1,7 @@
+@import "partials/_settings.sizes.scss";
+
 .list-row {
-  width: 500px; display: flex; 
+  width: 500px; display: flex;
 }
 
 .list-column {
@@ -9,3 +11,13 @@
 .list-header {
   font-weight: bold;
 }
+
+.oversikt {
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  width: 20%;
+  @media screen and (min-width: $desktop-width--medium) {
+    width: 22%;
+  }
+}
diff --git a/src/app/filter-tag/filter-tag.component.ts b/src/app/filter-tag/filter-tag.component.ts
@@ -87,10 +87,10 @@ export class FilterTagComponent implements OnInit {
     }
   }
 
-  disableFilters() {
-    this.disabled = !this.disabled;
-    this.filters.forEach(x => x.disabled = this.disabled);
-  }
+  // disableFilters() {
+  //   this.disabled = !this.disabled;
+  //   this.filters.forEach(x => x.disabled = this.disabled);
+  // }
 
   /********** Advanced example withe reactive forms  **********/