chore: refactor dialog content + add story, add footer story

src/app/components/request-password.tsx

@@ -243,7 +243,7 @@ export function RequestPassword({
             {/* </Box> */}
           </>
         }
-        /* </PageLayout> */
+        /* </DialogContent> */
       />
     </>
   );

src/app/pages/receive/components/receive-tokens.layout.tsx

@@ -7,7 +7,7 @@ import { useLocationState } from '@app/common/hooks/use-location-state';
 import { AddressDisplayer } from '@app/components/address-displayer/address-displayer';
 import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
 import { LeatherButton } from '@app/ui/components/button';
-import { DialogContent } from '@app/ui/components/containers/dialog/components/dialog-content.layout';
+import { DialogCard } from '@app/ui/components/containers/dialog/components/dialog-card.layout';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 
 import { QrCode } from './address-qr-code';
@@ -38,7 +38,7 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
       }
     >
       {warning && warning}
-      <DialogContent>
+      <DialogCard>
         <styled.h2 mt="space.05" textStyle="heading.03">
           {title}
         </styled.h2>
@@ -61,7 +61,7 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
             <AddressDisplayer address={address} />
           </Flex>
         </Flex>
-      </DialogContent>
+      </DialogCard>
     </Dialog>
   );
 }

src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx

@@ -5,7 +5,7 @@ import { Box, styled } from 'leather-styles/jsx';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { Flag } from '@app/components/layout/flag';
 import { LeatherButton } from '@app/ui/components/button';
-import { DialogContent } from '@app/ui/components/containers/dialog/components/dialog-content.layout';
+import { DialogCard } from '@app/ui/components/containers/dialog/components/dialog-card.layout';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { ErrorIcon } from '@app/ui/components/icons/error-icon';
 
@@ -62,7 +62,7 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) {
         </>
       }
     >
-      <DialogContent>
+      <DialogCard>
         <form onChange={form.handleChange} onSubmit={form.handleSubmit}>
           <styled.p textStyle="label.02">
             When you sign out,
@@ -116,7 +116,7 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) {
             </styled.p>
           </styled.label>
         </form>
-      </DialogContent>
+      </DialogCard>
     </Dialog>
   );
 }

src/app/ui/components/containers/container.layout.tsx

@@ -6,9 +6,7 @@ interface ContainerLayoutProps {
   children: React.JSX.Element | React.JSX.Element[];
   header: React.JSX.Element | null;
 }
-export function ContainerLayout(props: ContainerLayoutProps) {
-  const { children, header } = props;
-
+export function ContainerLayout({ children, header }: ContainerLayoutProps) {
   return (
     <Flex
       flexDirection="column"

src/app/ui/components/containers/dialog/components/dialog-card.layout.tsx

@@ -0,0 +1,13 @@
+import { Flex } from 'leather-styles/jsx';
+
+import { HasChildren } from '@app/common/has-children';
+
+//  TODO name this better / merge with dialog-content.layout
+/** deprecated */
+export function DialogCard({ children }: HasChildren) {
+  return (
+    <Flex alignItems="center" flexDirection="column" pb={['space.05', 'space.08']} px="space.05">
+      {children}
+    </Flex>
+  );
+}

src/app/ui/components/containers/dialog/components/dialog-content.layout.tsx

@@ -1,11 +1,49 @@
-import { Flex } from 'leather-styles/jsx';
+import { ReactNode } from 'react';
 
-import { HasChildren } from '@app/common/has-children';
+import { css } from 'leather-styles/css';
+import { Box } from 'leather-styles/jsx';
 
-export function DialogContent({ children }: HasChildren) {
+import { Footer } from '../../footers/footer';
+
+interface DialogContentProps {
+  children: ReactNode;
+  footer: ReactNode;
+  header: ReactNode;
+}
+//  TODO - move this up a level into Dialog
+
+/** @deprecated */
+export function DialogContent({ children, header, footer }: DialogContentProps) {
+  //  TODO re-test this app wide - getting rid of offets and adding new header variant 'big-title'
+  // need to make sure this doesnt introduce weird scrolling
   return (
-    <Flex alignItems="center" flexDirection="column" pb={['space.05', 'space.08']} px="space.05">
-      {children}
-    </Flex>
+    // maxHeight + overflow hidden to stop header being able to move on scroll
+    <Box maxHeight="100vh" overflowY="hidden">
+      {/* standard header height is 68px */}
+      {/* <Box
+        className={css({
+          position: 'fixed',
+          width: '100%',
+          height: '68px',
+          padding: '16px',
+        })}
+      > */}
+      {header}
+      {/* </Box> */}
+      <Box
+        className={css({
+          // paddingTop: '68px', // offset based on height of header - make this smarter
+
+          // allow scroll on small heights
+          overflowY: 'scroll',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        })}
+      >
+        {children}
+      </Box>
+      {footer && <Footer>{footer}</Footer>}
+    </Box>
   );
 }

src/app/ui/components/containers/dialog/dialog.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta } from '@storybook/react';
+
+import { Dialog as Component, DialogProps } from './dialog';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Design System/Containers/Dialog',
+};
+
+export default meta;
+
+export function Dialog(args: DialogProps) {
+  return <Component {...args} />;
+}

src/app/ui/components/containers/dialog/dialog.tsx

@@ -1,13 +1,14 @@
 import { ReactNode, memo } from 'react';
+// FIXME - refactor navigate OUT of here so it will work with storybook
 import { useNavigate } from 'react-router-dom';
 
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { css } from 'leather-styles/css';
 
 import { DialogHeader } from '../headers/dialog-header';
-import { PageLayout } from '../page.layout';
+import { DialogContent } from './components/dialog-content.layout';
 
-interface DialogProps {
+export interface DialogProps {
   children?: ReactNode;
   enableGoBack?: boolean;
   header?: ReactNode;
@@ -67,7 +68,7 @@ export const Dialog = memo(
                 animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
               })}
             >
-              <PageLayout
+              <DialogContent
                 header={
                   header ? (
                     header
@@ -86,7 +87,7 @@ export const Dialog = memo(
                 footer={footer}
               >
                 {children}
-              </PageLayout>
+              </DialogContent>
             </RadixDialog.Content>
           </RadixDialog.Overlay>
         </RadixDialog.Portal>

src/app/ui/components/containers/footers/footer.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta } from '@storybook/react';
+
+import { Footer as Component, FooterProps } from './footer';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Design System/Containers/Footer',
+};
+
+export default meta;
+
+export function Footer(args: FooterProps) {
+  return <Component {...args} />;
+}

src/app/ui/components/containers/footers/footer.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { Flex, FlexProps } from 'leather-styles/jsx';
 
-interface FooterProps extends FlexProps {
+export interface FooterProps extends FlexProps {
   children: ReactNode;
 }
 

src/app/ui/components/containers/headers/header.stories.tsx

@@ -5,7 +5,7 @@ import { Header as Component, HeaderProps } from './header';
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Header',
+  title: 'Design System/Containers/Header',
   args: {
     variant: 'home',
   },
@@ -21,7 +21,7 @@ const meta: Meta<typeof Component> = {
  *
  * ALL seem very similar but with slight variants. Probably even the same component but with different BG colours / options
  *
- *
+ * Approval / PSBT have unanswered Qs and may need more work
  *
  */
 
@@ -31,10 +31,6 @@ export function Header(args: HeaderProps) {
   return <Component {...args} onClose={() => null} onGoBack={() => null} />;
 }
 
-// TODO investigate proper storybook breakpoints for this
-// https://storybook.js.org/addons/storybook-addon-breakpoints
-
-// so we can test UI in extension size properly
 export function BigTitleHeader() {
   return <Component variant="big-title" title="Choose asset to receive" onClose={() => null} />;
 }
@@ -52,9 +48,6 @@ export function LedgerHeader(args: HeaderProps) {
   );
 }
 
-// WORK on this to get a responsive page going then move onto footers
 export function PageHeader(args: HeaderProps) {
   return <Component {...args} title="Some page" onGoBack={() => null} />;
 }
-
-// NOTE - Approval / PSBT have unanswered Qs and may need more work