works

comicrelief · Jan 20, 2025 · 051accf · 051accf
1 parent ec3a2b0
commit 051accf
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/src/components/Atoms/Text/Text.js b/src/components/Atoms/Text/Text.js
@@ -3,8 +3,14 @@ import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import { breakpointValues } from '../../../theme/shared/allBreakpoints';
 
+const Wrapper = styled.div`
+  ${({ marginTop }) => marginTop && `margin-top: ${marginTop}`};
+  border: 1px solid red;
+`;
+
 /** 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,24 +57,40 @@ 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,
+  marginTop = undefined,
+  ...rest
 }) => (
-  <BaseText
-    {...rest}
-    as={tag}
-    color={color}
-    size={size}
-    uppercase={uppercase}
-    height={height}
-    weight={weight}
-    family={family}
-    mobileColor={mobileColor}
-  >
-    {children}
-  </BaseText>
+  <Wrapper marginTop={marginTop}>
+    <BaseText
+      {...rest}
+      as={tag}
+      color={color}
+      size={size}
+      uppercase={uppercase}
+      height={height}
+      weight={weight}
+      family={family}
+      mobileColor={mobileColor}
+    >
+      {children}
+    </BaseText>
+  </Wrapper>
 );
 
 Text.propTypes = {
+  /** Wrapper for top spacing */
+  marginTop: PropTypes.string,
+  /** 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,15 +105,18 @@ 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
   </Text>
   <Text tag="p" family="Founders" size="s">
     Body 2
   </Text>
+  <Text tag="p" family="Founders" size="m" marginTop="2rem">
+    using marginTop prop
+  </Text>
   <Text tag="p" family="Founders" size="s" weight="bold" uppercase>
     Bold and Uppercase
   </Text>