@comicrelief/component-library 8.18.4 → 8.19.0

package/src/components/Atoms/Input/assets/error-alert-icon-red.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2432_14605)">
+<path d="M12 0.5C5.6585 0.5 0.5 5.659 0.5 12C0.5 18.341 5.6585 23.5 12 23.5C18.3415 23.5 23.5 18.341 23.5 12C23.5 5.659 18.3415 0.5 12 0.5ZM10.5 6C10.5 5.1715 11.1715 4.5 12 4.5C12.8285 4.5 13.5 5.1715 13.5 6V13C13.5 13.8285 12.8285 14.5 12 14.5C11.1715 14.5 10.5 13.8285 10.5 13V6ZM12 19.5C10.897 19.5 10 18.603 10 17.5C10 16.397 10.897 15.5 12 15.5C13.103 15.5 14 16.397 14 17.5C14 18.603 13.103 19.5 12 19.5Z" fill="#E52630"/>
+</g>
+<defs>
+<clipPath id="clip0_2432_14605">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/Atoms/Input/input.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;
     }
 
     .c4 {
@@ -47,7 +47,7 @@ it('renders correctly', () => {
       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;
@@ -72,7 +72,7 @@ it('renders correctly', () => {
     }
 
     @media (min-width:740px) {
-      .c4 {
+      .c3 {
         max-width: 290px;
       }
     }

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,11 +20,11 @@ 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;
 }
 
 .c5 {
@@ -32,7 +32,7 @@ exports[`renders correctly with no value and no options 1`] = `
   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;
@@ -61,7 +61,7 @@ exports[`renders correctly with no value and no options 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
+  .c4 {
     max-width: 290px;
   }
 }
@@ -111,12 +111,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,11 +126,11 @@ 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;
 }
 
 .c5 {
@@ -138,7 +138,7 @@ exports[`renders correctly with value and no options 1`] = `
   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;
@@ -167,7 +167,7 @@ exports[`renders correctly with value and no options 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
+  .c4 {
     max-width: 290px;
   }
 }
@@ -214,15 +214,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 +222,7 @@ exports[`renders correctly with value and options 1`] = `
 }
 
 .c1 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -240,11 +232,11 @@ 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;
 }
 
 .c5 {
@@ -252,7 +244,7 @@ exports[`renders correctly with value and options 1`] = `
   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;
@@ -314,7 +306,7 @@ exports[`renders correctly with value and options 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
+  .c4 {
     max-width: 290px;
   }
 }
@@ -380,7 +372,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c10"
+          className="c2"
           color="inherit"
           size="s"
         >
@@ -397,7 +389,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c10"
+          className="c2"
           color="inherit"
           size="s"
         >
@@ -414,7 +406,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c10"
+          className="c2"
           color="inherit"
           size="s"
         >
@@ -431,7 +423,7 @@ exports[`renders correctly with value and options 1`] = `
         tabIndex="-1"
       >
         <span
-          className="c10"
+          className="c2"
           color="inherit"
           size="s"
         >

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,11 +20,11 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
 .c3 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
 .c5 {
@@ -32,7 +32,7 @@ exports[`renders correctly 1`] = `
   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;
@@ -61,7 +61,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
+  .c4 {
     max-width: 290px;
   }
 }

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 {
@@ -56,7 +56,7 @@ it('renders correctly', () => {
       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;
@@ -117,7 +117,7 @@ it('renders correctly', () => {
     }
 
     @media (min-width:740px) {
-      .c9 {
+      .c8 {
         max-width: 290px;
       }
     }

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,11 +20,11 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
 .c3 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
 .c5 {
@@ -32,7 +32,7 @@ exports[`renders correctly 1`] = `
   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;
@@ -61,7 +61,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
+  .c4 {
     max-width: 290px;
   }
 }

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -37,12 +37,12 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
-  font-weight: bold;
   line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
 .c18 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -52,11 +52,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
 .c21 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
 .c23 {
@@ -64,7 +64,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   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;
@@ -415,7 +415,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 }
 
 @media (min-width:740px) {
-  .c23 {
+  .c22 {
     max-width: 290px;
   }
 }
@@ -713,12 +713,12 @@ exports[`Monthly donation 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;
 }
 
 .c19 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -728,11 +728,11 @@ exports[`Monthly donation renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
 .c22 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
 .c24 {
@@ -740,7 +740,7 @@ exports[`Monthly donation renders correctly 1`] = `
   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;
@@ -1056,7 +1056,7 @@ exports[`Monthly donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c24 {
+  .c23 {
     max-width: 290px;
   }
 }
@@ -1356,12 +1356,12 @@ exports[`Single donation 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;
 }
 
 .c12 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1371,11 +1371,11 @@ exports[`Single donation renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
 .c15 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
 .c17 {
@@ -1383,7 +1383,7 @@ exports[`Single donation renders correctly 1`] = `
   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;
@@ -1685,7 +1685,7 @@ exports[`Single donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c17 {
+  .c16 {
     max-width: 290px;
   }
 }
@@ -2070,12 +2070,12 @@ exports[`Single donation with no Money Buys 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;
 }
 
 .c12 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2085,11 +2085,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
 .c15 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
 .c17 {
@@ -2097,7 +2097,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   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;
@@ -2309,7 +2309,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c17 {
+  .c16 {
     max-width: 290px;
   }
 }