@hero-design/rn 8.42.4 → 8.43.1

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -70,6 +70,23 @@ exports[`StyledCheckbox renders correctly when disabled is true and readonly is
 
 exports[`StyledWrapper renders correctly when disabled is false, readonly is false 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={false}
@@ -95,6 +112,23 @@ exports[`StyledWrapper renders correctly when disabled is false, readonly is fal
 
 exports[`StyledWrapper renders correctly when disabled is false, readonly is true 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={false}
@@ -120,6 +154,23 @@ exports[`StyledWrapper renders correctly when disabled is false, readonly is tru
 
 exports[`StyledWrapper renders correctly when disabled is true, readonly is false 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={false}
@@ -145,6 +196,23 @@ exports[`StyledWrapper renders correctly when disabled is true, readonly is fals
 
 exports[`StyledWrapper renders correctly when disabled is true, readonly is true 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={false}

package/src/components/Checkbox/__tests__/__snapshots__/index.spec.tsx.snap

@@ -4,7 +4,19 @@ exports[`Checkbox renders correctly when checked is false and there is no descri
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -62,7 +74,19 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -142,7 +166,19 @@ exports[`Checkbox renders correctly when disabled is false and readonly is false
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -226,7 +262,19 @@ exports[`Checkbox renders correctly when disabled is false and readonly is true
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -310,7 +358,19 @@ exports[`Checkbox renders correctly when disabled is true and readonly is false
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -394,7 +454,19 @@ exports[`Checkbox renders correctly when disabled is true and readonly is true 1
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}

package/src/components/Chip/StyledChip.tsx

@@ -0,0 +1,121 @@
+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';
+  themeSelected?: boolean;
+};
+
+const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
+  ({ themeVariant, themeSelected, theme }) => {
+    const getShadowStyles = () => {
+      switch (themeVariant) {
+        case 'filled':
+          return {
+            ...theme.__hd__.chip.shadows.filledWrapper,
+          };
+        case 'outlined':
+          return undefined;
+      }
+    };
+
+    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,
+          };
+        }
+        case 'filled': {
+          return {
+            ...commonStyle,
+            borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
+          };
+        }
+      }
+    };
+
+    const getBackgroundStyles = () => {
+      if (themeSelected) {
+        switch (themeVariant) {
+          case 'outlined': {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.primaryBackground,
+            };
+          }
+          case 'filled':
+            return {
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
+            };
+        }
+      } else {
+        switch (themeVariant) {
+          case 'outlined': {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.outlinedBackground,
+            };
+          }
+          case 'filled':
+            return {
+              backgroundColor: theme.__hd__.chip.colors.filledBackground,
+            };
+        }
+      }
+    };
+
+    return {
+      alignSelf: 'flex-start',
+      flexDirection: 'row',
+      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,
+      ...getShadowStyles(),
+      ...getBorderStyles(),
+      ...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 };