packages/plasma-ui/src/components/TextBox/TextBox.tsx - dev - sdds/plasma

packages/plasma-ui/src/components/TextBox/TextBox.tsx

74 строки2 KB

Sergey Orlov

fix(plasma-ui): removed FC type

25 июл 2022, 17:23

25 июл 2022, 17:236a8fb45

import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { primary, secondary } from '@salutejs/plasma-tokens';

import { Body1, Footnote1, Headline1, Headline3 } from '../Typography';

export const Title = styled(Body1)`
    margin: 0.125rem 0;
    color: ${primary};
`;

export const BigTitle = styled(Headline3)`
    margin: 0.5rem 0;
    color: ${primary};
`;

export const BiggerTitle = styled(Headline1)`
    margin: 0.5rem 0;
    color: ${primary};
`;

export const Label = styled.div`
    margin: 0.375rem 0;
    color: ${({ color }) => color || secondary};
`;

export const SubTitle = styled(Footnote1)`
    margin: 0.125rem 0;
    color: ${({ color }) => color || secondary};
`;

export const Caption = styled.div`
    margin: 0.25rem 0;
    color: ${({ color }) => color || secondary};
`;

export const TextBoxRoot = styled.div`
    & > :first-child {
        margin-top: 0;
    }

    & > :last-child {
        margin-bottom: 0;
    }
`;

export interface TextPttrnProps {
    label?: string;
    title?: string;
    subTitle?: string;
    caption?: string;
    children?: ReactNode;
    size?: 'm' | 'l';
}

/**
 * Компонент для отображения текста в скомпанованном блоке.
 */
export const TextBox = ({ label, title, subTitle, caption, size = 'm', children, ...rest }: TextPttrnProps) => {
    if (children) {
        return <TextBoxRoot {...rest}>{children}</TextBoxRoot>;
    }

    const T = size === 'm' ? Title : BigTitle;

    return (
        <TextBoxRoot {...rest}>
            {label && <Label>{label}</Label>}
            {title && <T>{title}</T>}
            {subTitle && <SubTitle>{subTitle}</SubTitle>}
            {caption && <Caption>{caption}</Caption>}
        </TextBoxRoot>
    );
};