feat: implemented assist chip

Author: computools-anastasiia-nahaiska

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

@@ -8,12 +8,20 @@ import {BaseChip, type BaseChipProps} from '../base-chip/BaseChip.component';
 export interface AssistChipProps<T extends IconProps> extends BaseChipProps {
   elevated?: boolean;
   LeadingIcon?: React.FC<T>;
+  leadingIconType?: LeadingIconType;
   leadingIconProps?: T;
 }
 
+export enum LeadingIconType {
+  COMMON = 'COMMON',
+  FAVICON = 'FAVICON',
+  BRANDED = 'BRANDED',
+}
+
 export const AssistChip = <T extends IconProps>({
   elevated = false,
   LeadingIcon,
+  leadingIconType = LeadingIconType.COMMON,
   leadingIconProps = {} as T,
   style,
   labelStyle,
@@ -23,11 +31,17 @@ export const AssistChip = <T extends IconProps>({
   const theme = useTheme();
   const colorStyles = useMemo(() => getColorStyles(elevated, disabled, theme), [disabled, elevated, theme]);
 
+  const leadingIconPropsMap: Record<LeadingIconType, IconProps> = {
+    [LeadingIconType.COMMON]: {size: 18, color: colorStyles.icon.color},
+    [LeadingIconType.FAVICON]: {size: 18},
+    [LeadingIconType.BRANDED]: {size: 18, style: {opacity: 0.38}},
+  };
+
   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}
+      leadingIcon={LeadingIcon ? <LeadingIcon {...leadingIconPropsMap[leadingIconType]} {...leadingIconProps} /> : null}
       {...props}
     />
   );

src/chips/assist-chip/assist-chip.styles.ts

@@ -0,0 +1,57 @@
+import {StyleSheet} from 'react-native';
+
+import {type Theme} from '../../theme/theme.types';
+import {convertToRGBA} from '../../utils/convert-to-rgba';
+
+export const styles = StyleSheet.create({
+  outlinedContainer: {
+    borderWidth: 1,
+  },
+  elevatedContainer: {
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 3,
+    elevation: 1,
+  },
+});
+
+export const getColorStyles = (elevated: boolean, disabled: boolean, theme: Theme) => {
+  const labelDisabledColor = convertToRGBA(theme.surface.text as string, 0.38);
+  const containerDisabledColor = convertToRGBA(theme.surface.textVariant as string, 0.12);
+
+  const [enabledBorderColor, enabledBackgroundColor] = elevated
+    ? ['transparent', theme.surfaceContainer.backgroundLow]
+    : [theme.outline, 'transparent'];
+  const [disabledBorderColor, disabledBackgroundColor] = elevated ? ['transparent', containerDisabledColor] : [containerDisabledColor, 'transparent'];
+
+  return StyleSheet.create(
+    disabled
+      ? {
+          label: {
+            color: labelDisabledColor,
+          },
+          container: {
+            backgroundColor: disabledBackgroundColor,
+            borderColor: disabledBorderColor,
+          },
+          icon: {
+            color: labelDisabledColor,
+          },
+        }
+      : {
+          label: {
+            color: theme.surface.text,
+          },
+          container: {
+            borderColor: enabledBorderColor,
+            backgroundColor: enabledBackgroundColor,
+          },
+          icon: {
+            color: theme.primary.background,
+          },
+        }
+  );
+};