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