@comicrelief/component-library 8.15.0 → 8.16.0

package/.prettierrc

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

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/package.json

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

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;
       }}