@hero-design/rn 8.83.0-test.0 → 8.83.0

package/src/components/Slider/__tests__/__snapshots__/{Range.spec.tsx.snap → RangeSlider.spec.tsx.snap}

@@ -18,21 +18,9 @@ exports[`Slider.Range renders correctly by default 1`] = `
   >
     <MultiSlider
       allowOverlap={false}
+      customMarker={[Function]}
       enabledOne={true}
       enabledTwo={true}
-      markerStyle={
-        {
-          "backgroundColor": "#401960",
-          "elevation": 3,
-          "shadowColor": "#001f23",
-          "shadowOffset": {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 4,
-        }
-      }
       max={20}
       min={-10}
       onValuesChange={[Function]}
@@ -102,21 +90,9 @@ exports[`Slider.Range renders correctly when disabled is $disabled 1`] = `
   >
     <MultiSlider
       allowOverlap={false}
+      customMarker={[Function]}
       enabledOne={false}
       enabledTwo={false}
-      markerStyle={
-        {
-          "backgroundColor": "#bfc1c5",
-          "elevation": 3,
-          "shadowColor": "#001f23",
-          "shadowOffset": {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 4,
-        }
-      }
       max={10}
       min={-10}
       onValuesChange={[Function]}
@@ -166,3 +142,111 @@ exports[`Slider.Range renders correctly when disabled is $disabled 1`] = `
   />
 </View>
 `;
+
+exports[`StyledMarker renders correctly when disabled is false 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "elevation": 3,
+          "height": 24,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+    testID="marker"
+    themeDisabled={false}
+  />
+  <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[`StyledMarker renders correctly when disabled is true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#bfc1c5",
+          "borderRadius": 999,
+          "elevation": 3,
+          "height": 24,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+    testID="marker"
+    themeDisabled={true}
+  />
+  <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>
+`;

package/src/components/Slider/index.tsx

@@ -1,7 +1,7 @@
 import type { FunctionComponent } from 'react';
-import Single from './Single';
-import type { SingleSliderProps } from './Single';
-import Range from './Range';
+import Single from './SingleSlider';
+import type { SingleSliderProps } from './SingleSlider';
+import Range from './RangeSlider';
 
 interface SliderProps extends FunctionComponent<SingleSliderProps> {
   Range: typeof Range;

package/src/components/Tabs/StyledScrollableTabs.tsx

@@ -12,8 +12,9 @@ const TabContainer = styled(View)({
 
 const HeaderTabWrapper = styled(View)<{
   themeInsets: { top: number; right: number; bottom: number; left: number };
-}>(({ themeInsets }) => ({
+}>(({ themeInsets, theme }) => ({
   paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
+  backgroundColor: theme.__hd__.tabs.colors.headerBackground,
 }));
 
 const HeaderTabItem = styled(Animated.View)<{ isFirstItem?: boolean }>(

package/src/components/Tabs/StyledTabs.tsx

@@ -12,6 +12,7 @@ const HeaderTabWrapper = styled(View)<{
   paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
   borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
   borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom,
+  backgroundColor: theme.__hd__.tabs.colors.headerBackground,
 }));
 
 const HeaderTab = styled(View)({

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -128,6 +128,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
         style={
           [
             {
+              "backgroundColor": "#ffffff",
               "paddingHorizontal": 0,
             },
             undefined,
@@ -1057,6 +1058,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
         style={
           [
             {
+              "backgroundColor": "#ffffff",
               "paddingHorizontal": 0,
             },
             undefined,
@@ -1986,6 +1988,7 @@ exports[`useIsFocused renders correctly 1`] = `
         style={
           [
             {
+              "backgroundColor": "#ffffff",
               "paddingHorizontal": 0,
             },
             undefined,

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -23,6 +23,7 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
       style={
         [
           {
+            "backgroundColor": "#ffffff",
             "paddingHorizontal": 0,
           },
           undefined,
@@ -695,6 +696,7 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
       style={
         [
           {
+            "backgroundColor": "#ffffff",
             "paddingHorizontal": 0,
           },
           undefined,

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

@@ -128,6 +128,7 @@ exports[`Tabs renders correctly 1`] = `
         style={
           [
             {
+              "backgroundColor": "#ffffff",
               "borderBottomColor": "#e8e9ea",
               "borderBottomWidth": 2,
               "paddingHorizontal": 0,
@@ -801,6 +802,7 @@ exports[`useIsFocused renders correctly 1`] = `
         style={
           [
             {
+              "backgroundColor": "#ffffff",
               "borderBottomColor": "#e8e9ea",
               "borderBottomWidth": 2,
               "paddingHorizontal": 0,
@@ -1474,6 +1476,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
         style={
           [
             {
+              "backgroundColor": "#ffffff",
               "borderBottomColor": "#e8e9ea",
               "borderBottomWidth": 2,
               "paddingHorizontal": 0,

package/src/index.ts

@@ -17,6 +17,7 @@ import { scale } from './utils/scale';
 
 import Accordion from './components/Accordion';
 import Alert from './components/Alert';
+import AppCue from './components/AppCue';
 import Attachment from './components/Attachment';
 import Avatar, { useAvatarColors } from './components/Avatar';
 import Badge from './components/Badge';
@@ -91,6 +92,7 @@ export {
   eBensSystemPalette,
   Accordion,
   Alert,
+  AppCue,
   Attachment,
   Avatar,
   useAvatarColors,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -48,6 +48,20 @@ exports[`theme returns correct theme object 1`] = `
         "textPaddingHorizontal": 12,
       },
     },
+    "appCue": {
+      "colors": {
+        "backdropColor": "rgba(0, 0, 0, 0.5)",
+        "background": "#001f23",
+      },
+      "radii": {
+        "container": 12,
+      },
+      "space": {
+        "arrowOffset": 12,
+        "offset": 8,
+        "padding": 16,
+      },
+    },
     "attachment": {
       "colors": {
         "highlightedBackground": "#ece8ef",
@@ -1008,9 +1022,33 @@ exports[`theme returns correct theme object 1`] = `
     },
     "slider": {
       "colors": {
+        "disabledThumbTint": "#bfc1c5",
+        "disabledTrackBackground": "#f6f6f7",
         "maximumTrackTint": "#ece8ef",
         "minimumTrackTint": "#401960",
         "thumbTint": "#401960",
+        "trackBackground": "#ece8ef",
+      },
+      "radii": {
+        "marker": 999,
+      },
+      "shadows": {
+        "marker": {
+          "elevation": 3,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+        },
+      },
+      "sizes": {
+        "markerBorderRadius": 999,
+        "markerHeight": 24,
+        "markerWidth": 24,
+        "trackHeight": 4,
       },
     },
     "spinner": {
@@ -1125,6 +1163,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "active": "#001f23",
         "activeBackground": "#ccd2d3",
+        "headerBackground": "#ffffff",
         "headerBottom": "#e8e9ea",
         "inactive": "#001f23",
         "indicator": "#401960",

package/src/theme/components/appCue.ts

@@ -0,0 +1,22 @@
+import type { GlobalTheme } from '../global';
+
+const getAppCueTheme = (theme: GlobalTheme) => {
+  const colors = {
+    background: theme.colors.darkGlobalSurface,
+    backdropColor: 'rgba(0, 0, 0, 0.5)',
+  };
+
+  const space = {
+    padding: theme.space.medium,
+    offset: theme.space.small,
+    arrowOffset: theme.space.smallMedium,
+  };
+
+  const radii = {
+    container: theme.radii.large,
+  };
+
+  return { colors, space, radii };
+};
+
+export default getAppCueTheme;

package/src/theme/components/slider.ts

@@ -16,9 +16,16 @@ const getSliderTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     trackHeight: theme.sizes.xsmall,
+    markerWidth: theme.sizes.large,
+    markerHeight: theme.sizes.large,
+    markerBorderRadius: theme.radii.rounded,
   };
 
-  return { colors, shadows, sizes };
+  const radii = {
+    marker: theme.radii.rounded,
+  };
+
+  return { colors, shadows, sizes, radii };
 };
 
 export default getSliderTheme;

package/src/theme/components/tabs.ts

@@ -8,6 +8,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
     headerBottom: theme.colors.secondaryOutline,
     indicator: theme.colors.primary,
     text: theme.colors.onDefaultGlobalSurface,
+    headerBackground: theme.colors.defaultGlobalSurface,
   };
 
   const space = {

package/src/theme/getTheme.ts

@@ -51,11 +51,13 @@ import type { GlobalTheme, Scale, SystemPalette } from './global';
 import getSearchTheme from './components/search';
 import getMapPinTheme from './components/mapPin';
 import getFloatingIslandTheme from './components/floatingIsland';
+import getAppCueTheme from './components/appCue';
 
 type Theme = GlobalTheme & {
   __hd__: {
     accordion: ReturnType<typeof getAccordionTheme>;
     alert: ReturnType<typeof getAlertTheme>;
+    appCue: ReturnType<typeof getAppCueTheme>;
     attachment: ReturnType<typeof getAttachmentTheme>;
     avatar: ReturnType<typeof getAvatarTheme>;
     badge: BadgeThemeType;
@@ -116,6 +118,7 @@ const getTheme = (
     __hd__: {
       accordion: getAccordionTheme(globalTheme),
       alert: getAlertTheme(globalTheme),
+      appCue: getAppCueTheme(globalTheme),
       attachment: getAttachmentTheme(globalTheme),
       avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),

package/src/types.ts

@@ -17,7 +17,7 @@ import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
 import { FABHandles } from './components/FAB/FAB';
 import { ActionGroupHandles } from './components/FAB/ActionGroup';
-import type { SliderRangeValue } from './components/Slider/Range';
+import type { SliderRangeValue } from './components/Slider/RangeSlider';
 
 export type {
   BottomNavigationTabType,