@hero-design/rn 7.3.2 → 7.4.0

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

@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="previous-icon-button"
+  >
+    <HeroIcon
+      name="arrow-left"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "paddingHorizontal": 8,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="semi-bold"
+    themeIntent="body"
+  >
+    20
+  </Text>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="next-icon-button"
+  >
+    <HeroIcon
+      name="arrow-right"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;
+
+exports[`rendering renders correctly when icon buttons are disabled 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="previous-icon-button"
+  >
+    <HeroIcon
+      name="arrow-left"
+      style={
+        Array [
+          Object {
+            "color": "#8b8d92",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="disabled-text"
+      themeSize="medium"
+    />
+  </View>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "paddingHorizontal": 8,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="semi-bold"
+    themeIntent="body"
+  >
+    20
+  </Text>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="next-icon-button"
+  >
+    <HeroIcon
+      name="arrow-right"
+      style={
+        Array [
+          Object {
+            "color": "#8b8d92",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="disabled-text"
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ContentNavigator from '..';
+
+describe('rendering', () => {
+  it('renders correctly', () => {
+    const { toJSON, getByText, queryAllByTestId } = renderWithTheme(
+      <ContentNavigator
+        value={20}
+        onPreviousPress={jest.fn()}
+        onNextPress={jest.fn()}
+      />
+    );
+
+    expect(getByText('20')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByTestId('previous-icon-button')).toHaveLength(1);
+    expect(queryAllByTestId('next-icon-button')).toHaveLength(1);
+  });
+
+  it('renders correctly when icon buttons are disabled', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <ContentNavigator
+        value="20"
+        onPreviousPress={jest.fn()}
+        onNextPress={jest.fn()}
+        previousDisabled
+        nextDisabled
+      />
+    );
+
+    expect(getByText('20')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('behavior', () => {
+  it('calls press handlers', () => {
+    const prevHandler = jest.fn();
+    const nextHandler = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <ContentNavigator
+        value={20}
+        onPreviousPress={prevHandler}
+        onNextPress={nextHandler}
+      />
+    );
+
+    fireEvent.press(getByTestId('previous-icon-button'));
+    expect(prevHandler).toBeCalledTimes(1);
+    fireEvent.press(getByTestId('next-icon-button'));
+    expect(prevHandler).toBeCalledTimes(1);
+  });
+
+  it('does NOT call press handlers when icon buttons are disabled', () => {
+    const prevHandler = jest.fn();
+    const nextHandler = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <ContentNavigator
+        value={20}
+        onPreviousPress={prevHandler}
+        onNextPress={nextHandler}
+        previousDisabled
+        nextDisabled
+      />
+    );
+
+    fireEvent.press(getByTestId('previous-icon-button'));
+    expect(prevHandler).toBeCalledTimes(0);
+    fireEvent.press(getByTestId('next-icon-button'));
+    expect(prevHandler).toBeCalledTimes(0);
+  });
+});

package/src/components/ContentNavigator/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { Value, Wrapper } from './StyledContentNavigator';
+import Button from '../Button';
+
+interface ContentNavigatorProps {
+  /**
+   * The navigator's content value.
+   */
+  value: number | string;
+  /**
+   * Handler to handle press event of previous icon.
+   */
+  onPreviousPress: () => void;
+  /**
+   * Handler to handle press event of next icon.
+   */
+  onNextPress: () => void;
+  /**
+   * Whether the previous icon is disabled.
+   */
+  previousDisabled?: boolean;
+  /**
+   * Whether the next icon is disabled.
+   */
+  nextDisabled?: boolean;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+function ContentNavigator({
+  onPreviousPress,
+  onNextPress,
+  value,
+  previousDisabled = false,
+  nextDisabled = false,
+  testID,
+  style,
+}: ContentNavigatorProps) {
+  return (
+    <Wrapper testID={testID} style={style}>
+      <Button.Icon
+        icon="arrow-left"
+        onPress={onPreviousPress}
+        disabled={previousDisabled}
+        testID="previous-icon-button"
+      />
+      <Value fontWeight="semi-bold">{value}</Value>
+      <Button.Icon
+        icon="arrow-right"
+        onPress={onNextPress}
+        disabled={nextDisabled}
+        testID="next-icon-button"
+      />
+    </Wrapper>
+  );
+}
+
+export default ContentNavigator;

package/src/components/Icon/HeroIcon/index.tsx

@@ -9,7 +9,8 @@ type ThemeIntent =
   | 'info'
   | 'danger'
   | 'success'
-  | 'warning';
+  | 'warning'
+  | 'disabled-text';
 
 const HeroIcon = createIconSetFromIcoMoon(
   heroIconConfig,
@@ -17,11 +18,21 @@ const HeroIcon = createIconSetFromIcoMoon(
   'hero-icons.ttf'
 );
 
+const COLOR_INTENTS = {
+  text: 'text',
+  primary: 'primary',
+  info: 'info',
+  danger: 'danger',
+  success: 'success',
+  warning: 'warning',
+  'disabled-text': 'disabledText',
+} as const;
+
 const StyledHeroIcon = styled(HeroIcon)<{
   themeSize: ThemeSize;
   themeIntent: ThemeIntent;
 }>(({ themeIntent, themeSize, theme }) => ({
-  color: theme.__hd__.icon.colors[themeIntent],
+  color: theme.__hd__.icon.colors[COLOR_INTENTS[themeIntent]],
   fontSize: theme.__hd__.icon.sizes[themeSize],
 }));