@hero-design/rn 7.18.1 → 7.20.0

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]`;