@comicrelief/component-library 8.44.2 → 8.44.4

package/dist/components/Atoms/Checkbox/Checkbox.test.js

@@ -35,6 +35,11 @@ it('renders correctly', () => {
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       display: -webkit-box;
       display: -webkit-flex;
@@ -112,8 +117,6 @@ it('renders correctly', () => {
         <span />
         <span
           className="c2"
-          color="inherit"
-          size="s"
         >
           Tennis
         </span>
@@ -136,6 +139,11 @@ it('renders correctly', () => {
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       display: -webkit-box;
       display: -webkit-flex;
@@ -213,8 +221,6 @@ it('renders correctly', () => {
         <span />
         <span
           className="c2"
-          color="inherit"
-          size="s"
         >
           Handball
         </span>

package/dist/components/Atoms/ErrorText/__snapshots__/ErrorText.test.js.snap

@@ -19,6 +19,11 @@ exports[`renders correctly 1`] = `
   color: #E52630;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   display: inline-block;
   width: 100%;
@@ -43,8 +48,6 @@ exports[`renders correctly 1`] = `
 
 <span
   className="c0"
-  color="red"
-  size="error"
 >
   <span
     className="c1"

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

@@ -27,6 +27,11 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c1 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       width: 100%;
       position: relative;
@@ -141,7 +146,6 @@ it('renders correctly', () => {
     >
       <span
         className="c1 c2"
-        color="inherit"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Label",
@@ -194,6 +198,11 @@ it('renders with responsive max widths correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c1 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       width: 100%;
       position: relative;
@@ -312,7 +321,6 @@ it('renders with responsive max widths correctly', () => {
     >
       <span
         className="c1 c2"
-        color="inherit"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Responsive Width Input",

package/dist/components/Atoms/RadioButton/RadioButton.test.js

@@ -37,6 +37,11 @@ it('renders correctly', () => {
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c1 {
       background-color: #FFFFFF;
       z-index: 1;
@@ -123,8 +128,6 @@ it('renders correctly', () => {
         <span />
         <span
           className="c2"
-          color="inherit"
-          size="s"
         >
           Male
         </span>
@@ -147,6 +150,11 @@ it('renders correctly', () => {
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c1 {
       background-color: #FFFFFF;
       z-index: 1;
@@ -233,8 +241,6 @@ it('renders correctly', () => {
         <span />
         <span
           className="c2"
-          color="inherit"
-          size="s"
         >
           Female
         </span>

package/dist/components/Atoms/Select/__snapshots__/Select.test.js.snap

@@ -13,6 +13,11 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c1 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c0 {
   width: 100%;
   position: relative;
@@ -106,7 +111,6 @@ exports[`renders correctly 1`] = `
 >
   <span
     className="c1 c2"
-    color="inherit"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Label",

package/dist/components/Atoms/Text/Text.js

@@ -19,56 +19,56 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
     as,
     theme
   } = _ref;
-  return as !== undefined && (0, _styledComponents.css)(["", " &{", ";", ";", ";", ";", ";", ";color:", ";", ";", ";", ";}"], (0, _fontHelper.default)(theme, as), _ref2 => {
+  return as !== undefined && (0, _styledComponents.css)(["", " &{", ";", ";", ";", ";", ";", ";color:", ";", ";", ";", ";span{font-size:inherit;line-height:inherit;}}"], (0, _fontHelper.default)(theme, as), _ref2 => {
     let {
-      size
+      $size
     } = _ref2;
-    return size && `font-size: ${theme.fontSize(size)}`;
+    return $size && `font-size: ${theme.fontSize($size)}`;
   }, _ref3 => {
     let {
-      size
+      $size
     } = _ref3;
-    return size && 'line-height: normal';
+    return $size && 'line-height: normal';
   }, _ref4 => {
     let {
-      family
+      $family
     } = _ref4;
-    return family && `font-family: ${theme.fontFamilies(family)}`;
+    return $family && `font-family: ${theme.fontFamilies($family)}`;
   }, _ref5 => {
     let {
-      weight
+      $weight
     } = _ref5;
-    return weight && `font-weight: ${weight}`;
+    return $weight && `font-weight: ${$weight}`;
   }, _ref6 => {
     let {
-      height
+      $height
     } = _ref6;
-    return height && `line-height: ${height}`;
+    return $height && `line-height: ${$height}`;
   }, _ref7 => {
     let {
-      uppercase
+      $uppercase
     } = _ref7;
-    return uppercase && 'text-transform: uppercase';
+    return $uppercase && 'text-transform: uppercase';
   }, _ref8 => {
     let {
-      color
+      $color
     } = _ref8;
-    return color ? theme.color(color) : 'inherit';
+    return $color ? theme.color($color) : 'inherit';
   }, _ref9 => {
     let {
-      textAlign
+      $textAlign
     } = _ref9;
-    return textAlign && `text-align: ${textAlign}`;
+    return $textAlign && `text-align: ${$textAlign}`;
   }, _ref10 => {
     let {
-      size
+      $size
     } = _ref10;
-    return size === 'super' && (0, _styledComponents.css)(["font-size:", ";line-height:3rem;@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}"], theme.fontSize('xxl'), theme.breakpoints2026('M'), theme.fontSize('big'), theme.fontSize('big'), theme.breakpoints2026('L'), theme.fontSize('super'), theme.fontSize('super'));
+    return $size === 'super' && (0, _styledComponents.css)(["font-size:", ";line-height:3rem;@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}"], theme.fontSize('xxl'), theme.breakpoints2026('M'), theme.fontSize('big'), theme.fontSize('big'), theme.breakpoints2026('L'), theme.fontSize('super'), theme.fontSize('super'));
   }, _ref11 => {
     let {
-      mobileColor
+      $mobileColor
     } = _ref11;
-    return mobileColor && (0, _styledComponents.css)(["@media (max-width:", "px){color:", ";}"], _breakpoints.breakpointValues2026.L - 1, theme.color(mobileColor));
+    return $mobileColor && (0, _styledComponents.css)(["@media (max-width:", "px){color:", ";}"], _breakpoints.breakpointValues2026.L - 1, theme.color($mobileColor));
   });
 });
 
@@ -91,14 +91,14 @@ const Text = _ref12 => {
   } = _ref12;
   return /*#__PURE__*/_react.default.createElement(BaseText, Object.assign({}, rest, {
     as: tag,
-    color: color,
-    size: size,
-    uppercase: uppercase,
-    height: height,
-    weight: weight,
-    family: family,
-    mobileColor: mobileColor,
-    textAlign: textAlign
+    $color: color,
+    $size: size,
+    $uppercase: uppercase,
+    $height: height,
+    $weight: weight,
+    $family: family,
+    $mobileColor: mobileColor,
+    $textAlign: textAlign
   }), children);
 };
 var _default = exports.default = Text;

package/dist/components/Atoms/Text/Text.md

@@ -8,32 +8,32 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     // To be phased out: tags to use the prescribed family always
     family="Anton"
   >
-    <b style={{ width: "55px", display: "inline-block" }}>H1 </b>
-    <Text style={{ textTransform: "none" }} tag="span" size="s">
-      <b>family:</b> {fontConfig['h1'].family} -  
-      <b>mobileColor:</b> blue
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight}
-      
-    </Text>
+    <span style={{ width: "55px"}}>H1 </span>
   </Text>
-  
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h1'].family} -  
+    <b>mobileColor:</b> blue
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight}
+  </Text>
+
+
   <Text
     tag="h2"
     mobileColor="green"
     family="Anton"
   >
-    <b style={{ width: "55px", display: "inline-block" }}>H2 </b>
-    <Text style={{ textTransform: "none" }} tag="span" size="s">
-      <b>family:</b> {fontConfig['h2'].family} - 
-      <b>mobileColor:</b> green
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px"}}>H2 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h2'].family} - 
+    <b>mobileColor:</b> green
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} 
   </Text>
 
   <Text
@@ -41,15 +41,15 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     mobileColor="red"
     family="Montserrat"
   >
-    <b style={{ width: "55px", display: "inline-block" }}>H3 </b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['h3'].family} -  
-      <b>mobileColor:</b> red
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px"}}>H3 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h3'].family} -  
+    <b>mobileColor:</b> red
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} 
   </Text>
 
   <Text
@@ -58,61 +58,62 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     weight="normal"
     // To be phased out: text to always be rendered as typed
     uppercase>
-    <b style={{ width: "55px", display: "inline-block" }}>H4 </b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['span'].family} -  
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px"}}>H4 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['span'].family} -  
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} 
   </Text>
 
-  <Text tag="p" size="m">
-    <span style={{ width: "55px", display: "inline-block" }}>Body</span>
-      <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['p'].family} -  
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} 
-      </Text>
-    </Text>
 
-    <Text tag="p" style={{ marginTop: "55px", fontStyle: "italic"}}>
-      Tags to be phased out:
-    </Text>
 
-    <Text 
+  <Text tag="p" size="m" style={{ marginTop: "2rem"}} height="100px" weight="500">
+    <span style={{ width: "55px"}}>P (body)</span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['p'].family} -  
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} 
+  </Text>
+
+  <Text tag="p" style={{ marginTop: "55px", fontStyle: "italic"}}>
+    Tags to be phased out:
+  </Text>
+
+  <Text 
     tag="h5"
     family="Anton"
     uppercase
     // To be phased-out
     weight="normal">
-    <b style={{ width: "55px", display: "inline-block" }}>H5 </b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['h5'].family} -  
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px"}}>H5 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h5'].family} -  
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} 
   </Text>
-  
 
   <Text tag="h6" 
     family="Anton" 
     uppercase
     weight="normal">
-    <b style={{ width: "55px", display: "inline-block" }}>H6</b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['h6'].family}
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px"}}>H6</span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h6'].family}
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} 
   </Text>
-  
+
 </div>
 ```

package/dist/components/Atoms/Text/__snapshots__/Text.test.js.snap

@@ -17,6 +17,11 @@ exports[`renders heavy heading correctly 1`] = `
   font-weight: 1000;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1.25rem;
@@ -33,7 +38,6 @@ exports[`renders heavy heading correctly 1`] = `
 
 <h3
   className="c0"
-  color="inherit"
 >
   Heading 3 heavy
 </h3>
@@ -56,6 +60,11 @@ exports[`renders high heading correctly 1`] = `
   line-height: 5;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1.25rem;
@@ -72,8 +81,6 @@ exports[`renders high heading correctly 1`] = `
 
 <h3
   className="c0"
-  color="inherit"
-  height="5"
 >
   Heading 3 high
 </h3>
@@ -97,6 +104,11 @@ exports[`renders large heading correctly 1`] = `
   line-height: normal;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1.25rem;
@@ -113,8 +125,6 @@ exports[`renders large heading correctly 1`] = `
 
 <h3
   className="c0"
-  color="inherit"
-  size="l"
 >
   Heading 3 large
 </h3>
@@ -139,6 +149,11 @@ exports[`renders xl paragraph with Anton font correctly 1`] = `
   font-family: 'Anton',Impact,sans-serif;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1rem;
@@ -155,8 +170,6 @@ exports[`renders xl paragraph with Anton font correctly 1`] = `
 
 <p
   className="c0"
-  color="inherit"
-  size="xl"
 >
   My paragraph xl and font Anton
 </p>
@@ -181,6 +194,11 @@ exports[`renders xl yellow paragraph correctly 1`] = `
   color: #FFE400;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1rem;
@@ -197,8 +215,6 @@ exports[`renders xl yellow paragraph correctly 1`] = `
 
 <p
   className="c0"
-  color="yellow"
-  size="xl"
 >
   My paragraph xl and yellow
 </p>

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

@@ -27,6 +27,11 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c1 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       width: 100%;
       position: relative;
@@ -126,7 +131,6 @@ it('renders correctly', () => {
     >
       <span
         className="c1 c2"
-        color="inherit"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Label",

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

@@ -13,6 +13,11 @@ exports[`renders correctly with no value and no options 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;
@@ -135,7 +140,6 @@ exports[`renders correctly with no value and no options 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Search for bikes",
@@ -182,6 +186,11 @@ exports[`renders correctly with value and no options 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;
@@ -304,7 +313,6 @@ exports[`renders correctly with value and no options 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Search for bikes",
@@ -351,6 +359,11 @@ exports[`renders correctly with value and options 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;
@@ -512,7 +525,6 @@ exports[`renders correctly with value and options 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Search for bikes",
@@ -562,7 +574,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Canyon
         </span>
@@ -578,7 +589,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Cannondale
         </span>
@@ -594,7 +604,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Condor
         </span>
@@ -610,7 +619,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Cube
         </span>