@hero-design/rn 8.70.0 → 8.72.0

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -288,7 +288,7 @@ exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#795e90",
+          "backgroundColor": "#4d6265",
           "borderRadius": 8,
           "height": 12,
           "marginHorizontal": 8,
@@ -380,7 +380,7 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#795e90",
+          "backgroundColor": "#4d6265",
           "borderRadius": 8,
           "height": 12,
           "marginHorizontal": 8,
@@ -426,7 +426,7 @@ exports[`StyledLoadingIndicator has text-secondary style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#795e90",
+          "backgroundColor": "#4d6265",
           "borderRadius": 8,
           "height": 12,
           "marginHorizontal": 8,

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -849,7 +849,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
         style={
           [
             {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#4d6265",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -879,7 +879,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
         style={
           [
             {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#4d6265",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -909,7 +909,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
         style={
           [
             {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#4d6265",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1119,7 +1119,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
         style={
           [
             {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#4d6265",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1149,7 +1149,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
         style={
           [
             {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#4d6265",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1179,7 +1179,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
         style={
           [
             {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#4d6265",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1254,7 +1254,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         style={
           [
             {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#4d6265",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1284,7 +1284,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         style={
           [
             {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#4d6265",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1314,7 +1314,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         style={
           [
             {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#4d6265",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,

package/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap

@@ -1104,7 +1104,7 @@ exports[`Button renders correctly 8`] = `
           style={
             [
               {
-                "backgroundColor": "#795e90",
+                "backgroundColor": "#4d6265",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1134,7 +1134,7 @@ exports[`Button renders correctly 8`] = `
           style={
             [
               {
-                "backgroundColor": "#795e90",
+                "backgroundColor": "#4d6265",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1164,7 +1164,7 @@ exports[`Button renders correctly 8`] = `
           style={
             [
               {
-                "backgroundColor": "#795e90",
+                "backgroundColor": "#4d6265",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1367,7 +1367,7 @@ exports[`Button renders correctly 10`] = `
           },
           [
             {
-              "color": "#795e90",
+              "color": "#4d6265",
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
@@ -1486,7 +1486,7 @@ exports[`Button renders correctly 11`] = `
           style={
             [
               {
-                "backgroundColor": "#795e90",
+                "backgroundColor": "#4d6265",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1516,7 +1516,7 @@ exports[`Button renders correctly 11`] = `
           style={
             [
               {
-                "backgroundColor": "#795e90",
+                "backgroundColor": "#4d6265",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1546,7 +1546,7 @@ exports[`Button renders correctly 11`] = `
           style={
             [
               {
-                "backgroundColor": "#795e90",
+                "backgroundColor": "#4d6265",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -169,7 +169,7 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "stretch",
-          "backgroundColor": "#795e90",
+          "backgroundColor": "#4d6265",
           "borderRadius": 32,
           "flexDirection": "row",
           "height": 60,
@@ -381,7 +381,7 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
           "alignItems": "center",
           "alignSelf": "stretch",
           "backgroundColor": "transparent",
-          "borderColor": "#795e90",
+          "borderColor": "#4d6265",
           "borderRadius": 32,
           "borderWidth": 2,
           "flexDirection": "row",
@@ -974,7 +974,7 @@ exports[`StyledButtonIcon has outlined-secondary style 1`] = `
         },
         [
           {
-            "color": "#795e90",
+            "color": "#4d6265",
             "fontSize": 20,
           },
           undefined,
@@ -1127,7 +1127,7 @@ exports[`StyledButtonIcon has text-secondary style 1`] = `
         },
         [
           {
-            "color": "#795e90",
+            "color": "#4d6265",
             "fontSize": 20,
           },
           undefined,
@@ -1611,7 +1611,7 @@ exports[`StyledButtonText has outlined-secondary style 1`] = `
         },
         [
           {
-            "color": "#795e90",
+            "color": "#4d6265",
             "flexShrink": 1,
             "textAlign": "center",
           },
@@ -1788,7 +1788,7 @@ exports[`StyledButtonText has text-secondary style 1`] = `
         },
         [
           {
-            "color": "#795e90",
+            "color": "#4d6265",
             "flexShrink": 1,
             "textAlign": "center",
           },

package/src/components/Chip/StyledChip.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/native';
 import { TouchableOpacity } from 'react-native';
 
 type StyledChipWrapperProps = {
-  themeVariant?: 'outlined' | 'filled';
+  themeVariant?: 'outlined' | 'filled' | 'compact';
   themeSelected?: boolean;
 };
 
@@ -10,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,
@@ -31,6 +32,7 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
               : theme.__hd__.chip.sizes.outlinedDefaultBorder,
           };
         }
+        case 'compact':
         case 'filled': {
           return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
@@ -49,10 +51,18 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
                 : 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) {
@@ -62,10 +72,36 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
                 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,
+          };
         }
       }
     };
@@ -76,13 +112,13 @@ 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,
-      marginTop: themeSelected
-        ? theme.__hd__.chip.space.outlinedSelectedMarginTop
-        : undefined,
+      marginTop:
+        themeSelected && themeVariant === 'outlined'
+          ? theme.__hd__.chip.space.outlinedSelectedMarginTop
+          : undefined,
       ...getShadowStyles(),
       ...getBorderStyles(),
+      ...getPaddingStyles(),
       ...getBackgroundStyles(),
     };
   }

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

@@ -496,7 +496,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": -2,
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -805,6 +805,216 @@ exports[`Chip renders correctly with default icon 2`] = `
 </View>
 `;
 
+exports[`Chip renders correctly with variant compact and selected false 1`] = `
+<View
+  style={
+    {
+      "flex": 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}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ffffff",
+        "borderColor": "transparent",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "marginTop": undefined,
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Chip renders correctly with variant compact and selected true 1`] = `
+<View
+  style={
+    {
+      "flex": 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}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#f6f6f7",
+        "borderColor": "transparent",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "marginTop": undefined,
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Chip renders correctly with variant filled and selected false 1`] = `
 <View
   style={
@@ -956,7 +1166,7 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": -2,
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,

package/src/components/Chip/__tests__/index.spec.tsx

@@ -86,6 +86,8 @@ describe('Chip', () => {
     ${'filled'}   | ${false}
     ${'outlined'} | ${true}
     ${'outlined'} | ${false}
+    ${'compact'}  | ${true}
+    ${'compact'}  | ${false}
   `(
     'renders correctly with variant $variant and selected $selected',
     ({ variant, selected }) => {

package/src/components/Chip/index.tsx

@@ -13,7 +13,7 @@ export interface ChipProps extends ViewProps {
   /**
    * Variant of the chip.
    */
-  variant?: 'outlined' | 'filled';
+  variant?: 'outlined' | 'filled' | 'compact';
   /**
    * Whether the chip is selected.
    */

package/src/components/FAB/FAB.tsx

@@ -83,11 +83,16 @@ const IconOnlyContent = ({
           active={active}
           icon={icon}
           testID="animated-fab-icon"
+          size="xsmall"
         />
       </StyledIconContainer>
     );
   }
-  return <StyledFABIcon icon={icon} testID="styled-fab-icon" />;
+  return (
+    <StyledIconContainer>
+      <StyledFABIcon size="xsmall" icon={icon} testID="styled-fab-icon" />
+    </StyledIconContainer>
+  );
 };
 
 const IconWithTextContent = ({

package/src/components/FAB/Pair/StyledFAB.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/native';
+import FAB from '../FAB';
+import Box from '../../Box';
+
+const StyledFABPairWrapper = styled(Box)({
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const StyledFAB = styled(FAB)<{ iconOnly?: boolean; isLast?: boolean }>(
+  ({ theme, iconOnly = false, isLast = false }) => ({
+    height: theme.__hd__.fab.sizes.fabPairHeight,
+    width: iconOnly ? theme.__hd__.fab.sizes.fabPairIconOnlyWidth : undefined,
+    marginRight: isLast ? undefined : theme.__hd__.fab.space.fabPairMarginRight,
+  })
+);
+
+export { StyledFABPairWrapper, StyledFAB };