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 19, 2024 · 63c4238 · 63c4238
1 parent 90503b9
commit 63c4238
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 13 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,52 @@
+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";
 
@@ -144,20 +144,22 @@ const OrderDraftDetailsSummary: React.FC<
   const getShippingMethodComponent = () => {
     if (hasChosenShippingMethod) {
       return (
-        <Link onClick={onShippingMethodEdit}>{`${shippingMethodName}`}</Link>
+        <ButtonLink
+          onClick={onShippingMethodEdit}
+        >{`${shippingMethodName}`}</ButtonLink>
       );
     }
 
     const shippingCarrierBase = intl.formatMessage(messages.addShippingCarrier);
 
     if (!!shippingAddress) {
       return (
-        <Link
+        <ButtonLink
           onClick={onShippingMethodEdit}
           data-test-id="add-shipping-carrier"
         >
           {shippingCarrierBase}
-        </Link>
+        </ButtonLink>
       );
     }
 
@@ -167,9 +169,9 @@ const OrderDraftDetailsSummary: React.FC<
 
     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>
@@ -183,12 +185,11 @@ const OrderDraftDetailsSummary: React.FC<
           <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"