From 9df7f0e8e6d8503bb23f087173640a96d1d7c0ea Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <76488110+michael-odonovan@users.noreply.github.com>
Date: Fri, 31 Jan 2025 14:40:52 +0000
Subject: [PATCH] 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 <a.phipps@comicrelief.com>
---
 .prettierrc                                      |  3 +++
 src/components/Atoms/Text/Text.js                | 16 +++++++++++++++-
 src/components/Atoms/Text/Text.md                |  4 ++--
 .../Molecules/SearchInput/SearchInput.test.js    |  2 +-
 4 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..544138be4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/src/components/Atoms/Text/Text.js b/src/components/Atoms/Text/Text.js
index aff2a0e45..38cfd2ccf 100755
--- 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
index 6581f9c98..c7971f5da 100644
--- 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
index dccec17eb..472852a04 100644
--- 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;
       }}