Pull request #279: feature(digi-migrering): Flyttat vårt Icon-bibliotek till libs/ui så att det kan användas av våra UI-komponenter. (TV-913)
Merge in TEA/mina-sidor-fa-web from feature/TV-913-flytta-msfa-icon-till-ui-icon to develop Squashed commit of the following: commit 79a61dadb64689e41b9535b5dd9fb40c5a9f4f9d Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 26 09:36:59 2021 +0100 rename IconModule to UiIconModule commit 9599ee73e060e3befee3191b3155237c49e77f8a Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 26 09:10:03 2021 +0100 Update hide-text.component.ts commit 91e39eb463a15f2bbec40f426dccdfe82c7e4ab9 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 26 09:06:22 2021 +0100 change inputs to enums instead of strings in html files commit a79818901acbddcf057d533657387052ca54ed65 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 26 08:44:18 2021 +0100 change name of html element commit 95240c2034684acb87dfa47d95cc559f9f5c9ef1 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 26 08:41:16 2021 +0100 feature(digi-migrering): Flyttat vårt Icon-bibliotek till libs/ui så att det kan användas av våra UI-komponenter. (TV-913)
This commit is contained in:
Daniel Appelgren
7
libs/ui/src/icon/icon-size.enum.ts
Normal file
7
libs/ui/src/icon/icon-size.enum.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export enum UiIconSize {
|
||||
S = 's',
|
||||
M = 'm',
|
||||
L = 'l',
|
||||
XL = 'xl',
|
||||
XXL = 'xxl',
|
||||
}
|
||||
25
libs/ui/src/icon/icon-type.enum.ts
Normal file
25
libs/ui/src/icon/icon-type.enum.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
export enum UiIconType {
|
||||
HOME = 'home', // Custom
|
||||
SETTINGS = 'settings', // Custom
|
||||
PLUS = 'plus', // Custom
|
||||
CLIPBOARD = 'clipboard', // Custom
|
||||
BUILDING = 'building', // Custom
|
||||
LOGOUT = 'logout', // Custom
|
||||
BANKID = 'bankid', // Custom
|
||||
USER = 'user',
|
||||
USERS = 'users',
|
||||
BELL = 'bell',
|
||||
CALENDAR = 'calendar',
|
||||
ENVELOPE = 'envelope',
|
||||
SOK_KANDIDAT = 'sok-kandidat',
|
||||
EDIT = 'edit',
|
||||
INFO = 'info',
|
||||
WARNING = 'warning',
|
||||
APPROVED = 'approved',
|
||||
X = 'x',
|
||||
ARROW_LEFT = 'arrow-left',
|
||||
ARROW_RIGHT = 'arrow-right',
|
||||
EYE = 'eye',
|
||||
EYESLASH = 'eyeslash',
|
||||
ARCHIVE = 'archive',
|
||||
}
|
||||
103
libs/ui/src/icon/icon.component.html
Normal file
103
libs/ui/src/icon/icon.component.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<ui-icon-custom *ngIf="isCustomIcon; else digiIcon" aria-hidden="true" class="icon" [ngClass]="[iconClass]">
|
||||
<svg
|
||||
*ngIf="uiType === iconType.BANKID"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 169 158"
|
||||
>
|
||||
<path
|
||||
d="M45.916 135.23c5.268 0 9.905 2.083 9.015 7.63l-1.005 6.257c-.355 2.211-.289 2.873 2.253 2.922l-2.583 5.878c-4.495.291-6.67-.167-7.75-2.046-2.384 1.422-5.006 2.129-7.814 2.129-5.093 0-6.845-2.541-6.392-5.378.213-1.34 1.03-2.67 2.328-3.756 2.794-2.336 9.715-2.673 12.42-4.462.236-2.002-.6-2.712-3.15-2.712-2.979 0-5.466.961-9.714 3.754l1.035-6.47c3.698-2.58 7.251-3.747 11.357-3.747zm32.032 0c4.892 0 7.172 3.008 6.407 7.968L82.075 158h-8.773l1.889-12.256c.342-2.244-.3-3.266-2.028-3.266-1.392 0-2.649.764-3.872 2.414L67.27 158H58.5l3.446-22.395h8.774l-.452 2.929c2.772-2.376 4.896-3.305 7.68-3.305zm22.058-7.436l-2.19 14.881 8.377-8.065H117l-10.759 9.971L114.866 158h-10.973l-6.656-10.808h-.082L95.567 158H86.82l4.438-30.206h8.747zm-78.437.93c7.265 0 9.048 3.578 8.525 6.855-.423 2.664-2.276 4.617-5.514 5.906 4.08 1.496 5.669 3.863 5.084 7.52-.733 4.616-4.87 8.066-10.257 8.066H0l4.514-28.347h17.055zm131.362 0c11.337 0 14.611 7.98 13.563 14.547-1.03 6.442-6.288 13.8-16.25 13.8h-16.53l4.532-28.347h14.685zm-19.681 0l-4.553 28.347h-10.304l4.554-28.347h10.303zm-87.452 19.348c-2.392 1.462-6.8 1.21-7.281 4.213-.228 1.42.685 2.46 2.151 2.46 1.427 0 3.164-.583 4.517-1.5-.091-.498-.047-1.042.113-2.043l.5-3.13zm-30.297-3.262h-3.332l-1.265 7.938h3.076c3.421 0 5.43-1.33 5.872-4.115.38-2.37-1.017-3.823-4.351-3.823zm134.677-9.357h-2.75l-2.379 14.884h2.707c4.978 0 7.721-2.37 8.535-7.439.595-3.741-.573-7.445-6.113-7.445zm-133.187-2.41h-2.95l-1.185 7.44h2.95c3.334 0 4.889-1.704 5.212-3.74.344-2.158-.692-3.7-4.027-3.7zM43.87 14.405c3.239 0 5.74.667 7.04 1.88.907.849 1.245 1.96.977 3.219-.26 1.215-1.64 2.797-3.71 4.223-5.866 4.066-4.85 8.28-4.397 9.477 1.358 3.601 5.892 5.544 9.462 5.544h7.58l-7.07 43.956h.121c-2.632 16.426-4.59 28.813-4.953 31.148H6.964c.804-5.165 11.305-70.804 11.97-75.091h.645l2.179.005h.502l1.696.004.446.001.62.001h.371l.172.001.451.001h.504l.058.001h.076c5.043-.027 9.69-2.3 11.844-5.793 2.106-3.388 1.305-7.02-2.076-9.482-1.127-.818-2.424-2.145-2.17-3.787.348-2.217 4.171-5.308 9.617-5.308zM109.119 0c38.623 0 65.555 16.776 58.858 58.635-5.415 33.793-32.973 55.218-66.709 55.218H93.27l5.425-34.104c13.664-.152 25.113-6.51 27.478-21.265 2.54-15.881-5.526-22.699-20.537-22.815.003-.024.003-.037.003-.037h-11.04c-2.542 0-5.808-1.395-6.655-3.641-.264-.696-.802-3.206 3.314-6.068 1.58-1.101 4.324-3.347 4.9-6.034.471-2.252-.198-4.429-1.845-5.967-1.876-1.757-5.01-2.69-9.061-2.69-6.765 0-11.939 4.042-12.527 7.813-.037.245-.061.532-.061.846 0 1.5.59 3.709 3.397 5.763 1.03.753 2.028 1.86 2.028 3.341 0 .679-.21 1.43-.723 2.267-1.608 2.612-5.341 4.378-9.301 4.4l-7.243-.017L66.526 0z"
|
||||
transform="translate(-100 -239) translate(100 239)"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg *ngIf="uiType === iconType.HOME" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="25" height="25">
|
||||
<path
|
||||
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
*ngIf="uiType === iconType.SETTINGS"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
width="25"
|
||||
height="25"
|
||||
>
|
||||
<path
|
||||
d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<svg *ngIf="uiType === iconType.PLUS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="25" height="25">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
*ngIf="uiType === iconType.BUILDING"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
width="25"
|
||||
height="25"
|
||||
>
|
||||
<path
|
||||
d="M436 480h-20V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v456H12c-6.627 0-12 5.373-12 12v20h448v-20c0-6.627-5.373-12-12-12zM128 76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76zm0 96c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40zm52 148h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12zm76 160h-64v-84c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v84zm64-172c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
*ngIf="uiType === iconType.LOGOUT"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
width="25"
|
||||
height="25"
|
||||
>
|
||||
<path
|
||||
d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
*ngIf="uiType === iconType.CLIPBOARD"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 384 512"
|
||||
width="25"
|
||||
height="25"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z"
|
||||
></path>
|
||||
</svg>
|
||||
</ui-icon-custom>
|
||||
|
||||
<ng-template #digiIcon>
|
||||
<ng-container [ngSwitch]="uiType">
|
||||
<digi-icon-user-alt *ngSwitchCase="iconType.USER" [ngClass]="iconClass"></digi-icon-user-alt>
|
||||
<digi-icon-users-solid *ngSwitchCase="iconType.USERS" [ngClass]="iconClass"></digi-icon-users-solid>
|
||||
<digi-icon-bell *ngSwitchCase="iconType.BELL" [ngClass]="iconClass"></digi-icon-bell>
|
||||
<digi-icon-calendar-alt *ngSwitchCase="iconType.CALENDAR" [ngClass]="iconClass"></digi-icon-calendar-alt>
|
||||
<digi-icon-envelope-filled *ngSwitchCase="iconType.ENVELOPE" [ngClass]="iconClass"></digi-icon-envelope-filled>
|
||||
<digi-icon-sokkandidat *ngSwitchCase="iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-icon-sokkandidat>
|
||||
<digi-icon-edit *ngSwitchCase="iconType.EDIT" [ngClass]="iconClass"></digi-icon-edit>
|
||||
<digi-icon-exclamation-circle *ngSwitchCase="iconType.INFO" [ngClass]="iconClass"></digi-icon-exclamation-circle>
|
||||
<digi-icon-exclamation-triangle
|
||||
*ngSwitchCase="iconType.WARNING"
|
||||
[ngClass]="iconClass"
|
||||
></digi-icon-exclamation-triangle>
|
||||
<digi-icon-check-circle-reg *ngSwitchCase="iconType.APPROVED" [ngClass]="iconClass"></digi-icon-check-circle-reg>
|
||||
<digi-icon-x *ngSwitchCase="iconType.X" [ngClass]="iconClass"></digi-icon-x>
|
||||
<digi-icon-arrow-left *ngSwitchCase="iconType.ARROW_LEFT" [ngClass]="iconClass"></digi-icon-arrow-left>
|
||||
<digi-icon-arrow-right *ngSwitchCase="iconType.ARROW_RIGHT" [ngClass]="iconClass"></digi-icon-arrow-right>
|
||||
<digi-icon-eye *ngSwitchCase="iconType.EYE" [ngClass]="iconClass"></digi-icon-eye>
|
||||
<digi-icon-eye-slash *ngSwitchCase="iconType.EYESLASH" [ngClass]="iconClass"></digi-icon-eye-slash>
|
||||
<digi-icon-archive *ngSwitchCase="iconType.ARCHIVE" [ngClass]="iconClass"></digi-icon-archive>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
23
libs/ui/src/icon/icon.component.scss
Normal file
23
libs/ui/src/icon/icon.component.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
@import 'libs/styles/src/mixins/icon';
|
||||
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.icon {
|
||||
&--s {
|
||||
@include msfa__ui-icon(0.875em);
|
||||
}
|
||||
&--m {
|
||||
@include msfa__ui-icon(1em);
|
||||
}
|
||||
&--l {
|
||||
@include msfa__ui-icon(1.25em);
|
||||
}
|
||||
&--xl {
|
||||
@include msfa__ui-icon(1.5em);
|
||||
}
|
||||
&--xxl {
|
||||
@include msfa__ui-icon(2em);
|
||||
}
|
||||
}
|
||||
26
libs/ui/src/icon/icon.component.spec.ts
Normal file
26
libs/ui/src/icon/icon.component.spec.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
/* tslint:disable:no-unused-variable */
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IconComponent } from './icon.component';
|
||||
|
||||
describe('IconComponent', () => {
|
||||
let component: IconComponent;
|
||||
let fixture: ComponentFixture<IconComponent>;
|
||||
|
||||
beforeEach(() => {
|
||||
void TestBed.configureTestingModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
declarations: [IconComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(IconComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
35
libs/ui/src/icon/icon.component.ts
Normal file
35
libs/ui/src/icon/icon.component.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
|
||||
import { UiIconSize } from '@ui/icon/icon-size.enum';
|
||||
import { UiIconType } from '@ui/icon/icon-type.enum';
|
||||
|
||||
const CUSTOM_ICONS: UiIconType[] = [
|
||||
UiIconType.HOME,
|
||||
UiIconType.SETTINGS,
|
||||
UiIconType.PLUS,
|
||||
UiIconType.CLIPBOARD,
|
||||
UiIconType.BUILDING,
|
||||
UiIconType.LOGOUT,
|
||||
UiIconType.BANKID,
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'ui-icon',
|
||||
templateUrl: './icon.component.html',
|
||||
styleUrls: ['./icon.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class IconComponent implements OnChanges {
|
||||
@Input() uiType: UiIconType;
|
||||
@Input() uiSize: UiIconSize = UiIconSize.M;
|
||||
|
||||
iconClass: string;
|
||||
iconType = UiIconType;
|
||||
|
||||
ngOnChanges(): void {
|
||||
this.iconClass = `icon--${this.uiSize}`;
|
||||
}
|
||||
|
||||
get isCustomIcon(): boolean {
|
||||
return CUSTOM_ICONS.includes(this.uiType);
|
||||
}
|
||||
}
|
||||
12
libs/ui/src/icon/icon.module.ts
Normal file
12
libs/ui/src/icon/icon.module.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { UiIconCustomModule } from '@ui/_icon/icon-custom/icon-custom.module';
|
||||
import { IconComponent } from './icon.component';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
declarations: [IconComponent],
|
||||
imports: [CommonModule, UiIconCustomModule],
|
||||
exports: [IconComponent],
|
||||
})
|
||||
export class UiIconModule {}
|
||||
Reference in New Issue
Block a user