Let Storybook stories fetch theme

This commit is contained in:
Evan Hahn 2021-10-27 14:49:58 -05:00 committed by GitHub
parent 33090b5cbd
commit ce35c870d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 33 deletions

View file

@ -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', () => {