52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
// @flow
|
|
|
|
/* eslint-disable max-len */
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import type { ElementProps } from 'react';
|
|
|
|
import theme from '../theme';
|
|
|
|
export type Props = {
|
|
...ElementProps<'p'>,
|
|
value: string,
|
|
isBold?: boolean,
|
|
color?: string,
|
|
className?: string,
|
|
size?: string | number,
|
|
align?: string,
|
|
};
|
|
|
|
const Text = styled.p`
|
|
font-family: ${(props: PropsWithTheme<Props>) => props.theme.fontFamily};
|
|
font-size: ${(props: PropsWithTheme<Props>) => String(props.size)};
|
|
color: ${(props: PropsWithTheme<Props>) => props.color || props.theme.colors.text};
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: ${(props: PropsWithTheme<Props>) => String(props.isBold ? props.theme.fontWeight.bold : props.theme.fontWeight.default)};
|
|
text-align: ${(props: PropsWithTheme<Props>) => props.align || 'left'};
|
|
`;
|
|
|
|
export const TextComponent = ({
|
|
value, isBold, color, className, size, align, id,
|
|
}: Props) => (
|
|
<Text
|
|
id={id}
|
|
className={className}
|
|
isBold={isBold}
|
|
color={color}
|
|
size={`${String(size)}em`}
|
|
align={align}
|
|
>
|
|
{value}
|
|
</Text>
|
|
);
|
|
|
|
TextComponent.defaultProps = {
|
|
className: '',
|
|
isBold: false,
|
|
color: theme.colors.text,
|
|
size: theme.fontSize.regular,
|
|
align: 'left',
|
|
};
|