refactor: button and link, ref #4418

leather-io · Jan 18, 2024 · 1e68cd3 · 1e68cd3
1 parent aa8a530
commit 1e68cd3
Show file tree

Hide file tree

Showing 93 changed files with 779 additions and 566 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -5,6 +5,19 @@ import '../src/app/index.css';
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    backgrounds: {
+      default: 'leather-light-mode',
+      values: [
+        {
+          name: 'leather-light-mode',
+          value: '#FFFFFF',
+        },
+        {
+          name: 'leather-dark-mode',
+          value: '#12100F',
+        },
+      ],
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

diff --git a/panda.config.ts b/panda.config.ts
@@ -4,6 +4,7 @@ import { breakpoints } from './theme/breakpoints';
 import { globalCss } from './theme/global/global';
 import { keyframes } from './theme/keyframes';
 import { buttonRecipe } from './theme/recipes/button-recipe';
+import { linkRecipe } from './theme/recipes/link-recipe';
 import { semanticTokens } from './theme/semantic-tokens';
 import { tokens } from './theme/tokens';
 import { textStyles } from './theme/typography';
@@ -32,7 +33,7 @@ export default defineConfig({
       keyframes,
       textStyles,
       breakpoints,
-      recipes: { button: buttonRecipe },
+      recipes: { button: buttonRecipe, link: linkRecipe },
     },
   },
   outdir: 'leather-styles',

diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx
@@ -9,7 +9,7 @@ import { createMoney } from '@shared/models/money.model';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { PreviewButton } from '@app/components/preview-button';
-import { LeatherButton } from '@app/ui/components/button';
+import { Link } from '@app/ui/components/link/link';
 
 import { OnChooseFeeArgs } from '../bitcoin-fees-list/bitcoin-fees-list';
 import { TextInputField } from '../text-input-field';
@@ -89,14 +89,13 @@ export function BitcoinCustomFee({
               <Stack gap="space.05">
                 <styled.span color="accent.text-subdued" textStyle="body.02" maxWidth="21.5rem">
                   Higher fee rates typically lead to faster confirmation times.
-                  <LeatherButton
+                  <Link
                     ml="space.01"
                     onClick={() => openInNewTab('https://buybitcoinworldwide.com/fee-calculator/')}
                     textStyle="body.02"
-                    variant="link"
                   >
                     View fee calculator
-                  </LeatherButton>
+                  </Link>
                 </styled.span>
                 <Stack gap="space.01">
                   <TextInputField

diff --git a/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx b/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx
@@ -2,7 +2,7 @@ import GenericError from '@assets/images/generic-error.png';
 import { Flex, styled } from 'leather-styles/jsx';
 
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
-import { LeatherButton } from '@app/ui/components/button';
+import { Button } from '@app/ui/components/button/button';
 
 interface BroadcastErrorDrawerLayoutProps {
   message: string;
@@ -27,9 +27,9 @@ export function BroadcastErrorDrawerLayout({ message, onClose }: BroadcastErrorD
           Your transaction failed to broadcast{' '}
           {message && <>because of the error: {message.toLowerCase()}</>}
         </styled.span>
-        <LeatherButton fullWidth onClick={onClose} mt="space.05">
+        <Button fullWidth onClick={onClose} mt="space.05">
           Close
-        </LeatherButton>
+        </Button>
       </Flex>
     </BaseDrawer>
   );

diff --git a/src/app/components/disclaimer.tsx b/src/app/components/disclaimer.tsx
@@ -1,7 +1,7 @@
 import { Box, BoxProps, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { LeatherButton } from '@app/ui/components/button';
+import { Link } from '@app/ui/components/link/link';
 
 interface DisclaimerProps extends BoxProps {
   disclaimerText: string;
@@ -13,15 +13,10 @@ export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: Disclaime
       <styled.span textStyle="caption.02">
         {disclaimerText}
         {learnMoreUrl ? (
-          <LeatherButton
-            display="inline"
-            fontSize="14px"
-            onClick={() => openInNewTab(learnMoreUrl)}
-            variant="link"
-          >
+          <Link display="inline" fontSize="14px" onClick={() => openInNewTab(learnMoreUrl)}>
             {' '}
             Learn more
-          </LeatherButton>
+          </Link>
         ) : null}
         {learnMoreUrl ? '.' : null}
       </styled.span>

diff --git a/src/app/components/edit-nonce-button.tsx b/src/app/components/edit-nonce-button.tsx
diff --git a/src/app/components/external-link.tsx b/src/app/components/external-link.tsx
diff --git a/src/app/components/fees-row/components/fee-estimate-item.tsx b/src/app/components/fees-row/components/fee-estimate-item.tsx
@@ -2,9 +2,9 @@ import { useMemo } from 'react';
 
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { LeatherButton } from '@app/ui/components/button';
 import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
 import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon';
+import { Link } from '@app/ui/components/link/link';
 
 const labels = ['Low', 'Standard', 'High', 'Custom'];
 const testLabels = labels.map(label => label.toLowerCase());
@@ -29,7 +29,8 @@ export function FeeEstimateItem({
   }, [index, selectedItem]);
 
   return (
-    <LeatherButton
+    <Link
+      _before={{ bg: 'transparent' }}
       _hover={{
         bg: isVisible ? 'accent.component-background-hover' : 'accent.background-primary',
         borderRadius: 'xs',
@@ -48,6 +49,6 @@ export function FeeEstimateItem({
         <styled.span textStyle="label.02">{labels[index]}</styled.span>
         {!disableFeeSelection && (isVisible ? selectedIcon : <ChevronDownIcon />)}
       </HStack>
-    </LeatherButton>
+    </Link>
   );
 }
diff --git a/src/app/components/generic-error/generic-error.layout.tsx b/src/app/components/generic-error/generic-error.layout.tsx
@@ -4,8 +4,8 @@ import GenericError from '@assets/images/generic-error.png';
 import { Flex, FlexProps, HStack, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { LeatherButton } from '@app/ui/components/button';
 import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
+import { Link } from '@app/ui/components/link/link';
 
 const supportUrl =
   'https://wallet.hiro.so/wallet-faq/where-can-i-find-support-for-the-stacks-wallet';
@@ -58,9 +58,9 @@ export function GenericErrorLayout(props: GenericErrorProps) {
           </HStack>
         </styled.li>
       </styled.ul>
-      <LeatherButton fontSize="14px" mt="space.05" onClick={onClose} variant="link">
+      <Link fontSize="14px" mt="space.05" onClick={onClose}>
         Close window
-      </LeatherButton>
+      </Link>
     </Flex>
   );
 }
diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
@@ -1,5 +1,4 @@
-import { useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
@@ -11,7 +10,7 @@ import { useDrawers } from '@app/common/hooks/use-drawers';
 import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { LeatherLogo } from '@app/components/leather-logo';
 import { NetworkModeBadge } from '@app/components/network-mode-badge';
-import { LeatherButton } from '@app/ui/components/button';
+import { Button } from '@app/ui/components/button/button';
 import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
 import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon';
 
@@ -26,22 +25,10 @@ interface HeaderProps extends FlexProps {
 export function Header(props: HeaderProps) {
   const { actionButton, hideActions, onClose, title, ...rest } = props;
   const { isShowingSettings, setIsShowingSettings } = useDrawers();
-  const { pathname } = useLocation();
   const navigate = useNavigate();
 
   const isBreakpointSm = useViewportMinWidth('sm');
 
-  const leatherLogoIsClickable = useMemo(() => {
-    return (
-      pathname !== RouteUrls.RequestDiagnostics &&
-      pathname !== RouteUrls.Onboarding &&
-      pathname !== RouteUrls.BackUpSecretKey &&
-      pathname !== RouteUrls.SetPassword &&
-      pathname !== RouteUrls.SignIn &&
-      pathname !== RouteUrls.Home
-    );
-  }, [pathname]);
-
   return (
     <Flex
       alignItems={hideActions ? 'center' : 'flex-start'}
@@ -54,9 +41,9 @@ export function Header(props: HeaderProps) {
     >
       {onClose ? (
         <Flex flexBasis="20%">
-          <LeatherButton onClick={onClose} variant="ghost">
+          <Button onClick={onClose} variant="ghost">
             <ArrowLeftIcon />
-          </LeatherButton>
+          </Button>
         </Flex>
       ) : null}
       {!title && (!onClose || isBreakpointSm) ? (
@@ -70,8 +57,7 @@ export function Header(props: HeaderProps) {
           <HStack alignItems="flex-end" gap="space.01">
             <LeatherLogo
               data-testid={OnboardingSelectors.LeatherLogoRouteToHome}
-              isClickable={leatherLogoIsClickable}
-              onClick={leatherLogoIsClickable ? () => navigate(RouteUrls.Home) : undefined}
+              onClick={() => navigate(RouteUrls.Home)}
             />
             <AppVersion />
           </HStack>
@@ -84,13 +70,13 @@ export function Header(props: HeaderProps) {
       <HStack alignItems="center" flexBasis="20%" justifyContent="flex-end">
         <NetworkModeBadge />
         {!hideActions && (
-          <LeatherButton
+          <Button
             data-testid={SettingsSelectors.SettingsMenuBtn}
             onClick={() => setIsShowingSettings(!isShowingSettings)}
             variant="ghost"
           >
             <HamburgerIcon />
-          </LeatherButton>
+          </Button>
         )}
         {actionButton ? actionButton : null}
       </HStack>

diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx
@@ -6,7 +6,7 @@ import { Box, BoxProps, Flex, FlexProps, HStack, Stack, styled } from 'leather-s
 import { isString } from '@shared/utils';
 
 import { whenPageMode } from '@app/common/utils';
-import { LeatherButton } from '@app/ui/components/button';
+import { Button } from '@app/ui/components/button/button';
 import { DashedHr } from '@app/ui/components/hr';
 
 // InfoCard
@@ -105,14 +105,14 @@ interface InfoCardBtnProps {
 }
 export function InfoCardBtn({ icon, label, onClick }: InfoCardBtnProps) {
   return (
-    <LeatherButton onClick={onClick} flexGrow="1">
+    <Button onClick={onClick} flexGrow="1">
       <Flex alignItems="center" justifyContent="center">
         <styled.span mx="space.02" textStyle="label.02">
           {label}
         </styled.span>
         {icon}
       </Flex>
-    </LeatherButton>
+    </Button>
   );
 }
 

diff --git a/src/app/components/inscription-preview-card/components/inscription-metadata.tsx b/src/app/components/inscription-preview-card/components/inscription-metadata.tsx
@@ -1,6 +1,6 @@
 import { Flex, styled } from 'leather-styles/jsx';
 
-import { LeatherButton } from '@app/ui/components/button';
+import { Link } from '@app/ui/components/link/link';
 
 interface InscriptionMetadataProps {
   action?(): void;
@@ -22,14 +22,9 @@ export function InscriptionMetadata({
       <styled.span textStyle="label.01">{title}</styled.span>
       <styled.span textStyle="caption.02">{subtitle}</styled.span>
       {action ? (
-        <LeatherButton
-          color="stacks"
-          onClick={() => action()}
-          textStyle="caption.02"
-          variant="text"
-        >
+        <Link color="stacks" onClick={() => action()} textStyle="caption.02" variant="text">
           {actionLabel}
-        </LeatherButton>
+        </Link>
       ) : null}
     </Flex>
   );

diff --git a/src/app/components/leather-logo.tsx b/src/app/components/leather-logo.tsx
@@ -1,26 +1,25 @@
 import { memo } from 'react';
 
-import { LeatherButton } from '@app/ui/components/button';
+import { styled } from 'leather-styles/jsx';
+
 import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
 
 interface LeatherLogoProps {
-  isClickable: boolean;
   onClick?(): void;
 }
 export const LeatherLogo = memo((props: LeatherLogoProps) => {
-  const { isClickable, onClick } = props;
+  const { onClick } = props;
 
   return (
-    <LeatherButton
+    <styled.button
       _hover={{ color: 'accent.action-primary-hover' }}
       color="accent.text-primary"
-      cursor={isClickable ? 'pointer' : 'unset'}
       height="16px"
       onClick={onClick}
-      variant="text"
+      type="button"
       width="76px"
     >
       <LeatherIcon />
-    </LeatherButton>
+    </styled.button>
   );
 });
diff --git a/src/app/components/modal-header.tsx b/src/app/components/modal-header.tsx
@@ -7,7 +7,7 @@ import { token } from 'leather-styles/tokens';
 import { RouteUrls } from '@shared/route-urls';
 
 import { NetworkModeBadge } from '@app/components/network-mode-badge';
-import { LeatherButton } from '@app/ui/components/button';
+import { Button } from '@app/ui/components/button/button';
 import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
 import { CloseIcon } from '@app/ui/components/icons/close-icon';
 
@@ -54,14 +54,14 @@ export function ModalHeader({
     >
       {onGoBack || defaultGoBack ? (
         <Box flexBasis="32.5%">
-          <LeatherButton
+          <Button
             data-testid={SharedComponentsSelectors.ModalHeaderBackBtn}
             alignSelf="center"
             onClick={onGoBack || defaultGoBackAction}
             variant="ghost"
           >
             <ArrowLeftIcon />
-          </LeatherButton>
+          </Button>
         </Box>
       ) : (
         <Box flexBasis="32.5%" />
@@ -76,9 +76,9 @@ export function ModalHeader({
       <Flex alignItems="center" flexBasis="32.5%" justifyContent="flex-end" position="relative">
         <NetworkModeBadge />
         {hasCloseIcon && (
-          <LeatherButton ml="space.02" onClick={onClose || defaultCloseAction} variant="ghost">
+          <Button ml="space.02" onClick={onClose || defaultCloseAction} variant="ghost">
             <CloseIcon />
-          </LeatherButton>
+          </Button>
         )}
       </Flex>
     </Flex>