@hero-design/rn 8.23.0 → 8.24.0-alpha.1

package/src/components/Tabs/ScrollableTabsV2/index.tsx

@@ -0,0 +1,5 @@
+import ScrollableTabsV2, { useIsFocused } from './ScrollableTabsV2';
+
+export default Object.assign(ScrollableTabsV2, {
+  useIsFocused,
+});

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import type { ComponentProps } from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ScrollableTabsHeader from '../ScrollableTabsHeader';
+import type { TabType } from '..';
+
+const TestTabsComponent = (
+  props: Omit<
+    ComponentProps<typeof ScrollableTabsHeader>,
+    'selectedTabKey' | 'tabs'
+  >
+) => {
+  const tabs: TabType[] = [
+    {
+      key: 'work',
+      activeItem: 'Work',
+      component: <Text>Work Screen</Text>,
+    },
+    {
+      key: 'personal',
+      activeItem: 'speaker',
+      inactiveItem: 'speaker-outlined',
+      component: <Text>Personal Screen</Text>,
+    },
+    {
+      key: 'home',
+      activeItem: 'home',
+      inactiveItem: 'home-outlined',
+      component: <Text>Home Screen</Text>,
+      badge: {
+        type: 'status',
+      },
+    },
+    {
+      key: 'calendar',
+      activeItem: 'calendar',
+      inactiveItem: 'calendar-dates-outlined',
+      component: <Text>Calendar Screen</Text>,
+      badge: {
+        type: 'counter',
+        value: 50,
+      },
+    },
+  ];
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      <ScrollableTabsHeader {...props} tabs={tabs} selectedIndex={0} />
+    </SafeAreaProvider>
+  );
+};
+
+describe('ScrollableTabsHeader', () => {
+  it('renders correctly', () => {
+    const onTabPress = jest.fn();
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <TestTabsComponent onTabPress={onTabPress} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Work')).toBeDefined();
+    expect(getByTestId('hero-icon-speaker-outlined')).toBeDefined();
+    expect(getByTestId('hero-icon-home-outlined')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-speaker-outlined'));
+    expect(onTabPress).toHaveBeenCalledWith('personal');
+    fireEvent.press(getByTestId('hero-icon-home-outlined'));
+    expect(onTabPress).toHaveBeenCalledWith('home');
+    fireEvent.press(getByTestId('hero-icon-calendar-dates-outlined'));
+    expect(onTabPress).toHaveBeenCalledWith('calendar');
+    expect(getByText('50')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,587 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScrollableTabsHeader renders correctly 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "paddingHorizontal": 0,
+        },
+        undefined,
+      ]
+    }
+    themeInsets={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <RCTScrollView
+      contentContainerStyle={
+        Object {
+          "paddingHorizontal": 8,
+        }
+      }
+      data={
+        Array [
+          Object {
+            "activeItem": "Work",
+            "component": <Text>
+              Work Screen
+            </Text>,
+            "key": "work",
+          },
+          Object {
+            "activeItem": "speaker",
+            "component": <Text>
+              Personal Screen
+            </Text>,
+            "inactiveItem": "speaker-outlined",
+            "key": "personal",
+          },
+          Object {
+            "activeItem": "home",
+            "badge": Object {
+              "type": "status",
+            },
+            "component": <Text>
+              Home Screen
+            </Text>,
+            "inactiveItem": "home-outlined",
+            "key": "home",
+          },
+          Object {
+            "activeItem": "calendar",
+            "badge": Object {
+              "type": "counter",
+              "value": 50,
+            },
+            "component": <Text>
+              Calendar Screen
+            </Text>,
+            "inactiveItem": "calendar-dates-outlined",
+            "key": "calendar",
+          },
+        ]
+      }
+      getItem={[Function]}
+      getItemCount={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onScrollToIndexFailed={[Function]}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      showsHorizontalScrollIndicator={false}
+      stickyHeaderIndices={Array []}
+      viewabilityConfigCallbackPairs={Array []}
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            isFirstItem={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "marginLeft": 0,
+                "paddingVertical": 8,
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "paddingVertical": 8,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "backgroundColor": "#ccd2d3",
+                    "borderRadius": 8,
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
+                  }
+                }
+                themeActive={true}
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "paddingHorizontal": 8,
+                    "paddingVertical": 4,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View>
+                <Text
+                  allowFontScaling={false}
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-SemiBold",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
+                      },
+                      Object {
+                        "color": "#001f23",
+                      },
+                    ]
+                  }
+                  themeFontSize="medium"
+                  themeFontWeight="semi-bold"
+                  themeIntent="body"
+                  themeTypeface="neutral"
+                >
+                  Work
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            isFirstItem={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "marginLeft": 12,
+                "paddingVertical": 8,
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "paddingVertical": 8,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "backgroundColor": undefined,
+                    "borderRadius": 8,
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 0,
+                      },
+                    ],
+                  }
+                }
+                themeActive={false}
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "paddingHorizontal": 8,
+                    "paddingVertical": 4,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View>
+                <HeroIcon
+                  name="speaker-outlined"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontSize": 20,
+                      },
+                      Object {
+                        "color": "#001f23",
+                      },
+                    ]
+                  }
+                  testID="hero-icon-speaker-outlined"
+                  themeIntent="text"
+                  themeSize="small"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            isFirstItem={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "marginLeft": 12,
+                "paddingVertical": 8,
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "paddingVertical": 8,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "backgroundColor": undefined,
+                    "borderRadius": 8,
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 0,
+                      },
+                    ],
+                  }
+                }
+                themeActive={false}
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "paddingHorizontal": 8,
+                    "paddingVertical": 4,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "paddingHorizontal": 4,
+                  }
+                }
+              >
+                <HeroIcon
+                  name="home-outlined"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontSize": 20,
+                      },
+                      Object {
+                        "color": "#001f23",
+                      },
+                    ]
+                  }
+                  testID="hero-icon-home-outlined"
+                  themeIntent="text"
+                  themeSize="small"
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "backgroundColor": "#de350b",
+                      "borderRadius": 999,
+                      "height": 8,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": -2,
+                      "top": -2,
+                      "transform": Array [
+                        Object {
+                          "scale": 1,
+                        },
+                      ],
+                      "width": 8,
+                    }
+                  }
+                  themeIntent="danger"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            isFirstItem={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "marginLeft": 12,
+                "paddingVertical": 8,
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "paddingVertical": 8,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "backgroundColor": undefined,
+                    "borderRadius": 8,
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 0,
+                      },
+                    ],
+                  }
+                }
+                themeActive={false}
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "paddingHorizontal": 8,
+                    "paddingVertical": 4,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <HeroIcon
+                  name="calendar-dates-outlined"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontSize": 20,
+                      },
+                      Object {
+                        "color": "#001f23",
+                      },
+                    ]
+                  }
+                  testID="hero-icon-calendar-dates-outlined"
+                  themeIntent="text"
+                  themeSize="small"
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "backgroundColor": "#4568fb",
+                      "borderRadius": 999,
+                      "height": 20,
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "minWidth": 20,
+                      "opacity": 1,
+                      "paddingHorizontal": 8,
+                      "transform": Array [
+                        Object {
+                          "scale": 1,
+                        },
+                      ],
+                    }
+                  }
+                  themeIntent="info"
+                  themePadding="wideContent"
+                >
+                  <Text
+                    allowFontScaling={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontFamily": "BeVietnamPro-Regular",
+                          "fontSize": 14,
+                          "letterSpacing": 0.42,
+                          "lineHeight": 22,
+                        },
+                        Array [
+                          Object {
+                            "color": "#ffffff",
+                            "fontFamily": "BeVietnamPro-SemiBold",
+                            "fontSize": 12,
+                            "includeFontPadding": false,
+                            "lineHeight": 20,
+                            "textAlign": "center",
+                            "textAlignVertical": "center",
+                          },
+                          undefined,
+                        ],
+                      ]
+                    }
+                    themeFontSize="medium"
+                    themeFontWeight="regular"
+                    themeIntent="body"
+                    themeTypeface="neutral"
+                  >
+                    50
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/components/Tabs/index.tsx

@@ -10,6 +10,7 @@ import { IconName } from '../Icon';
 import Typography from '../Typography';
 import ActiveTabIndicator from './ActiveTabIndicator';
 import ScrollableTabs from './ScrollableTabs';
+import ScrollableTabsV2 from './ScrollableTabsV2';
 import {
   ContentWrapper,
   HeaderTab,
@@ -237,4 +238,5 @@ const Tabs = ({
 
 export default Object.assign(Tabs, {
   Scroll: ScrollableTabs,
+  ScrollV2: ScrollableTabsV2,
 });