@comicrelief/component-library 8.18.4 → 8.19.1

package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap

@@ -5,12 +5,12 @@ exports[`renders correctly 1`] = `
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
-  font-weight: bold;
   line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
 .c1 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -20,19 +20,41 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
 .c3 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
+}
+
+.c4 {
+  position: relative;
+  font-size: 1.25rem;
 }
 
 .c5 {
+  position: relative;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c6 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
   height: 48px;
-  padding: 1rem 1.5rem;
+  padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
   border-color: #E1E2E3;
@@ -47,15 +69,10 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c5:focus {
+.c6:focus {
   border: 1px solid #666;
 }
 
-.c4 {
-  position: relative;
-  font-size: 1.25rem;
-}
-
 .c0 {
   position: relative;
 }
@@ -66,6 +83,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c6 {
+    max-width: 290px;
+  }
+}
+
 <div
   className="c0 TextInputWithDropdown"
   onKeyDown={[Function]}
@@ -88,18 +111,23 @@ exports[`renders correctly 1`] = `
       className="c4"
     >
       
-      <input
-        aria-describedby="typeahead-test"
-        autoComplete="off"
+      <div
         className="c5"
-        defaultValue=""
-        id="typeahead-test"
-        name="q"
-        onChange={[Function]}
-        placeholder="Type to start searching..."
-        required={false}
-        type="text"
-      />
+      >
+        <input
+          aria-describedby="typeahead-test"
+          autoComplete="off"
+          className="c6"
+          defaultValue=""
+          id="typeahead-test"
+          name="q"
+          onChange={[Function]}
+          placeholder="Type to start searching..."
+          required={false}
+          type="text"
+        />
+        
+      </div>
     </div>
     
   </label>