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
}) => (
{children}
);
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
Heading 4
-
- Heading 5
+
+ Heading 5, textAlign prop
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(
{
+ onChange={(e) => {
e.preventDefault();
return e.target.value;
}}