Merge pull request #837 from badejayayesubabu/SURF-2154

feat(choice-tile): implement new slim option

Author: 100stacks

docs/components/choice-tile/choice-tile-demo.js

@@ -5,6 +5,7 @@ if (document.getElementById('vue-choiceDemo')) {
         { value: 'hxSm', label: 'Small' },
         { value: '', label: 'Medium' },
         { value: 'hxLg', label: 'Large' },
+        { value: 'hxSlim', label: 'Slim' },
     ];
 
     new Vue({

src/scss/components/choice-tile/_index.scss

@@ -7,7 +7,6 @@
 hx-tile {
   @include box-size(md);
 
-  border-radius: 2px;
   display: inline-block;
   height: 100%;
   position: relative;
@@ -18,13 +17,15 @@ hx-tile {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 0;
+    color: $gray-700;
     color: var(--hxChoiceTile-header-color, $gray-700);
-    line-height: 24px;
+    line-height: 1.5rem;
     text-align: center;
   }
 
   > p {
     font-size: 0.75rem;
+    color: $gray-700;
     color: var(--hxChoiceTile-tile-paragraph-color, $gray-700);
   }
 
@@ -54,6 +55,24 @@ hx-tile {
     }
   }
 
+  &.hxSlim {
+    height: 4rem;
+    width: 13.813rem;
+
+    $pad: 0.75rem;
+
+    padding: $pad;
+
+    .hx-tile-icon, > p {
+      display: none;
+    }
+
+    hx-icon[type="checkmark"] {
+      right: $pad;
+      top: $pad;
+    }
+  }
+
   > header + *,
   .hx-tile-icon + * {
     margin-top: 0.5rem;
@@ -113,12 +132,16 @@ label.hxChoice > input[invalid] + hx-tile.hxSubdued {
 // ========== DEFAULT ==========
 // NOTE: These styles may be able to go into default hx-tile defs
 label.hxChoice > input + hx-tile {
+  background-color: $gray-0;
   background-color: var(--hxChoiceTile-input-bgcolor, $gray-0);
+  border: solid 1px $gray-400;
   border: solid 1px var(--hxChoiceTile-input-hxTile-bordercolor, $gray-400);
+  color: $gray-900;
   color: var(--hxChoiceTile-input-color, $gray-900);
   cursor: pointer;
 
   .hx-tile-icon {
+    color: $gray-400;
     color: var(--hxChoiceTile-hxTile-color, $gray-400);
   }
 }
@@ -134,27 +157,34 @@ label.hxChoice > input:focus + hx-tile {
 
 // ========== CHECKED ==========
 label.hxChoice > input:checked + hx-tile {
+  border: 1px solid $purple-300;
   border: 1px solid var(--hxChoiceTile-inputChecked-bordercolor, $purple-300);
+  color: $gray-0;
   color: var(--hxChoiceTile-inputChecked-color, $gray-0);
 
   > hx-icon {
+    color: $purple-300;
     color: var(--hxChoiceTile-inputChecked-hxicon-color, $purple-300);
   }
 
   .hx-tile-icon {
+    color: $purple-300;
     color: var(--hxChoiceTile-checked-hxTile-color, $purple-300);
   }
 
   > header {
+    color: $purple-300;
     color: var(--hxChoiceTile-checked-hxTile-header-color, $purple-300);
   }
 
   > p {
+    color: $gray-950;
     color: var(--hxChoiceTile-checked-paragraph-color, $gray-950);
   }
 
   // DEPRECATED: remove in v1.0.0
   hx-tile-description {
+    color: $gray-900;
     color: var(--hxChoiceTile-checked-description-color, $gray-900);
   }
 }
@@ -164,11 +194,13 @@ label.hxChoice > input[invalid] + hx-tile {
   @include hxChoiceTile--invalid;
 
   > p {
+    color: $gray-900;
     color: var(--hxChoiceTile-invalid-paragraph-color, $gray-900);
   }
 
   // DEPRECATED: remove in v1.0.0
   hx-tile-description {
+    color: $gray-900;
     color: var(--hxChoiceTile-invalid-description-color, $gray-900);
   }
 
@@ -199,19 +231,23 @@ label.hxChoice > input[disabled] + hx-tile:hover {
   @include hxChoiceTile--disabled;
 
   > p {
+    color: $gray-500;
     color: var(--hxChoiceTile-disabled-paragraph-color, $gray-500);
   }
 
   // DEPRECATED: remove in v1.0.0
   hx-tile-description {
+    color: $gray-500;
     color: var(--hxChoiceTile-disabled-description-color, $gray-500);
   }
 
   > header {
+    color: $gray-500;
     color: var(--hxChoiceTile-disabled-header-color, $gray-500);
   }
 
   hx-icon {
+    color: $gray-400;
     color: var(--hxChoiceTile-disabled-hxIcon-color, $gray-400);
   }
 }

src/scss/components/choice-tile/mixins/_hxChoiceTile.scss

@@ -7,18 +7,23 @@
   @if $pseudo-state == focus {
     box-shadow: 0 0 4px rgba($purple-700, 0.5);
   } @else if $pseudo-state == hover {
+    background-color: $gray-0;
     background-color: var(--hxChoiceTile-hover-bgcolor, $gray-0);
+    border: 1px solid $purple-700;
     border: 1px solid var(--hxChoiceTile-hover-bordercolor, $purple-700);
 
     > header {
+      color: $purple-700;
       color: var(--hxChoiceTile-hover-header-color, $purple-700);
     }
 
     > p {
+      color: $gray-950;
       color: var(--hxChoiceTile-hover-paragraph-color, $gray-950);
     }
 
     .hx-tile-icon {
+      color: $purple-700;
       color: var(--hxChoiceTile-hover-hxTileIcon-color, $purple-700);
     }
   }
@@ -38,29 +43,38 @@
   @if $pseudo-state == focus {
     box-shadow: 0 0 4px rgba($red-status-500, 0.5);
   } @else if $pseudo-state == hover {
+    background-color: $red-status-100;
     background-color: var(--hxChoiceTile-invalid-hover-bgcolor, $red-status-100);
+    border-color: $red-status-500;
     border-color: var(--hxChoiceTile-invalid-hover-borderColor, $red-status-500);
+    color: $gray-900;
     color: var(--hxChoiceTile-invalid-hover-color, $gray-900);
 
     > header {
       color: inherit;
     }
   } @else {
+    border-color: $red-status-500;
     border-color: var(--hxChoiceTile-invalid-bordercolor, $red-status-500);
     border-width: 2px;
+    color: $red-status-500;
     color: var(--hxChoiceTile-invalid-color, $red-status-500);
   }
 
   .hx-tile-icon {
+    color: $red-status-500;
     color: var(--hxChoiceTile-invalid-hxTileIcon-color, $red-status-500);
   }
 }
 
 // ========== Disabled ==========
 @mixin hxChoiceTile--disabled {
+  background-color: $gray-0;
   background-color: var(--hxChoiceTile-disabled-bgcolor, $gray-0);
+  border-color: $gray-400;
   border-color: var(--hxChoiceTile-disabled-bordercolor, $gray-400);
   border-width: 1px;
+  color: $gray-500;
   color: var(--hxChoiceTile-disabled-color, $gray-500);
   cursor: not-allowed;