@comicrelief/component-library 8.19.0 → 8.20.0

package/README.md

@@ -46,7 +46,7 @@ _Test will run through all Jest tests and watch for any changes on snapshots._
 
 To update snapshots with desired changes brought in through your work:
 ```
-$ yarn test:unit-update
+$ yarn test:unit:update
 ```
 
 To publish
@@ -64,4 +64,4 @@ yarn playwright install
 Run the tests:
 ```
 yarn test:e2e:local
-```
+```

package/dist/components/Atoms/Input/Input.js

@@ -16,51 +16,56 @@ var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 // This seems to get a decent approximation of the necessary width (without resorting to measuring
 //  the element with JS)
 const getPrefixWidth = prefixLength => "calc(1.5rem + (".concat(prefixLength, " * 0.5rem))");
-const InputField = _styledComponents.default.input.withConfig({
-  displayName: "Input__InputField",
+const InputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Input__InputWrapper",
   componentId: "sc-bcqy1o-0"
-})(["", ""], _ref => {
+})(["position:relative;font-size:", ";"], _ref => {
   let {
-    theme,
-    error,
-    prefixLength
+    theme
   } = _ref;
-  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:1rem 2.4rem 1rem 1.5rem;", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}"], prefixLength > 0 ? "padding-left: ".concat(getPrefixWidth(prefixLength), ";") : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'));
+  return theme.fontSize('m');
 });
-const InputWrapper = _styledComponents.default.div.withConfig({
-  displayName: "Input__InputWrapper",
+const InputFieldContainer = _styledComponents.default.div.withConfig({
+  displayName: "Input__InputFieldContainer",
   componentId: "sc-bcqy1o-1"
-})(["position:relative;font-size:", ";", " @media ", "{max-width:290px;}"], _ref2 => {
+})(["position:relative;width:100%;display:flex;justify-content:flex-end;align-items:center;", ""], _ref2 => {
   let {
+    maxPxWidthMediumBreakpoint,
+    maxPxWidthLargeBreakpoint,
     theme
   } = _ref2;
-  return theme.fontSize('m');
-}, _ref3 => {
+  return (0, _styledComponents.css)(["@media ", "{", "}@media ", "{", "}"], theme.allBreakpoints('M'), maxPxWidthMediumBreakpoint && "max-width: ".concat(maxPxWidthMediumBreakpoint, "px;"), theme.allBreakpoints('L'), maxPxWidthLargeBreakpoint && "max-width: ".concat(maxPxWidthLargeBreakpoint, "px;"));
+});
+const InputField = _styledComponents.default.input.withConfig({
+  displayName: "Input__InputField",
+  componentId: "sc-bcqy1o-2"
+})(["", ""], _ref3 => {
   let {
-    error
+    theme,
+    error,
+    prefixLength
   } = _ref3;
-  return error && (0, _styledComponents.css)(["&::after{content:'';position:absolute;top:50%;right:0.5rem;transform:translateY(-50%);background:url(", ") center/contain no-repeat;--iconSize:19px;width:var(--iconSize);height:var(--iconSize);z-index:3;}"], _errorAlertIconRed.default);
-}, _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.allBreakpoints('M');
+  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:1rem 2.4rem 1rem 1.5rem;", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}"], prefixLength > 0 ? "padding-left: ".concat(getPrefixWidth(prefixLength), ";") : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'));
 });
+const ErrorIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Input__ErrorIconWrapper",
+  componentId: "sc-bcqy1o-3"
+})(["position:absolute;right:0.6rem;background:url(", ") center/contain no-repeat;--iconSize:19px;width:var(--iconSize);height:var(--iconSize);z-index:3;"], _errorAlertIconRed.default);
 const Prefix = _styledComponents.default.div.withConfig({
   displayName: "Input__Prefix",
-  componentId: "sc-bcqy1o-2"
-})(["position:absolute;left:0;top:0;", " display:flex;height:100%;width:", ";justify-content:center;align-items:center;color:", ";font-weight:700;font-size:inherit;margin-left:2px;"], (0, _zIndex.default)('high'), _ref5 => {
+  componentId: "sc-bcqy1o-4"
+})(["position:absolute;left:0;top:0;", " display:flex;height:100%;width:", ";justify-content:center;align-items:center;color:", ";font-weight:700;font-size:inherit;margin-left:2px;"], (0, _zIndex.default)('high'), _ref4 => {
   let {
     length
-  } = _ref5;
+  } = _ref4;
   return getPrefixWidth(length);
-}, _ref6 => {
+}, _ref5 => {
   let {
     theme
-  } = _ref6;
+  } = _ref5;
   return theme.color('grey_dark');
 });
-const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const Input = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     errorMsg = '',
     id,
@@ -73,8 +78,10 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     labelProps = {},
     prefix = '',
     optional = null,
+    maxPxWidthMediumBreakpoint,
+    maxPxWidthLargeBreakpoint,
     ...rest
-  } = _ref7;
+  } = _ref6;
   return /*#__PURE__*/_react.default.createElement(_Label.default, Object.assign({
     className: className,
     htmlFor: id,
@@ -86,16 +93,19 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     error: Boolean(errorMsg)
   }, prefix && /*#__PURE__*/_react.default.createElement(Prefix, {
     length: prefix.length
-  }, prefix), /*#__PURE__*/_react.default.createElement(InputField, Object.assign({
+  }, prefix), /*#__PURE__*/_react.default.createElement(InputFieldContainer, {
+    maxPxWidthMediumBreakpoint: maxPxWidthMediumBreakpoint,
+    maxPxWidthLargeBreakpoint: maxPxWidthLargeBreakpoint
+  }, /*#__PURE__*/_react.default.createElement(InputField, Object.assign({
     id: id,
     type: type,
     placeholder: placeholder,
-    error: !!errorMsg,
+    error: Boolean(errorMsg),
     "aria-describedby": hasAria ? id : undefined,
     ref: ref,
     prefixLength: prefix.length,
     required: optional === false
-  }, rest))), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
+  }, rest)), errorMsg && /*#__PURE__*/_react.default.createElement(ErrorIconWrapper, null))), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
     size: "sm",
     weight: "bold",
     "data-test": "error-message"
@@ -119,6 +129,8 @@ Input.propTypes = {
   // (as `rest` is not spread on the outermost component)
   className: _propTypes.default.string,
   prefix: _propTypes.default.string,
-  optional: _propTypes.default.bool
+  optional: _propTypes.default.bool,
+  maxPxWidthMediumBreakpoint: _propTypes.default.number,
+  maxPxWidthLargeBreakpoint: _propTypes.default.number
 };
 var _default = exports.default = Input;

package/dist/components/Atoms/Input/Input.md

@@ -105,3 +105,17 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
       }
     }}
   />
+```
+
+```js
+  <h4>Input with responsive max width</h4>
+  <Input
+    name="responsive-width"
+    placeholder="I'm responsive"
+    type="text"
+    label="Responsive Width Input at M and L breakpoints"
+    id="input-example-7"
+    maxPxWidthMediumBreakpoint={150}
+    maxPxWidthLargeBreakpoint={250}
+  />
+```

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

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

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

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

@@ -13,5 +13,5 @@ it('renders correctly', () => {
     },
     value: ""
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c4 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c7 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n    }\n\n    .c9 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 2.4rem 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c9:focus {\n      border: 1px solid #666;\n    }\n\n    .c8 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c0 {\n      width: 100%;\n      max-width: 1440px;\n      margin: auto;\n    }\n\n    .c1 {\n      margin: 1rem auto;\n      padding: 0 calc((4 * 0.25rem));\n    }\n\n    .c2 {\n      margin: 4rem auto;\n      width: 100%;\n      border-bottom: 4px solid #E52630;\n      overflow: hidden;\n    }\n\n    .c3 {\n      width: 100%;\n      padding: 0 0.5rem;\n    }\n\n    .c5 input {\n      padding: 13px 0;\n      margin: 0;\n      max-width: 100%;\n      border: 0;\n      outline: #E52630;\n      background: none;\n    }\n\n    .c5 input:focus {\n      border: 0;\n    }\n\n    @media (min-width:740px) {\n      .c8 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c5 input {\n        height: 100px;\n        font-size: 3rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <div\n        className=\"c1\"\n      >\n        <div\n          className=\"c2\"\n          role=\"search\"\n        >\n          <div\n            className=\"c3\"\n          >\n            <label\n              className=\"c4 c5\"\n              htmlFor=\"search\"\n            >\n              <span\n                className=\"c6 c7\"\n                color=\"inherit\"\n                dangerouslySetInnerHTML={\n                  Object {\n                    \"__html\": \"Search\",\n                  }\n                }\n                size=\"s\"\n              />\n              <div\n                className=\"c8\"\n              >\n                \n                <input\n                  aria-describedby=\"search\"\n                  className=\"c9\"\n                  id=\"search\"\n                  name=\"search\"\n                  onChange={[Function]}\n                  placeholder=\"\"\n                  required={false}\n                  role=\"searchbox\"\n                  type=\"text\"\n                  value=\"\"\n                />\n              </div>\n              \n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c4 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c7 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n    }\n\n    .c8 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c9 {\n      position: relative;\n      width: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: end;\n      -webkit-justify-content: flex-end;\n      -ms-flex-pack: end;\n      justify-content: flex-end;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c10 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 2.4rem 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10:focus {\n      border: 1px solid #666;\n    }\n\n    .c0 {\n      width: 100%;\n      max-width: 1440px;\n      margin: auto;\n    }\n\n    .c1 {\n      margin: 1rem auto;\n      padding: 0 calc((4 * 0.25rem));\n    }\n\n    .c2 {\n      margin: 4rem auto;\n      width: 100%;\n      border-bottom: 4px solid #E52630;\n      overflow: hidden;\n    }\n\n    .c3 {\n      width: 100%;\n      padding: 0 0.5rem;\n    }\n\n    .c5 input {\n      padding: 13px 0;\n      margin: 0;\n      max-width: 100%;\n      border: 0;\n      outline: #E52630;\n      background: none;\n    }\n\n    .c5 input:focus {\n      border: 0;\n    }\n\n    @media (min-width:740px) {\n\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    @media (min-width:740px) {\n      .c5 input {\n        height: 100px;\n        font-size: 3rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <div\n        className=\"c1\"\n      >\n        <div\n          className=\"c2\"\n          role=\"search\"\n        >\n          <div\n            className=\"c3\"\n          >\n            <label\n              className=\"c4 c5\"\n              htmlFor=\"search\"\n            >\n              <span\n                className=\"c6 c7\"\n                color=\"inherit\"\n                dangerouslySetInnerHTML={\n                  Object {\n                    \"__html\": \"Search\",\n                  }\n                }\n                size=\"s\"\n              />\n              <div\n                className=\"c8\"\n              >\n                \n                <div\n                  className=\"c9\"\n                >\n                  <input\n                    aria-describedby=\"search\"\n                    className=\"c10\"\n                    id=\"search\"\n                    name=\"search\"\n                    onChange={[Function]}\n                    placeholder=\"\"\n                    required={false}\n                    role=\"searchbox\"\n                    type=\"text\"\n                    value=\"\"\n                  />\n                  \n                </div>\n              </div>\n              \n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n  ");
 });