feat: add text-align to Text in CL (#693)

* works * remove red border layout guide * loads of snap noise? * remover wrapper * props cleanup * snaps * remove unused example * remove quotes nonsense * more quotes nonsense * quote nonsense * quotes nonsense * quote urgh * update * update * update * create prettier config to fix quotes conflict with lint * snaps --------- Co-authored-by: Andy E Phipps <[email protected]>
comicrelief · Jan 31, 2025 · 9df7f0e · 9df7f0e
1 parent 2015c5c
commit 9df7f0e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/src/components/Atoms/Text/Text.js b/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 */

diff --git a/src/components/Atoms/Text/Text.md b/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

diff --git a/src/components/Molecules/SearchInput/SearchInput.test.js b/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;
       }}