Merge pull request #1 from nypublicradio/mboudeau/WE-6523-search-icon

WE-6523: Reverses the direction of search icons and updates their styles.

app/components/search-box/template.hbs

@@ -1,4 +1,4 @@
-<div class="searchbox {{searchbox-class}}">
+<div class="{{searchbox-class}}">
 
     {{input type="search" class="input" placeholder=placeholder autocomplete="off" key-up=key-up enter=enter}}
 

app/components/site-chrome/template.hbs

@@ -18,7 +18,7 @@
       <div class="sitechrome-topbody-right">
           {{#if media.isLargeAndUp}}
           <div class="l-flex1of2 sitechrome-search">
-            {{search-box placeholder="I heard something... Help me find it" enter=(action "routeSearch") searchbox-class="searchbox--gray searchbox--slim"}}
+            {{search-box placeholder="I heard something... Help me find it" enter=(action "routeSearch") searchbox-class="searchbox--chrome"}}
           </div>
           {{else}}
           <div class="flex1of2">

app/components/wnyc-svg/search/template.hbs

@@ -1,3 +1,3 @@
-<svg class={{className}} width="21px" height="22px" viewBox="1 1 21 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M14.8774376,2.31563471 C11.933134,2.31563471 9.5384167,4.78639671 9.5384167,7.82419727 C9.5384167,9.29639252 10.0931036,10.6791246 11.1017412,11.7197916 C12.1103788,12.7604587 13.4518285,13.3340754 14.8774376,13.3340754 C17.8217412,13.3340754 20.2164585,10.8633134 20.2164585,7.82419727 C20.2164585,4.78639671 17.8217412,2.31563471 14.8774376,2.31563471 M10.6726449,13.0933882 C11.8545204,14.1011842 13.3256135,14.6497102 14.8774376,14.6497102 C18.5243446,14.6497102 21.4916008,11.5882282 21.4916008,7.82419727 C21.4916008,4.06148198 18.5243446,1 14.8774376,1 C11.2305306,1 8.26327439,4.06148198 8.26327439,7.82419727 C8.26327439,9.42674639 8.79412584,10.9439383 9.77100389,12.1632281 L1.18648956,21.0190925 C0.937836812,21.2769569 0.937836812,21.6926975 1.18648956,21.9505619 C1.31145351,22.0781785 1.47467173,22.1426446 1.63788994,22.1426446 C1.80110816,22.1426446 1.96432638,22.0781785 2.08929033,21.9505619 L10.6726449,13.0933882 Z" id="search" stroke="none" fill="#000000" fill-rule="evenodd"></path>
-</svg>
+<svg class={{className}} viewBox="65 59 14 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M70.55,69.1 C68.0371044,69.1 66,67.0628956 66,64.55 C66,62.0371044 68.0371044,60 70.55,60 C73.0628956,60 75.1,62.0371044 75.1,64.55 C75.1,67.0628956 73.0628956,69.1 70.55,69.1 Z M77.75,72.05 L74.2144661,68.5144661 L77.75,72.05 Z" stroke="#4B4B4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+</svg>

app/shows/template.hbs

@@ -28,7 +28,7 @@
   </section>
 
   <section class="shows-search">
-    {{search-box placeholder="Search for a show" key-up=(action "filterShows") searchbox-class="searchbox--gray"}}
+    {{search-box placeholder="Search for a show" key-up=(action "filterShows") searchbox-class="searchbox--shows"}}
   </section>
 
   <section class="shows-list">

app/styles/_forms.scss

@@ -114,68 +114,77 @@
  *  Searchbox
  * `.searchbox input.search`:
  */
+
+@mixin searchbox {
+  position: relative;
+  box-sizing: border-box;
+  padding: 20px 20px 20px 60px; /* room at left for magnifying glass icon */
+  border-radius: 100px;
+
+  .input-icon {
+    position: absolute;
+    top: 21px;
+    left: 25px;
 
-.searchbox {
-    position: relative;
-    box-sizing: border-box;
-    padding: 20px 20px 20px 60px; /* room at left for magnifying glass icon */
-    border-radius: 100px;
-
-    input[type="search"] {
-        border: none;
-        margin-bottom: 0;
-
-        &:focus {
-            outline: none;
-        }
-
+    svg path {
+        stroke: $lightgray;
     }
+  }
+
+  input[type="search"] {
+    border: none;
+    margin-bottom: 0;
 
-    &.searchbox--gray {
-        background-color: $graywhite;
-
-        input[type="search"] {
-            background-color: $graywhite;
-            color: $lightgray;
-            &::-webkit-input-placeholder {color: $lightgray; opacity: 1 !important;}
-            &::-moz-placeholder {color: $lightgray;}
-            &:-ms-input-placeholder {color: $lightgray;}
-        }
+    &:focus {
+      outline: none;
     }
+  }   
+}
 
-    &.searchbox--slim {
-        padding: 10px 10px 10px 60px;
-
-        .input-icon {
-            top: 11px;
-            .icon--form {
-                fill: $darkergray;
-            }
-        }
-
-        input[type="search"] {
-            color: $darkergray;
-            font-size: 14px;
-            &::-webkit-input-placeholder {color: $darkergray; opacity: 1 !important;}
-            &::-moz-placeholder {color: $darkergray;}
-            &:-ms-input-placeholder {color: $darkergray;}
-
-            &:focus::-webkit-input-placeholder {opacity: 0 !important;}
-        }
-    }
+@mixin searchbox--gray {
+  background-color: $graywhite;
 
+  input[type="search"] {
+    background-color: $graywhite;
+    color: $lightgray;
+    &::-webkit-input-placeholder {color: $lightgray; opacity: 1 !important;}
+    &::-moz-placeholder {color: $lightgray;}
+    &:-ms-input-placeholder {color: $lightgray;}
+  }
 }
 
+@mixin searchbox--slim {
+  padding: 10px 10px 10px 45px;
 
-.input-icon {
-    position: absolute;
-    top: 21px;
-    left: 25px;
+  .input-icon {
+    top: 11px;
+    left: 20px;
 
-    .icon--form {
-        fill: $lightgray;
+    .icon--search {
+      width: 14px;
+      height: 15px;
     }
- }
+  }
+
+  input[type="search"] {
+    font-size: 14px;
+  }
+}
+
+.searchbox {
+  @include searchbox;
+}
+
+.searchbox--shows {
+  @include searchbox;
+  @include searchbox--gray;
+}
+
+.searchbox--chrome {
+  @include searchbox;
+  @include searchbox--gray;
+  @include searchbox--slim;
+}
 
  #login-register iframe {
     border: none;

app/styles/_icons.scss

@@ -252,8 +252,8 @@ i.fa-circle-o-notch.fa-spin {
 }
 
 .icon--search {
-  width: 21px;
-  height: 21px;
+  width: 20px;
+  height: 23px;  
 }
 
 .icon--listenlive {

tests/acceptance/shows-test.js

@@ -35,8 +35,8 @@ test('searching /shows', function(assert) {
   visit('/shows');
 
   andThen(function() {
-    fillIn(".shows-search .searchbox input", "ra");
-    keyEvent('.shows-search .searchbox input', 'keyup');
+    fillIn(".shows-search .searchbox--shows input", "ra");
+    keyEvent('.shows-search .searchbox--shows input', 'keyup');
     andThen(function() {  
       //no longer expect 10 shows
       assert.notEqual(find('.shows-list li').length, 10, "filtering results in less than 10 shows");
@@ -57,8 +57,8 @@ test('searching with no results /shows', function(assert) {
   server.createList('show', 10);
   server.create('bucket', {slug: 'wnyc-shows-featured'});
   visit('/shows');
-  fillIn(".shows-search .searchbox input", "Nonsense Message");
-  keyEvent('.shows-search .searchbox input', 'keyup', 13);
+  fillIn(".shows-search .searchbox--shows input", "Nonsense Message");
+  keyEvent('.shows-search .searchbox--shows input', 'keyup', 13);
 
   //show the no results found message
   andThen(function() {

tests/integration/components/search-box/component-test.js

@@ -9,7 +9,7 @@ test('it renders', function(assert) {
 
   this.render(hbs`{{search-box}}`);
 
-  assert.equal(this.$(".searchbox input").text().trim(), '', "Initial text is empty");
+  assert.equal(this.$("input").text().trim(), '', "Initial text is empty");
 });
 
 test('should trigger external action on keyup', function(assert) {
@@ -23,8 +23,8 @@ test('should trigger external action on keyup', function(assert) {
   this.render(hbs`{{search-box key-up=(action this.filterShows)}}`);
 
   // add text to the search box and trigger a keyup
-  this.$('.searchbox input').val('Show Name');
-  this.$('.searchbox input').keyup();
+  this.$('input').val('Show Name');
+  this.$('input').keyup();
 
 });