dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(text): add noMargin and align props

Browse Source
This commit is contained in:
Dan Head
2021-01-27 00:11:22 +00:00
parent 283ffafa09
commit cdf55e50d4
2 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/header-logo.js
View File

@@ -84,7 +84,9 @@ export default function HeaderLogo({ transition }) {
<Heading withShadow noMargin noWrap> <Heading withShadow noMargin noWrap>
Abc Project Design Ltd Abc Project Design Ltd
</Heading> </Heading>
<Text size="lg">Easy as ABC</Text> <Text size="lg" noMargin>
Easy as ABC
</Text>
</Middle> </Middle>
<Bottom visible={visible}> <Bottom visible={visible}>
<LogoArrows /> <LogoArrows />

7
src/components/text.js
View File

@@ -3,12 +3,17 @@ import styled from "@emotion/styled";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
const StyledText = styled.p` const StyledText = styled.p`
margin-bottom: var(--spacing-y-xs); margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-md)`)};
${props => ${props =>
props.textStyle && props.textStyle &&
css` css`
font-style: ${props.textStyle}; font-style: ${props.textStyle};
`} `}
${props =>
props.align &&
css`
text-align: ${props.align};
`}
font-size: ${props => `var(--font-size-${props.size})`}; font-size: ${props => `var(--font-size-${props.size})`};
color: ${props => `var(--theme-color-${props.color})`}; color: ${props => `var(--theme-color-${props.color})`};
`; `;