Introduce a new design for the left pane

ts/components/DialogRelink.stories.tsx

@@ -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';
@@ -9,10 +9,13 @@ import { action } from '@storybook/addon-actions';
 import { DialogRelink } from './DialogRelink';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
+import { WidthBreakpoint } from './_util';
+import { FakeLeftPaneContainer } from '../test-both/helpers/FakeLeftPaneContainer';
 
 const i18n = setupI18n('en', enMessages);
 
 const defaultProps = {
+  containerWidthBreakpoint: WidthBreakpoint.Wide,
   i18n,
   isRegistrationDone: true,
   relinkDevice: action('relink-device'),
@@ -20,8 +23,16 @@ const defaultProps = {
 
 const permutations = [
   {
-    title: 'Unlinked',
+    title: 'Unlinked (wide container)',
     props: {
+      containerWidthBreakpoint: WidthBreakpoint.Wide,
+      isRegistrationDone: false,
+    },
+  },
+  {
+    title: 'Unlinked (narrow container)',
+    props: {
+      containerWidthBreakpoint: WidthBreakpoint.Narrow,
       isRegistrationDone: false,
     },
   },
@@ -39,7 +50,11 @@ storiesOf('Components/DialogRelink', module)
     return permutations.map(({ props, title }) => (
       <>
         <h3>{title}</h3>
-        <DialogRelink {...defaultProps} {...props} />
+        <FakeLeftPaneContainer
+          containerWidthBreakpoint={props.containerWidthBreakpoint}
+        >
+          <DialogRelink {...defaultProps} {...props} />
+        </FakeLeftPaneContainer>
       </>
     ));
   });