feat(export): Added export deltagare. (TV-872)

Squashed commit of the following: commit 9c06b7f1d44a4b48d7f31a22b6bfbd233e09d2f7 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 2 15:07:15 2021 +0100 Updated api endpoint commit f9bfbecda6d03b70d87febbada920d0eca798b1f Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 2 15:01:13 2021 +0100 Updated libs commit 9edb413d537288fa0708b8a04eb54f801ebc23a0 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 2 14:58:13 2021 +0100 Added @types/file-saver commit 624affac55ce771fd58e2770a0d4a98233a8e9ba Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 2 14:42:29 2021 +0100 Updated libs commit 65dae1d906bbcec474581692b2aced9e47d2484c Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 2 14:36:42 2021 +0100 Added utils lib config commit 223bd59724663523bdbaf87b5502396156ddb9eb Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 2 14:06:13 2021 +0100 Added validation commit 166dfcf0448155ac21c0eaa904b4ce1271f73193 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 2 13:25:35 2021 +0100 Changed styling and removed some fake data commit 3906f2793dd52b626b95c13e115495451332c894 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 2 13:18:52 2021 +0100 Added digi-ng datepicker commit de0d51434d15cac5476303d4b417c591da16fd8f Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 2 12:31:48 2021 +0100 Added checkbox
2021-11-03 09:18:25 +01:00
parent e8791556cb
commit c11b0c1463
59 changed files with 1000 additions and 1159 deletions
@@ -0,0 +1,11 @@
+<div class="ui-skeleton" data-digi-ng-component>
+  <div *ngIf="uiText" class="ui-skeleton__top"></div>
+  <p *ngIf="uiText" class="ui-skeleton__text">{{ uiText }}</p>
+  <div class="ui-skeleton__header"></div>
+  <div *ngFor="let stub of stubs" class="ui-skeleton__lines">
+    <div class="ui-skeleton__line"></div>
+    <div class="ui-skeleton__line"></div>
+    <div class="ui-skeleton__line"></div>
+    <div class="ui-skeleton__line ui-skeleton__line--last"></div>
+  </div>
+</div>
@@ -0,0 +1,91 @@
+@import 'variables/gutters';
+@import 'variables/breakpoints';
+
+$typography__margin--text: u(6);
+$animation__duration--sweep: 4s;
+$ui__color--gray-10: #f5f5f5;
+$ui__color--gray-20: #efefef;
+$ui__color--gray-30: #d1d1d1;
+$ui__color--skeleton-text: linear-gradient(
+    to left,
+    $ui__color--gray-20,
+    $ui__color--gray-20 40%,
+    $ui__color--gray-10 50%,
+    $ui__color--gray-20 60%,
+    $ui__color--gray-20
+);
+$ui__color--skeleton-head: linear-gradient(
+    to left,
+    $ui__color--gray-30,
+    $ui__color--gray-30 40%,
+    $ui__color--gray-20 50%,
+    $ui__color--gray-30 60%,
+    $ui__color--gray-30
+);
+$skeleton__top--height: 2.5rem;
+$skeleton__top--height-desktop: 4.5rem;
+$skeleton__header--height: 1rem + 0.46875rem;
+$skeleton__header--height-desktop: 2rem + 0.3125rem;
+
+:host {
+
+  .ui-skeleton__top {
+    animation: ui-skeleton__animation $animation__duration--sweep infinite;
+    height: $skeleton__top--height;
+    background: $ui__color--skeleton-text;
+    background-size: 400%;
+    width: 25%;
+    margin-bottom: var(--digi--layout--gutter--m);
+
+    @media (min-width: $digi--layout--breakpoint--l) {
+      height: $skeleton__top--height-desktop;
+      width: 20%;
+      margin-bottom: $digi--layout--gutter--l;
+    }
+  }
+
+  .ui-skeleton__header {
+    animation: ui-skeleton__animation $animation__duration--sweep infinite;
+    background: $ui__color--skeleton-head;
+    background-size: 400%;
+    width: 33%;
+    height: $skeleton__header--height;
+    margin-bottom: var(----digi--layout--gutter--s);
+
+    @media (min-width: $digi--layout--breakpoint--l) {
+      height: $skeleton__header--height-desktop;
+      margin-bottom: $digi--layout--gutter--l;
+      width: 90%;
+    }
+  }
+
+  .ui-skeleton__line {
+    animation: ui-skeleton__animation $animation__duration--sweep 0.5s infinite;
+    background: $ui__color--skeleton-text;
+    background-size: 400%;
+    margin-bottom: var(--digi--layout--gutter--xs);
+    height: var(--digi--typography--font-size);
+  }
+
+
+  .ui-skeleton__line--last {
+    width: 75%;
+    margin-bottom: var(--digi--layout--gutter);
+  }
+
+  .ui-skeleton__text {
+
+    font-weight: var(--digi--typography--font-weight--semibold);
+    margin-bottom: $typography__margin--text / 2;
+  }
+}
+
+@keyframes ui-skeleton__animation {
+  0% {
+    background-position-x: 100%;
+  }
+
+  100% {
+    background-position-x: 0%;
+  }
+}
@@ -0,0 +1,40 @@
+import { SkeletonComponent } from './skeleton.component';
+import { UiSkeletonModule } from './skeleton.module';
+
+export default { title: 'Skeleton', component: SkeletonComponent };
+
+const componentModule = {
+  moduleMetadata: {
+    imports: [UiSkeletonModule],
+  },
+};
+
+export const standard = () => ({
+  ...componentModule,
+  template: '<ui-skeleton></ui-skeleton>',
+});
+
+export const limitedMultiLine = () => ({
+  ...componentModule,
+  template: '<ui-skeleton [uiCount]="2"></ui-skeleton>',
+});
+
+export const extensiveMultiLine = () => ({
+  ...componentModule,
+  template: '<ui-skeleton [uiCount]="5"></ui-skeleton>',
+});
+
+export const paragraphless = () => ({
+  ...componentModule,
+  template: '<ui-skeleton [uiCount]="0"></ui-skeleton>',
+});
+
+export const customText = () => ({
+  ...componentModule,
+  template: '<ui-skeleton uiText="I am a custom text..."></ui-skeleton>',
+});
+
+export const noText = () => ({
+  ...componentModule,
+  template: '<ui-skeleton uiText=""></ui-skeleton>',
+});
@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * Placeholder for content being loaded
+ *
+ * ##Usage
+ * ``import {SkeletonModule} from '@ui/skeleton';``
+ */
+@Component({
+  selector: 'ui-skeleton',
+  templateUrl: './skeleton.component.html',
+  styleUrls: ['./skeleton.component.scss'],
+})
+export class SkeletonComponent {
+  /**
+   * The amount of skeleton sections
+   */
+  @Input() uiCount: number | undefined;
+
+  @Input() uiText = 'Laddar sidan';
+
+  get stubs(): string[] {
+    return Array(this.uiCount);
+  }
+}
@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SkeletonComponent } from './skeleton.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [SkeletonComponent],
+  exports: [SkeletonComponent],
+})
+export class UiSkeletonModule {}