@comicrelief/component-library 8.18.4 → 8.19.1

package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.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="school-lookup"
-        autoComplete="off"
+      <div
         className="c5"
-        defaultValue=""
-        id="school-lookup"
-        name="school-lookup"
-        onChange={[Function]}
-        placeholder="Type to start search"
-        required={false}
-        type="text"
-      />
+      >
+        <input
+          aria-describedby="school-lookup"
+          autoComplete="off"
+          className="c6"
+          defaultValue=""
+          id="school-lookup"
+          name="school-lookup"
+          onChange={[Function]}
+          placeholder="Type to start search"
+          required={false}
+          type="text"
+        />
+        
+      </div>
     </div>
     
   </label>

package/src/components/Molecules/SearchInput/SearchInput.test.js

@@ -24,6 +24,7 @@ it('renders correctly', () => {
     }
 
     .c4 {
+      width: 100%;
       position: relative;
       display: -webkit-box;
       display: -webkit-flex;
@@ -33,7 +34,6 @@ it('renders correctly', () => {
       -ms-flex-direction: column;
       flex-direction: column;
       color: #5C5C5E;
-      width: 100%;
     }
 
     .c7 {
@@ -51,12 +51,34 @@ it('renders correctly', () => {
       width: 1px;
     }
 
+    .c8 {
+      position: relative;
+      font-size: 1.25rem;
+    }
+
     .c9 {
+      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;
+    }
+
+    .c10 {
       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;
@@ -71,15 +93,10 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c9:focus {
+    .c10:focus {
       border: 1px solid #666;
     }
 
-    .c8 {
-      position: relative;
-      font-size: 1.25rem;
-    }
-
     .c0 {
       width: 100%;
       max-width: 1440px;
@@ -122,6 +139,12 @@ it('renders correctly', () => {
       }
     }
 
+    @media (min-width:740px) {
+      .c10 {
+        max-width: 290px;
+      }
+    }
+
     @media (min-width:740px) {
       .c5 input {
         height: 100px;
@@ -160,18 +183,23 @@ it('renders correctly', () => {
                 className="c8"
               >
                 
-                <input
-                  aria-describedby="search"
+                <div
                   className="c9"
-                  id="search"
-                  name="search"
-                  onChange={[Function]}
-                  placeholder=""
-                  required={false}
-                  role="searchbox"
-                  type="text"
-                  value=""
-                />
+                >
+                  <input
+                    aria-describedby="search"
+                    className="c10"
+                    id="search"
+                    name="search"
+                    onChange={[Function]}
+                    placeholder=""
+                    required={false}
+                    role="searchbox"
+                    type="text"
+                    value=""
+                  />
+                  
+                </div>
               </div>
               
             </label>

package/src/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>