@hero-design/rn 7.19.0 → 7.20.0

package/src/components/Tabs/TabWithBadge.tsx

@@ -0,0 +1,68 @@
+import { useTheme } from '@emotion/react';
+import React, { ReactNode } from 'react';
+import { View } from 'react-native';
+import Badge from '../Badge';
+import { StyledBadgeWrapper } from './StyledTabs';
+
+export type StatusBadgeType = {
+  type: 'status';
+};
+
+export type CounterBadgeType = {
+  type: 'counter';
+  value: number;
+  max?: number;
+};
+
+export type BadgeConfigType = StatusBadgeType | CounterBadgeType;
+
+interface TabWithBadgeProps {
+  showBadge?: boolean;
+  config?: BadgeConfigType;
+  tabItem: ReactNode;
+}
+
+const TabWithBadge = ({ showBadge, config, tabItem }: TabWithBadgeProps) => {
+  const theme = useTheme();
+
+  // Deprecated. To be removed.
+  if (showBadge !== undefined) {
+    return (
+      <Badge.Status
+        testID="deprecated-badge"
+        visible={showBadge}
+        style={{ paddingHorizontal: theme.space.small }}
+      >
+        {tabItem}
+      </Badge.Status>
+    );
+  }
+
+  if (!config) return <View>{tabItem}</View>;
+
+  if (config.type === 'status') {
+    return (
+      <Badge.Status visible style={{ paddingHorizontal: theme.space.xsmall }}>
+        {tabItem}
+      </Badge.Status>
+    );
+  }
+
+  if (config.type === 'counter') {
+    return (
+      <StyledBadgeWrapper>
+        {tabItem}
+        <Badge
+          content={config.value}
+          max={config.max}
+          intent="info"
+          style={{ marginLeft: theme.space.xsmall }}
+        />
+      </StyledBadgeWrapper>
+    );
+  }
+
+  return <View>{tabItem}</View>;
+};
+
+export default TabWithBadge;

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

@@ -34,6 +34,16 @@ const TestTabsComponent = (
       component: <Text>Home Screen</Text>,
       showBadge: true,
     },
+    {
+      key: 'calendar',
+      activeItem: 'calendar',
+      inactiveItem: 'calendar-dates-outlined',
+      component: <Text>Calendar Screen</Text>,
+      badge: {
+        type: 'counter',
+        value: 50,
+      },
+    },
   ];
 
   return (
@@ -73,6 +83,9 @@ describe('Tabs.Scroll', () => {
     expect(getByText('Personal Screen')).toBeDefined();
     fireEvent.press(getByTestId('hero-icon-home-outlined'));
     expect(getByText('Home Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-calendar-dates-outlined'));
+    expect(getByText('Calendar Screen')).toBeDefined();
+    expect(getByText('50')).toBeDefined();
     fireEvent.press(getByText('Move to Work'));
     expect(getByText('Work Screen')).toBeDefined();
   });

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import TabWithBadge from '../TabWithBadge';
+
+const statusBadge = {
+  type: 'status',
+} as const;
+
+const counterBadge = {
+  type: 'counter',
+  value: 10,
+} as const;
+
+describe('TabWithBadge', () => {
+  it.each`
+    showBadge
+    ${true}
+    ${false}
+  `('renders correctly when showBadge prop is available', ({ showBadge }) => {
+    const { toJSON } = renderWithTheme(
+      <TabWithBadge showBadge={showBadge} tabItem="Tab Item" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders nothing config is not available', () => {
+    const { toJSON } = renderWithTheme(<TabWithBadge tabItem="Tab Item" />);
+
+    expect(toJSON).toMatchSnapshot();
+  });
+
+  it('renders correctly with status badge config', () => {
+    const { toJSON } = renderWithTheme(
+      <TabWithBadge config={statusBadge} tabItem="Tab Item" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with counter badge config', () => {
+    const { toJSON } = renderWithTheme(
+      <TabWithBadge config={counterBadge} tabItem="Tab Item" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -154,6 +154,18 @@ exports[`Tabs.Scroll renders correctly 1`] = `
               "key": "home",
               "showBadge": true,
             },
+            Object {
+              "activeItem": "calendar",
+              "badge": Object {
+                "type": "counter",
+                "value": 50,
+              },
+              "component": <Text>
+                Calendar Screen
+              </Text>,
+              "inactiveItem": "calendar-dates-outlined",
+              "key": "calendar",
+            },
           ]
         }
         getItem={[Function]}
@@ -191,6 +203,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
               accessible={true}
               collapsable={false}
               focusable={true}
+              isFirstItem={true}
               nativeID="animatedComponent"
               onClick={[Function]}
               onResponderGrant={[Function]}
@@ -201,7 +214,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
               onStartShouldSetResponder={[Function]}
               style={
                 Object {
-                  "paddingHorizontal": 8,
+                  "marginLeft": 0,
                   "paddingVertical": 8,
                 }
               }
@@ -212,7 +225,6 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     Object {
                       "bottom": 0,
                       "left": 0,
-                      "paddingHorizontal": 8,
                       "paddingVertical": 8,
                       "position": "absolute",
                       "right": 0,
@@ -227,7 +239,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   nativeID="animatedComponent"
                   style={
                     Object {
-                      "backgroundColor": "#f3e6f6",
+                      "backgroundColor": "#ece8ef",
                       "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
@@ -264,7 +276,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                           "lineHeight": 22,
                         },
                         Object {
-                          "color": "#8505a2",
+                          "color": "#001f23",
                         },
                       ]
                     }
@@ -274,28 +286,6 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   >
                     Work
                   </Text>
-                  <View
-                    collapsable={false}
-                    nativeID="animatedComponent"
-                    style={
-                      Object {
-                        "backgroundColor": "#de350b",
-                        "borderRadius": 999,
-                        "height": 8,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": -2,
-                        "top": -2,
-                        "transform": Array [
-                          Object {
-                            "scale": 0.5,
-                          },
-                        ],
-                        "width": 8,
-                      }
-                    }
-                    themeIntent="danger"
-                  />
                 </View>
               </View>
             </View>
@@ -315,6 +305,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
               accessible={true}
               collapsable={false}
               focusable={true}
+              isFirstItem={false}
               nativeID="animatedComponent"
               onClick={[Function]}
               onResponderGrant={[Function]}
@@ -325,7 +316,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
               onStartShouldSetResponder={[Function]}
               style={
                 Object {
-                  "paddingHorizontal": 8,
+                  "marginLeft": 12,
                   "paddingVertical": 8,
                 }
               }
@@ -336,7 +327,6 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     Object {
                       "bottom": 0,
                       "left": 0,
-                      "paddingHorizontal": 8,
                       "paddingVertical": 8,
                       "position": "absolute",
                       "right": 0,
@@ -391,6 +381,108 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     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}
+              nativeID="animatedComponent"
+              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}
+                  nativeID="animatedComponent"
+                  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": 8,
+                    }
+                  }
+                  testID="deprecated-badge"
+                >
+                  <HeroIcon
+                    name="home-outlined"
+                    style={
+                      Array [
+                        Object {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="hero-icon-home-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
                   <View
                     collapsable={false}
                     nativeID="animatedComponent"
@@ -399,13 +491,13 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                         "backgroundColor": "#de350b",
                         "borderRadius": 999,
                         "height": 8,
-                        "opacity": 0,
+                        "opacity": 1,
                         "position": "absolute",
                         "right": -2,
                         "top": -2,
                         "transform": Array [
                           Object {
-                            "scale": 0.5,
+                            "scale": 1,
                           },
                         ],
                         "width": 8,
@@ -432,6 +524,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
               accessible={true}
               collapsable={false}
               focusable={true}
+              isFirstItem={false}
               nativeID="animatedComponent"
               onClick={[Function]}
               onResponderGrant={[Function]}
@@ -442,7 +535,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
               onStartShouldSetResponder={[Function]}
               style={
                 Object {
-                  "paddingHorizontal": 8,
+                  "marginLeft": 12,
                   "paddingVertical": 8,
                 }
               }
@@ -453,7 +546,6 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     Object {
                       "bottom": 0,
                       "left": 0,
-                      "paddingHorizontal": 8,
                       "paddingVertical": 8,
                       "position": "absolute",
                       "right": 0,
@@ -492,9 +584,19 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   ]
                 }
               >
-                <View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
                   <HeroIcon
-                    name="home-outlined"
+                    name="calendar-dates-outlined"
                     style={
                       Array [
                         Object {
@@ -504,7 +606,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                         undefined,
                       ]
                     }
-                    testID="hero-icon-home-outlined"
+                    testID="hero-icon-calendar-dates-outlined"
                     themeIntent="text"
                     themeSize="small"
                   />
@@ -513,23 +615,43 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     nativeID="animatedComponent"
                     style={
                       Object {
-                        "backgroundColor": "#de350b",
+                        "alignItems": "center",
+                        "backgroundColor": "#4568fb",
                         "borderRadius": 999,
-                        "height": 8,
+                        "height": 20,
+                        "justifyContent": "center",
+                        "marginLeft": 4,
+                        "minWidth": 20,
                         "opacity": 1,
-                        "position": "absolute",
-                        "right": -2,
-                        "top": -2,
+                        "paddingHorizontal": 8,
                         "transform": Array [
                           Object {
                             "scale": 1,
                           },
                         ],
-                        "width": 8,
                       }
                     }
-                    themeIntent="danger"
-                  />
+                    themeIntent="info"
+                    themePadding="wideContent"
+                  >
+                    <Text
+                      style={
+                        Array [
+                          Object {
+                            "color": "#ffffff",
+                            "fontFamily": "BeVietnamPro-SemiBold",
+                            "fontSize": 12,
+                            "includeFontPadding": false,
+                            "textAlign": "center",
+                            "textAlignVertical": "center",
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      50
+                    </Text>
+                  </View>
                 </View>
               </View>
             </View>
@@ -664,6 +786,46 @@ exports[`Tabs.Scroll renders correctly 1`] = `
           </Text>
         </View>
       </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          collapsable={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                undefined,
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text>
+            Calendar Screen
+          </Text>
+        </View>
+      </View>
     </RNCViewPager>
   </View>
 </RNCSafeAreaProvider>

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

@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabWithBadge renders correctly when showBadge prop is available 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 8,
+    }
+  }
+  testID="deprecated-badge"
+>
+  Tab Item
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    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>
+`;
+
+exports[`TabWithBadge renders correctly when showBadge prop is available 2`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 8,
+    }
+  }
+  testID="deprecated-badge"
+>
+  Tab Item
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "backgroundColor": "#de350b",
+        "borderRadius": 999,
+        "height": 8,
+        "opacity": 0,
+        "position": "absolute",
+        "right": -2,
+        "top": -2,
+        "transform": Array [
+          Object {
+            "scale": 0.5,
+          },
+        ],
+        "width": 8,
+      }
+    }
+    themeIntent="danger"
+  />
+</View>
+`;
+
+exports[`TabWithBadge renders correctly with counter badge config 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  Tab Item
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    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
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 12,
+            "includeFontPadding": false,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ]
+      }
+    >
+      10
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`TabWithBadge renders correctly with status badge config 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 4,
+    }
+  }
+>
+  Tab Item
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    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>
+`;
+
+exports[`TabWithBadge renders nothing config is not available 1`] = `[Function]`;