feat(Tiles): restyling the novo-tiles component to be more legible

package.json

@@ -78,7 +78,7 @@
     "@angular/cli": "^17.2.0",
     "@angular/compiler-cli": "^17.2.0",
     "@angular/language-service": "^17.2.0",
-    "@bullhorn/bullhorn-icons": "^2.25.0",
+    "@bullhorn/bullhorn-icons": "^2.33.0",
     "@codemirror/lang-javascript": "^6.1.9",
     "@github-docs/frontmatter": "^1.3.1",
     "@schematics/angular": "^15.2.10",

projects/novo-elements/src/elements/tiles/Tiles.module.ts

@@ -2,11 +2,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-// APP
+import { NovoButtonModule } from 'novo-elements/elements/button';
 import { NovoTilesElement } from './Tiles';
 
 @NgModule({
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [CommonModule, NovoButtonModule, ReactiveFormsModule],
   declarations: [NovoTilesElement],
   exports: [NovoTilesElement],
 })

projects/novo-elements/src/elements/tiles/Tiles.scss

@@ -1,82 +1,46 @@
 @import "../../styles/variables.scss";
 
 :host {
-  $border-width: 0.2em;
-  $border-radius: 3px;
-  $positive-lighter: lighten($positive, 20%);
-  $disabled-color: lighten($grey, 20%);
   display: inline-block;
-  position: relative;
-  color: $positive;
-  $border-properties: solid $border-width $positive-lighter;
-
   input {
     appearance: none !important;
     height: 0 !important;
     border: none !important;
     position: absolute;
   }
   & > .tile-container {
+    background: $white;
     display: flex;
-    text-align: center;
-    background-color: var(--background-bright);
-    border: solid thin $ocean;
-    border-radius: $border-radius;
-    position: relative;
-    align-items: center;
+    border: solid thin $slate;
+    border-radius: 3px;
     .tile {
-      padding: 0 $spacing-md;
-      line-height: 3.2rem;
-      height: 100%;
-      z-index: 1;
-      position: relative;
-      cursor: pointer;
-      letter-spacing: 0.02em;
+      margin: 2px;
+      gap: .5rem;
       &:not(:last-child) {
-        border-right: solid thin $ocean;
-      }
-      &:not(.disabled) {
-        &.active {
-          box-shadow: inset 3px 2px 4px 0px rgba(0, 0, 0, 0.3);
-          color: $white;
-          background: $ocean;
-        }
-        &:hover {
-          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15);
-        }
+        margin-right: 3px;
       }
-      &.active {
-        font-weight: 600;
+      &.defaultColor.active {
+          background: darken($ocean, 20%);
       }
       &.disabled {
         cursor: not-allowed;
         opacity: 0.4;
       }
-      label {
-        z-index: 1;
-        position: relative;
-        cursor: inherit;
+      ::ng-deep span {
+        text-transform: none;
+        label {
+          cursor: inherit;
+        }
       }
     }
-    &.active {
-      color: $positive;
-      border-color: $positive;
-      box-shadow: 0px 0px 15px 3px rgba(74, 137, 220, 0.25);
-    }
     &.disabled {
-      border-color: $disabled-color;
+      border-color: lighten($grey, 20%);
       opacity: 0.4;
       pointer-events: auto;
       cursor: not-allowed;
       .tile {
         pointer-events: none;
         opacity: 1;
-        &:hover {
-          box-shadow: none;
-        }
-        &.active {
-          box-shadow: inset 3px 2px 4px 0px rgba(0, 0, 0, 0.3);
-        }
       }
     }
   }

projects/novo-elements/src/elements/tiles/Tiles.ts

@@ -28,13 +28,15 @@ const TILES_VALUE_ACCESSOR = {
   providers: [TILES_VALUE_ACCESSOR],
   template: `
     <div class="tile-container" [class.active]="focused" [class.disabled]="disabled">
-      <div
-        class="tile"
+      <button class="tile"
         *ngFor="let option of _options; let i = index"
-        [ngClass]="{ active: option.checked, disabled: option.disabled }"
+        [ngClass]="{ defaultColor: !option.color, active: option.checked, disabled: option.disabled }"
+        [theme]="option.checked ? 'primary' : 'dialogue'"
+        [color]="option.checked ? option.color || 'darken($ocean, 20%)' : 'dark'"
+        [icon]="option.icon"
+        [side]="option.iconSide || 'left'"
         (click)="select($event, option)"
-        [attr.data-automation-id]="option.label || option"
-      >
+        [attr.data-automation-id]="option.label || option">
         <input
           class="tiles-input"
           [name]="name"
@@ -49,7 +51,7 @@ const TILES_VALUE_ACCESSOR = {
         <label [attr.for]="name + i" [attr.data-automation-id]="option.label || option">
           {{ option.label || option }}
         </label>
-      </div>
+      </button>
     </div>
   `,
   styleUrls: ['./Tiles.scss'],

projects/novo-examples/src/design/colors/analytics-colors/analytics-colors-example.ts

@@ -2,6 +2,8 @@
 import { Component } from '@angular/core';
 // Vendor
 import { NovoToastService } from 'novo-elements';
+// App
+import { analyticsColors as colors } from '../colors';
 
 /**
  * @title Analytics Colors
@@ -12,59 +14,7 @@ import { NovoToastService } from 'novo-elements';
   styleUrls: ['./analytics-colors-example.scss'],
 })
 export class AnalyticsColorsExample {
-  public analyticsColors: Array<any> = [
-    {
-      name: 'grapefruit',
-      variables: ['grapefruit'],
-      hex: 'DA4453',
-    },
-    {
-      name: 'bittersweet',
-      variables: ['bittersweet'],
-      hex: 'EB6845',
-    },
-    {
-      name: 'sunflower',
-      variables: ['sunflower'],
-      hex: 'F6B042',
-    },
-    {
-      name: 'grass',
-      variables: ['grass'],
-      hex: '8CC152',
-    },
-    {
-      name: 'mint',
-      variables: ['mint'],
-      hex: '37BC9B',
-    },
-    {
-      name: 'aqua',
-      variables: ['aqua'],
-      hex: '3BAFDA',
-    },
-    {
-      name: 'ocean',
-      variables: ['ocean'],
-      hex: '4A89DC',
-    },
-    {
-      name: 'carnation',
-      variables: ['carnation'],
-      hex: 'D770AD',
-    },
-    {
-      name: 'lavender',
-      variables: ['lavender'],
-      hex: '967ADC',
-    },
-    {
-      name: 'mountain',
-      variables: ['mountain'],
-      hex: '9678B6',
-    },
-  ];
-
+  analyticsColors = colors;
   options: any;
 
   constructor(private toaster: NovoToastService) {}