feat: implemented suggestion chip

Author: computools-anastasiia-nahaiska

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

@@ -5,19 +5,19 @@ import {type IconProps} from '../../icons/icon-props';
 import {getColorStyles, styles} from './assist-chip.styles';
 import {BaseChip, type BaseChipProps} from '../base-chip/BaseChip.component';
 
+export enum LeadingIconType {
+  COMMON = 'COMMON',
+  FAVICON = 'FAVICON',
+  BRANDED = 'BRANDED',
+}
+
 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,

src/chips/suggestion-chip/SuggestionChip.component.tsx

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

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

@@ -0,0 +1,58 @@
+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 getDynamicStyles = (selected: boolean, 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 [disabledUnselectedBackgroundColorByType, disabledUnselectedBorderColorByType] = elevated
+    ? [containerDisabledColor, 'transparent']
+    : ['transparent', containerDisabledColor];
+  const enabledBackgroundColorByType = elevated ? theme.surfaceContainer.backgroundLow : 'transparent';
+
+  return StyleSheet.create(
+    disabled
+      ? {
+          label: {
+            color: labelDisabledColor,
+          },
+          container: {
+            borderColor: selected ? 'transparent' : disabledUnselectedBorderColorByType,
+            backgroundColor: selected ? containerDisabledColor : disabledUnselectedBackgroundColorByType,
+          },
+          icon: {
+            color: labelDisabledColor,
+          },
+        }
+      : {
+          label: {
+            color: theme.surface.text,
+          },
+          container: {
+            borderColor: theme.outline,
+            borderWidth: Number(!selected && !elevated),
+            backgroundColor: selected ? theme.secondaryContainer.background : enabledBackgroundColorByType,
+          },
+          icon: {
+            color: theme.primary.background,
+          },
+        }
+  );
+};

src/index.tsx

@@ -5,7 +5,8 @@ export {Badge, type BadgeProps} from './badge/Badge.component';
 export {Divider, type DividerProps} from './divider/Divider.component';
 
 export {InputChip, type InputChipProps} from './chips/input-chip/InputChip.component';
-export {AssistChip, type AssistChipProps} from './chips/assist-chip/AssistChip.component';
+export {SuggestionChip, type SuggestionChipProps} from './chips/suggestion-chip/SuggestionChip.component';
+export {AssistChip, type AssistChipProps, LeadingIconType} from './chips/assist-chip/AssistChip.component';
 
 export {
   CenterAlignedTopAppBar,