3 files changed, 94 insertions, 0 deletions
diff --git a/components/search-bar/_search-bar.scss b/components/search-bar/_search-bar.scss
new file mode 100644
index 0000000..3e2dfad
--- /dev/null
+++ b/components/search-bar/_search-bar.scss
@@ -0,0 +1,61 @@
+$inputHeight: 38px;
+.sdc-search-bar{
+  .search-bar-container{
+    display: flex;
+    align-items: flex-end;
+    .sdc-input-wrapper{
+      flex-grow: 1;
+      .sdc-input{
+        margin: 0;
+        .sdc-input__input{
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
+      }
+    }
+    .search-button{
+      width: $inputHeight;
+      height: $inputHeight - 2;
+      border: solid 1px $light-gray;
+      border-left: none;
+      background-color: $light-silver;
+      cursor: auto;
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+      
+      svg{
+        height: 20px;
+        width: 20px;
+        position: relative;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50% );
+        path{
+          fill: $gray;
+        }
+      }
+    }
+
+    &.not-empty{
+      .sdc-input__input {
+        border-color: $blue;
+      }
+      .search-button{
+        background-color: $lighter-blue;
+        border-color: $blue;
+        cursor: pointer;
+        svg path{
+          fill: $blue;
+        }
+        &:hover {
+            background-color: $light-blue;
+            svg{
+              path{
+                fill: $white;
+              }
+            }
+        }
+      }
+    }
+  }
+}
diff --git a/components/search-bar/search-bar-with-text.html b/components/search-bar/search-bar-with-text.html
new file mode 100644
index 0000000..f623c2f
--- /dev/null
+++ b/components/search-bar/search-bar-with-text.html
@@ -0,0 +1,17 @@
+<div class="sdc-search-bar">
+    <div class="search-bar-container not-empty">
+        <label class="sdc-input__label">search box example:</label>
+        <input class="sdc-input__input" type="text" name="undefined" placeholder="search text">
+        <span class="search-button magnify-button">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+                <use fill="#000" xlink:href="#search-a"/>
+              </g>
+            </svg>
+    </span>
+    </div>
+</div>
+
diff --git a/components/search-bar/search-bar.html b/components/search-bar/search-bar.html
new file mode 100644
index 0000000..d1b9171
--- /dev/null
+++ b/components/search-bar/search-bar.html
@@ -0,0 +1,16 @@
+<div class="sdc-search-bar">
+    <div class="search-bar-container">
+        <label class="sdc-input__label">search box example:</label>
+        <input class="sdc-input__input" type="text" name="undefined" placeholder="search text">
+        <span class="search-button magnify-button">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+                <use fill="#000" xlink:href="#search-a"/>
+              </g>
+            </svg>
+        </span>
+    </div>
+</div>