chore: align ButtonIcons with design

app/component-library/components/Banners/Banner/Banner.test.tsx

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react-native';
 import Text from '../../Texts/Text/Text';
 import { ButtonVariants } from '../../Buttons/Button';
 import { IconName } from '../../Icons/Icon';
-import { ButtonIconSizes, ButtonIconVariants } from '../../Buttons/ButtonIcon';
+import { ButtonIconSizes } from '../../Buttons/ButtonIcon';
 
 // Internal dependencies.
 import Banner from './Banner';
@@ -77,7 +77,6 @@ describe('Banner', () => {
         closeButtonProps={{
           onPress: () => jest.fn(),
           iconName: IconName.Close,
-          variant: ButtonIconVariants.Primary,
           size: ButtonIconSizes.Sm,
         }}
       />,

app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap

@@ -217,7 +217,7 @@ exports[`Banner should render correctly with a close button 1`] = `
       testID="banner-close-button-icon"
     >
       <SvgMock
-        color="#0376C9"
+        color="#24272A"
         height={16}
         name="Close"
         style={

app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx

@@ -7,11 +7,8 @@ import React from 'react';
 import { TextVariant } from '../../../../Texts/Text';
 import { ButtonVariants, ButtonSize } from '../../../../Buttons/Button';
 import { ButtonProps } from '../../../../Buttons/Button/Button.types';
-import {
-  ButtonIconSizes,
-  ButtonIconVariants,
-} from '../../../../Buttons/ButtonIcon';
-import Icon, { IconName } from '../../../../Icons/Icon';
+import { ButtonIconSizes } from '../../../../Buttons/ButtonIcon';
+import Icon, { IconName, IconColor } from '../../../../Icons/Icon';
 import { SAMPLE_ICON_PROPS } from '../../../../Icons/Icon/Icon.constants';
 
 // Internal dependencies.
@@ -25,10 +22,12 @@ export const DEFAULT_BANNERBASE_TITLE_TEXTVARIANT = TextVariant.BodyLGMedium;
 export const DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT = TextVariant.BodyMD;
 export const DEFAULT_BANNERBASE_ACTIONBUTTON_VARIANT = ButtonVariants.Link;
 export const DEFAULT_BANNERBASE_ACTIONBUTTON_SIZE = ButtonSize.Auto;
-export const DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONVARIANT =
-  ButtonIconVariants.Secondary;
-export const DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONSIZE = ButtonIconSizes.Sm;
-export const DEFAULT_BANNERBASE_CLOSEBUTTON_ICONNAME = IconName.Close;
+export const DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICON_ICONCOLOR =
+  IconColor.Default;
+export const DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICON_SIZE =
+  ButtonIconSizes.Sm;
+export const DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICON_ICONNAME =
+  IconName.Close;
 
 // Samples
 const SAMPLE_BANNERBASE_STARTACCESSORY = <Icon {...SAMPLE_ICON_PROPS} />;

app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx

@@ -18,9 +18,9 @@ import {
   DEFAULT_BANNERBASE_TITLE_TEXTVARIANT,
   DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT,
   DEFAULT_BANNERBASE_ACTIONBUTTON_SIZE,
-  DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONVARIANT,
-  DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONSIZE,
-  DEFAULT_BANNERBASE_CLOSEBUTTON_ICONNAME,
+  DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICON_ICONCOLOR,
+  DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICON_SIZE,
+  DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICON_ICONNAME,
   TESTID_BANNER_CLOSE_BUTTON_ICON,
 } from './BannerBase.constants';
 
@@ -69,10 +69,10 @@ const BannerBase: React.FC<BannerBaseProps> = ({
         <View style={styles.endAccessory}>
           <ButtonIcon
             testID={TESTID_BANNER_CLOSE_BUTTON_ICON}
-            variant={DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONVARIANT}
-            size={DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONSIZE}
+            iconColor={DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICON_ICONCOLOR}
+            size={DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICON_SIZE}
             onPress={onClose || closeButtonProps?.onPress || noop}
-            iconName={DEFAULT_BANNERBASE_CLOSEBUTTON_ICONNAME}
+            iconName={DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICON_ICONNAME}
             {...closeButtonProps}
           />
         </View>

app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 // External dependencies.
 import { useStyles } from '../../../hooks';
 import HeaderBase from '../../HeaderBase';
-import ButtonIcon, { ButtonIconVariants } from '../../Buttons/ButtonIcon';
-import { IconName } from '../../Icons/Icon';
+import ButtonIcon from '../../Buttons/ButtonIcon';
+import { IconName, IconColor } from '../../Icons/Icon';
 
 // Internal dependencies.
 import styleSheet from './BottomSheetHeader.styles';
@@ -24,15 +24,15 @@ const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({
   const startAccessory = onBack && (
     <ButtonIcon
       iconName={IconName.ArrowLeft}
-      variant={ButtonIconVariants.Secondary}
+      iconColor={IconColor.Default}
       onPress={onBack}
     />
   );
 
   const endAccessory = onClose && (
     <ButtonIcon
       iconName={IconName.Close}
-      variant={ButtonIconVariants.Secondary}
+      iconColor={IconColor.Default}
       onPress={onClose}
     />
   );

app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.types.ts

@@ -1,10 +1,10 @@
 // External dependencies.
-import { HeaderProps } from '../../HeaderBase/Header.types';
+import { HeaderBaseProps } from '../../HeaderBase/HeaderBase.types';
 
 /**
  * BottomSheetHeader component props.
  */
-export interface BottomSheetHeaderProps extends HeaderProps {
+export interface BottomSheetHeaderProps extends HeaderBaseProps {
   /**
    * Optional function to trigger when pressing the back button.
    */

app/component-library/components/Buttons/ButtonIcon/ButtonIcon.constants.ts

@@ -2,33 +2,34 @@
 /* eslint-disable import/prefer-default-export */
 
 // External dependencies.
-import { IconSize, IconName } from '../../Icons/Icon';
+import { IconSize, IconName, IconColor } from '../../Icons/Icon';
 
 // Internal dependencies.
 import {
   ButtonIconSizes,
   IconSizeByButtonIconSize,
-  ButtonIconVariants,
   ButtonIconProps,
 } from './ButtonIcon.types';
 
 // Mappings
 export const ICONSIZE_BY_BUTTONICONSIZE: IconSizeByButtonIconSize = {
   [ButtonIconSizes.Sm]: IconSize.Sm,
+  [ButtonIconSizes.Md]: IconSize.Md,
   [ButtonIconSizes.Lg]: IconSize.Lg,
 };
 
 // Defaults
 export const DEFAULT_BUTTONICON_SIZE = ButtonIconSizes.Sm;
-export const DEFAULT_BUTTONICON_VARIANTS = ButtonIconVariants.Secondary;
+export const DEFAULT_BUTTONICON_ICONNAME = IconName.Add;
+export const DEFAULT_BUTTONICON_ICONCOLOR = IconColor.Default;
 
 // Samples
 export const SAMPLE_BUTTONICON_PROPS: ButtonIconProps = {
-  iconName: IconName.Add,
+  iconName: DEFAULT_BUTTONICON_ICONNAME,
   onPress: () => {
     console.log('Button Icon pressed');
   },
-  variant: DEFAULT_BUTTONICON_VARIANTS,
+  iconColor: DEFAULT_BUTTONICON_ICONCOLOR,
   size: DEFAULT_BUTTONICON_SIZE,
   isDisabled: false,
 };

app/component-library/components/Buttons/ButtonIcon/ButtonIcon.stories.tsx

@@ -1,10 +1,10 @@
 // External dependencies.
-import { IconName } from '../../Icons/Icon';
+import { IconName, IconColor } from '../../Icons/Icon';
 
 // Internal dependencies.
 import { default as ButtonIconComponent } from './ButtonIcon';
 import { SAMPLE_BUTTONICON_PROPS } from './ButtonIcon.constants';
-import { ButtonIconSizes, ButtonIconVariants } from './ButtonIcon.types';
+import { ButtonIconSizes } from './ButtonIcon.types';
 
 const ButtonIconMeta = {
   title: 'Component Library / Buttons',
@@ -15,28 +15,31 @@ const ButtonIconMeta = {
       control: {
         type: 'select',
       },
-      defaultValue: SAMPLE_BUTTONICON_PROPS.iconName,
     },
-    variant: {
-      options: ButtonIconVariants,
+    iconColor: {
+      options: IconColor,
       control: {
         type: 'select',
       },
-      defaultValue: SAMPLE_BUTTONICON_PROPS.variant,
     },
     size: {
       options: ButtonIconSizes,
       control: {
         type: 'select',
       },
-      defaultValue: SAMPLE_BUTTONICON_PROPS.size,
     },
     isDisabled: {
       control: { type: 'boolean' },
-      defaultValue: SAMPLE_BUTTONICON_PROPS.isDisabled,
     },
   },
 };
 export default ButtonIconMeta;
 
-export const ButtonIcon = {};
+export const ButtonIcon = {
+  args: {
+    iconName: SAMPLE_BUTTONICON_PROPS.iconName,
+    iconColor: SAMPLE_BUTTONICON_PROPS.iconColor,
+    size: SAMPLE_BUTTONICON_PROPS.size,
+    isDisabled: SAMPLE_BUTTONICON_PROPS.isDisabled,
+  },
+};

app/component-library/components/Buttons/ButtonIcon/ButtonIcon.styles.ts

@@ -29,7 +29,7 @@ const styleSheet = (params: {
         width: Number(size),
         borderRadius: 8,
         ...(pressed && {
-          backgroundColor: theme.colors.background.defaultPressed,
+          backgroundColor: theme.colors.background.pressed,
         }),
         opacity: isDisabled ? 0.5 : 1,
       } as ViewStyle,

app/component-library/components/Buttons/ButtonIcon/ButtonIcon.test.tsx

@@ -2,19 +2,21 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-// External dependencies.
-import { IconName } from '../../Icons/Icon';
-
 // Internal dependencies.
 import ButtonIcon from './ButtonIcon';
-import { ButtonIconVariants } from './ButtonIcon.types';
+import {
+  DEFAULT_BUTTONICON_SIZE,
+  DEFAULT_BUTTONICON_ICONCOLOR,
+  DEFAULT_BUTTONICON_ICONNAME,
+} from './ButtonIcon.constants';
 
 describe('ButtonIcon', () => {
   it('should render correctly', () => {
     const { toJSON } = render(
       <ButtonIcon
-        variant={ButtonIconVariants.Primary}
-        iconName={IconName.AddSquare}
+        iconColor={DEFAULT_BUTTONICON_ICONCOLOR}
+        iconName={DEFAULT_BUTTONICON_ICONNAME}
+        size={DEFAULT_BUTTONICON_SIZE}
         onPress={jest.fn}
       />,
     );

app/component-library/components/Buttons/ButtonIcon/ButtonIcon.tsx

@@ -1,54 +1,40 @@
 /* eslint-disable react/prop-types */
 
 // Third party dependencies.
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { GestureResponderEvent, TouchableOpacity } from 'react-native';
 
 // External dependencies.
 import Icon from '../../Icons/Icon';
 import { useStyles } from '../../../hooks';
 
 // Internal dependencies.
-import { ButtonIconProps, ButtonIconVariants } from './ButtonIcon.types';
+import { ButtonIconProps } from './ButtonIcon.types';
 import stylesheet from './ButtonIcon.styles';
 import {
   DEFAULT_BUTTONICON_SIZE,
-  DEFAULT_BUTTONICON_VARIANTS,
+  DEFAULT_BUTTONICON_ICONCOLOR,
   ICONSIZE_BY_BUTTONICONSIZE,
 } from './ButtonIcon.constants';
 
 const ButtonIcon = ({
   iconName,
-  variant = DEFAULT_BUTTONICON_VARIANTS,
+  onPress,
   onPressIn,
   onPressOut,
   style,
   size = DEFAULT_BUTTONICON_SIZE,
-  iconColorOverride = undefined,
+  iconColor = DEFAULT_BUTTONICON_ICONCOLOR,
   isDisabled = false,
   ...props
 }: ButtonIconProps) => {
   const [pressed, setPressed] = useState(false);
-  const {
-    styles,
-    theme: { colors },
-  } = useStyles(stylesheet, { style, size, pressed, isDisabled });
-  const iconColor = useMemo(() => {
-    let color: string;
-    if (isDisabled) {
-      color = colors.icon.muted;
-    } else {
-      switch (variant) {
-        case ButtonIconVariants.Primary:
-          color = colors.primary.default;
-          break;
-        case ButtonIconVariants.Secondary:
-          color = colors.icon.default;
-          break;
-      }
-    }
-    return color;
-  }, [colors, variant, isDisabled]);
+  const { styles } = useStyles(stylesheet, {
+    style,
+    size,
+    pressed,
+    isDisabled,
+  });
 
   const triggerOnPressedIn = useCallback(
     (e: GestureResponderEvent) => {
@@ -69,17 +55,18 @@ const ButtonIcon = ({
   return (
     <TouchableOpacity
       style={styles.base}
-      onPressIn={triggerOnPressedIn}
-      onPressOut={triggerOnPressedOut}
-      activeOpacity={1}
+      onPress={!isDisabled ? onPress : undefined}
+      onPressIn={!isDisabled ? triggerOnPressedIn : undefined}
+      onPressOut={!isDisabled ? triggerOnPressedOut : undefined}
       accessible
+      activeOpacity={1}
       disabled={isDisabled}
       {...props}
     >
       <Icon
         name={iconName}
         size={ICONSIZE_BY_BUTTONICONSIZE[size]}
-        color={iconColorOverride || iconColor}
+        color={iconColor}
       />
     </TouchableOpacity>
   );