npm - @hero-design/rn - Versions diffs - 8.76.1-alpha.0 → 8.76.1 - Mend

@hero-design/rn 8.76.1-alpha.0 → 8.76.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (345) hide show

package/src/components/BottomNavigation/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -72,7 +72,7 @@ exports[`BottomNavigation renders correctly 1`] = `
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
-              "shadowColor": "#460078",
+              "shadowColor": "#401960",
               "shadowOffset": {
                 "height": 3,
                 "width": 0,
@@ -139,7 +139,7 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#460078",
+                    "color": "#401960",
                     "fontSize": 24,
                   },
                   undefined,
@@ -155,7 +155,7 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#460078",
+                    "color": "#401960",
                     "fontFamily": "BeVietnamPro-SemiBold",
                     "fontSize": 12,
                     "letterSpacing": 0.24,

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap CHANGED Viewed

@@ -90,7 +90,7 @@ exports[`CalendarRowItem renders correctly 1`] = `
         style={
           [
             {
-              "backgroundColor": "#460078",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "bottom": "10%",
               "height": 4,
@@ -218,7 +218,7 @@ exports[`CalendarRowItem renders correctly 2`] = `
         style={
           [
             {
-              "backgroundColor": "#460078",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "bottom": "10%",
               "height": 4,
@@ -310,7 +310,7 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#460078",
+          "backgroundColor": "#401960",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
@@ -437,7 +437,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#460078",
+          "backgroundColor": "#401960",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
@@ -564,7 +564,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#460078",
+          "backgroundColor": "#401960",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,

package/src/components/Card/DataCard/__tests__/__snapshots__/StyledDataCard.spec.tsx.snap CHANGED Viewed

@@ -144,7 +144,7 @@ exports[`Indicator renders correctly when intent is primary 1`] = `
     style={
       [
         {
-          "backgroundColor": "#460078",
+          "backgroundColor": "#401960",
           "height": "100%",
           "width": 16,
         },

package/src/components/Card/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -210,7 +210,7 @@ exports[`Card renders correctly when intent is primary 1`] = `
     style={
       [
         {
-          "backgroundColor": "#460078",
+          "backgroundColor": "#401960",
           "borderRadius": 12,
           "overflow": "hidden",
         },

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap CHANGED Viewed

@@ -243,7 +243,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#460078",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,
@@ -262,7 +262,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#460078",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,
@@ -540,7 +540,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#460078",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,
@@ -559,7 +559,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#460078",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,

package/src/components/Carousel/__tests__/__snapshots__/StyledCardCarousel.spec.tsx.snap CHANGED Viewed

@@ -125,7 +125,7 @@ exports[`StyledPageControl should render correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#460078",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -144,7 +144,7 @@ exports[`StyledPageControl should render correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#460078",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -163,7 +163,7 @@ exports[`StyledPageControl should render correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#460078",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,

package/src/components/Carousel/__tests__/__snapshots__/StyledCarousel.spec.tsx.snap CHANGED Viewed

@@ -12,7 +12,7 @@ exports[`StyledBackDrop renders correct basic style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#f1e9fb",
+          "backgroundColor": "#ece8ef",
           "bottom": 0,
           "left": 0,
           "position": "absolute",
@@ -22,7 +22,7 @@ exports[`StyledBackDrop renders correct basic style 1`] = `
         undefined,
       ]
     }
-    themeSlideBackground="#f1e9fb"
+    themeSlideBackground="#ece8ef"
   />
   <View
     pointerEvents="box-none"

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

@@ -15,7 +15,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
       style={
         [
           {
-            "backgroundColor": "#f1e9fb",
+            "backgroundColor": "#ece8ef",
             "bottom": 0,
             "left": 0,
             "position": "absolute",
@@ -25,7 +25,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           undefined,
         ]
       }
-      themeSlideBackground="#f1e9fb"
+      themeSlideBackground="#ece8ef"
     />
     <View
       style={
@@ -55,13 +55,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
         data={
           [
             {
-              "background": "#f1e9fb",
+              "background": "#ece8ef",
               "body": "Access your Work, Money and Benefits in the palm of your hand.",
               "heading": "Welcome to the new Employment Hero app",
               "image": 1,
             },
             {
-              "background": "#DDC8F5",
+              "background": "#ccd2d3",
               "body": "Our app now has a new bright clean modern look and feel with the same great features.",
               "content": <Image
                 source={
@@ -74,7 +74,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               "image": "https://picsum.photos/800/1200",
             },
             {
-              "background": "#DDC8F5",
+              "background": "#ccd2d3",
               "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
               "heading": "Easier to get around",
               "image": {
@@ -85,7 +85,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               },
             },
             {
-              "background": "#DDC8F5",
+              "background": "#ccd2d3",
               "heading": "Test slide 4",
               "image": {
                 "height": 100,
@@ -94,7 +94,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               },
             },
             {
-              "background": "#DDC8F5",
+              "background": "#ccd2d3",
               "heading": "Test slide 5",
             },
           ]
@@ -701,7 +701,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               {
                 "alignItems": "center",
                 "alignSelf": "stretch",
-                "backgroundColor": "#460078",
+                "backgroundColor": "#401960",
                 "borderRadius": 32,
                 "flexDirection": "row",
                 "height": 60,
@@ -769,7 +769,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#460078",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -788,7 +788,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#460078",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -807,7 +807,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#460078",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -826,7 +826,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#460078",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -845,7 +845,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#460078",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -897,7 +897,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
       style={
         [
           {
-            "backgroundColor": "#f1e9fb",
+            "backgroundColor": "#ece8ef",
             "bottom": 0,
             "left": 0,
             "position": "absolute",
@@ -907,7 +907,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           undefined,
         ]
       }
-      themeSlideBackground="#f1e9fb"
+      themeSlideBackground="#ece8ef"
     />
     <View
       style={
@@ -946,7 +946,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#460078",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -965,7 +965,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#460078",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -984,7 +984,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#460078",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -1003,7 +1003,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#460078",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -1022,7 +1022,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#460078",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -1050,13 +1050,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         data={
           [
             {
-              "background": "#f1e9fb",
+              "background": "#ece8ef",
               "body": "Access your Work, Money and Benefits in the palm of your hand.",
               "heading": "Welcome to the new Employment Hero app",
               "image": 1,
             },
             {
-              "background": "#DDC8F5",
+              "background": "#ccd2d3",
               "body": "Our app now has a new bright clean modern look and feel with the same great features.",
               "content": <Image
                 source={
@@ -1069,7 +1069,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               "image": "https://picsum.photos/800/1200",
             },
             {
-              "background": "#DDC8F5",
+              "background": "#ccd2d3",
               "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
               "heading": "Easier to get around",
               "image": {
@@ -1080,7 +1080,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               },
             },
             {
-              "background": "#DDC8F5",
+              "background": "#ccd2d3",
               "heading": "Test slide 4",
               "image": {
                 "height": 100,
@@ -1089,7 +1089,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               },
             },
             {
-              "background": "#DDC8F5",
+              "background": "#ccd2d3",
               "heading": "Test slide 5",
             },
           ]
@@ -1696,7 +1696,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               {
                 "alignItems": "center",
                 "alignSelf": "stretch",
-                "backgroundColor": "#460078",
+                "backgroundColor": "#401960",
                 "borderRadius": 32,
                 "flexDirection": "row",
                 "height": 60,
@@ -1780,7 +1780,7 @@ exports[`Carousel should render correctly when image is undefined 1`] = `
       style={
         [
           {
-            "backgroundColor": "#DDC8F5",
+            "backgroundColor": "#ccd2d3",
             "bottom": 0,
             "left": 0,
             "position": "absolute",
@@ -1790,7 +1790,7 @@ exports[`Carousel should render correctly when image is undefined 1`] = `
           undefined,
         ]
       }
-      themeSlideBackground="#DDC8F5"
+      themeSlideBackground="#ccd2d3"
     />
     <View
       style={
@@ -1820,7 +1820,7 @@ exports[`Carousel should render correctly when image is undefined 1`] = `
         data={
           [
             {
-              "background": "#DDC8F5",
+              "background": "#ccd2d3",
               "heading": "Test slide 5",
             },
           ]
@@ -1972,7 +1972,7 @@ exports[`Carousel should render correctly when image is undefined 1`] = `
               {
                 "alignItems": "center",
                 "alignSelf": "stretch",
-                "backgroundColor": "#460078",
+                "backgroundColor": "#401960",
                 "borderRadius": 32,
                 "flexDirection": "row",
                 "height": 60,

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

@@ -486,7 +486,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#f1e9fb",
+        "backgroundColor": "#ece8ef",
         "borderColor": "transparent",
         "borderRadius": 999,
         "elevation": 3,
@@ -1150,7 +1150,7 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#f1e9fb",
+        "backgroundColor": "#ece8ef",
         "borderColor": "transparent",
         "borderRadius": 999,
         "elevation": 3,

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap CHANGED Viewed

@@ -617,7 +617,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                               },
                               [
                                 {
-                                  "color": "#460078",
+                                  "color": "#401960",
                                   "flexShrink": 1,
                                   "lineHeight": 22,
                                   "textAlign": "center",

package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -344,7 +344,7 @@ exports[`Error renders full screen error page correctly 1`] = `
       style={
         [
           {
-            "backgroundColor": "#DDC8F5",
+            "backgroundColor": "#ccd2d3",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",

package/src/components/FAB/ActionGroup/ActionItem.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ import {
   StyledActionItemText,
   StyledIcon,
 } from './StyledActionItem';
+import { useTheme } from '../../../theme';
 import { StyledIconContainer } from '../StyledFAB';
 export interface ActionItemProps {
@@ -37,6 +38,7 @@ const ActionItem = ({
   index,
   active = false,
 }: AnimatedActionItemProps) => {
+  const theme = useTheme();
   const animatedValue = React.useRef(new Animated.Value(0));
   const translateY = animatedValue.current.interpolate({
@@ -57,7 +59,7 @@ const ActionItem = ({
   return (
     <Animated.View style={{ transform: [{ translateY }] }}>
       <StyledActionItem
-        activeOpacity={0.8}
+        underlayColor={theme.__hd__.fab.colors.actionItemPressedBackground}
         style={style}
         onPress={onPress}
         testID={testID}

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx CHANGED Viewed

@@ -45,7 +45,7 @@ const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
   right: 0,
   top: 0,
   bottom: 0,
-  opacity: 0.8,
+  opacity: 0.25,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));

package/src/components/FAB/ActionGroup/StyledActionItem.tsx CHANGED Viewed

@@ -1,11 +1,11 @@
-import { TouchableOpacity } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 import styled from '@emotion/native';
 import type { TouchableOpacityProps } from 'react-native';
 import Typography from '../../Typography';
 import Icon from '../../Icon';
 import type { IconProps } from '../../Icon';
-const StyledActionItem = styled(TouchableOpacity)(({ theme }) => ({
+const StyledActionItem = styled(TouchableHighlight)(({ theme }) => ({
   padding: theme.__hd__.fab.space.actionItemPadding,
   margin: theme.__hd__.fab.space.actionItemMargin,
   marginRight: theme.__hd__.fab.space.actionItemMarginRight,