feat(PDYE-809): code review

eclass · Jul 9, 2024 · e5b1a1d · e5b1a1d
1 parent a6dc155
commit e5b1a1d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git a/src/molecules/Buttons/Btn.tsx b/src/molecules/Buttons/Btn.tsx
@@ -11,7 +11,6 @@ interface colorScheme {
 
 export interface propsBaseBtns {
   ariaLabel?: string
-  ariaPressed?: boolean
   children?: React.ReactNode
   disabled?: boolean
   isFullWidth?: boolean
@@ -24,7 +23,6 @@ export interface propsBaseBtns {
   type?: 'button' | 'submit' | 'reset'
   tabIndex?: number
   id?: string
-  role?: string
 }
 interface props extends propsBaseBtns {
   bg?: colorScheme
@@ -46,7 +44,6 @@ interface props extends propsBaseBtns {
  */
 export function Btn({
   ariaLabel,
-  ariaPressed,
   bg,
   borderColorActive = [vars('colors-main-deepSkyBlue'), vars('colors-neutral-white')],
   children,
@@ -64,7 +61,7 @@ export function Btn({
   size = 'regular',
   touchDark = false,
   type = 'button',
-  tabIndex,
+  tabIndex = 0,
 }: props): JSX.Element {
   let showChildren = children ?? null
   if (!children && !rightIcon && !leftIcon) {
@@ -90,8 +87,8 @@ export function Btn({
       <Ripples color={touchColor}>
         <Button
           aria-label={ariaLabel}
-          aria-pressed={ariaPressed}
           id={id}
+          role="button"
           bg={colorMain}
           borderRadius={borderRadius}
           color={color}
@@ -124,7 +121,7 @@ export function Btn({
           type={type}
           size={size === 'regular' ? 'md' : 'sm'}
           spinner={<Loader fill={fillLoader} />}
-          tabIndex={tabIndex}
+          tabIndex={disabled || isLoading ? -1 : tabIndex}
           _active={{
             bg: bg?.main ?? vars('colors-main-azureRadiance'),
           }}

diff --git a/src/molecules/Buttons/BtnLink.tsx b/src/molecules/Buttons/BtnLink.tsx
@@ -4,7 +4,6 @@ import { Box } from '@chakra-ui/react'
 export interface props {
   as?: 'button' | 'a'
   ariaLabel?: string
-  ariaPressed?: boolean
   children?: React.ReactNode
   fontSize?: string | '0.875rem'
   href?: string
@@ -18,7 +17,6 @@ export interface props {
 export function BtnLink({
   as = 'button',
   ariaLabel,
-  ariaPressed,
   children,
   fontSize = '0.875rem',
   href = '',
@@ -42,9 +40,7 @@ export function BtnLink({
     <Box
       as={as}
       aria-label={ariaLabel}
-      aria-pressed={ariaPressed}
       id={id}
-      onClick={onClick}
       role="button"
       backgroundColor="transparent"
       borderStyle="none"
@@ -55,6 +51,7 @@ export function BtnLink({
       fontWeight="500"
       fontSize={fontSize}
       lineHeight="1rem"
+      onClick={onClick}
       padding=".25em"
       tabIndex={tabIndex}
       textDecorationLine={textDecorationLine ? 'underline' : 'none'}

diff --git a/src/molecules/Buttons/BtnPrimary.tsx b/src/molecules/Buttons/BtnPrimary.tsx
@@ -8,7 +8,9 @@ import { Btn, propsBaseBtns } from './Btn'
  * @example <BtnPrimary>Lorem</BtnPrimary>
  */
 
-type XOR<T, U> = (T | U) extends object ? (T extends U ? never : T) | (U extends T ? never : U) : T | U
+type XOR<T, U> = T | U extends object
+  ? (T extends U ? never : T) | (U extends T ? never : U)
+  : T | U
 interface ButtonWithTextProps extends propsBaseBtns {
   children: React.ReactNode
   ariaLabel?: string
@@ -22,7 +24,6 @@ interface ButtonWithoutTextProps extends propsBaseBtns {
 type PrimaryButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>
 export function BtnPrimary({
   ariaLabel,
-  ariaPressed,
   children,
   disabled = false,
   isFullWidth = false,
@@ -36,11 +37,9 @@ export function BtnPrimary({
   tabIndex,
   id,
 }: PrimaryButtonProps): JSX.Element {
-
   return (
     <Btn
       ariaLabel={ariaLabel}
-      ariaPressed={ariaPressed}
       id={id}
       disabled={disabled}
       isFullWidth={isFullWidth}

diff --git a/src/molecules/Buttons/BtnSecondary.tsx b/src/molecules/Buttons/BtnSecondary.tsx
@@ -8,9 +8,23 @@ import { vars } from '@theme'
  *
  * @example <BtnSecondary>Lorem</BtnSecondary>
  */
+
+type XOR<T, U> = T | U extends object
+  ? (T extends U ? never : T) | (U extends T ? never : U)
+  : T | U
+interface ButtonWithTextProps extends propsBaseBtns {
+  children: React.ReactNode
+  ariaLabel?: string
+}
+
+interface ButtonWithoutTextProps extends propsBaseBtns {
+  children?: React.ReactNode
+  ariaLabel: string
+}
+
+type SecondaryButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>
 export function BtnSecondary({
   ariaLabel,
-  ariaPressed,
   children,
   disabled = false,
   isFullWidth = false,
@@ -23,11 +37,10 @@ export function BtnSecondary({
   type = 'button',
   tabIndex,
   id,
-}: propsBaseBtns): JSX.Element {
+}: SecondaryButtonProps): JSX.Element {
   return (
     <Btn
       ariaLabel={ariaLabel}
-      ariaPressed={ariaPressed}
       id={id}
       bg={{
         main: vars('colors-main-veryLightBlue'),

diff --git a/src/molecules/Buttons/BtnTertiary.tsx b/src/molecules/Buttons/BtnTertiary.tsx
@@ -13,9 +13,10 @@ import {
   Download,
 } from '@/atoms/Icons'
 
-type XOR<T, U> = (T | U) extends object ? (T extends U ? never : T) | (U extends T ? never : U) : T | U
+type XOR<T, U> = T | U extends object
+  ? (T extends U ? never : T) | (U extends T ? never : U)
+  : T | U
 export interface propsTertiaryBtn {
-  ariaPressed?: boolean
   activeWhenPress?: boolean
   id?: string
   iconCustom?: JSX.Element
@@ -55,7 +56,6 @@ type ButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>
 
 export function BtnTertiary({
   ariaLabel,
-  ariaPressed,
   activeWhenPress = false,
   children,
   id,
@@ -103,7 +103,6 @@ export function BtnTertiary({
   return (
     <Button
       aria-label={ariaLabel}
-      aria-pressed={ariaPressed}
       id={id}
       role="button"
       type={type}