@hero-design/rn 7.23.0 → 7.25.0

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

@@ -56,15 +56,16 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 16,
-                "opacity": 1,
+                "opacity": 0.9,
                 "width": 16,
               },
               Object {},
             ]
           }
+          themeIntent="primary"
           themePosition="topLeft"
           themeSize="medium"
         />
@@ -74,16 +75,17 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
-                "opacity": 0.75,
+                "opacity": 0.675,
                 "width": 16,
               },
               Object {},
             ]
           }
+          themeIntent="primary"
           themePosition="topRight"
           themeSize="medium"
         />
@@ -109,15 +111,16 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 16,
-                "opacity": 0.5,
+                "opacity": 0.45,
                 "width": 16,
               },
               Object {},
             ]
           }
+          themeIntent="primary"
           themePosition="bottomLeft"
           themeSize="medium"
         />
@@ -127,16 +130,17 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
-                "opacity": 0.25,
+                "opacity": 0.225,
                 "width": 16,
               },
               Object {},
             ]
           }
+          themeIntent="primary"
           themePosition="bottomRight"
           themeSize="medium"
         />

package/src/components/Spinner/index.tsx

@@ -9,6 +9,10 @@ interface SpinnerProps extends ViewProps {
    * Size of Spinner.
    */
   size?: 'small' | 'medium';
+  /**
+   * Spinner's variant.
+   */
+  intent?: 'primary' | 'inverted';
   /**
    * Testing id of the component.
    */
@@ -18,11 +22,12 @@ interface SpinnerProps extends ViewProps {
 const Spinner = ({
   testID,
   size = 'medium',
+  intent = 'primary',
   ...nativeProps
 }: SpinnerProps): ReactElement => (
   <StyledView {...nativeProps}>
     <StyledSpinnerContainer testID={testID}>
-      <AnimatedSpinner size={size} />
+      <AnimatedSpinner size={size} intent={intent} />
     </StyledSpinnerContainer>
   </StyledView>
 );

package/src/components/Swipeable/StyledSwipeable.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/native';
+import { TouchableOpacity } from 'react-native';
+
+export type ActionIntent = 'primary' | 'success' | 'danger';
+
+export const StyledRectButton = styled(TouchableOpacity)<{
+  themeIntent: ActionIntent;
+}>(({ theme, themeIntent }) => ({
+  flex: 1,
+  backgroundColor: theme.__hd__.swipeable.colors[themeIntent],
+}));

package/src/components/Swipeable/SwipeableAction.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ActionIntent, StyledRectButton } from './StyledSwipeable';
+
+export interface SwipeableActionProps {
+  /**
+   * Visual intent color applied to action.
+   */
+  intent?: ActionIntent;
+  /**
+   * Callback when the action button is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * Action button's content
+   */
+  children?: ReactNode;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const SwipeableAction = ({
+  intent = 'primary',
+  onPress,
+  style,
+  children,
+  testID,
+}: SwipeableActionProps) => (
+  <StyledRectButton
+    onPress={onPress}
+    themeIntent={intent}
+    style={style}
+    testID={testID}
+  >
+    {children}
+  </StyledRectButton>
+);
+
+export default SwipeableAction;

package/src/components/Swipeable/__tests__/SwipeableAction.spec.tsx

@@ -0,0 +1,37 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import SwipeableAction from '../SwipeableAction';
+
+describe('rendering', () => {
+  it.each`
+    intent
+    ${'primary'}
+    ${'success'}
+    ${'danger'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const { toJSON, getByText } = renderWithTheme(
+      <SwipeableAction intent={intent}>
+        <Typography.Text>Action title</Typography.Text>
+      </SwipeableAction>
+    );
+
+    expect(getByText('Action title')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('behavior', () => {
+  it('calls onPress', () => {
+    const onPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <SwipeableAction onPress={onPress}>
+        <Typography.Text>Action title</Typography.Text>
+      </SwipeableAction>
+    );
+
+    fireEvent.press(getByText('Action title'));
+    expect(onPress).toBeCalledTimes(1);
+  });
+});

package/src/components/Swipeable/__tests__/__snapshots__/SwipeableAction.spec.tsx.snap

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly when intent is danger 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#f46363",
+      "flex": 1,
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Action title
+  </Text>
+</View>
+`;
+
+exports[`rendering renders correctly when intent is primary 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#401960",
+      "flex": 1,
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Action title
+  </Text>
+</View>
+`;
+
+exports[`rendering renders correctly when intent is success 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#5ace7d",
+      "flex": 1,
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Action title
+  </Text>
+</View>
+`;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Swipeable renders correctly 1`] = `
+<View>
+  <View
+    onSwipeableClose={[Function]}
+    onSwipeableLeftOpen={[Function]}
+    onSwipeableRightOpen={[Function]}
+    renderLeftActions={[Function]}
+    renderRightActions={[Function]}
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Swipeable Item
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import Swipeable from '..';
+
+describe('Swipeable', () => {
+  it('renders correctly', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <Swipeable
+        leftActions={
+          <Swipeable.Action intent="primary">
+            <Typography.Text intent="inverted">Archived</Typography.Text>
+          </Swipeable.Action>
+        }
+        rightActions={
+          <>
+            <Swipeable.Action intent="success">
+              <Typography.Text>Approve</Typography.Text>
+            </Swipeable.Action>
+            <Swipeable.Action intent="danger">
+              <Typography.Text>Decline</Typography.Text>
+            </Swipeable.Action>
+          </>
+        }
+        rightActionsWidth={168}
+      >
+        <Typography.Text>Swipeable Item</Typography.Text>
+      </Swipeable>
+    );
+
+    expect(getByText('Swipeable Item')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Swipeable/index.tsx

@@ -0,0 +1,160 @@
+import React, {
+  ComponentProps,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
+import { Animated, useWindowDimensions } from 'react-native';
+import {
+  Swipeable as RnghSwipeable,
+  GestureHandlerRootView,
+  RectButton,
+} from 'react-native-gesture-handler';
+import SwipeableAction from './SwipeableAction';
+
+type State = 'closed' | 'leftOpen' | 'rightOpen';
+// We are supporting both v1 and v2 of RNGH at the same time.
+// SwipeableProps is only exported in v2, so we have to use ComponentProps.
+type RnghSwipeableProps = ComponentProps<typeof RnghSwipeable>;
+export interface SwipeableProps
+  extends Pick<
+    RnghSwipeableProps,
+    | 'enableTrackpadTwoFingerGesture'
+    | 'friction'
+    | 'leftThreshold'
+    | 'rightThreshold'
+    | 'overshootLeft'
+    | 'overshootRight'
+    | 'overshootFriction'
+    | 'useNativeAnimations'
+    | 'containerStyle'
+    | 'childrenContainerStyle'
+  > {
+  /**
+   * React node that is swipeable.
+   */
+  children: ReactNode;
+  /**
+   * State of the component.
+   */
+  state?: 'closed' | 'leftOpen' | 'rightOpen';
+  /**
+   * Callback when the state of the component changes.
+   */
+  onStateChange?: (state: State) => void;
+  /**
+   * Action panel that is going to be revealed from the left side when user swipes right.
+   */
+  leftActions?: ReactNode;
+  /**
+   * Width of the left action panel.
+   * By default, it will take up the whole width of the device.
+   */
+  leftActionsWidth?: number;
+  /**
+   * Action panel that is going to be revealed from the right side when user swipes left.
+   */
+  rightActions?: ReactNode;
+  /**
+   * Width of the right action panel.
+   * By default, it will take up the whole width of the device.
+   */
+  rightActionsWidth?: number;
+  /**
+   * Testing ID of the component
+   */
+  testID?: string;
+}
+
+const renderActions = (
+  actions: ReactNode,
+  width: number,
+  progress: Animated.AnimatedInterpolation,
+  direction: 'left' | 'right'
+) => {
+  const trans = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: direction === 'left' ? [-width, 0] : [width, 0],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.View
+      style={{
+        width,
+        flexDirection: 'row',
+        transform: [{ translateX: trans }],
+      }}
+    >
+      {actions}
+    </Animated.View>
+  );
+};
+
+const Swipeable = ({
+  children,
+  state,
+  onStateChange,
+  leftActions,
+  leftActionsWidth,
+  rightActions,
+  rightActionsWidth,
+  ...swipeableProps
+}: SwipeableProps) => {
+  const { width } = useWindowDimensions();
+  const swipeableRef = useRef<RnghSwipeable>(null);
+
+  const renderLeftActions = useCallback(
+    (progress: Animated.AnimatedInterpolation) =>
+      renderActions(leftActions, leftActionsWidth || width, progress, 'left'),
+    [leftActions, leftActionsWidth, width]
+  );
+  const renderRightActions = useCallback(
+    (progress: Animated.AnimatedInterpolation) =>
+      renderActions(
+        rightActions,
+        rightActionsWidth || width,
+        progress,
+        'right'
+      ),
+    [rightActions, rightActionsWidth, width]
+  );
+
+  useEffect(() => {
+    if (swipeableRef.current === null) return;
+
+    switch (state) {
+      case 'leftOpen':
+        swipeableRef.current.openLeft();
+        break;
+      case 'rightOpen':
+        swipeableRef.current.openRight();
+        break;
+      case 'closed':
+        swipeableRef.current.close();
+        break;
+    }
+  }, [state]);
+
+  return (
+    <GestureHandlerRootView>
+      <RnghSwipeable
+        {...swipeableProps}
+        ref={swipeableRef}
+        {...(leftActions !== undefined && { renderLeftActions })}
+        {...(rightActions !== undefined && { renderRightActions })}
+        onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
+        onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
+        onSwipeableClose={() => onStateChange?.('closed')}
+      >
+        {children}
+      </RnghSwipeable>
+    </GestureHandlerRootView>
+  );
+};
+
+export default Object.assign(Swipeable, {
+  Action: SwipeableAction,
+  Content: RectButton,
+});

package/src/components/Switch/SelectorSwitch/Option.tsx

@@ -46,11 +46,7 @@ const Option = <T,>({
     return (
       <StyledTextWrapper>
         <OptionContent
-          content={
-            <Typography.Text fontSize="large" intent="inverted">
-              {text}
-            </Typography.Text>
-          }
+          content={<Typography.Text fontSize="large">{text}</Typography.Text>}
           badge={badge}
         />
       </StyledTextWrapper>

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -67,7 +67,7 @@ exports[`Option renders correctly when selected 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
         "flex": 1,
         "justifyContent": "center",
@@ -88,7 +88,7 @@ exports[`Option renders correctly when selected 1`] = `
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -99,7 +99,7 @@ exports[`Option renders correctly when selected 1`] = `
       }
       themeFontSize="large"
       themeFontWeight="regular"
-      themeIntent="inverted"
+      themeIntent="body"
     >
       My Dashboard
     </Text>

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -30,7 +30,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#ffffff",
           "borderRadius": 999,
           "flex": 1,
           "justifyContent": "center",
@@ -43,7 +43,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -54,7 +54,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
       }
       themeFontSize="large"
       themeFontWeight="regular"
-      themeIntent="inverted"
+      themeIntent="body"
     >
       My Dashboard
     </Text>

package/src/components/Switch/SelectorSwitch/__tests__/index.spec.tsx

@@ -23,6 +23,7 @@ describe('SelectorSwitch', () => {
           },
         ]}
         value="employee"
+        onPress={jest.fn()}
       />
     );
 

package/src/components/Switch/SelectorSwitch/index.tsx

@@ -47,7 +47,10 @@ const SelectorSwitch = <T,>({
   style,
   testID,
 }: SelectorSwitchProps<T>): ReactElement => (
-  <TouchableWithoutFeedback onPress={() => onPress(value)} testID={testID}>
+  <TouchableWithoutFeedback
+    onPress={onPress !== undefined ? () => onPress(value) : undefined}
+    testID={testID}
+  >
     <StyledWrapper style={style}>
       {options.map((opt, index) => (
         // eslint-disable-next-line react/no-array-index-key

package/src/components/Switch/__tests__/__snapshots__/StyledSwitch.spec.tsx.snap

@@ -42,7 +42,7 @@ exports[`StyledWrapper renders correct style with variant disabled-checked 1`] =
   style={
     Array [
       Object {
-        "backgroundColor": "#a08cb0",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 999,
         "display": "flex",
         "height": 32,

package/src/components/Tabs/StyledTabs.tsx

@@ -39,7 +39,7 @@ const StyledIndicator = styled(Animated.View)<{ themeWidth: number }>(
   ({ theme, themeWidth }) => ({
     width: themeWidth,
     height: theme.__hd__.tabs.sizes.indicator,
-    backgroundColor: theme.__hd__.tabs.colors.text,
+    backgroundColor: theme.__hd__.tabs.colors.indicator,
     position: 'absolute',
     bottom: 0,
   })

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

@@ -239,7 +239,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   nativeID="animatedComponent"
                   style={
                     Object {
-                      "backgroundColor": "#e6e9e9",
+                      "backgroundColor": "#ccd2d3",
                       "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [

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

@@ -405,7 +405,7 @@ exports[`Tabs renders correctly 1`] = `
           nativeID="animatedComponent"
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "bottom": 0,
               "height": 2,
               "position": "absolute",