@hero-design/rn 7.19.0 → 7.20.0

package/src/components/Spinner/__tests__/__snapshots__/StyledSpinner.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledSpinnerContainer renders correctly 1`] = `
+exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
 <View
   style={
     Array [
@@ -39,6 +39,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         ]
       }
       themePosition="top"
+      themeSize="medium"
     >
       <View
         collapsable={false}
@@ -46,16 +47,16 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
-              "borderRadius": 8,
+              "backgroundColor": "#795e90",
+              "borderRadius": 999,
               "height": 16,
-              "opacity": 1,
               "width": 16,
             },
             Object {},
           ]
         }
         themePosition="topLeft"
+        themeSize="medium"
       />
       <View
         collapsable={false}
@@ -63,17 +64,17 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
-              "borderRadius": 8,
+              "backgroundColor": "#a08cb0",
+              "borderRadius": 999,
               "height": 16,
               "marginLeft": 8,
-              "opacity": 0.7,
               "width": 16,
             },
             Object {},
           ]
         }
         themePosition="topRight"
+        themeSize="medium"
       />
     </View>
     <View
@@ -89,6 +90,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         ]
       }
       themePosition="bottom"
+      themeSize="medium"
     >
       <View
         collapsable={false}
@@ -96,16 +98,16 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
-              "borderRadius": 8,
+              "backgroundColor": "#d9d1df",
+              "borderRadius": 999,
               "height": 16,
-              "opacity": 0.5,
               "width": 16,
             },
             Object {},
           ]
         }
         themePosition="bottomLeft"
+        themeSize="medium"
       />
       <View
         collapsable={false}
@@ -113,24 +115,156 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
-              "borderRadius": 8,
+              "backgroundColor": "#ece8ef",
+              "borderRadius": 999,
               "height": 16,
               "marginLeft": 8,
-              "opacity": 0.3,
               "width": 16,
             },
             Object {},
           ]
         }
         themePosition="bottomRight"
+        themeSize="medium"
       />
     </View>
   </View>
 </View>
 `;
 
-exports[`StyledSpinnerRow renders correctly when position is bottom 1`] = `
+exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "rotate": "0deg",
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "marginBottom": 4,
+          },
+          Object {},
+        ]
+      }
+      themePosition="top"
+      themeSize="small"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#795e90",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 8,
+            },
+            Object {},
+          ]
+        }
+        themePosition="topLeft"
+        themeSize="small"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#a08cb0",
+              "borderRadius": 999,
+              "height": 8,
+              "marginLeft": 4,
+              "width": 8,
+            },
+            Object {},
+          ]
+        }
+        themePosition="topRight"
+        themeSize="small"
+      />
+    </View>
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "marginBottom": 0,
+          },
+          Object {},
+        ]
+      }
+      themePosition="bottom"
+      themeSize="small"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#d9d1df",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 8,
+            },
+            Object {},
+          ]
+        }
+        themePosition="bottomLeft"
+        themeSize="small"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ece8ef",
+              "borderRadius": 999,
+              "height": 8,
+              "marginLeft": 4,
+              "width": 8,
+            },
+            Object {},
+          ]
+        }
+        themePosition="bottomRight"
+        themeSize="small"
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is bottom, and size is medium 1`] = `
 <View
   style={
     Array [
@@ -142,10 +276,27 @@ exports[`StyledSpinnerRow renders correctly when position is bottom 1`] = `
     ]
   }
   themePosition="bottom"
+  themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerRow renders correctly when position is top 1`] = `
+exports[`StyledSpinnerRow renders correctly when position is bottom, and size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 0,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottom"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is top, and size is medium 1`] = `
 <View
   style={
     Array [
@@ -157,79 +308,170 @@ exports[`StyledSpinnerRow renders correctly when position is top 1`] = `
     ]
   }
   themePosition="top"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is top, and size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 4,
+      },
+      undefined,
+    ]
+  }
+  themePosition="top"
+  themeSize="small"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is bottomLeft 1`] = `
+exports[`StyledSpinnerText renders correctly when position is bottomLeft, size is medium 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
-        "borderRadius": 8,
+        "backgroundColor": "#d9d1df",
+        "borderRadius": 999,
         "height": 16,
-        "opacity": 0.5,
         "width": 16,
       },
       undefined,
     ]
   }
   themePosition="bottomLeft"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is bottomLeft, size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#d9d1df",
+        "borderRadius": 999,
+        "height": 8,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottomLeft"
+  themeSize="small"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is bottomRight 1`] = `
+exports[`StyledSpinnerText renders correctly when position is bottomRight, size is medium 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
-        "borderRadius": 8,
+        "backgroundColor": "#ece8ef",
+        "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
-        "opacity": 0.3,
         "width": 16,
       },
       undefined,
     ]
   }
   themePosition="bottomRight"
+  themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is topLeft 1`] = `
+exports[`StyledSpinnerText renders correctly when position is bottomRight, size is small 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
-        "borderRadius": 8,
+        "backgroundColor": "#ece8ef",
+        "borderRadius": 999,
+        "height": 8,
+        "marginLeft": 4,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottomRight"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is topLeft, size is medium 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#795e90",
+        "borderRadius": 999,
         "height": 16,
-        "opacity": 1,
         "width": 16,
       },
       undefined,
     ]
   }
   themePosition="topLeft"
+  themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is topRight 1`] = `
+exports[`StyledSpinnerText renders correctly when position is topLeft, size is small 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
-        "borderRadius": 8,
+        "backgroundColor": "#795e90",
+        "borderRadius": 999,
+        "height": 8,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="topLeft"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is topRight, size is medium 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#a08cb0",
+        "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
-        "opacity": 0.7,
         "width": 16,
       },
       undefined,
     ]
   }
   themePosition="topRight"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is topRight, size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#a08cb0",
+        "borderRadius": 999,
+        "height": 8,
+        "marginLeft": 4,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="topRight"
+  themeSize="small"
 />
 `;

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

@@ -48,6 +48,7 @@ exports[`Spinner renders correctly 1`] = `
           ]
         }
         themePosition="top"
+        themeSize="medium"
       >
         <View
           collapsable={false}
@@ -55,16 +56,16 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
-                "borderRadius": 8,
+                "backgroundColor": "#795e90",
+                "borderRadius": 999,
                 "height": 16,
-                "opacity": 1,
                 "width": 16,
               },
               Object {},
             ]
           }
           themePosition="topLeft"
+          themeSize="medium"
         />
         <View
           collapsable={false}
@@ -72,17 +73,17 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
-                "borderRadius": 8,
+                "backgroundColor": "#a08cb0",
+                "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
-                "opacity": 0.7,
                 "width": 16,
               },
               Object {},
             ]
           }
           themePosition="topRight"
+          themeSize="medium"
         />
       </View>
       <View
@@ -98,6 +99,7 @@ exports[`Spinner renders correctly 1`] = `
           ]
         }
         themePosition="bottom"
+        themeSize="medium"
       >
         <View
           collapsable={false}
@@ -105,16 +107,16 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
-                "borderRadius": 8,
+                "backgroundColor": "#d9d1df",
+                "borderRadius": 999,
                 "height": 16,
-                "opacity": 0.5,
                 "width": 16,
               },
               Object {},
             ]
           }
           themePosition="bottomLeft"
+          themeSize="medium"
         />
         <View
           collapsable={false}
@@ -122,17 +124,17 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
-                "borderRadius": 8,
+                "backgroundColor": "#ece8ef",
+                "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
-                "opacity": 0.3,
                 "width": 16,
               },
               Object {},
             ]
           }
           themePosition="bottomRight"
+          themeSize="medium"
         />
       </View>
     </View>

package/src/components/Spinner/index.tsx

@@ -5,16 +5,24 @@ import { StyledSpinnerContainer, StyledView } from './StyledSpinner';
 import { AnimatedSpinner } from './AnimatedSpinner';
 
 interface SpinnerProps extends ViewProps {
+  /**
+   * Size of Spinner.
+   */
+  size?: 'small' | 'medium';
   /**
    * Testing id of the component.
    */
   testID?: string;
 }
 
-const Spinner = ({ testID, ...nativeProps }: SpinnerProps): ReactElement => (
+const Spinner = ({
+  testID,
+  size = 'medium',
+  ...nativeProps
+}: SpinnerProps): ReactElement => (
   <StyledView {...nativeProps}>
     <StyledSpinnerContainer testID={testID}>
-      <AnimatedSpinner />
+      <AnimatedSpinner size={size} />
     </StyledSpinnerContainer>
   </StyledView>
 );

package/src/components/Tabs/ScrollableTabs.tsx

@@ -17,8 +17,8 @@ import { useAnimatedValueArray } from './utils';
 import { isHeroIcon } from '../Icon/utils';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import Badge from '../Badge';
 import type { ItemType, TabsProps, TabType } from '.';
+import TabWithBadge from './TabWithBadge';
 
 const getTabItem = ({
   item,
@@ -125,7 +125,8 @@ const ScrollableTab = ({
               testID,
               activeItem,
               inactiveItem: originalInactiveItem,
-              showBadge = false,
+              showBadge,
+              badge,
             } = tab;
             const active = selectedTabKey === key;
             const activeAnimated = tabsAnims[index];
@@ -153,7 +154,7 @@ const ScrollableTab = ({
                 }}
                 testID={testID}
               >
-                <HeaderTabItem>
+                <HeaderTabItem isFirstItem={index === 0}>
                   <HeaderTabItemOutlineWrapper>
                     <HeaderTabItemOutline
                       themeActive={active}
@@ -168,7 +169,11 @@ const ScrollableTab = ({
                     />
                   </HeaderTabItemOutlineWrapper>
                   <HeaderTabItemWrapper>
-                    <Badge.Status visible={showBadge}>{tabItem}</Badge.Status>
+                    <TabWithBadge
+                      showBadge={showBadge}
+                      config={badge}
+                      tabItem={tabItem}
+                    />
                   </HeaderTabItemWrapper>
                 </HeaderTabItem>
               </TouchableWithoutFeedback>

package/src/components/Tabs/StyledScrollableTabs.tsx

@@ -23,13 +23,14 @@ const HeaderTabWrapper = styled(View)<{
   borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom,
 }));
 
-const HeaderTabItem = styled(Animated.View)(({ theme }) => ({
-  paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
-  paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
-}));
+const HeaderTabItem = styled(Animated.View)<{ isFirstItem?: boolean }>(
+  ({ theme, isFirstItem }) => ({
+    marginLeft: isFirstItem ? 0 : theme.__hd__.tabs.space.itemMargin,
+    paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
+  })
+);
 
 const HeaderTabItemOutlineWrapper = styled(View)(({ theme }) => ({
-  paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
   paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
   ...StyleSheet.absoluteFillObject,
 }));

package/src/components/Tabs/StyledTabs.tsx

@@ -45,6 +45,11 @@ const StyledIndicator = styled(Animated.View)<{ themeWidth: number }>(
   })
 );
 
+const StyledBadgeWrapper = styled(View)({
+  flexDirection: 'row',
+  alignItems: 'center',
+});
+
 export {
   TabContainer,
   HeaderTabWrapper,
@@ -53,4 +58,5 @@ export {
   ContentWrapper,
   TabScreen,
   StyledIndicator,
+  StyledBadgeWrapper,
 };