feat(Button): respect-case flag

aufacicenta · May 13, 2024 · 7a97f8d · 7a97f8d
1 parent 35be24b
commit 7a97f8d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 35 deletions.
diff --git a/app/src/ui/button/Button.module.scss b/app/src/ui/button/Button.module.scss
@@ -23,6 +23,10 @@ $HALF_LOADER_SIZE: 15px;
   text-align: center;
   cursor: pointer;
 
+  &__respect-case {
+    text-transform: none;
+  }
+
   p,
   span {
     font-size: inherit;
@@ -306,6 +310,10 @@ $HALF_LOADER_SIZE: 15px;
     padding: 0;
     transition: opacity $duration-medium;
 
+    &.button--large {
+      font-size: $font-size-text-lead;
+    }
+
     &.button--primary,
     &.button--secondary,
     &.button--success,
@@ -338,29 +346,41 @@ $HALF_LOADER_SIZE: 15px;
       }
     }
 
+    &.button--primary {
+      color: var(--color-button-outlined-primary-text);
+
+      &:active,
+      &:hover,
+      &:focus {
+        border-color: var(--color-button-outlined-primary-border-hover);
+        color: var(--color-button-outlined-primary-hover-text);
+        background: var(--color-button-outlined-primary-hover);
+      }
+    }
+
     &.button--secondary {
-      border-color: var(--color-button-secondary);
-      color: var(--color-button-secondary-text);
+      border-color: var(--color-button-outlined-secondary-border);
+      color: var(--color-button-outlined-secondary-text);
 
       &:active,
       &:hover,
       &:focus {
-        border-color: var(--color-button-secondary-hover);
-        color: var(--color-button-secondary-hover-text);
-        background: var(--color-button-secondary-hover);
+        border-color: var(--color-button-outlined-secondary-border-hover);
+        color: var(--color-button-outlined-secondary-hover-text);
+        background: var(--color-button-outlined-secondary-hover);
       }
 
       &[disabled] {
         border-color: var(--color-dark-1);
         color: var(--color-dark-1);
-        background-color: var(--color-white);
+        background-color: transparent;
 
         &:active,
         &:hover,
         &:focus {
-          border-color: var(--color-button-secondary-hover);
-          color: var(--color-button-secondary-text);
-          background: var(--color-button-secondary-hover);
+          border-color: var(--color-button-outlined-secondary-hover);
+          color: var(--color-button-outlined-secondary-text);
+          background: var(--color-button-outlined-secondary-hover);
         }
       }
     }
@@ -441,28 +461,6 @@ $HALF_LOADER_SIZE: 15px;
         color: var(--color-white);
       }
     }
-
-    &.button--primary {
-      background-color: transparent;
-
-      .button__icon--right {
-        svg {
-          fill: var(--color-button-primary);
-        }
-      }
-
-      &:active,
-      &:hover,
-      &:focus {
-        border-color: var(--color-button-outlined-primary-hover-text);
-
-        .button__icon--right {
-          svg {
-            fill: var(--color-button-primary-text);
-          }
-        }
-      }
-    }
   }
 
   &--gradient {

diff --git a/app/src/ui/button/Button.module.scss.d.ts b/app/src/ui/button/Button.module.scss.d.ts
@@ -10,6 +10,7 @@ export type Styles = {
   "button__icon--right": string;
   button__loader: string;
   "button__loading-floating-border": string;
+  "button__respect-case": string;
   "button--auto-size": string;
   "button--danger": string;
   "button--dark": string;

diff --git a/app/src/ui/button/Button.tsx b/app/src/ui/button/Button.tsx
@@ -2,8 +2,10 @@
 import clsx from "clsx";
 import React, { ForwardedRef, forwardRef } from "react";
 
+import { Typography } from "ui/typography/Typography";
+
 import styles from "./Button.module.scss";
-import { ButtonProps, DefaultButtonProps, LinkButtonProps } from "./Button.types";
+import { ButtonProps, DefaultButtonProps, AnchorButtonProps, LinkButtonProps } from "./Button.types";
 
 export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
   (
@@ -22,6 +24,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
       "aria-label": ariaLabel,
       fullWidth = false,
       animate,
+      respectCase,
       ...restProps
     },
     ref,
@@ -57,6 +60,8 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
         [styles["button--link"]]: TagName === "a",
         // animations
         [styles["button__animate--pulse"]]: animate === "pulse",
+        // case
+        [styles["button__respect-case"]]: respectCase,
       },
       className,
     );
@@ -88,13 +93,25 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
           className={classNames}
           ref={ref as ForwardedRef<HTMLAnchorElement>}
           aria-label={isLoading && !ariaLabel ? "loading" : ariaLabel}
-          {...(restProps as LinkButtonProps)}
+          {...(restProps as AnchorButtonProps)}
         >
           {content}
         </a>
       );
     }
 
+    if (TagName === "link") {
+      return (
+        <Typography.Anchor
+          className={classNames}
+          aria-label={isLoading && !ariaLabel ? "loading" : ariaLabel}
+          {...(restProps as Omit<LinkButtonProps, "as">)}
+        >
+          {content}
+        </Typography.Anchor>
+      );
+    }
+
     return (
       <button
         type={TagName === "button" ? type : undefined}

diff --git a/app/src/ui/button/Button.types.ts b/app/src/ui/button/Button.types.ts
@@ -11,9 +11,10 @@ export type ButtonCommonProps = {
   leftIcon?: ReactNode;
   fullWidth?: boolean;
   animate?: "pulse";
+  respectCase?: boolean;
 };
 
-export type LinkButtonProps = Omit<
+export type AnchorButtonProps = Omit<
   DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
   "ref"
 > & {
@@ -22,6 +23,15 @@ export type LinkButtonProps = Omit<
   as: "a";
 };
 
+export type LinkButtonProps = Omit<
+  DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
+  "ref"
+> & {
+  disabled?: undefined;
+  type?: undefined;
+  as: "link";
+};
+
 export type DefaultButtonProps = Omit<
   DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
   "ref"
@@ -30,4 +40,4 @@ export type DefaultButtonProps = Omit<
   href?: undefined;
 };
 
-export type ButtonProps = ButtonCommonProps & (LinkButtonProps | DefaultButtonProps);
+export type ButtonProps = ButtonCommonProps & (AnchorButtonProps | DefaultButtonProps | LinkButtonProps);