fix(Icon): icon should have a fixed height

Author: atlwendy

.percy.yml

@@ -0,0 +1,3 @@
+version: 1
+snapshot:
+  widths: [1280]

cypress/integration/visual-regression/icon.js

@@ -0,0 +1,6 @@
+describe(`Icon Component`, () => {
+  it(`should load the icon page`, () => {
+    cy.visit('http://localhost:4200/components/button');
+    cy.percySnapshot('Icon: all icons');
+  });
+});

projects/library/icon/src/icon.component.scss

@@ -12,7 +12,10 @@
 //
 .ts-icon {
   @include reset;
+  $icon-height: 24px;
+
   display: inline-block;
+  height: $icon-height;
 
   &.ts-icon--inline {
     $margin: spacing(small, 2);

projects/visual-regression/src/app/components/chip/chip.module.ts

@@ -4,7 +4,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { TsButtonModule } from '@terminus/ui/button';
 import { TsCardModule } from '@terminus/ui/card';
-import { TsChipModule } from "@terminus/ui/chip";
+import { TsChipModule } from '@terminus/ui/chip';
 import { TsIconModule } from '@terminus/ui/icon';
 import { TsSpacingModule } from '@terminus/ui/spacing';
 

projects/visual-regression/src/app/components/components.constant.ts

@@ -15,6 +15,10 @@ export const componentsList: Routes = [
     path: 'chip',
     loadChildren: () => import('./chip/chip.module').then(m => m.ChipModule),
   },
+  {
+    path: 'icon',
+    loadChildren: () => import('./icon/icon.module').then(m => m.IconModule),
+  },
   {
     path: 'input',
     loadChildren: () => import('./input/input.module').then(m => m.InputModule),

projects/visual-regression/src/app/components/icon/icon-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import {
+  RouterModule,
+  Routes,
+} from '@angular/router';
+
+import { IconComponent } from './icon.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: IconComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class IconRoutingModule { }

projects/visual-regression/src/app/components/icon/icon.component.html

@@ -0,0 +1,33 @@
+<div style="margin: 20px">
+  <ts-icon>home</ts-icon>
+  <ts-icon>wallpaper</ts-icon>
+  <ts-icon theme="accent">storage</ts-icon>
+  <ts-icon theme="warn">open_in_new</ts-icon>
+  <ts-icon svgIcon="csv"></ts-icon>
+  <ts-icon svgIcon="engage" theme="primary"></ts-icon>
+  <ts-icon svgIcon="lightbulb" theme="accent"></ts-icon>
+  <ts-icon svgIcon="logo" theme="warn"></ts-icon>
+  <ts-icon svgIcon="logo_color"></ts-icon>
+  <br>
+  <br>
+
+  <ts-icon theme="primary" [background]="true">brightness_medium</ts-icon>
+  <ts-icon theme="accent" [background]="true">storage</ts-icon>
+  <ts-icon theme="warn" [background]="true">hourglass_empty</ts-icon>
+  <ts-icon svgIcon="logo" theme="primary" [background]="true"></ts-icon>
+  <ts-icon svgIcon="csv" theme="accent" [background]="true"></ts-icon>
+  <ts-icon [background]="true">brightness_medium</ts-icon>
+  <br>
+  <br>
+
+  <div>
+    Test me out
+    <ts-icon [inline]="true">home</ts-icon>
+    for horizontal rhythm
+    <ts-icon [inline]="true">queue</ts-icon>
+    to make sure
+    <ts-icon [inline]="true">add_alarm</ts-icon>
+    everything looks fine.
+    <ts-icon [inline]="true">open_in_new</ts-icon>
+  </div>
+</div>

projects/visual-regression/src/app/components/icon/icon.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon',
+  templateUrl: './icon.component.html',
+})
+export class IconComponent {
+}

projects/visual-regression/src/app/components/icon/icon.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TsCardModule } from '@terminus/ui/card';
+import { TsIconModule } from '@terminus/ui/icon';
+import { TsSpacingModule } from '@terminus/ui/spacing';
+
+import { IconRoutingModule } from './icon-routing.module';
+import { IconComponent } from './icon.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IconRoutingModule,
+    TsCardModule,
+    TsIconModule,
+    TsSpacingModule,
+  ],
+  declarations: [
+    IconComponent,
+  ],
+})
+export class IconModule {}