chore: add base footers, fix CI

leather-io · Jan 16, 2024 · 852bc86 · 852bc86
1 parent 546f489
commit 852bc86
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 113 deletions.
diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
@@ -110,7 +110,7 @@ export function RequestPassword({
             </styled.p>
           </Stack>
 
-          <Footer p="space.05" position={{ base: 'fixed', md: 'sticky' }}>
+          <Footer /* p="space.05" position={{ base: 'fixed', md: 'sticky' }} */>
             <LeatherButton
               fullWidth
               data-testid={SettingsSelectors.UnlockWalletBtn}
@@ -207,10 +207,10 @@ export function RequestPassword({
               // padding="16px"
             > */}
             <Footer
-              // px={{ base: 'space.00', lg: 'space.05' }}
-              px="space.00"
-              // px={{ base: 'space.00', md: 'space.05' }}
-              position={{ base: 'fixed', md: 'sticky' }}
+            // px={{ base: 'space.00', lg: 'space.05' }}
+            // px="space.00"
+            // px={{ base: 'space.00', md: 'space.05' }}
+            // position={{ base: 'fixed', md: 'sticky' }}
             >
               {/* // TODO fix this but better to pass padding with child? 
         or pass in over-rides here - px'space.05', position 'fixed'

diff --git a/src/app/features/switch-account-drawer/switch-account-drawer.tsx b/src/app/features/switch-account-drawer/switch-account-drawer.tsx
@@ -10,6 +10,7 @@ import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-
 import { useShowSwitchAccountsState } from '@app/store/ui/ui.hooks';
 import { LeatherButton } from '@app/ui/components/button';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
+import { Footer } from '@app/ui/components/containers/footers/footer';
 
 import { AccountListUnavailable } from './components/account-list-unavailable';
 import { SwitchAccountList } from './components/switch-account-list';
@@ -49,9 +50,11 @@ export const SwitchAccountDrawer = memo(() => {
       onClose={onClose}
       footer={whenWallet({
         software: (
-          <LeatherButton fullWidth onClick={() => onCreateAccount()}>
-            Create new account
-          </LeatherButton>
+          <Footer>
+            <LeatherButton fullWidth onClick={() => onCreateAccount()}>
+              Create new account
+            </LeatherButton>
+          </Footer>
         ),
         ledger: <></>,
       })}

diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx
@@ -9,6 +9,7 @@ import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-
 import { LeatherButton } from '@app/ui/components/button';
 import { DialogCard } from '@app/ui/components/containers/dialog/components/dialog-card.layout';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
+import { Footer } from '@app/ui/components/containers/footers/footer';
 
 import { QrCode } from './address-qr-code';
 
@@ -32,9 +33,11 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
       isShowing
       onClose={() => navigate(backgroundLocation ?? '..')}
       footer={
-        <LeatherButton fullWidth mt="space.05" onClick={() => onCopyAddressToClipboard(address)}>
-          Copy address
-        </LeatherButton>
+        <Footer>
+          <LeatherButton fullWidth mt="space.05" onClick={() => onCopyAddressToClipboard(address)}>
+            Copy address
+          </LeatherButton>
+        </Footer>
       }
     >
       {warning && warning}

diff --git a/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx b/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx
@@ -7,6 +7,7 @@ import { Flag } from '@app/components/layout/flag';
 import { LeatherButton } from '@app/ui/components/button';
 import { DialogCard } from '@app/ui/components/containers/dialog/components/dialog-card.layout';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
+import { Footer } from '@app/ui/components/containers/footers/footer';
 import { ErrorIcon } from '@app/ui/components/icons/error-icon';
 
 interface SignOutConfirmLayoutProps {
@@ -36,7 +37,7 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) {
       isShowing
       onClose={onUserSafelyReturnToHomepage}
       footer={
-        <>
+        <Footer>
           <LeatherButton
             color="gray"
             data-testid={SettingsSelectors.BtnSignOutReturnToHomeScreen}
@@ -59,7 +60,7 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) {
           >
             Sign out
           </LeatherButton>
-        </>
+        </Footer>
       }
     >
       <DialogCard>

diff --git a/src/app/ui/components/containers/dialog/components/dialog-content.layout.tsx b/src/app/ui/components/containers/dialog/components/dialog-content.layout.tsx
@@ -3,8 +3,6 @@ import { ReactNode } from 'react';
 import { css } from 'leather-styles/css';
 import { Box } from 'leather-styles/jsx';
 
-import { Footer } from '../../footers/footer';
-
 interface DialogContentProps {
   children: ReactNode;
   footer: ReactNode;
@@ -43,7 +41,7 @@ export function DialogContent({ children, header, footer }: DialogContentProps)
       >
         {children}
       </Box>
-      {footer && <Footer>{footer}</Footer>}
+      {footer}
     </Box>
   );
 }
diff --git a/src/app/ui/components/containers/footers/footer.stories.tsx b/src/app/ui/components/containers/footers/footer.stories.tsx
@@ -1,15 +1,80 @@
 import type { Meta } from '@storybook/react';
 
-import { Footer as Component, FooterProps } from './footer';
+import { LeatherButton } from '@app/ui/components/button';
+
+import { Footer as Component } from './footer';
 
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
   title: 'Design System/Containers/Footer',
+  parameters: {
+    controls: {
+      disable: true,
+      // TODO get rid of these empty controls
+      // https://github.com/storybookjs/storybook/issues/24422
+      hideNoControlsWarning: true,
+    },
+  },
 };
 
 export default meta;
 
-export function Footer(args: FooterProps) {
-  return <Component {...args} />;
+export function Footer() {
+  return (
+    <Component>
+      <LeatherButton fullWidth onClick={() => null}>
+        Create new account
+      </LeatherButton>
+    </Component>
+  );
+}
+
+export function SignOutConfirmFooter() {
+  return (
+    <Component>
+      <LeatherButton color="gray" flexGrow={1} variant="outline" onClick={() => null}>
+        Cancel
+      </LeatherButton>
+      <LeatherButton
+        _hover={{ opacity: 0.8 }}
+        background="error.label"
+        color="lightModeBrown.1"
+        flexGrow={1}
+        onClick={() => null}
+        type="submit"
+      >
+        Sign out
+      </LeatherButton>
+    </Component>
+  );
+}
+
+export function ReceiveTokensFooter() {
+  return (
+    <Component>
+      <LeatherButton fullWidth mt="space.05" onClick={() => null}>
+        Copy address
+      </LeatherButton>
+    </Component>
+  );
+}
+
+export function RequestPasswordFooter() {
+  return (
+    <Component>
+      <LeatherButton
+        // TODO improve this
+        // can I move this style to footer / do I need it?
+        // - something weird happens with this button overflowing
+        // fullWidth
+        width={{ base: 'calc(100vw - 48px)', md: 'calc(100vw - 96px)', lg: '100%' }}
+        onClick={() => null}
+        mt={['unset', 'space.05']}
+        // mx={{ base: 'space.05', md: 'unset' }}
+      >
+        Continue
+      </LeatherButton>
+    </Component>
+  );
 }
diff --git a/src/app/ui/components/containers/footers/footer.tsx b/src/app/ui/components/containers/footers/footer.tsx
@@ -1,17 +1,28 @@
-import { ReactNode } from 'react';
+import { Flex } from 'leather-styles/jsx';
 
-import { Flex, FlexProps } from 'leather-styles/jsx';
+import { HasChildren } from '@app/common/has-children';
 
-export interface FooterProps extends FlexProps {
-  children: ReactNode;
-}
+// interface FooterProps {
+//   children: ReactNode;
+// }
+/*
+ * NOTES: Only 3 places using the footer now - always in Dialog
+ *
+ * switch-account-drawer: single CTA
+ * receive-tokens.layout:  single CTA
+ * sign-out-confirm: two 'secondary' CTAs
+ *
+ */
 
-export function Footer({ children, ...rest }: FooterProps) {
+export function Footer({ children /*, ...rest*/ }: HasChildren) {
   return (
     <Flex
       gap="space.05"
       py="space.05"
       px="space.05"
+      // Taken from request Password to avoud extending FlexProps here and polluting docs
+      // px="space.00"
+      // px={{ base: 'space.00', md: 'space.05' }}
       margin="auto"
       bottom={0}
       width="100%"
@@ -23,8 +34,10 @@ export function Footer({ children, ...rest }: FooterProps) {
       // changing this for new lock screen. Make sure it looks OK on others i.e. all one column layouts
       // maxWidth={{ base: '100vw', md: '100vw' }}
       borderRadius={[0, 0, 'lg']}
-      position="sticky"
-      {...rest}
+      // position="sticky"
+
+      position={{ base: 'fixed', md: 'sticky' }}
+      // {...rest}
     >
       {children}
     </Flex>

diff --git a/src/app/ui/components/containers/headers/components/network-mode-badge.tsx b/src/app/ui/components/containers/headers/components/network-mode-badge.tsx
@@ -8,7 +8,7 @@ export function NetworkModeBadge({
 }: {
   isTestnetChain: boolean;
   name: string;
-  onClick: () => void;
+  onClick(): void;
 }) {
   if (!isTestnetChain) return null;
 

diff --git a/src/app/ui/components/containers/headers/header.stories.tsx b/src/app/ui/components/containers/headers/header.stories.tsx
@@ -42,8 +42,8 @@ export function LedgerHeader(args: HeaderProps) {
       variant="page"
       isWaitingOnPerformedAction
       waitingOnPerformedActionMessage="Ledger device in use"
-      onClose={() => console.log('close it up')}
-      onGoBack={() => console.log('back in black')}
+      onClose={() => null}
+      onGoBack={() => null}
     />
   );
 }

diff --git a/theme/global/radix-styles.ts b/theme/global/radix-styles.ts