mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix click handling for stories

Browse source
This commit is contained in:
Fedor Indutny 2022-09-27 13:24:21 -07:00 • committed by GitHub
parent c0082adc56
commit 698c7a7739
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
78 changed files with 274 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

52
ts/components/Modal.stories.tsx
View file

@ -23,7 +23,7 @@ const LOREM_IPSUM =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
export const BareBonesShort = (): JSX.Element => (
<Modal i18n={i18n} useFocusTrap={false}>
<Modal modalName="test" i18n={i18n} useFocusTrap={false}>
Hello world!
</Modal>
);
@ -33,7 +33,7 @@ BareBonesShort.story = {
};
export const BareBonesLong = (): JSX.Element => (
<Modal i18n={i18n} useFocusTrap={false}>
<Modal modalName="test" i18n={i18n} useFocusTrap={false}>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
@ -46,7 +46,7 @@ BareBonesLong.story = {
};
export const BareBonesLongWithButton = (): JSX.Element => (
<Modal i18n={i18n}>
<Modal modalName="test" i18n={i18n}>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
@ -62,7 +62,13 @@ BareBonesLongWithButton.story = {
};
export const TitleXButtonBodyAndButtonFooter = (): JSX.Element => (
<Modal i18n={i18n} title="Hello world" onClose={onClose} hasXButton>
<Modal
modalName="test"
i18n={i18n}
title="Hello world"
onClose={onClose}
hasXButton
>
{LOREM_IPSUM}
<Modal.ButtonFooter>
<Button onClick={noop}>Okay</Button>
@ -75,7 +81,7 @@ TitleXButtonBodyAndButtonFooter.story = {
};
export const LotsOfButtonsInTheFooter = (): JSX.Element => (
<Modal i18n={i18n} onClose={onClose}>
<Modal modalName="test" i18n={i18n} onClose={onClose}>
Hello world!
<Modal.ButtonFooter>
<Button onClick={noop}>Okay</Button>
@ -98,7 +104,13 @@ LotsOfButtonsInTheFooter.story = {
};
export const LongBodyWithTitle = (): JSX.Element => (
<Modal i18n={i18n} title="Hello world" onClose={onClose} useFocusTrap={false}>
<Modal
modalName="test"
i18n={i18n}
title="Hello world"
onClose={onClose}
useFocusTrap={false}
>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
@ -111,7 +123,7 @@ LongBodyWithTitle.story = {
};
export const LongBodyWithTitleAndButton = (): JSX.Element => (
<Modal i18n={i18n} title="Hello world" onClose={onClose}>
<Modal modalName="test" i18n={i18n} title="Hello world" onClose={onClose}>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
@ -128,6 +140,7 @@ LongBodyWithTitleAndButton.story = {
export const LongBodyWithLongTitleAndXButton = (): JSX.Element => (
<Modal
modalName="test"
i18n={i18n}
title={LOREM_IPSUM.slice(0, 104)}
hasXButton
@ -145,7 +158,13 @@ LongBodyWithLongTitleAndXButton.story = {
};
export const WithStickyButtonsLongBody = (): JSX.Element => (
<Modal hasStickyButtons hasXButton i18n={i18n} onClose={onClose}>
<Modal
modalName="test"
hasStickyButtons
hasXButton
i18n={i18n}
onClose={onClose}
>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
@ -162,7 +181,13 @@ WithStickyButtonsLongBody.story = {
};
export const WithStickyButtonsShortBody = (): JSX.Element => (
<Modal hasStickyButtons hasXButton i18n={i18n} onClose={onClose}>
<Modal
modalName="test"
hasStickyButtons
hasXButton
i18n={i18n}
onClose={onClose}
>
<p>{LOREM_IPSUM.slice(0, 140)}</p>
<Modal.ButtonFooter>
<Button onClick={noop}>Okay</Button>
@ -176,7 +201,13 @@ WithStickyButtonsShortBody.story = {
};
export const StickyFooterLotsOfButtons = (): JSX.Element => (
<Modal hasStickyButtons i18n={i18n} onClose={onClose} title="OK">
<Modal
modalName="test"
hasStickyButtons
i18n={i18n}
onClose={onClose}
title="OK"
>
<p>{LOREM_IPSUM}</p>
<Modal.ButtonFooter>
<Button onClick={noop}>Okay</Button>
@ -200,6 +231,7 @@ StickyFooterLotsOfButtons.story = {
export const WithBackButton = (): JSX.Element => (
<Modal
modalName="test"
hasXButton
i18n={i18n}
onBackButtonClick={noop}