You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import styled from 'styled-components';
|
|
import { SessionDataTestId } from 'react';
|
|
import { Localizer } from './Localizer';
|
|
import type { LocalizerComponentPropsObject } from '../../localization/localeTools';
|
|
|
|
const StyledI18nSubTextContainer = styled('div')`
|
|
font-size: var(--font-size-md);
|
|
line-height: 1.5;
|
|
margin-bottom: var(--margins-lg);
|
|
|
|
// TODO: we'd like the description to be on two lines instead of one when it is short.
|
|
// setting the max-width depending on the text length is **not** the way to go.
|
|
// We should set the width on the dialog itself, depending on what we display.
|
|
max-width: '60ch';
|
|
padding-inline: var(--margins-lg);
|
|
`;
|
|
|
|
export const I18nSubText = ({
|
|
className,
|
|
dataTestId,
|
|
localizerProps,
|
|
}: {
|
|
className?: string;
|
|
dataTestId: SessionDataTestId;
|
|
localizerProps: LocalizerComponentPropsObject;
|
|
}) => {
|
|
return (
|
|
<StyledI18nSubTextContainer className={className} data-testid={dataTestId}>
|
|
<Localizer {...localizerProps} />
|
|
</StyledI18nSubTextContainer>
|
|
);
|
|
};
|