arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature(ui-library): Added own library of UI components to replace digi-ng. Skeleton is first component moved (TV-850)

Browse Source 
Squashed commit of the following:

commit d76e32cd99e2e823142f4410e66c66df5e096041
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 28 10:28:02 2021 +0200

    Move styles to own library

commit 85f0a5788ebdd7309499b1b623f4ac1046f45811
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 28 10:09:23 2021 +0200

    double quotes in html

commit eeb600cd631e3478c136795a8109e8927546b14b
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 27 16:42:48 2021 +0200

    UI library with copy of digi-ng's skeleton

commit 11a24c0eef173e6b2f087eca5e96063036e6394b
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 27 16:06:43 2021 +0200

    Update .eslintrc.json

commit 3c4b2e4823dbd8e9ca8dd332966bd10ac0fc098f
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 27 15:08:32 2021 +0200

    add nx library
This commit is contained in:
Daniel Appelgren
2021-10-28 10:34:28 +02:00
parent a0f61c796d
commit d3c61a4c56
89 changed files with 2229 additions and 1574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
libs/ui/skeleton/skeleton.component.html Normal file
View File

@@ -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>

91
libs/ui/skeleton/skeleton.component.scss Normal file
View File

@@ -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%;
}
}

40
libs/ui/skeleton/skeleton.component.stories.ts Normal file
View File

@@ -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>',
});

25
libs/ui/skeleton/skeleton.component.ts Normal file
View File

@@ -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);
}
}

10
libs/ui/skeleton/skeleton.module.ts Normal file
View File

@@ -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 {}