andrea.morten/web-check-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝 Form elements

Browse Source
This commit is contained in:
Alicia Sykes
2022-07-08 21:49:17 +01:00
parent fbfe1a0328
commit 12bfcb4575
3 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Form/Heading.tsx
View File

@@ -1,23 +1,25 @@
import styled from 'styled-components';
import colors from 'styles/colors';
import { TextSizes } from 'styles/typography';
interface HeadingProps {
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';
align?: 'left' | 'center' | 'right';
color?: string;
size?: 'small' | 'medium' | 'large';
size?: 'xSmall' | 'small' | 'medium' | 'large';
inline?: boolean;
children: React.ReactNode;
};
const StyledHeading = styled.h1<HeadingProps>`
margin: 0.5rem;
margin: 0.5rem 0;
text-shadow: 2px 2px 0px ${colors.bgShadowColor};
${props => {
switch (props.size) {
case 'small': return 'font-size: 1rem;';
case 'medium': return 'font-size: 2rem;';
case 'large': return 'font-size: 3rem;';
case 'xSmall': return `font-size: ${TextSizes.small};`;
case 'small': return `font-size: ${TextSizes.medium};`;
case 'medium': return `font-size: ${TextSizes.large};`;
case 'large': return `font-size: ${TextSizes.xLarge};`;
}
}};
${props => {
@@ -31,7 +33,6 @@ const StyledHeading = styled.h1<HeadingProps>`
${props => props.inline ? 'display: inline;' : '' }
`;
const Heading = (props: HeadingProps): JSX.Element => {
const { children, as, size, align, color, inline } = props;
return (