@hero-design/rn 8.69.0 → 8.71.0

package/src/components/Chip/StyledChip.tsx

@@ -1,11 +1,8 @@
 import styled from '@emotion/native';
 import { TouchableOpacity } from 'react-native';
-import Box from '../Box';
-import Icon from '../Icon';
-import Typography from '../Typography';
 
 type StyledChipWrapperProps = {
-  themeVariant?: 'outlined' | 'filled';
+  themeVariant?: 'outlined' | 'filled' | 'compact';
   themeSelected?: boolean;
 };
 
@@ -13,6 +10,7 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
   ({ themeVariant, themeSelected, theme }) => {
     const getShadowStyles = () => {
       switch (themeVariant) {
+        case 'compact':
         case 'filled':
           return {
             ...theme.__hd__.chip.shadows.filledWrapper,
@@ -23,27 +21,20 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
     };
 
     const getBorderStyles = () => {
-      const commonStyle = {
-        borderWidth: theme.__hd__.chip.sizes.wrapperBorder,
-      };
-
-      if (themeSelected) {
-        return {
-          ...commonStyle,
-          borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
-        };
-      }
-
       switch (themeVariant) {
         case 'outlined': {
           return {
-            ...commonStyle,
-            borderColor: theme.__hd__.chip.colors.wrapperBorder,
+            borderColor: themeSelected
+              ? theme.__hd__.chip.colors.outlinedSelectedBorder
+              : theme.__hd__.chip.colors.outlinedDefaultBorder,
+            borderWidth: themeSelected
+              ? theme.__hd__.chip.sizes.outlinedSelectedBorder
+              : theme.__hd__.chip.sizes.outlinedDefaultBorder,
           };
         }
+        case 'compact':
         case 'filled': {
           return {
-            ...commonStyle,
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
           };
         }
@@ -55,25 +46,62 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
         switch (themeVariant) {
           case 'outlined': {
             return {
-              backgroundColor: theme.__hd__.chip.colors.primaryBackground,
+              backgroundColor: themeSelected
+                ? theme.__hd__.chip.colors.outlinedSelectedBackground
+                : theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled':
+          case 'filled': {
             return {
               backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
             };
+          }
+
+          case 'compact': {
+            return {
+              backgroundColor:
+                theme.__hd__.chip.colors.compactSelectedBackground,
+            };
+          }
         }
       } else {
         switch (themeVariant) {
           case 'outlined': {
             return {
-              backgroundColor: theme.__hd__.chip.colors.outlinedBackground,
+              backgroundColor:
+                theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled':
+          case 'filled': {
             return {
               backgroundColor: theme.__hd__.chip.colors.filledBackground,
             };
+          }
+          case 'compact': {
+            return {
+              backgroundColor:
+                theme.__hd__.chip.colors.compactDefaultBackground,
+            };
+          }
+        }
+      }
+    };
+
+    const getPaddingStyles = () => {
+      switch (themeVariant) {
+        case 'compact': {
+          return {
+            paddingHorizontal:
+              theme.__hd__.chip.space.compactWrapperHorizontalPadding,
+            paddingVertical:
+              theme.__hd__.chip.space.compactWrapperVerticalPadding,
+          };
+        }
+        default: {
+          return {
+            paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
+            paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
+          };
         }
       }
     };
@@ -84,38 +112,16 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: theme.__hd__.chip.radii.wrapper,
-      paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
-      paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
-      borderWidth: theme.__hd__.chip.sizes.wrapperBorder,
+      marginTop:
+        themeSelected && themeVariant === 'outlined'
+          ? theme.__hd__.chip.space.outlinedSelectedMarginTop
+          : undefined,
       ...getShadowStyles(),
       ...getBorderStyles(),
+      ...getPaddingStyles(),
       ...getBackgroundStyles(),
     };
   }
 );
 
-const StyledIconWrapper = styled(Box)(({ theme }) => ({
-  marginRight: theme.__hd__.chip.space.iconWrapperMarginRight,
-}));
-
-const StyledLabel = styled(Typography.Body)<{
-  themeSelected?: boolean;
-  themeVariant?: 'outlined' | 'filled';
-}>(({ themeSelected, themeVariant, theme }) => ({
-  color:
-    themeSelected && themeVariant === 'outlined'
-      ? theme.__hd__.chip.colors.selectedPrimaryText
-      : undefined,
-}));
-
-const StyledIcon = styled(Icon)<{
-  themeSelected?: boolean;
-  themeVariant?: 'outlined' | 'filled';
-}>(({ themeSelected, themeVariant, theme }) => ({
-  color:
-    themeSelected && themeVariant === 'outlined'
-      ? theme.__hd__.chip.colors.selectedPrimaryText
-      : undefined,
-}));
-
-export { StyledChipWrapper, StyledIcon, StyledIconWrapper, StyledLabel };
+export { StyledChipWrapper };