@hero-design/rn 7.1.3-alpha6 → 7.2.0

package/src/components/Tabs/StyledTabs.tsx

@@ -1,64 +1,62 @@
 import { View, FlatList } from 'react-native';
-import styled from 'styled-components-native';
+import styled from '@emotion/native';
 import Icon from '../Icon';
 import Typography from '../Typography';
 
-const TabScreen = styled(View)<{ themeVisibility?: boolean }>`
-  flex: 1;
-  display: ${({ themeVisibility }) =>
-    themeVisibility === false ? 'none' : 'flex'};
-`;
+const TabScreen = styled(View)<{ themeVisibility?: boolean }>(
+  ({ themeVisibility }) => ({
+    flex: 1,
+    display: themeVisibility === false ? 'none' : 'flex',
+  })
+);
 
-const TabContainer = styled(View)`
-  flex: 1;
-  overflow: hidden;
-`;
+const TabContainer = styled(View)({
+  flex: 1,
+  overflow: 'hidden',
+});
 
-const ContentWrapper = styled(View)`
-  flex: 1;
-`;
+const ContentWrapper = styled(View)({
+  flex: 1,
+});
 
 const HeaderTabWrapper = styled(View)<{
   themeInsets: { top: number; right: number; bottom: number; left: number };
-}>`
-  padding-left: ${({ themeInsets }) =>
-    Math.max(themeInsets.left, themeInsets.right)}px;
-  padding-right: ${({ themeInsets }) =>
-    Math.max(themeInsets.left, themeInsets.right)}px;
-  background-color: ${({ theme }) => theme.__hd__.tabs.colors.background};
-`;
+}>(({ themeInsets, theme }) => ({
+  paddingLeft: Math.max(themeInsets.left, themeInsets.right),
+  paddingRight: Math.max(themeInsets.left, themeInsets.right),
+  backgroundColor: theme.__hd__.tabs.colors.background,
+}));
 
-const StyledFlatList = (styled(FlatList)`
-  padding-left: ${({ theme }) =>
-    theme.__hd__.tabs.space.flatListHorizontalPadding};
-  padding-right: ${({ theme }) =>
-    theme.__hd__.tabs.space.flatListHorizontalPadding};
-` as React.ComponentType) as new <T>() => FlatList<T>;
+const StyledFlatList = (styled(FlatList)(({ theme }) => ({
+  paddingLeft: theme.__hd__.tabs.space.flatListHorizontalPadding,
+  paddingRight: theme.__hd__.tabs.space.flatListHorizontalPadding,
+})) as unknown) as new <T>() => FlatList<T>;
 
-const HeaderTabItem = styled(View)`
-  flex-direction: row;
-  align-items: center;
-  padding-left: ${({ theme }) => theme.__hd__.tabs.space.itemHorizontalPadding};
-  padding-right: ${({ theme }) =>
-    theme.__hd__.tabs.space.itemHorizontalPadding};
-  padding-top: ${({ theme }) => theme.__hd__.tabs.space.itemVerticalPadding};
-  padding-bottom: ${({ theme }) => theme.__hd__.tabs.space.itemVerticalPadding};
-`;
+const HeaderTabItem = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingLeft: theme.__hd__.tabs.space.itemHorizontalPadding,
+  paddingRight: theme.__hd__.tabs.space.itemHorizontalPadding,
+  paddingTop: theme.__hd__.tabs.space.itemVerticalPadding,
+  paddingBottom: theme.__hd__.tabs.space.itemVerticalPadding,
+}));
 
-const StyledHeaderTabIcon = styled(Icon)<{ themeActive: boolean }>`
-  color: ${({ theme, themeActive }) =>
-    themeActive
+const StyledHeaderTabIcon = styled(Icon)<{ themeActive: boolean }>(
+  ({ themeActive, theme }) => ({
+    color: themeActive
       ? theme.__hd__.tabs.colors.active
-      : theme.__hd__.tabs.colors.inactive};
-`;
+      : theme.__hd__.tabs.colors.inactive,
+  })
+);
 
-const StyledHeaderTabText = styled(Typography.Text)<{ themeActive: boolean }>`
-  margin-left: ${({ theme }) => theme.__hd__.tabs.space.titleMarginLeft};
-  color: ${({ theme, themeActive }) =>
-    themeActive
+const StyledHeaderTabText = styled(Typography.Text)<{ themeActive: boolean }>(
+  ({ themeActive, theme }) => ({
+    marginLeft: theme.__hd__.tabs.space.titleMarginLeft,
+    color: themeActive
       ? theme.__hd__.tabs.colors.active
-      : theme.__hd__.tabs.colors.inactive};
-`;
+      : theme.__hd__.tabs.colors.inactive,
+  })
+);
 
 export {
   StyledFlatList,

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

@@ -14,21 +14,25 @@ exports[`Tabs renders correctly 1`] = `
 >
   <View
     style={
-      Object {
-        "flexBasis": 0,
-        "flexGrow": 1,
-        "flexShrink": 1,
-        "overflow": "hidden",
-      }
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
     }
   >
     <View
       style={
-        Object {
-          "backgroundColor": "#7622d7",
-          "paddingLeft": 0,
-          "paddingRight": 0,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "paddingLeft": 0,
+            "paddingRight": 0,
+          },
+          undefined,
+        ]
       }
       themeInsets={
         Object {
@@ -78,10 +82,13 @@ exports[`Tabs renders correctly 1`] = `
         showsHorizontalScrollIndicator={false}
         stickyHeaderIndices={Array []}
         style={
-          Object {
-            "paddingLeft": 8,
-            "paddingRight": 8,
-          }
+          Array [
+            Object {
+              "paddingLeft": 8,
+              "paddingRight": 8,
+            },
+            undefined,
+          ]
         }
         viewabilityConfigCallbackPairs={Array []}
       >
@@ -117,14 +124,17 @@ exports[`Tabs renders correctly 1`] = `
             >
               <View
                 style={
-                  Object {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingBottom": 24,
-                    "paddingLeft": 16,
-                    "paddingRight": 16,
-                    "paddingTop": 24,
-                  }
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "paddingBottom": 24,
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "paddingTop": 24,
+                    },
+                    undefined,
+                  ]
                 }
               >
                 <HeroIcon
@@ -135,9 +145,12 @@ exports[`Tabs renders correctly 1`] = `
                         "color": "#292a2b",
                         "fontSize": 24,
                       },
-                      Object {
-                        "color": "#ffffff",
-                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                        },
+                        undefined,
+                      ],
                     ]
                   }
                   testID="hero-icon-suitcase"
@@ -150,15 +163,18 @@ exports[`Tabs renders correctly 1`] = `
                     Array [
                       Object {
                         "color": "#292a2b",
-                        "fontFamily": "Be Vietnam Pro SemiBold",
+                        "fontFamily": "BeVietnamPro-SemiBold",
                         "fontSize": 14,
                         "letterSpacing": 0.42,
                         "lineHeight": 22,
                       },
-                      Object {
-                        "color": "#ffffff",
-                        "marginLeft": 8,
-                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                          "marginLeft": 8,
+                        },
+                        undefined,
+                      ],
                     ]
                   }
                   themeActive={true}
@@ -202,14 +218,17 @@ exports[`Tabs renders correctly 1`] = `
             >
               <View
                 style={
-                  Object {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingBottom": 24,
-                    "paddingLeft": 16,
-                    "paddingRight": 16,
-                    "paddingTop": 24,
-                  }
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "paddingBottom": 24,
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "paddingTop": 24,
+                    },
+                    undefined,
+                  ]
                 }
               >
                 <HeroIcon
@@ -220,9 +239,12 @@ exports[`Tabs renders correctly 1`] = `
                         "color": "#292a2b",
                         "fontSize": 24,
                       },
-                      Object {
-                        "color": "#ffffff50",
-                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff50",
+                        },
+                        undefined,
+                      ],
                     ]
                   }
                   testID="hero-icon-face-smiley"
@@ -235,15 +257,18 @@ exports[`Tabs renders correctly 1`] = `
                     Array [
                       Object {
                         "color": "#292a2b",
-                        "fontFamily": "Be Vietnam Pro SemiBold",
+                        "fontFamily": "BeVietnamPro-SemiBold",
                         "fontSize": 14,
                         "letterSpacing": 0.42,
                         "lineHeight": 22,
                       },
-                      Object {
-                        "color": "#ffffff50",
-                        "marginLeft": 8,
-                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff50",
+                          "marginLeft": 8,
+                        },
+                        undefined,
+                      ],
                     ]
                   }
                   themeActive={false}
@@ -261,11 +286,12 @@ exports[`Tabs renders correctly 1`] = `
     </View>
     <View
       style={
-        Object {
-          "flexBasis": 0,
-          "flexGrow": 1,
-          "flexShrink": 1,
-        }
+        Array [
+          Object {
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
@@ -275,14 +301,14 @@ exports[`Tabs renders correctly 1`] = `
         pointerEvents="auto"
         removeClippedSubviews={false}
         style={
-          Object {
-            "display": "flex",
-            "flexBasis": 0,
-            "flexGrow": 1,
-            "flexShrink": 1,
-          }
+          Array [
+            Object {
+              "display": "flex",
+              "flex": 1,
+            },
+            undefined,
+          ]
         }
-        testID="tab-screen-work"
         themeVisibility={true}
       >
         <Text>

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

@@ -3,16 +3,16 @@ import { Text } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Tabs, { Tab } from '..';
+import Tabs, { TabType } from '..';
 
 const TestTabsComponent = (
   props: Omit<
     ComponentProps<typeof Tabs>,
-    'selectedTabKey' | 'onChange' | 'tabs'
+    'selectedTabKey' | 'onTabPress' | 'tabs'
   >
 ) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('work');
-  const tabs: Tab[] = [
+  const tabs: TabType[] = [
     {
       key: 'work',
       title: 'Work',
@@ -38,7 +38,7 @@ const TestTabsComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onChange={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );

package/src/components/Tabs/index.tsx

@@ -7,7 +7,6 @@ import {
   FlatList,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { IconProps } from '../Icon';
 import {
   HeaderTabItem,
   HeaderTabWrapper,
@@ -19,22 +18,21 @@ import {
   StyledFlatList,
 } from './StyledTabs';
 import { isIOS } from '../../utils/helpers';
+import { IconName } from '../Icon';
 
-type IconType = IconProps['icon'];
-
-export type Tab = {
+export type TabType = {
   key: string;
   title: string;
-  icon: IconType;
+  icon: IconName;
   component: ReactNode;
   testID?: string;
 };
 
-interface TabType extends ViewProps {
+interface TabsProps extends ViewProps {
   /**
-   * Callback which is called on tab change, receiving id of upcoming active Tab.
+   * Callback which is called on tab press, receiving key of upcoming active Tab.
    */
-  onChange: (key: string) => void;
+  onTabPress: (key: string) => void;
   /**
    * Whether inactive tabs should be removed and unmounted in React.
    * Defaults to `false`.
@@ -45,9 +43,15 @@ interface TabType extends ViewProps {
    */
   selectedTabKey: string;
   /**
-   * List of Tab to be rendered. Each Tab must have an unique id.
+   * List of Tabs to be rendered. Each Tab must have an unique key.
    */
-  tabs: Tab[];
+  tabs: {
+    key: string;
+    title: string;
+    icon: IconName;
+    component: ReactNode;
+    testID?: string;
+  }[];
   /**
    * Addditional style.
    */
@@ -59,12 +63,12 @@ interface TabType extends ViewProps {
 }
 
 const Tabs = ({
-  onChange,
+  onTabPress,
   renderActiveTabOnly = false,
   selectedTabKey,
   tabs,
   ...nativeProps
-}: TabType): JSX.Element => {
+}: TabsProps): JSX.Element => {
   const flatListRef = React.useRef<FlatList>(null);
   const insets = useSafeAreaInsets();
 
@@ -73,6 +77,18 @@ const Tabs = ({
    */
   const [loaded, setLoaded] = React.useState([selectedTabKey]);
 
+  React.useEffect(() => {
+    const selectedTabIndex = tabs.findIndex(
+      item => item.key === selectedTabKey
+    );
+    if (selectedTabIndex !== -1) {
+      flatListRef.current?.scrollToIndex({
+        index: selectedTabIndex,
+        viewPosition: 0.5,
+      });
+    }
+  }, [selectedTabKey, tabs]);
+
   if (!loaded.includes(selectedTabKey)) {
     // Set the current tab to be loaded if it was not loaded before
     setLoaded(loadedState => [...loadedState, selectedTabKey]);
@@ -81,7 +97,7 @@ const Tabs = ({
   return (
     <TabContainer {...nativeProps}>
       <HeaderTabWrapper themeInsets={insets}>
-        <StyledFlatList<Tab>
+        <StyledFlatList<TabType>
           ref={flatListRef}
           horizontal
           data={tabs}
@@ -97,22 +113,14 @@ const Tabs = ({
               100
             );
           }}
-          renderItem={({ item: tab, index }) => {
+          renderItem={({ item: tab }) => {
             const { key, icon, title, testID } = tab;
             const active = selectedTabKey === key;
 
             return (
               <TouchableOpacity
                 key={key}
-                onPress={() => {
-                  if (key !== selectedTabKey) {
-                    onChange(key);
-                    flatListRef.current?.scrollToIndex({
-                      index,
-                      viewPosition: 0.5,
-                    });
-                  }
-                }}
+                onPress={() => onTabPress(key)}
                 testID={testID}
               >
                 <HeaderTabItem>
@@ -136,7 +144,7 @@ const Tabs = ({
       </HeaderTabWrapper>
       <ContentWrapper>
         {tabs.map(tab => {
-          const { key, component } = tab;
+          const { key, component, testID } = tab;
           const active = selectedTabKey === key;
 
           if (renderActiveTabOnly && !active) {
@@ -151,7 +159,7 @@ const Tabs = ({
           return (
             <TabScreen
               key={key}
-              testID={`tab-screen-${selectedTabKey}`}
+              testID={testID ? `tab-screen-${testID}` : undefined}
               pointerEvents={active ? 'auto' : 'none'}
               accessibilityElementsHidden={!active}
               importantForAccessibility={

package/src/components/Typography/Text/StyledText.tsx

@@ -1,73 +1,28 @@
 import { Text } from 'react-native';
-import styled, { css } from '../../../styled-components';
+import styled from '@emotion/native';
+
+const FONTWEIGHT_MAP = {
+  light: 'light',
+  regular: 'regular',
+  'semi-bold': 'semiBold',
+} as const;
 
 const StyledText = styled(Text)<{
   themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
   themeIntent: 'body' | 'subdued' | 'primary';
-}>`
-  ${({ themeFontSize, theme }) => {
-    switch (themeFontSize) {
-      case 'small':
-        return css`
-          font-size: ${theme.__hd__.typography.fontSizes.small}px;
-          line-height: ${theme.__hd__.typography.lineHeights.small};
-          letter-spacing: ${theme.__hd__.typography.fontSizes.small * 0.03}px;
-        `;
-      case 'medium':
-        return css`
-          font-size: ${theme.__hd__.typography.fontSizes.medium}px;
-          line-height: ${theme.__hd__.typography.lineHeights.medium};
-          letter-spacing: ${theme.__hd__.typography.fontSizes.medium * 0.03}px;
-        `;
-      case 'large':
-        return css`
-          font-size: ${theme.__hd__.typography.fontSizes.large}px;
-          line-height: ${theme.__hd__.typography.lineHeights.large};
-          letter-spacing: ${theme.__hd__.typography.fontSizes.large * 0.03}px;
-        `;
-      case 'xlarge':
-        return css`
-          font-size: ${theme.__hd__.typography.fontSizes.xlarge}px;
-          line-height: ${theme.__hd__.typography.lineHeights.xlarge};
-          letter-spacing: ${theme.__hd__.typography.fontSizes.xlarge * 0.03}px;
-        `;
-    }
-  }}
-
-  ${({ themeFontWeight, theme }) => {
-    switch (themeFontWeight) {
-      case 'light':
-        return css`
-          font-family: ${theme.__hd__.typography.fonts.light};
-        `;
-      case 'regular':
-        return css`
-          font-family: ${theme.__hd__.typography.fonts.regular};
-        `;
-      case 'semi-bold':
-        return css`
-          font-family: ${theme.__hd__.typography.fonts.semiBold};
-        `;
-    }
-  }}
+}>(({ themeFontSize, themeFontWeight, themeIntent, theme }) => {
+  const sizeStyles = {
+    fontSize: theme.__hd__.typography.fontSizes[themeFontSize],
+    lineHeight: theme.__hd__.typography.lineHeights[themeFontSize],
+    letterSpacing: theme.__hd__.typography.fontSizes[themeFontSize] * 0.03,
+  };
 
-  ${({ themeIntent, theme }) => {
-    switch (themeIntent) {
-      case 'body':
-        return css`
-          color: ${theme.__hd__.typography.colors.body};
-        `;
-      case 'subdued':
-        return css`
-          color: ${theme.__hd__.typography.colors.subdued};
-        `;
-      case 'primary':
-        return css`
-          color: ${theme.__hd__.typography.colors.primary};
-        `;
-    }
-  }}
-`;
+  return {
+    ...sizeStyles,
+    fontFamily: theme.__hd__.typography.fonts[FONTWEIGHT_MAP[themeFontWeight]],
+    color: theme.__hd__.typography.colors[themeIntent],
+  };
+});
 
 export { StyledText };