Adjust text stories to fit more nicely
This commit is contained in:
parent
3d7859c46b
commit
3eecd23c8d
3 changed files with 69 additions and 29 deletions
|
@ -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',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue