add icon button component

.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "parserOptions": {
+        "project": ["libs/common-ui/tsconfig.*?.json"]
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "iqser",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "iqser",
+            "style": "kebab-case"
+          }
+        ]
+      },
+      "plugins": ["@angular-eslint/eslint-plugin", "@typescript-eslint"]
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

src/assets/styles/_buttons.scss

@@ -0,0 +1,111 @@
+// This rebel line is crying (in WebStorm) but it actually works
+@import '~/src/assets/styles/variables';
+
+$dark-bg-hover: #e2e4e9 !default;
+
+.mat-button,
+.mat-flat-button {
+    border-radius: 17px !important;
+    font-size: 13px !important;
+    height: 34px;
+    display: flex !important;
+    align-items: center;
+
+    .mat-button-wrapper {
+        display: flex;
+        align-items: center;
+        line-height: 34px;
+        transition: opacity 0.2s;
+        width: 100%;
+
+        > *:not(:last-child) {
+            margin-right: 6px;
+        }
+
+        > span {
+            margin: auto;
+        }
+    }
+
+    &.mat-button-disabled {
+        .mat-button-wrapper {
+            opacity: 0.3;
+        }
+    }
+}
+
+.mat-flat-button.mat-primary,
+.mat-button.primary {
+    padding: 0 14px;
+    transition: background-color 0.2s, color 0.2s;
+
+    background-color: $primary;
+
+    &.mat-button-disabled {
+        background-color: $primary;
+
+        .mat-button-wrapper {
+            color: $white;
+            opacity: 0.5;
+        }
+    }
+
+    &:not(.mat-button-disabled):hover {
+        background-color: $primary-2;
+    }
+}
+
+iqser-icon-button,
+redaction-chevron-button,
+redaction-user-button,
+redaction-circle-button {
+    position: relative;
+    display: flex;
+
+    button {
+        font-weight: 400 !important;
+        transition: background-color 0.2s;
+
+        &.overlay {
+            background: rgba($primary, 0.1);
+        }
+
+        &.primary {
+            font-weight: 500 !important;
+            background-color: $primary;
+            color: $white;
+
+            &:hover {
+                background-color: $primary-2;
+            }
+        }
+
+        &.dark-bg:hover {
+            background-color: $dark-bg-hover;
+        }
+    }
+
+    .dot {
+        background: $primary;
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}
+
+redaction-chevron-button,
+redaction-circle-button,
+iqser-icon-button {
+    &[aria-expanded='true'] {
+        button {
+            background: rgba($primary, 0.1);
+
+            &.primary {
+                background: $primary-2;
+            }
+        }
+    }
+}

src/assets/styles/common.scss

@@ -0,0 +1 @@
+@import 'buttons';

src/index.ts

@@ -1 +1,3 @@
 export * from './lib/common-ui.module';
+export * from './lib/buttons/icon-button/icon-button.component';
+export * from './lib/buttons/icon-button/icon-button-type.model';

src/lib/buttons/icon-button/icon-button-type.model.ts

@@ -0,0 +1,7 @@
+export const IconButtonTypes = {
+    default: 'default',
+    show_bg: 'show_bg',
+    primary: 'primary'
+} as const;
+
+export type IconButtonType = keyof typeof IconButtonTypes;

src/lib/buttons/icon-button/icon-button.component.html

@@ -0,0 +1,14 @@
+<button
+    (click)="action.emit($event)"
+    [class.has-icon]="!!icon"
+    [class.overlay]="showDot"
+    [class.primary]="type === iconButtonTypes.primary"
+    [class.show-bg]="type === iconButtonTypes.show_bg"
+    [disabled]="disabled"
+    mat-button
+    type="button"
+>
+    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
+    <span>{{ label }}</span>
+</button>
+<div *ngIf="showDot" class="dot"></div>

src/lib/buttons/icon-button/icon-button.component.scss

@@ -0,0 +1,22 @@
+@import '../../../assets/styles/common';
+
+button {
+    padding: 0 14px;
+    width: 100%;
+
+    &.has-icon {
+        padding: 0 14px 0 10px;
+    }
+
+    &.show-bg {
+        background-color: $grey-6;
+
+        &:not(.mat-button-disabled):hover {
+            background-color: $dark-bg-hover;
+        }
+    }
+
+    mat-icon {
+        width: 14px;
+    }
+}

src/lib/buttons/icon-button/icon-button.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconButtonType, IconButtonTypes } from './icon-button-type.model';
+
+@Component({
+    selector: 'iqser-icon-button',
+    templateUrl: './icon-button.component.html',
+    styleUrls: ['./icon-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IconButtonComponent {
+    readonly iconButtonTypes = IconButtonTypes;
+
+    @Input() icon!: string;
+    @Input() label!: string;
+    @Input() showDot = false;
+    @Input() disabled = false;
+    @Input() type: IconButtonType = IconButtonTypes.default;
+    @Output() action = new EventEmitter<any>();
+}

src/lib/common-ui.module.ts

@@ -1,7 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { IconButtonComponent } from './buttons/icon-button/icon-button.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+const buttons = [IconButtonComponent];
+
+const matModules = [MatIconModule, MatButtonModule];
 
 @NgModule({
-    imports: [CommonModule]
+    declarations: [...buttons],
+    imports: [CommonModule, ...matModules],
+    exports: [...buttons, ...matModules]
 })
 export class CommonUiModule {}