Let Storybook stories fetch theme
This commit is contained in:
parent
33090b5cbd
commit
ce35c870d4
4 changed files with 59 additions and 33 deletions
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// Copyright 2020-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
|
@ -11,9 +11,10 @@ import { pngUrl } from '../../storybook/Fixtures';
|
|||
import type { Props } from './Image';
|
||||
import { Image } from './Image';
|
||||
import { IMAGE_PNG } from '../../types/MIME';
|
||||
import { ThemeType } from '../../types/Util';
|
||||
import type { ThemeType } from '../../types/Util';
|
||||
import { setupI18n } from '../../util/setupI18n';
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
import { StorybookThemeContext } from '../../../.storybook/StorybookThemeContext';
|
||||
|
||||
import { fakeAttachment } from '../../test-both/helpers/fakeAttachment';
|
||||
|
||||
|
@ -63,7 +64,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
softCorners: boolean('softCorners', overrideProps.softCorners || false),
|
||||
tabIndex: number('tabIndex', overrideProps.tabIndex || 0),
|
||||
theme: text('theme', overrideProps.theme || 'light') as ThemeType,
|
||||
url: text('url', overrideProps.url || pngUrl),
|
||||
url: text('url', 'url' in overrideProps ? overrideProps.url || null : pngUrl),
|
||||
width: number('width', overrideProps.width || 100),
|
||||
});
|
||||
|
||||
|
@ -196,26 +197,19 @@ story.add('Blurhash', () => {
|
|||
return <Image {...props} />;
|
||||
});
|
||||
|
||||
story.add('undefined blurHash (light)', () => {
|
||||
const defaultProps = createProps();
|
||||
const props = {
|
||||
...defaultProps,
|
||||
blurHash: undefined,
|
||||
theme: ThemeType.light,
|
||||
story.add('undefined blurHash', () => {
|
||||
const Wrapper = () => {
|
||||
const theme = React.useContext(StorybookThemeContext);
|
||||
const props = createProps({
|
||||
blurHash: undefined,
|
||||
theme,
|
||||
url: undefined,
|
||||
});
|
||||
|
||||
return <Image {...props} />;
|
||||
};
|
||||
|
||||
return <Image {...props} />;
|
||||
});
|
||||
|
||||
story.add('undefined blurHash (dark)', () => {
|
||||
const defaultProps = createProps();
|
||||
const props = {
|
||||
...defaultProps,
|
||||
blurHash: undefined,
|
||||
theme: ThemeType.dark,
|
||||
};
|
||||
|
||||
return <Image {...props} />;
|
||||
return <Wrapper />;
|
||||
});
|
||||
|
||||
story.add('Missing Image', () => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue