@comicrelief/component-library 8.18.4 → 8.19.1

package/src/components/Atoms/Label/Label.js

@@ -7,12 +7,12 @@ import spacing from '../../../theme/shared/spacing';
 import hideVisually from '../../../theme/shared/hideVisually';
 
 const LabelElement = styled.label`
-  position: relative; 
+  width: 100%;
+  position: relative;
   display: flex;
   flex-direction: column;
-  color: ${({ theme }) => theme.color('grey_label')};
-  width: 100%;
-  
+  color: ${({ theme, errorMsg }) => (errorMsg ? theme.color('red') : theme.color('grey_label'))};
+
   ${({ optional, theme }) => optional === true && `
   :after {
     position: absolute;
@@ -23,9 +23,12 @@ const LabelElement = styled.label`
     font-size: ${theme.fontSize('s')};
   }`}
 `;
-const VisibleText = styled(Text).attrs({ weight: 'bold' })`
+
+const VisibleText = styled(Text)`
   margin-bottom: ${spacing('sm')};
+  font-weight: normal;
 `;
+
 const HiddenText = styled(Text)`${hideVisually}`;
 
 // eslint-disable-next-line react/prop-types
@@ -51,13 +54,20 @@ const Label = ({
   label,
   hideLabel = false,
   optional = null,
+  errorMsg = '',
   ...rest
 }) => (
-  <LabelElement {...rest} optional={optional}>
-    <LabelText label={label} hideLabel={hideLabel} />
+  <LabelElement
+    optional={optional}
+    errorMsg={errorMsg}
+    {...rest}
+  >
+    <LabelText
+      label={label}
+      hideLabel={hideLabel}
+    />
     {children}
   </LabelElement>
-
 );
 
 Label.propTypes = {
@@ -67,7 +77,13 @@ Label.propTypes = {
   ]).isRequired,
   hideLabel: PropTypes.bool,
   children: PropTypes.node,
-  optional: PropTypes.bool
+  optional: PropTypes.bool,
+  errorMsg: PropTypes.string
+};
+
+LabelElement.propTypes = {
+  optional: PropTypes.bool,
+  errorMsg: PropTypes.string
 };
 
 LabelText.propTypes = {

package/src/components/Atoms/Select/__snapshots__/Select.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;
 }
 
 .c0 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -20,11 +20,11 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
 .c2 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
 .c3 {

package/src/components/Atoms/TextArea/TextArea.test.js

@@ -20,12 +20,12 @@ it('renders correctly', () => {
       font-size: 1rem;
       line-height: 1rem;
       text-transform: inherit;
-      font-weight: bold;
       line-height: normal;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
     .c0 {
+      width: 100%;
       position: relative;
       display: -webkit-box;
       display: -webkit-flex;
@@ -35,11 +35,11 @@ it('renders correctly', () => {
       -ms-flex-direction: column;
       flex-direction: column;
       color: #5C5C5E;
-      width: 100%;
     }
 
     .c2 {
       margin-bottom: 0.5rem;
+      font-weight: normal;
     }
 
     .c3 {

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

@@ -5,12 +5,12 @@ exports[`renders correctly with no value and no options 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 with no value and no options 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 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;
 }
@@ -66,6 +83,12 @@ exports[`renders correctly with no value and no options 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c6 {
+    max-width: 290px;
+  }
+}
+
 <div
   className="c0 TextInputWithDropdown"
   onKeyDown={[Function]}
@@ -88,18 +111,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>
@@ -111,12 +139,12 @@ exports[`renders correctly with value and no options 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;
@@ -126,19 +154,41 @@ exports[`renders correctly with value and no options 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;
@@ -153,15 +203,10 @@ 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;
 }
@@ -172,6 +217,12 @@ exports[`renders correctly with value and no options 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c6 {
+    max-width: 290px;
+  }
+}
+
 <div
   className="c0 TextInputWithDropdown"
   onKeyDown={[Function]}
@@ -194,18 +245,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>
@@ -214,15 +270,6 @@ exports[`renders correctly with value and no options 1`] = `
 
 exports[`renders correctly with value and options 1`] = `
 .c2 {
-  font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
-  font-weight: bold;
-  line-height: normal;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-}
-
-.c10 {
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
@@ -231,6 +278,7 @@ exports[`renders correctly with value and options 1`] = `
 }
 
 .c1 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -240,19 +288,41 @@ exports[`renders correctly with value and options 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;
@@ -267,20 +337,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;
@@ -293,23 +358,23 @@ 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;
 }
 
@@ -321,6 +386,12 @@ exports[`renders correctly with value and options 1`] = `
 
 @media (min-width:740px) {
   .c6 {
+    max-width: 290px;
+  }
+}
+
+@media (min-width:740px) {
+  .c7 {
     max-width: 500px;
   }
 }
@@ -347,32 +418,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]}
@@ -380,7 +456,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c10"
+          className="c2"
           color="inherit"
           size="s"
         >
@@ -389,7 +465,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]}
@@ -397,7 +473,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c10"
+          className="c2"
           color="inherit"
           size="s"
         >
@@ -406,7 +482,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]}
@@ -414,7 +490,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c10"
+          className="c2"
           color="inherit"
           size="s"
         >
@@ -423,7 +499,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]}
@@ -431,7 +507,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c10"
+          className="c2"
           color="inherit"
           size="s"
         >