Adjust text stories to fit more nicely

This commit is contained in:
Josh Perez 2022-08-24 17:35:32 -04:00 committed by GitHub
parent 3d7859c46b
commit 3eecd23c8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 29 deletions

View file

@ -316,3 +316,24 @@ export const LinkPreviewWRJ = (): JSX.Element => (
LinkPreviewWRJ.story = {
name: 'Link Preview w/ R&J',
};
export const TextBackgroundAndLinkPreview = (): JSX.Element => (
<TextAttachment
{...getDefaultProps()}
textAttachment={{
gradient: {
angle: 175,
endColor: 4294859832,
startColor: 4294950980,
},
text: 'Check out this neat video I found',
textBackgroundColor: 4294967295,
textForegroundColor: 4278249037,
textStyle: 1,
preview: {
title: 'A really long title so that the we can test the margins',
url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
}}
/>
);

View file

@ -30,7 +30,7 @@ const renderNewLines: RenderTextCallbackType = ({
const CHAR_LIMIT_TEXT_LARGE = 50;
const CHAR_LIMIT_TEXT_MEDIUM = 200;
const FONT_SIZE_LARGE = 64;
const FONT_SIZE_LARGE = 59;
const FONT_SIZE_MEDIUM = 42;
const FONT_SIZE_SMALL = 32;
@ -161,7 +161,11 @@ export const TextAttachment = ({
>
{(textContent || onChange) && (
<div
className="TextAttachment__text"
className={classNames('TextAttachment__text', {
'TextAttachment__text--with-bg': Boolean(
textAttachment.textBackgroundColor
),
})}
style={{
backgroundColor: textAttachment.textBackgroundColor
? getHexFromNumber(textAttachment.textBackgroundColor)