Align add discount with rest links (#4958)

* Align add discount with rest links * Add changeset * Remove not used component * Add button link * Add changeset * Rm douplicated changeset
saleor · Jun 17, 2024 · cd0b03e · cd0b03e
1 parent 04f51e5
commit cd0b03e
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 10 deletions.
diff --git a/.changeset/cool-boats-taste.md b/.changeset/cool-boats-taste.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now see Add discount align with rest of content
diff --git a/src/components/ButtonLink/ButtonLink.tsx b/src/components/ButtonLink/ButtonLink.tsx
@@ -0,0 +1,50 @@
+import { Button, ButtonProps, vars } from "@saleor/macaw-ui-next";
+import React from "react";
+
+interface ButtonLinkProps extends ButtonProps {
+  children: React.ReactNode;
+  onClick?: React.MouseEventHandler;
+  underline?: boolean;
+}
+
+export const ButtonLink = ({
+  children,
+  disabled,
+  onClick,
+  underline,
+  ...props
+}: ButtonLinkProps) => {
+  const color = disabled ? vars.colors.text.defaultDisabled : vars.colors.text.accent1;
+
+  const handleClick = (event: React.MouseEvent) => {
+    if (disabled || !onClick) {
+      return;
+    }
+
+    onClick(event);
+  };
+
+  return (
+    <Button
+      variant="tertiary"
+      onClick={handleClick}
+      __backgroundColor="transparent"
+      textDecoration={{
+        default: underline ? "underline" : "none",
+        hover: "underline",
+        focus: "underline",
+      }}
+      cursor={disabled ? "not-allowed" : "pointer"}
+      style={{
+        textUnderlineOffset: vars.spacing[1],
+        padding: 0,
+        color,
+        fontWeight: 400,
+        textDecorationColor: color,
+      }}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+};
diff --git a/src/components/ButtonLink/index.ts b/src/components/ButtonLink/index.ts
@@ -0,0 +1 @@
+export * from "./ButtonLink";
diff --git a/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx b/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx
@@ -1,6 +1,6 @@
 // @ts-strict-ignore
+import { ButtonLink } from "@dashboard/components/ButtonLink";
 import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
-import Link from "@dashboard/components/Link";
 import Money from "@dashboard/components/Money";
 import {
   DiscountValueTypeEnum,
@@ -13,7 +13,7 @@ import { getFormErrors } from "@dashboard/utils/errors";
 import getOrderErrorMessage from "@dashboard/utils/errors/order";
 import { Typography } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import { Box, Button, Popover, sprinkles } from "@saleor/macaw-ui-next";
+import { Box, Popover, sprinkles } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -123,26 +123,26 @@ const OrderDraftDetailsSummary: React.FC<OrderDraftDetailsSummaryProps> = props
   };
   const getShippingMethodComponent = () => {
     if (hasChosenShippingMethod) {
-      return <Link onClick={onShippingMethodEdit}>{`${shippingMethodName}`}</Link>;
+      return <ButtonLink onClick={onShippingMethodEdit}>{`${shippingMethodName}`}</ButtonLink>;
     }
 
     const shippingCarrierBase = intl.formatMessage(messages.addShippingCarrier);
 
     if (shippingAddress) {
       return (
-        <Link onClick={onShippingMethodEdit} data-test-id="add-shipping-carrier">
+        <ButtonLink onClick={onShippingMethodEdit} data-test-id="add-shipping-carrier">
           {shippingCarrierBase}
-        </Link>
+        </ButtonLink>
       );
     }
 
     const addShippingAddressInfo = intl.formatMessage(messages.addShippingAddressInfo);
 
     return (
       <div className={classes.shippingMethodContainer}>
-        <Link underline disabled onClick={onShippingMethodEdit}>
+        <ButtonLink underline disabled onClick={onShippingMethodEdit}>
           {shippingCarrierBase}
-        </Link>
+        </ButtonLink>
         <HorizontalSpacer />
         <Typography variant="caption">{`(${addShippingAddressInfo})`}</Typography>
       </div>
@@ -156,9 +156,11 @@ const OrderDraftDetailsSummary: React.FC<OrderDraftDetailsSummaryProps> = props
           <td>
             <Popover open={isDialogOpen}>
               <Popover.Trigger>
-                <Button variant="tertiary" onClick={isDialogOpen ? closeDialog : openDialog}>
-                  <Link>{intl.formatMessage(discountTitle)}</Link>
-                </Button>
+                <Box>
+                  <ButtonLink onClick={isDialogOpen ? closeDialog : openDialog}>
+                    {intl.formatMessage(discountTitle)}
+                  </ButtonLink>
+                </Box>
               </Popover.Trigger>
               <Popover.Content align="start" className={sprinkles({ zIndex: "3" })}>
                 <Box boxShadow="defaultOverlay">