@hero-design/rn 8.82.2-alpha.2 → 8.83.0

package/src/components/Slider/SingleSlider.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import RnSlider from '@react-native-community/slider';
+import { StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+
+export interface SingleSliderProps {
+  /**
+   * Minimum value of the slider.
+   * Defaults to 0.
+   */
+  minimumValue?: number;
+  /**
+   * Maximum value of the slider.
+   * Defaults to 1.
+   */
+  maximumValue?: number;
+  /**
+   * Step value of the slider.
+   * The value should be between 0 and (maximumValue - minimumValue).
+   * Defaults to 0.
+   */
+  step?: number;
+  /**
+   * Value of the slider.
+   * Defaults to 0.
+   */
+  value?: number;
+  /**
+   * Callback continuously called while the user is dragging the slider.
+   */
+  onValueChange?: (value: number) => void;
+  /**
+   * Callback that is called when the user picks up the slider.
+   * The initial value is passed as an argument to the callback handler.
+   */
+  onSlidingStart?: (value: number) => void;
+  /**
+   * Callback that is called when the user releases the slider, regardless if the value has changed.
+   * The current value is passed as an argument to the callback handler.
+   */
+  onSlidingComplete?: (value: number) => void;
+  /**
+   * Whether the slider is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Slider = ({
+  minimumValue = 0,
+  maximumValue = 1,
+  step = 0,
+  value = 0,
+  onValueChange,
+  onSlidingStart,
+  onSlidingComplete,
+  disabled = false,
+  style,
+  testID,
+}: SingleSliderProps) => {
+  const theme = useTheme();
+
+  return (
+    <RnSlider
+      minimumValue={minimumValue}
+      maximumValue={maximumValue}
+      step={step}
+      value={value}
+      onValueChange={onValueChange}
+      onSlidingStart={onSlidingStart}
+      onSlidingComplete={onSlidingComplete}
+      disabled={disabled}
+      minimumTrackTintColor={theme.__hd__.slider.colors.minimumTrackTint}
+      thumbTintColor={theme.__hd__.slider.colors.thumbTint}
+      maximumTrackTintColor={theme.__hd__.slider.colors.maximumTrackTint}
+      style={style}
+      testID={testID}
+    />
+  );
+};
+
+export default Slider;

package/src/components/Slider/StyledRangeSlider.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/native';
+import { View } from 'react-native';
+
+const StyledMarker = styled(View)<{ themeDisabled: boolean }>(
+  ({ themeDisabled, theme }) => ({
+    height: theme.__hd__.slider.sizes.markerHeight,
+    width: theme.__hd__.slider.sizes.markerWidth,
+    borderRadius: theme.__hd__.slider.radii.marker,
+    backgroundColor: themeDisabled
+      ? theme.__hd__.slider.colors.disabledThumbTint
+      : theme.__hd__.slider.colors.thumbTint,
+    ...theme.__hd__.slider.shadows.marker,
+  })
+);
+
+export { StyledMarker };

package/src/components/Slider/__tests__/RangeSlider.spec.tsx

@@ -0,0 +1,119 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import RangeSlider from '../RangeSlider';
+import { StyledMarker } from '../StyledRangeSlider';
+
+describe('Slider.Range', () => {
+  it('renders correctly by default', async () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <RangeSlider
+        maximumValue={20}
+        minimumValue={-10}
+        value={{
+          start: 0,
+          end: 10,
+        }}
+      />
+    );
+    // Trigger the onLayout event
+    const nativeComponent = getByTestId('native-multi-slider');
+    fireEvent(nativeComponent, 'layout', {
+      nativeEvent: {
+        layout: { width: 100, height: 50 },
+      },
+    });
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(nativeComponent.props['selectedStyle'].backgroundColor).toBe(
+      '#401960'
+    );
+
+    expect(nativeComponent.props['trackStyle'].backgroundColor).toBe('#ece8ef');
+
+    // verify prop
+    expect(nativeComponent).toHaveProp('sliderLength', 100);
+    expect(nativeComponent).toHaveProp('values', [0, 10]);
+    expect(nativeComponent).toHaveProp('min', -10);
+    expect(nativeComponent).toHaveProp('max', 20);
+  });
+
+  it('when value is undefined, value should be minumum and maximum', () => {
+    const { getByTestId } = renderWithTheme(
+      <RangeSlider maximumValue={20} minimumValue={-10} />
+    );
+    const nativeComponent = getByTestId('native-multi-slider');
+    expect(nativeComponent.props['values']).toEqual([-10, 20]);
+  });
+
+  it('renders correctly when disabled is $disabled', () => {
+    const { getByTestId, toJSON } = renderWithTheme(
+      <RangeSlider
+        testID="range-slider"
+        minimumValue={-10}
+        maximumValue={10}
+        disabled
+      />
+    );
+
+    const slider = getByTestId('range-slider');
+    expect(slider).toHaveAccessibilityState({ disabled: true });
+
+    expect(toJSON()).toMatchSnapshot();
+    const nativeComponent = getByTestId('native-multi-slider');
+
+    expect(nativeComponent.props['selectedStyle'].backgroundColor).toBe(
+      '#bfc1c5'
+    );
+
+    expect(nativeComponent.props['trackStyle'].backgroundColor).toBe('#f6f6f7');
+  });
+
+  it('trigger options', () => {
+    const onValueChangeSpy = jest.fn();
+    const onSlidingStartSpy = jest.fn();
+    const onSlidingCompleteSpy = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <RangeSlider
+        value={{ start: 2, end: 5 }}
+        minimumValue={-10}
+        maximumValue={10}
+        step={0.25}
+        onValueChange={onValueChangeSpy}
+        onSlidingStart={onSlidingStartSpy}
+        onSlidingComplete={onSlidingCompleteSpy}
+      />
+    );
+
+    const nativeComponent = getByTestId('native-multi-slider');
+    fireEvent(nativeComponent, 'valuesChangeStart', [2, 5]);
+    expect(onSlidingStartSpy).toHaveBeenCalled();
+
+    fireEvent(nativeComponent, 'valuesChange', [2, 5]);
+    expect(onValueChangeSpy).toHaveBeenCalledWith({ start: 2, end: 5 });
+
+    fireEvent(nativeComponent, 'valuesChangeFinish', [2, 5]);
+    expect(onSlidingCompleteSpy).toHaveBeenCalledWith({ start: 2, end: 5 });
+  });
+});
+
+describe('StyledMarker', () => {
+  it.each`
+    themeDisabled | expectedBackgroundColor
+    ${false}      | ${'#401960'}
+    ${true}       | ${'#bfc1c5'}
+  `(
+    'renders correctly when disabled is $themeDisabled',
+    ({ themeDisabled, expectedBackgroundColor }) => {
+      const { getByTestId, toJSON } = renderWithTheme(
+        <StyledMarker testID="marker" themeDisabled={themeDisabled} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+
+      expect(getByTestId('marker')).toHaveStyle({
+        backgroundColor: expectedBackgroundColor,
+      });
+    }
+  );
+});

package/src/components/Slider/__tests__/{index.spec.tsx → SingleSlider.spec.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Slider from '..';
+import Slider from '../SingleSlider';
 
 describe('Slider', () => {
   it('renders correctly by default', () => {

package/src/components/Slider/__tests__/__snapshots__/RangeSlider.spec.tsx.snap

@@ -0,0 +1,252 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider.Range renders correctly by default 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": false,
+      }
+    }
+    onLayout={[Function]}
+  >
+    <MultiSlider
+      allowOverlap={false}
+      customMarker={[Function]}
+      enabledOne={true}
+      enabledTwo={true}
+      max={20}
+      min={-10}
+      onValuesChange={[Function]}
+      onValuesChangeFinish={[Function]}
+      onValuesChangeStart={[Function]}
+      selectedStyle={
+        {
+          "backgroundColor": "#401960",
+        }
+      }
+      sliderLength={100}
+      step={1}
+      testID="native-multi-slider"
+      trackStyle={
+        {
+          "backgroundColor": "#ece8ef",
+          "height": 4,
+        }
+      }
+      values={
+        [
+          0,
+          10,
+        ]
+      }
+    />
+  </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[`Slider.Range renders correctly when disabled is $disabled 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    onLayout={[Function]}
+    testID="range-slider"
+  >
+    <MultiSlider
+      allowOverlap={false}
+      customMarker={[Function]}
+      enabledOne={false}
+      enabledTwo={false}
+      max={10}
+      min={-10}
+      onValuesChange={[Function]}
+      onValuesChangeFinish={[Function]}
+      onValuesChangeStart={[Function]}
+      selectedStyle={
+        {
+          "backgroundColor": "#bfc1c5",
+        }
+      }
+      sliderLength={0}
+      step={1}
+      testID="native-multi-slider"
+      trackStyle={
+        {
+          "backgroundColor": "#f6f6f7",
+          "height": 4,
+        }
+      }
+      values={
+        [
+          -10,
+          10,
+        ]
+      }
+    />
+  </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[`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,89 +1,14 @@
-import React from 'react';
-import RnSlider from '@react-native-community/slider';
-import { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../theme';
+import type { FunctionComponent } from 'react';
+import Single from './SingleSlider';
+import type { SingleSliderProps } from './SingleSlider';
+import Range from './RangeSlider';
 
-export interface SliderProps {
-  /**
-   * Minimum value of the slider.
-   * Defaults to 0.
-   */
-  minimumValue?: number;
-  /**
-   * Maximum value of the slider.
-   * Defaults to 1.
-   */
-  maximumValue?: number;
-  /**
-   * Step value of the slider.
-   * The value should be between 0 and (maximumValue - minimumValue).
-   * Defaults to 0.
-   */
-  step?: number;
-  /**
-   * Value of the slider.
-   * Defaults to 0.
-   */
-  value?: number;
-  /**
-   * Callback continuously called while the user is dragging the slider.
-   */
-  onValueChange?: (value: number) => void;
-  /**
-   * Callback that is called when the user picks up the slider.
-   * The initial value is passed as an argument to the callback handler.
-   */
-  onSlidingStart?: (value: number) => void;
-  /**
-   * Callback that is called when the user releases the slider, regardless if the value has changed.
-   * The current value is passed as an argument to the callback handler.
-   */
-  onSlidingComplete?: (value: number) => void;
-  /**
-   * Whether the slider is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Additional style.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Testing id of the component.
-   */
-  testID?: string;
+interface SliderProps extends FunctionComponent<SingleSliderProps> {
+  Range: typeof Range;
 }
 
-const Slider = ({
-  minimumValue = 0,
-  maximumValue = 1,
-  step = 0,
-  value = 0,
-  onValueChange,
-  onSlidingStart,
-  onSlidingComplete,
-  disabled = false,
-  style,
-  testID,
-}: SliderProps) => {
-  const theme = useTheme();
+const Slider = Single as SliderProps;
 
-  return (
-    <RnSlider
-      minimumValue={minimumValue}
-      maximumValue={maximumValue}
-      step={step}
-      value={value}
-      onValueChange={onValueChange}
-      onSlidingStart={onSlidingStart}
-      onSlidingComplete={onSlidingComplete}
-      disabled={disabled}
-      minimumTrackTintColor={theme.__hd__.slider.colors.minimumTrackTint}
-      thumbTintColor={theme.__hd__.slider.colors.thumbTint}
-      maximumTrackTintColor={theme.__hd__.slider.colors.maximumTrackTint}
-      style={style}
-      testID={testID}
-    />
-  );
-};
+Slider.Range = Range;
 
 export default Slider;

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,