chore: added rest props for icons

Author: computools-anastasiia-nahaiska

src/chips/assist-chip/AssistChip.component.tsx

@@ -0,0 +1,34 @@
+import React, {useMemo} from 'react';
+
+import {useTheme} from '../../theme/useTheme.hook';
+import {type IconProps} from '../../icons/icon-props';
+import {getColorStyles, styles} from './assist-chip.styles';
+import {BaseChip, type BaseChipProps} from '../base-chip/BaseChip.component';
+
+export interface AssistChipProps<T extends IconProps> extends BaseChipProps {
+  elevated?: boolean;
+  LeadingIcon?: React.FC<T>;
+  leadingIconProps?: T;
+}
+
+export const AssistChip = <T extends IconProps>({
+  elevated = false,
+  LeadingIcon,
+  leadingIconProps = {} as T,
+  style,
+  labelStyle,
+  disabled = false,
+  ...props
+}: AssistChipProps<T>) => {
+  const theme = useTheme();
+  const colorStyles = useMemo(() => getColorStyles(elevated, disabled, theme), [disabled, elevated, theme]);
+
+  return (
+    <BaseChip
+      style={[elevated && !disabled ? styles.elevatedContainer : styles.outlinedContainer, colorStyles.container, style]}
+      labelStyle={[colorStyles.label, labelStyle]}
+      leadingIcon={LeadingIcon ? <LeadingIcon size={18} color={colorStyles.icon.color} {...leadingIconProps} /> : null}
+      {...props}
+    />
+  );
+};

src/chips/base-chip/BaseChip.component.tsx

@@ -16,7 +16,7 @@ export const BaseChip: React.FC<BaseChipProps> = ({label, leadingIcon, trailingI
   const {labelLarge} = useTypography();
 
   return (
-    <TouchableOpacity style={[styles.container, style]} hitSlop={8} {...props}>
+    <TouchableOpacity style={[styles.container, style]} hitSlop={8} {...props} disabled>
       {leadingIcon}
       <Text style={[[styles.label, labelLarge]]}>{label}</Text>
       {trailingIcon}

src/chips/input-chip/InputChip.component.tsx

@@ -7,7 +7,7 @@ import {useTheme} from '../../theme/useTheme.hook';
 import {type IconProps} from '../../icons/icon-props';
 import {BaseChip, type BaseChipProps} from '../base-chip/BaseChip.component';
 
-interface InputChipProps<T extends IconProps> extends BaseChipProps {
+export interface InputChipProps<T extends IconProps> extends BaseChipProps {
   selected?: boolean;
   imageUrl?: string;
   LeadingIcon?: React.FC<T>;
@@ -22,6 +22,7 @@ export const InputChip = <T extends IconProps>({
   hasTrailingIcon = true,
   leadingIconProps = {} as T,
   style,
+  labelStyle,
   ...props
 }: InputChipProps<T>) => {
   const {surface, secondaryContainer, outline, primary} = useTheme();
@@ -48,7 +49,7 @@ export const InputChip = <T extends IconProps>({
   return (
     <BaseChip
       style={[dynamicStyles.container, imageUrl ? styles.chipWithAvatarContainer : [], style]}
-      labelStyle={dynamicStyles.label}
+      labelStyle={[dynamicStyles.label, labelStyle]}
       leadingIcon={LeadingIcon ? <LeadingIcon size={18} color={primary.background} {...leadingIconProps} /> : renderLeadingAvatar()}
       trailingIcon={hasTrailingIcon ? <CloseIcon size={18} color={onContainerColor} /> : null}
       {...props}

src/icons/account-circle-filled-icon/AccountCircleFilledIcon.component.tsx

@@ -7,8 +7,8 @@ import type {IconProps} from '../icon-props';
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = '#000';
 
-export const AccountCircleFilledIcon = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}: IconProps) => (
-  <Svg viewBox="0 0 24 24" width={size} height={size}>
+export const AccountCircleFilledIcon = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}: IconProps) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} {...props}>
     <Path fill={color} d={path} />
   </Svg>
 );

src/icons/arrow-back-icon/ArrowBackIcon.component.tsx

@@ -7,8 +7,8 @@ import type {IconProps} from '../icon-props';
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = '#000';
 
-export const ArrowBackIcon = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}: IconProps) => (
-  <Svg viewBox="0 0 24 24" width={size} height={size}>
+export const ArrowBackIcon = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}: IconProps) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} {...props}>
     <Path fill={color} d={path} />
   </Svg>
 );

src/icons/attach-file-icon/AttachFileIcon.component.tsx

@@ -7,8 +7,8 @@ import type {IconProps} from '../icon-props';
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = '#000';
 
-export const AttachFileIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}) => (
-  <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'}>
+export const AttachFileIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'} {...props}>
     <Path fill={color} d={path} />
   </Svg>
 );

src/icons/bookmark-border-icon/BookmarkBorderIcon.component.tsx

@@ -7,8 +7,8 @@ import type {IconProps} from '../icon-props';
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = '#000';
 
-export const BookmarkBorderIcon = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}: IconProps) => (
-  <Svg viewBox="0 0 24 24" width={size} height={size}>
+export const BookmarkBorderIcon = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}: IconProps) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} {...props}>
     <Path fill={color} d={path} />
   </Svg>
 );

src/icons/check-small-icon/CheckSmallIcon.component.tsx

@@ -7,8 +7,8 @@ import type {IconProps} from '../icon-props';
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = '#000';
 
-export const CheckSmallIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}) => (
-  <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'}>
+export const CheckSmallIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'} {...props}>
     <Path fill={color} d={path} />
   </Svg>
 );

src/icons/close-icon/CloseIcon.component.tsx

@@ -7,8 +7,8 @@ import type {IconProps} from '../icon-props';
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = '#000';
 
-export const CloseIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}) => (
-  <Svg viewBox="0 0 24 24" width={size} height={size}>
+export const CloseIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} {...props}>
     <Path fill={color} d={path} />
   </Svg>
 );

src/icons/delete-icon/DeleteIcon.component.tsx

@@ -7,8 +7,8 @@ import type {IconProps} from '../icon-props';
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = '#000';
 
-export const DeleteIcon = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}: IconProps) => (
-  <Svg viewBox="0 0 24 24" width={size} height={size}>
+export const DeleteIcon = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}: IconProps) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} {...props}>
     <Path fill={color} d={path} />
   </Svg>
 );