@comicrelief/component-library 8.15.0 → 8.16.1

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

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

@@ -21,9 +21,10 @@ const Label = _styledComponents.default.label.withConfig({
   return hasLabelAsString && 'align-items: center;';
 }, _ref2 => {
   let {
+    theme,
     labelColour
   } = _ref2;
-  return labelColour && "color: ".concat(labelColour, ";");
+  return labelColour && "color: ".concat(theme.color(labelColour));
 });
 const StyledCheckboxInput = _styledComponents.default.input.attrs({
   type: 'checkbox'
@@ -57,9 +58,9 @@ const StyledCheckboxInput = _styledComponents.default.input.attrs({
 }, _ref7 => {
   let {
     theme,
-    checkboxBorderChecked
+    checkboxBorderFocus
   } = _ref7;
-  return checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red');
+  return checkboxBorderFocus ? theme.color(checkboxBorderFocus) : theme.color('red');
 });
 const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
@@ -71,6 +72,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     checkboxBorder,
     checkboxBgChecked,
     checkboxBorderChecked,
+    checkboxBorderFocus,
     ...rest
   } = _ref8;
   return /*#__PURE__*/_react.default.createElement(Label, {
@@ -82,7 +84,8 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     checkboxBg: checkboxBg,
     checkboxBorder: checkboxBorder,
     checkboxBgChecked: checkboxBgChecked,
-    checkboxBorderChecked: checkboxBorderChecked
+    checkboxBorderChecked: checkboxBorderChecked,
+    checkboxBorderFocus: checkboxBorderFocus
   })), /*#__PURE__*/_react.default.createElement("span", null), label ? /*#__PURE__*/_react.default.createElement(_Text.default, {
     weight: "bold"
   }, label) : children);
@@ -96,6 +99,7 @@ Checkbox.propTypes = {
   checkboxBg: _propTypes.default.string,
   checkboxBorder: _propTypes.default.string,
   checkboxBgChecked: _propTypes.default.string,
-  checkboxBorderChecked: _propTypes.default.string
+  checkboxBorderChecked: _propTypes.default.string,
+  checkboxBorderFocus: _propTypes.default.string
 };
 var _default = exports.default = Checkbox;

package/dist/components/Atoms/Checkbox/Checkbox.md

@@ -31,11 +31,12 @@ const LongLabel = () => (
         name="sport"
         value="Football"
         label="Tennis (with wacky styling to test props)"
-        labelColour="pink"
-        checkboxBg="red"
-        checkboxBorder="blue"
+        labelColour="purple_dark"
+        checkboxBg="white"
+        checkboxBorder="black"
         checkboxBgChecked="green"
-        checkboxBorderChecked="red"
+        checkboxBorderChecked="green"
+        checkboxBorderFocus="blue"
     />
     <br/>
     <p>A checkbox with a long label containing links</p>

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

@@ -13,18 +13,17 @@ var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
 const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
   displayName: "Text__BaseText",
   componentId: "sc-1snl0ya-0"
-})(["color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";", ";"], _ref => {
+})(["", ";color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";", ";"], _ref => {
   let {
-    color,
-    theme
+    textAlign
   } = _ref;
-  return color ? theme.color(color) : 'inherit';
+  return textAlign && "text-align: ".concat(textAlign);
 }, _ref2 => {
   let {
-    size,
+    color,
     theme
   } = _ref2;
-  return theme.fontSize(size);
+  return color ? theme.color(color) : 'inherit';
 }, _ref3 => {
   let {
     size,
@@ -33,59 +32,65 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
   return theme.fontSize(size);
 }, _ref4 => {
   let {
-    uppercase
+    size,
+    theme
   } = _ref4;
-  return uppercase ? 'uppercase' : 'inherit';
+  return theme.fontSize(size);
 }, _ref5 => {
   let {
-    weight
+    uppercase
   } = _ref5;
-  return weight ? "font-weight: ".concat(weight) : null;
+  return uppercase ? 'uppercase' : 'inherit';
 }, _ref6 => {
   let {
-    height
+    weight
   } = _ref6;
-  return height ? "line-height: ".concat(height) : null;
+  return weight ? "font-weight: ".concat(weight) : null;
 }, _ref7 => {
   let {
-    as
+    height
   } = _ref7;
-  return as === 'p' || as === 'span' ? 'line-height: normal;' : null;
+  return height ? "line-height: ".concat(height) : null;
 }, _ref8 => {
+  let {
+    as
+  } = _ref8;
+  return as === 'p' || as === 'span' ? 'line-height: normal;' : null;
+}, _ref9 => {
   let {
     family,
     theme
-  } = _ref8;
+  } = _ref9;
   return family ? theme.fontFamilies(family) : theme.fontFamilies(theme.font.regular);
-}, _ref9 => {
+}, _ref10 => {
   let {
     family
-  } = _ref9;
+  } = _ref10;
   return family === 'Anton' ? 'letter-spacing: 0.03rem' : null;
-}, _ref10 => {
+}, _ref11 => {
   let {
     size,
     theme
-  } = _ref10;
+  } = _ref11;
   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.allBreakpoints('M'), theme.fontSize('big'), theme.fontSize('big'), theme.allBreakpoints('L'), theme.fontSize('super'), theme.fontSize('super')) : null;
-}, _ref11 => {
+}, _ref12 => {
   let {
     mobileColor,
     theme
-  } = _ref11;
+  } = _ref12;
   return mobileColor && (0, _styledComponents.css)(["@media (max-width:", "px){color:", ";}"], _allBreakpoints.breakpointValues.L - 1, theme.color(mobileColor));
-}, _ref12 => {
+}, _ref13 => {
   let {
     size,
     theme
-  } = _ref12;
+  } = _ref13;
   return size === 'm' ? (0, _styledComponents.css)(["font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('s'), theme.allBreakpoints('M'), theme.fontSize('m')) : null;
 });
 
 /** Text renders different elements based on the `tag` prop
  *  Weight is checked for existence to prevent overriding the tag's css
  */
-const Text = _ref13 => {
+const Text = _ref14 => {
   let {
     tag = 'span',
     size = 's',
@@ -96,8 +101,9 @@ const Text = _ref13 => {
     weight = undefined,
     family = null,
     mobileColor = null,
+    textAlign = null,
     ...rest
-  } = _ref13;
+  } = _ref14;
   return /*#__PURE__*/_react.default.createElement(BaseText, Object.assign({}, rest, {
     as: tag,
     color: color,
@@ -106,7 +112,8 @@ const Text = _ref13 => {
     height: height,
     weight: weight,
     family: family,
-    mobileColor: mobileColor
+    mobileColor: mobileColor,
+    textAlign: textAlign
   }), children);
 };
 var _default = exports.default = Text;

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

@@ -105,8 +105,8 @@ Sport Relief
   <Text tag="h4" family="Founders_bold" uppercase size="xl">
     Heading 4
   </Text>
-  <Text tag="h4" family="Founders_bold" uppercase size="l">
-    Heading 5
+  <Text tag="h4" family="Founders_bold" uppercase size="l" textAlign="center">
+    Heading 5, textAlign prop
   </Text>
   <Text tag="p" family="Founders" size="m">
     Body 1

package/dist/theme/crTheme/Colors.md

@@ -127,6 +127,17 @@ const Item = styled.div`
       </Card>
     </Item>
 
+    <Item>
+      <Card backgroundColor="grey_4" height="auto">
+        <Text tag="h3" color="white" size="xs">
+          grey_4
+        </Text>
+        <Text color="white" tag="p">
+          #6E6E6E
+        </Text>
+      </Card>
+    </Item>
+
     <Item>
       <Card backgroundColor="grey_dark" height="auto">
         <Text tag="h3" color="white" size="xs">
@@ -330,7 +341,7 @@ const Item = styled.div`
     <Item>
       <Card backgroundColor="blue_donate" height="auto">
         <Text tag="h3" color="white" size="xs">
-          Blue Donate
+          blue_donate
         </Text>
         <Text tag="p" color="white">#2042AD</Text>
       </Card>
@@ -339,7 +350,7 @@ const Item = styled.div`
     <Item>
       <Card backgroundColor="blue_donate_interact" height="auto">
         <Text tag="h3" color="white" size="xs">
-          Blue Donate Interact
+          blue_donate_interact
         </Text>
         <Text tag="p" color="white">#001A85</Text>
       </Card>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.15.0",
+  "version": "8.16.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Checkbox/Checkbox.js

@@ -10,7 +10,7 @@ const Label = styled.label`
   display: flex;
   ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
   margin-bottom: 8px;
-  ${({ labelColour }) => labelColour && `color: ${labelColour};`}
+  ${({ theme, labelColour }) => labelColour && `color: ${theme.color(labelColour)}`}
 `;
 
 const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
@@ -38,7 +38,7 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
   }
   /* Visual checkbox when focused */
   :focus + span {
-    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
+    border: 1px solid ${({ theme, checkboxBorderFocus }) => (checkboxBorderFocus ? theme.color(checkboxBorderFocus) : theme.color('red'))};
   }
 `;
 
@@ -51,6 +51,7 @@ const Checkbox = React.forwardRef(({
   checkboxBorder,
   checkboxBgChecked,
   checkboxBorderChecked,
+  checkboxBorderFocus,
   ...rest
 }, ref) => (
   <Label
@@ -65,6 +66,7 @@ const Checkbox = React.forwardRef(({
       checkboxBorder={checkboxBorder}
       checkboxBgChecked={checkboxBgChecked}
       checkboxBorderChecked={checkboxBorderChecked}
+      checkboxBorderFocus={checkboxBorderFocus}
     />
     <span />
     {label ? <Text weight="bold">{label}</Text> : children}
@@ -80,7 +82,8 @@ Checkbox.propTypes = {
   checkboxBg: PropTypes.string,
   checkboxBorder: PropTypes.string,
   checkboxBgChecked: PropTypes.string,
-  checkboxBorderChecked: PropTypes.string
+  checkboxBorderChecked: PropTypes.string,
+  checkboxBorderFocus: PropTypes.string
 };
 
 export default Checkbox;

package/src/components/Atoms/Checkbox/Checkbox.md

@@ -31,11 +31,12 @@ const LongLabel = () => (
         name="sport"
         value="Football"
         label="Tennis (with wacky styling to test props)"
-        labelColour="pink"
-        checkboxBg="red"
-        checkboxBorder="blue"
+        labelColour="purple_dark"
+        checkboxBg="white"
+        checkboxBorder="black"
         checkboxBgChecked="green"
-        checkboxBorderChecked="red"
+        checkboxBorderChecked="green"
+        checkboxBorderFocus="blue"
     />
     <br/>
     <p>A checkbox with a long label containing links</p>

package/src/components/Atoms/Text/Text.js

@@ -5,6 +5,7 @@ import { breakpointValues } from '../../../theme/shared/allBreakpoints';
 
 /** Text component */
 export const BaseText = styled.span`
+  ${({ textAlign }) => textAlign && `text-align: ${textAlign}`};
   color: ${({ color, theme }) => (color ? theme.color(color) : 'inherit')};
   font-size: ${({ size, theme }) => theme.fontSize(size)};
   line-height: ${({ size, theme }) => theme.fontSize(size)};
@@ -51,7 +52,17 @@ export const BaseText = styled.span`
  *  Weight is checked for existence to prevent overriding the tag's css
  */
 const Text = ({
-  tag = 'span', size = 's', color = 'inherit', children = undefined, uppercase = false, height = undefined, weight = undefined, family = null, mobileColor = null, ...rest
+  tag = 'span',
+  size = 's',
+  color = 'inherit',
+  children = undefined,
+  uppercase = false,
+  height = undefined,
+  weight = undefined,
+  family = null,
+  mobileColor = null,
+  textAlign = null,
+  ...rest
 }) => (
   <BaseText
     {...rest}
@@ -63,12 +74,15 @@ const Text = ({
     weight={weight}
     family={family}
     mobileColor={mobileColor}
+    textAlign={textAlign}
   >
     {children}
   </BaseText>
 );
 
 Text.propTypes = {
+  /** Text Align */
+  textAlign: PropTypes.string,
   /** Font family */
   family: PropTypes.string,
   /** Font weight */

package/src/components/Atoms/Text/Text.md

@@ -105,8 +105,8 @@ Sport Relief
   <Text tag="h4" family="Founders_bold" uppercase size="xl">
     Heading 4
   </Text>
-  <Text tag="h4" family="Founders_bold" uppercase size="l">
-    Heading 5
+  <Text tag="h4" family="Founders_bold" uppercase size="l" textAlign="center">
+    Heading 5, textAlign prop
   </Text>
   <Text tag="p" family="Founders" size="m">
     Body 1

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

@@ -6,7 +6,7 @@ import SearchInput from './SearchInput';
 it('renders correctly', () => {
   const tree = renderWithTheme(
     <SearchInput
-      onChange={e => {
+      onChange={(e) => {
         e.preventDefault();
         return e.target.value;
       }}

package/src/theme/crTheme/Colors.md

@@ -127,6 +127,17 @@ const Item = styled.div`
       </Card>
     </Item>
 
+    <Item>
+      <Card backgroundColor="grey_4" height="auto">
+        <Text tag="h3" color="white" size="xs">
+          grey_4
+        </Text>
+        <Text color="white" tag="p">
+          #6E6E6E
+        </Text>
+      </Card>
+    </Item>
+
     <Item>
       <Card backgroundColor="grey_dark" height="auto">
         <Text tag="h3" color="white" size="xs">
@@ -330,7 +341,7 @@ const Item = styled.div`
     <Item>
       <Card backgroundColor="blue_donate" height="auto">
         <Text tag="h3" color="white" size="xs">
-          Blue Donate
+          blue_donate
         </Text>
         <Text tag="p" color="white">#2042AD</Text>
       </Card>
@@ -339,7 +350,7 @@ const Item = styled.div`
     <Item>
       <Card backgroundColor="blue_donate_interact" height="auto">
         <Text tag="h3" color="white" size="xs">
-          Blue Donate Interact
+          blue_donate_interact
         </Text>
         <Text tag="p" color="white">#001A85</Text>
       </Card>