Merge pull request #235 in TEA/mina-sidor-fa-web from feature/TV-857-digi-ng-icon-custom to develop

Squashed commit of the following:

commit f09e5111d82dce884f83ebf1150a04890c165f39
Merge: 2184d793 4b4e5a64
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Nov 1 14:21:47 2021 +0100

    Merge branch 'develop' into feature/TV-857-digi-ng-icon-custom

commit 2184d7939f92956cb6f5aedc51a9f694692cb9a5
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Fri Oct 29 14:47:29 2021 +0200

    Created a ui-icon-custom and removed references to digi-ng-icon-custom

apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.module.ts

@@ -1,7 +1,3 @@
-import { DigiNgIconExclamationCircleModule } from '@af/digi-ng/_icon/icon-exclamation-circle';
-import { DigiNgIconExclamationTriangleModule } from '@af/digi-ng/_icon/icon-exclamation-triangle';
-import { DigiNgIconInfoCircleRegModule } from '@af/digi-ng/_icon/icon-info-circle-reg';
-import { DigiNgIconXModule } from '@af/digi-ng/_icon/icon-x';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { IconModule } from '@msfa-shared/components/icon/icon.module';
@@ -12,10 +8,6 @@ import { ToastComponent } from './toast.component';
   declarations: [ToastComponent],
   imports: [
     CommonModule,
-    DigiNgIconXModule,
-    DigiNgIconExclamationCircleModule,
-    DigiNgIconExclamationTriangleModule,
-    DigiNgIconInfoCircleRegModule,
     IconModule,
   ],
   exports: [ToastComponent],

apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html

@@ -1,4 +1,4 @@
-<digi-ng-icon-custom *ngIf="isCustomIcon; else DigiNgIcon" aria-hidden="true" class="icon" [ngClass]="[iconClass]">
+<ui-icon-custom *ngIf="isCustomIcon; else digiIcon" aria-hidden="true" class="icon" [ngClass]="[iconClass]">
   <svg *ngIf="icon === 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"
@@ -57,9 +57,9 @@
       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>
-</digi-ng-icon-custom>
+</ui-icon-custom>
 
-<ng-template #DigiNgIcon>
+<ng-template #digiIcon>
   <ng-container [ngSwitch]="icon">
     <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>

apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.scss

@@ -6,18 +6,18 @@
 
 .icon {
   &--s {
-    @include msfa__digi-ng-icon(0.875em);
+    @include msfa__ui-icon(0.875em);
   }
   &--m {
-    @include msfa__digi-ng-icon(1em);
+    @include msfa__ui-icon(1em);
   }
   &--l {
-    @include msfa__digi-ng-icon(1.25em);
+    @include msfa__ui-icon(1.25em);
   }
   &--xl {
-    @include msfa__digi-ng-icon(1.5em);
+    @include msfa__ui-icon(1.5em);
   }
   &--xxl {
-    @include msfa__digi-ng-icon(2em);
+    @include msfa__ui-icon(2em);
   }
 }

libs/styles/src/mixins/_icon.scss

@@ -1,4 +1,4 @@
-@mixin msfa__digi-ng-icon($width: 1em) {
+@mixin msfa__ui-icon($width: 1em) {
   display: inline-flex;
   justify-content: center;
   align-items: center;

libs/ui/_icon/icon-custom/icon-custom.component.html

@@ -0,0 +1 @@
+<ng-content select="svg"></ng-content>

libs/ui/_icon/icon-custom/icon-custom.component.stories.ts

@@ -0,0 +1,31 @@
+import { IconCustomComponent } from './icon-custom.component';
+import { UiIconCustomModule } from './icon-custom.module';
+
+export default { title: 'Icon/IconCustom', component: IconCustomComponent };
+
+const componentModule = {
+  moduleMetadata: {
+    declarations: [],
+    imports: [UiIconCustomModule]
+  }
+};
+
+export const standard = () => ({
+  ...componentModule,
+  template: `
+    <ui-icon-custom>
+      <svg
+        width="25"
+        height="25"
+        viewBox="0 0 25 25"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.5 0C5.595 0 0 5.595 0 12.5S5.595 25 12.5 25 25 19.405 25 12.5 19.405 0 12.5 0zm0 22.58c-5.57 0-10.08-4.51-10.08-10.08S6.93 2.42 12.5 2.42 22.58 6.93 22.58 12.5 18.07 22.58 12.5 22.58zm3.115-5.261l-4.28-3.11a.609.609 0 01-.246-.49V5.445c0-.333.272-.605.605-.605h1.612c.333 0 .605.272.605.605v7.142l3.367 2.45a.604.604 0 01.131.846l-.947 1.306a.609.609 0 01-.847.13z"
+          fill="currentColor"
+          fill-rule="nonzero"
+        />
+      </svg>
+    </ui-icon-custom>
+  `
+});

libs/ui/_icon/icon-custom/icon-custom.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * This is a component for custom icons. It expects an svg as a child (with ng-content's select property explicitly set to 'svg').
+ * The component acts as a simple wrapper that provides icon-specific css etc.
+ *
+ * NOTE: It is encouraged to use one of the existing icon components. This is a fallback for custom needs.
+ *
+ *
+ * ## Usage
+ * ``import {UiIconCustomModule} from '@ui/_icon/icon-custom';``
+ *
+ * `<ui-icon-custom><svg>your custom svg markup here</svg></ui-icon-custom>`
+ *
+ * ## Styling
+ * All icons in the system makes use of `currentColor` as a default for fills and strokes. This allows for maximum flexibility for usage.
+ * In order for your custom svg to behave as the other icons do, it should do this also.
+ */
+@Component({
+  selector: 'ui-icon-custom',
+  templateUrl: './icon-custom.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IconCustomComponent {}

libs/ui/_icon/icon-custom/icon-custom.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { IconCustomComponent } from './icon-custom.component';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [IconCustomComponent],
+  exports: [IconCustomComponent]
+})
+export class UiIconCustomModule {}