feat(search): Add clear icon for search.

Add example behavior to search demo.
Close #200.

docs/demo/assets/scripts/interactions.js

@@ -1,5 +1,7 @@
 // /* Demo Dropdowns and Dropups (button-dropdown.html) */
 $(document).ready(function() {
+// end
+
     $("#dropdown-example").click(function(e){
         e.preventDefault();
         $("#dropdown-example-list").toggle();
@@ -8,4 +10,23 @@ $(document).ready(function() {
         e.preventDefault();
         $("#dropup-example-list").toggle();
     });
+
+    $(".dc-search-form input").on("input",function(){
+        if($(this).val() != "") {
+            $(this).siblings(".dc-search-form__btn").find(".dc-icon").removeClass("dc-icon--search");
+            $(this).siblings(".dc-search-form__btn").find(".dc-icon").addClass("dc-icon--clear");
+        }
+        else {
+            $(this).siblings(".dc-search-form__btn").find(".dc-icon").addClass("dc-icon--search");
+            $(this).siblings(".dc-search-form__btn").find(".dc-icon").removeClass("dc-icon--clear");
+        }
+    });
+
+    $(".dc-search-form .dc-icon").click(function(){
+        $(this).parent().siblings(".dc-input").val("");
+        $(this).addClass("dc-icon--search");
+        $(this).removeClass("dc-icon--clear");
+    });
+
+// end
 });

docs/demo/materials/03-atoms/icons.html

@@ -33,16 +33,17 @@
     <i class="dc-icon dc-icon--arrow-left"><span>arrow-left</span></i>
     <i class="dc-icon dc-icon--arrow-right"><span>arrow-right</span></i>
     <i class="dc-icon dc-icon--check"><span>check</span></i>
-    <i class="dc-icon dc-icon--cog"><span>cog</span></i>
+    <i class="dc-icon dc-icon--clear"><span>clear</span></i>
     <i class="dc-icon dc-icon--close"><span>close</span></i>
+    <i class="dc-icon dc-icon--cog"><span>cog</span></i>
+    <i class="dc-icon dc-icon--drag"><span>drag</span></i>
     <i class="dc-icon dc-icon--eye"><span>eye</span></i>
     <i class="dc-icon dc-icon--history"><span>history</span></i>
     <i class="dc-icon dc-icon--info-circle"><span>info-circle</span></i>
     <i class="dc-icon dc-icon--lock"><span>lock</span></i>
     <i class="dc-icon dc-icon--more"><span>more</span></i>
     <i class="dc-icon dc-icon--undo"><span>undo</span></i>
     <i class="dc-icon dc-icon--redo"><span>redo</span></i>
-    <i class="dc-icon dc-icon--drag"><span>drag</span></i>
     <i class="dc-icon dc-icon--contact dc-icon--interactive"><span>contact</span></i>
     <i class="dc-icon dc-icon--menu dc-icon--interactive"><span>menu</span></i>
     <i class="dc-icon dc-icon--help dc-icon--interactive"><span>help</span></i>
@@ -55,6 +56,3 @@
     <i class="dc-icon dc-icon--success dc-icon--interactive"><span>success</span></i>
     <i class="dc-icon dc-icon--warning dc-icon--interactive"><span>warning</span></i>
 </div>
-
-
-

docs/demo/materials/04-molecules/05-search-form.html

@@ -17,7 +17,7 @@
 <div class="dc-search-form">
     <input class="dc-input dc-search-form__input" id="searchWithImages" type="search" placeholder="Search...">
     <button class="dc-btn dc-search-form__btn">
-        <i class="dc-icon dc-icon--search dc-icon--interactive"></i>
+        <i id="searchwithImagesIcon" class="dc-icon dc-icon--search dc-icon--interactive"></i>
     </button>
     <ul class="dc-list dc-suggest">
         {{#each autosuggest.suggestions}}

src/styles/_generated/_icon.scss

@@ -37,72 +37,75 @@
     @if $filename == check {
     $char: "\E004";
 }
-    @if $filename == close {
+    @if $filename == clear {
     $char: "\E005";
 }
-    @if $filename == cog {
+    @if $filename == close {
     $char: "\E006";
 }
-    @if $filename == contact {
+    @if $filename == cog {
     $char: "\E007";
 }
-    @if $filename == drag {
+    @if $filename == contact {
     $char: "\E008";
 }
-    @if $filename == error {
+    @if $filename == drag {
     $char: "\E009";
 }
-    @if $filename == eye {
+    @if $filename == error {
     $char: "\E00A";
 }
-    @if $filename == help {
+    @if $filename == eye {
     $char: "\E00B";
 }
-    @if $filename == history {
+    @if $filename == help {
     $char: "\E00C";
 }
-    @if $filename == info-circle {
+    @if $filename == history {
     $char: "\E00D";
 }
-    @if $filename == info {
+    @if $filename == info-circle {
     $char: "\E00E";
 }
-    @if $filename == lock {
+    @if $filename == info {
     $char: "\E00F";
 }
-    @if $filename == menu {
+    @if $filename == lock {
     $char: "\E010";
 }
-    @if $filename == more {
+    @if $filename == menu {
     $char: "\E011";
 }
-    @if $filename == pencil {
+    @if $filename == more {
     $char: "\E012";
 }
-    @if $filename == play {
+    @if $filename == pencil {
     $char: "\E013";
 }
-    @if $filename == redo {
+    @if $filename == play {
     $char: "\E014";
 }
-    @if $filename == search {
+    @if $filename == redo {
     $char: "\E015";
 }
-    @if $filename == success {
+    @if $filename == search {
     $char: "\E016";
 }
-    @if $filename == trash {
+    @if $filename == success {
     $char: "\E017";
 }
-    @if $filename == undo {
+    @if $filename == trash {
     $char: "\E018";
 }
-    @if $filename == user {
+    @if $filename == undo {
     $char: "\E019";
 }
-    @if $filename == warning {
+    @if $filename == user {
     $char: "\E01A";
 }
+    @if $filename == warning {
+    $char: "\E01B";
+}
 
 @return $char;
 }
@@ -128,6 +131,11 @@
         content: dc-icon-char(check);
     }
 }
+@mixin dc-icon--clear {
+    &:before {
+        content: dc-icon-char(clear);
+    }
+}
 @mixin dc-icon--close {
     &:before {
         content: dc-icon-char(close);
@@ -272,6 +280,10 @@
         @include dc-icon--check;
     }
 
+    .dc-icon--clear {
+        @include dc-icon--clear;
+    }
+
     .dc-icon--close {
         @include dc-icon--close;
     }

src/styles/molecules/_search-form.scss

@@ -35,7 +35,6 @@
     font-size: 1.6rem;
 }
 
-
 @mixin dc-search-form__btn__icon {
     display: block;
     margin-right: 0;