@comicrelief/component-library 8.19.0 → 8.20.0

package/src/components/Atoms/Input/input.test.js

@@ -42,7 +42,29 @@ it('renders correctly', () => {
       font-weight: normal;
     }
 
+    .c3 {
+      position: relative;
+      font-size: 1.25rem;
+    }
+
     .c4 {
+      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;
+    }
+
+    .c5 {
       position: relative;
       box-sizing: border-box;
       width: 100%;
@@ -62,31 +84,164 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c4:focus {
+    .c5:focus {
       border: 1px solid #666;
     }
 
+    @media (min-width:740px) {
+
+    }
+
+    @media (min-width:1024px) {
+
+    }
+
+    <label
+      className="c0"
+      htmlFor="Accessibility info go here"
+    >
+      <span
+        className="c1 c2"
+        color="inherit"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Label",
+          }
+        }
+        size="s"
+      />
+      <div
+        className="c3"
+      >
+        
+        <div
+          className="c4"
+        >
+          <input
+            aria-describedby="Accessibility info go here"
+            className="c5"
+            id="Accessibility info go here"
+            name="fullname"
+            placeholder="This is the hint text"
+            required={false}
+            type="text"
+          />
+          
+        </div>
+      </div>
+      
+    </label>
+  `);
+});
+
+it('renders with responsive max widths correctly', () => {
+  const tree = renderWithTheme(
+    <Input
+      name="responsive-width"
+      placeholder="This input has responsive max widths"
+      type="text"
+      label="Responsive Width Input"
+      id="input-example-7"
+      maxPxWidthMediumBreakpoint={150}
+      maxPxWidthLargeBreakpoint={250}
+    />
+  ).toJSON();
+
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c0 {
+      width: 100%;
+      position: relative;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      color: #5C5C5E;
+    }
+
+    .c2 {
+      margin-bottom: 0.5rem;
+      font-weight: normal;
+    }
+
     .c3 {
       position: relative;
       font-size: 1.25rem;
     }
 
+    .c4 {
+      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;
+    }
+
+    .c5 {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      height: 48px;
+      padding: 1rem 2.4rem 1rem 1.5rem;
+      background-color: #F4F3F5;
+      border: 1px solid;
+      border-color: #E1E2E3;
+      box-shadow: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      color: #000000;
+      border-radius: 0.5rem;
+      font-size: inherit;
+      z-index: 2;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c5:focus {
+      border: 1px solid #666;
+    }
+
     @media (min-width:740px) {
-      .c3 {
-        max-width: 290px;
+      .c4 {
+        max-width: 150px;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c4 {
+        max-width: 250px;
       }
     }
 
     <label
       className="c0"
-      htmlFor="Accessibility info go here"
+      htmlFor="input-example-7"
     >
       <span
         className="c1 c2"
         color="inherit"
         dangerouslySetInnerHTML={
           Object {
-            "__html": "Label",
+            "__html": "Responsive Width Input",
           }
         }
         size="s"
@@ -95,15 +250,20 @@ it('renders correctly', () => {
         className="c3"
       >
         
-        <input
-          aria-describedby="Accessibility info go here"
+        <div
           className="c4"
-          id="Accessibility info go here"
-          name="fullname"
-          placeholder="This is the hint text"
-          required={false}
-          type="text"
-        />
+        >
+          <input
+            aria-describedby="input-example-7"
+            className="c5"
+            id="input-example-7"
+            name="responsive-width"
+            placeholder="This input has responsive max widths"
+            required={false}
+            type="text"
+          />
+          
+        </div>
       </div>
       
     </label>

package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap

@@ -27,7 +27,29 @@ exports[`renders correctly with no value and no options 1`] = `
   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%;
@@ -47,23 +69,20 @@ exports[`renders correctly with no value and no options 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;
 }
 
 @media (min-width:740px) {
-  .c4 {
-    max-width: 290px;
-  }
+
+}
+
+@media (min-width:1024px) {
+
 }
 
 <div
@@ -88,18 +107,23 @@ exports[`renders correctly with no value and no options 1`] = `
       className="c4"
     >
       
-      <input
-        aria-describedby="text-input-with-dropdown"
-        autoComplete="off"
+      <div
         className="c5"
-        id="text-input-with-dropdown"
-        name="query"
-        onChange={[Function]}
-        placeholder=""
-        required={false}
-        type="text"
-        value=""
-      />
+      >
+        <input
+          aria-describedby="text-input-with-dropdown"
+          autoComplete="off"
+          className="c6"
+          id="text-input-with-dropdown"
+          name="query"
+          onChange={[Function]}
+          placeholder=""
+          required={false}
+          type="text"
+          value=""
+        />
+        
+      </div>
     </div>
     
   </label>
@@ -133,7 +157,29 @@ exports[`renders correctly with value and no options 1`] = `
   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%;
@@ -153,23 +199,20 @@ exports[`renders correctly with value and no options 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;
 }
 
 @media (min-width:740px) {
-  .c4 {
-    max-width: 290px;
-  }
+
+}
+
+@media (min-width:1024px) {
+
 }
 
 <div
@@ -194,18 +237,23 @@ exports[`renders correctly with value and no options 1`] = `
       className="c4"
     >
       
-      <input
-        aria-describedby="text-input-with-dropdown"
-        autoComplete="off"
+      <div
         className="c5"
-        id="text-input-with-dropdown"
-        name="query"
-        onChange={[Function]}
-        placeholder=""
-        required={false}
-        type="text"
-        value="bikes"
-      />
+      >
+        <input
+          aria-describedby="text-input-with-dropdown"
+          autoComplete="off"
+          className="c6"
+          id="text-input-with-dropdown"
+          name="query"
+          onChange={[Function]}
+          placeholder=""
+          required={false}
+          type="text"
+          value="bikes"
+        />
+        
+      </div>
     </div>
     
   </label>
@@ -239,7 +287,29 @@ exports[`renders correctly with value and options 1`] = `
   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%;
@@ -259,20 +329,15 @@ exports[`renders correctly with value and options 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;
 }
 
-.c6 {
+.c7 {
   z-index: 3;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   position: absolute;
@@ -285,34 +350,36 @@ exports[`renders correctly with value and options 1`] = `
   width: 100%;
 }
 
-.c7 {
+.c8 {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-.c8 {
+.c9 {
   padding: 0.5rem;
 }
 
-.c9 {
+.c10 {
   cursor: pointer;
   border-top: 1px solid #F4F3F5;
 }
 
-.c9:hover,
-.c9:focus {
+.c10:hover,
+.c10:focus {
   background-color: #F4F3F5;
 }
 
 @media (min-width:740px) {
-  .c4 {
-    max-width: 290px;
-  }
+
+}
+
+@media (min-width:1024px) {
+
 }
 
 @media (min-width:740px) {
-  .c6 {
+  .c7 {
     max-width: 500px;
   }
 }
@@ -339,32 +406,37 @@ exports[`renders correctly with value and options 1`] = `
       className="c4"
     >
       
-      <input
-        aria-describedby="text-input-with-dropdown"
-        autoComplete="off"
+      <div
         className="c5"
-        id="text-input-with-dropdown"
-        name="query"
-        onChange={[Function]}
-        placeholder=""
-        required={false}
-        type="text"
-        value="c"
-      />
+      >
+        <input
+          aria-describedby="text-input-with-dropdown"
+          autoComplete="off"
+          className="c6"
+          id="text-input-with-dropdown"
+          name="query"
+          onChange={[Function]}
+          placeholder=""
+          required={false}
+          type="text"
+          value="c"
+        />
+        
+      </div>
     </div>
     
   </label>
   <div
-    className="c6 TextInputWithDropdown__options"
+    className="c7 TextInputWithDropdown__options"
   >
     <ul
-      className="c7"
+      className="c8"
       onBlur={[Function]}
       role="listbox"
     >
       <li
         aria-selected={false}
-        className="c8 c9"
+        className="c9 c10"
         id="option-0"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -381,7 +453,7 @@ exports[`renders correctly with value and options 1`] = `
       </li>
       <li
         aria-selected={false}
-        className="c8 c9"
+        className="c9 c10"
         id="option-1"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -398,7 +470,7 @@ exports[`renders correctly with value and options 1`] = `
       </li>
       <li
         aria-selected={false}
-        className="c8 c9"
+        className="c9 c10"
         id="option-2"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -415,7 +487,7 @@ exports[`renders correctly with value and options 1`] = `
       </li>
       <li
         aria-selected={false}
-        className="c8 c9"
+        className="c9 c10"
         id="option-3"
         onClick={[Function]}
         onKeyPress={[Function]}

package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -27,7 +27,29 @@ exports[`renders correctly 1`] = `
   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%;
@@ -47,23 +69,20 @@ 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;
 }
 
 @media (min-width:740px) {
-  .c4 {
-    max-width: 290px;
-  }
+
+}
+
+@media (min-width:1024px) {
+
 }
 
 <div
@@ -88,18 +107,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>