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

Introduce a new design for the left pane

Browse source
This commit is contained in:
Evan Hahn 2021-10-12 18:59:08 -05:00 • committed by GitHub
parent d60600d6fb
commit 35a54cdc02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
63 changed files with 1205 additions and 576 deletions
Download patch file Download diff file Expand all files Collapse all files

90
ts/components/DialogUpdate.stories.tsx
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';
@ -7,6 +7,8 @@ import { boolean, select } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { DialogUpdate } from './DialogUpdate';
import { DialogType } from '../types/Dialogs';
import { WidthBreakpoint } from './_util';
import { FakeLeftPaneContainer } from '../test-both/helpers/FakeLeftPaneContainer';
import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';
@ -14,6 +16,7 @@ import enMessages from '../../_locales/en/messages.json';
const i18n = setupI18n('en', enMessages);
const defaultProps = {
containerWidthBreakpoint: WidthBreakpoint.Wide,
dismissDialog: action('dismiss-dialog'),
downloadSize: 116504357,
downloadedSize: 61003110,
@ -29,36 +32,79 @@ const defaultProps = {
const story = storiesOf('Components/DialogUpdate', module);
story.add('Knobs Playground', () => {
const containerWidthBreakpoint = select(
'containerWidthBreakpoint',
WidthBreakpoint,
WidthBreakpoint.Wide
);
const dialogType = select('dialogType', DialogType, DialogType.Update);
const hasNetworkDialog = boolean('hasNetworkDialog', false);
const didSnooze = boolean('didSnooze', false);
return (
<DialogUpdate
{...defaultProps}
dialogType={dialogType}
didSnooze={didSnooze}
hasNetworkDialog={hasNetworkDialog}
/>
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={containerWidthBreakpoint}
dialogType={dialogType}
didSnooze={didSnooze}
hasNetworkDialog={hasNetworkDialog}
/>
</FakeLeftPaneContainer>
);
});
story.add('Update', () => (
<DialogUpdate {...defaultProps} dialogType={DialogType.Update} />
));
([
['wide', WidthBreakpoint.Wide],
['narrow', WidthBreakpoint.Narrow],
] as const).forEach(([name, containerWidthBreakpoint]) => {
const defaultPropsForBreakpoint = {
...defaultProps,
containerWidthBreakpoint,
};
story.add('Download Ready', () => (
<DialogUpdate {...defaultProps} dialogType={DialogType.DownloadReady} />
));
story.add(`Update (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.Update}
/>
</FakeLeftPaneContainer>
));
story.add('Downloading', () => (
<DialogUpdate {...defaultProps} dialogType={DialogType.Downloading} />
));
story.add(`Download Ready (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.DownloadReady}
/>
</FakeLeftPaneContainer>
));
story.add('Cannot Update', () => (
<DialogUpdate {...defaultProps} dialogType={DialogType.Cannot_Update} />
));
story.add(`Downloading (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.Downloading}
/>
</FakeLeftPaneContainer>
));
story.add('macOS RO Error', () => (
<DialogUpdate {...defaultProps} dialogType={DialogType.MacOS_Read_Only} />
));
story.add(`Cannot Update (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.Cannot_Update}
/>
</FakeLeftPaneContainer>
));
story.add(`macOS RO Error (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.MacOS_Read_Only}
/>
</FakeLeftPaneContainer>
));
});