@hero-design/rn 8.42.4 → 8.43.0

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

@@ -24,6 +24,7 @@ exports[`Button renders correctly 1`] = `
         "backgroundColor": "#401960",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -89,6 +90,7 @@ exports[`Button renders correctly 2`] = `
         "backgroundColor": "#401960",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -104,7 +106,6 @@ exports[`Button renders correctly 2`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 1,
         },
         {},
       ]
@@ -132,9 +133,7 @@ exports[`Button renders correctly 2`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -164,9 +163,7 @@ exports[`Button renders correctly 2`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -196,9 +193,7 @@ exports[`Button renders correctly 2`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -235,6 +230,7 @@ exports[`Button renders correctly 3`] = `
         "backgroundColor": "#bfc1c5",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -302,6 +298,7 @@ exports[`Button renders correctly 4`] = `
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 14,
       },
@@ -369,6 +366,7 @@ exports[`Button renders correctly 5`] = `
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 14,
       },
@@ -384,7 +382,6 @@ exports[`Button renders correctly 5`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 1,
         },
         {},
       ]
@@ -412,9 +409,7 @@ exports[`Button renders correctly 5`] = `
               "backgroundColor": "#401960",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -444,9 +439,7 @@ exports[`Button renders correctly 5`] = `
               "backgroundColor": "#401960",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -476,9 +469,7 @@ exports[`Button renders correctly 5`] = `
               "backgroundColor": "#401960",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -517,6 +508,7 @@ exports[`Button renders correctly 6`] = `
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 14,
       },
@@ -582,6 +574,7 @@ exports[`Button renders correctly 7`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -648,6 +641,7 @@ exports[`Button renders correctly 8`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -663,7 +657,6 @@ exports[`Button renders correctly 8`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 1,
         },
         {},
       ]
@@ -691,9 +684,7 @@ exports[`Button renders correctly 8`] = `
               "backgroundColor": "#795e90",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -723,9 +714,7 @@ exports[`Button renders correctly 8`] = `
               "backgroundColor": "#795e90",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -755,9 +744,7 @@ exports[`Button renders correctly 8`] = `
               "backgroundColor": "#795e90",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -794,6 +781,7 @@ exports[`Button renders correctly 9`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -860,6 +848,7 @@ exports[`Button renders correctly 10`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -926,6 +915,7 @@ exports[`Button renders correctly 11`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -941,7 +931,6 @@ exports[`Button renders correctly 11`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 1,
         },
         {},
       ]
@@ -969,9 +958,7 @@ exports[`Button renders correctly 11`] = `
               "backgroundColor": "#795e90",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -1001,9 +988,7 @@ exports[`Button renders correctly 11`] = `
               "backgroundColor": "#795e90",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -1033,9 +1018,7 @@ exports[`Button renders correctly 11`] = `
               "backgroundColor": "#795e90",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -1072,6 +1055,7 @@ exports[`Button renders correctly 12`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -1138,6 +1122,7 @@ exports[`Button renders correctly 13`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -1204,6 +1189,7 @@ exports[`Button renders correctly 14`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -1219,7 +1205,6 @@ exports[`Button renders correctly 14`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 1,
         },
         {},
       ]
@@ -1247,9 +1232,7 @@ exports[`Button renders correctly 14`] = `
               "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -1279,9 +1262,7 @@ exports[`Button renders correctly 14`] = `
               "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -1311,9 +1292,7 @@ exports[`Button renders correctly 14`] = `
               "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -1350,6 +1329,7 @@ exports[`Button renders correctly 15`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -1416,6 +1396,7 @@ exports[`Button renders loading icon 1`] = `
         "backgroundColor": "#401960",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -1432,7 +1413,6 @@ exports[`Button renders loading icon 1`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 1,
         },
         {},
       ]
@@ -1460,9 +1440,7 @@ exports[`Button renders loading icon 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -1492,9 +1470,7 @@ exports[`Button renders loading icon 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},
@@ -1524,9 +1500,7 @@ exports[`Button renders loading icon 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 8,
               "height": 12,
-              "marginBottom": 4,
               "marginHorizontal": 8,
-              "marginTop": 4,
               "width": 12,
             },
             {},

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

@@ -19,6 +19,7 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
         "backgroundColor": "#cb300a",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -51,6 +52,7 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
         "backgroundColor": "#401960",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -83,6 +85,7 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
         "backgroundColor": "#795e90",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -117,6 +120,7 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 14,
       },
@@ -151,6 +155,7 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 14,
       },
@@ -185,6 +190,7 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 14,
       },
@@ -217,6 +223,7 @@ exports[`StyledButtonContainer has text-danger style 1`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -249,6 +256,7 @@ exports[`StyledButtonContainer has text-primary style 1`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -281,6 +289,7 @@ exports[`StyledButtonContainer has text-secondary style 1`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -318,6 +327,7 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
         "backgroundColor": "#bfc1c5",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },

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

@@ -622,6 +622,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               "backgroundColor": "#401960",
               "borderRadius": 32,
               "flexDirection": "row",
+              "height": 60,
               "justifyContent": "center",
               "padding": 16,
             },
@@ -1475,6 +1476,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               "backgroundColor": "#401960",
               "borderRadius": 32,
               "flexDirection": "row",
+              "height": 60,
               "justifyContent": "center",
               "padding": 16,
             },
@@ -2235,6 +2237,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
               "backgroundColor": "#401960",
               "borderRadius": 32,
               "flexDirection": "row",
+              "height": 60,
               "justifyContent": "center",
               "padding": 16,
             },

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

@@ -4,7 +4,7 @@ import { ImageResizeMode } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Carousel from '..';
 import Image from '../../Image';
-import { Portal, ThemeProvider, theme } from '../../..';
+import { ThemeProvider, theme } from '../../..';
 import Button from '../../Button/Button';
 
 const carouselData = [
@@ -144,15 +144,13 @@ describe('Carousel', () => {
     );
     rerender(
       <ThemeProvider theme={theme}>
-        <Portal.Provider>
-          <Carousel
-            testID="carousel"
-            items={carouselData}
-            renderActions={(_) => {
-              return <Button text="Skip" onPress={onSkip} />;
-            }}
-          />
-        </Portal.Provider>
+        <Carousel
+          testID="carousel"
+          items={carouselData}
+          renderActions={(_) => {
+            return <Button text="Skip" onPress={onSkip} />;
+          }}
+        />
       </ThemeProvider>
     );
 

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 };