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

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