@hero-design/rn 8.0.0-rc.0 → 8.0.0

package/src/components/Switch/__tests__/__snapshots__/StyledSwitch.spec.tsx.snap

@@ -8,11 +8,10 @@ exports[`StyledKnot renders correct style 1`] = `
     Object {
       "backgroundColor": "#ffffff",
       "borderRadius": 999,
-      "height": 24,
-      "width": 24,
+      "height": 16,
+      "width": 16,
     }
   }
-  themeSize="medium"
 />
 `;
 
@@ -24,15 +23,14 @@ exports[`StyledWrapper renders correct style with variant checked 1`] = `
         "backgroundColor": "#401960",
         "borderRadius": 999,
         "display": "flex",
-        "height": 32,
+        "height": 24,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 64,
+        "width": 48,
       },
       undefined,
     ]
   }
-  themeSize="medium"
   themeVariant="checked"
 />
 `;
@@ -45,15 +43,14 @@ exports[`StyledWrapper renders correct style with variant disabled-checked 1`] =
         "backgroundColor": "#ece8ef",
         "borderRadius": 999,
         "display": "flex",
-        "height": 32,
+        "height": 24,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 64,
+        "width": 48,
       },
       undefined,
     ]
   }
-  themeSize="medium"
   themeVariant="disabled-checked"
 />
 `;
@@ -66,15 +63,14 @@ exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`]
         "backgroundColor": "#bfc1c5",
         "borderRadius": 999,
         "display": "flex",
-        "height": 32,
+        "height": 24,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 64,
+        "width": 48,
       },
       undefined,
     ]
   }
-  themeSize="medium"
   themeVariant="disabled-unchecked"
 />
 `;
@@ -87,15 +83,14 @@ exports[`StyledWrapper renders correct style with variant unchecked 1`] = `
         "backgroundColor": "#808f91",
         "borderRadius": 999,
         "display": "flex",
-        "height": 32,
+        "height": 24,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 64,
+        "width": 48,
       },
       undefined,
     ]
   }
-  themeSize="medium"
   themeVariant="unchecked"
 />
 `;

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

@@ -22,16 +22,15 @@ exports[`Switch renders correctly 1`] = `
         "backgroundColor": "#808f91",
         "borderRadius": 999,
         "display": "flex",
-        "height": 32,
+        "height": 24,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 64,
+        "width": 48,
       },
       undefined,
     ]
   }
   testID="switch"
-  themeSize="medium"
   themeVariant="unchecked"
 >
   <View
@@ -41,12 +40,11 @@ exports[`Switch renders correctly 1`] = `
       Object {
         "backgroundColor": "#ffffff",
         "borderRadius": 999,
-        "height": 24,
+        "height": 16,
         "left": 0,
-        "width": 24,
+        "width": 16,
       }
     }
-    themeSize="medium"
   />
 </View>
 `;
@@ -73,16 +71,15 @@ exports[`Switch trigger press function correctly 1`] = `
         "backgroundColor": "#808f91",
         "borderRadius": 999,
         "display": "flex",
-        "height": 32,
+        "height": 24,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 64,
+        "width": 48,
       },
       undefined,
     ]
   }
   testID="switch"
-  themeSize="medium"
   themeVariant="unchecked"
 >
   <View
@@ -92,12 +89,11 @@ exports[`Switch trigger press function correctly 1`] = `
       Object {
         "backgroundColor": "#ffffff",
         "borderRadius": 999,
-        "height": 24,
+        "height": 16,
         "left": 0,
-        "width": 24,
+        "width": 16,
       }
     }
-    themeSize="medium"
   />
 </View>
 `;

package/src/components/Switch/index.tsx

@@ -1,13 +1,12 @@
 import { useTheme } from '@emotion/react';
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
 
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
 import SelectorSwitch from './SelectorSwitch';
-import { useDeprecation } from '../../utils/hooks';
+import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
 
 export interface SwitchProps {
   /**
@@ -22,11 +21,6 @@ export interface SwitchProps {
    * Event handler.
    */
   onPress?: () => void;
-  /**
-   * Size of the switch
-   * size is deprecated and will be removed in the next major release.
-   */
-  size?: 'small' | 'medium';
   /**
    * Additional style.
    */
@@ -51,28 +45,18 @@ const getVariant = ({
 };
 
 const Switch = ({
-  size: _size,
   disabled = false,
   checked = false,
   onPress,
   style,
   testID,
 }: SwitchProps): ReactElement => {
-  const size: SwitchProps['size'] = _size === undefined ? 'medium' : _size;
-
   const theme = useTheme();
   const variant = getVariant({ disabled, checked });
 
-  useDeprecation(
-    "Switch's size prop will be removed in the next major release.",
-    _size !== undefined
-  );
-
   const offset = checked
-    ? (theme.__hd__.switch.sizes.widths[size] -
-        theme.__hd__.switch.sizes.thumbs[size]) /
-        2 +
-      theme.__hd__.switch.sizes.thumbs[size] / 2
+    ? (theme.__hd__.switch.sizes.width - theme.__hd__.switch.sizes.thumb) / 2 +
+      theme.__hd__.switch.sizes.thumb / 2
     : 0;
 
   const [animatedOffset] = useState(() => new Animated.Value(offset));
@@ -90,8 +74,8 @@ const Switch = ({
       onPress={onPress}
       disabled={disabled}
     >
-      <StyledWrapper themeVariant={variant} themeSize={size} style={style}>
-        <StyledKnot themeSize={size} style={{ left: animatedOffset }} />
+      <StyledWrapper themeVariant={variant} style={style}>
+        <StyledKnot style={{ left: animatedOffset }} />
       </StyledWrapper>
     </TouchableWithoutFeedback>
   );

package/src/components/Tabs/ScrollableTabs.tsx

@@ -130,7 +130,6 @@ const ScrollableTab = ({
               testID,
               activeItem,
               inactiveItem: originalInactiveItem,
-              showBadge,
               badge,
             } = tab;
             const active = selectedTabKey === key;
@@ -174,11 +173,7 @@ const ScrollableTab = ({
                     />
                   </HeaderTabItemOutlineWrapper>
                   <HeaderTabItemWrapper>
-                    <TabWithBadge
-                      showBadge={showBadge}
-                      config={badge}
-                      tabItem={tabItem}
-                    />
+                    <TabWithBadge config={badge} tabItem={tabItem} />
                   </HeaderTabItemWrapper>
                 </HeaderTabItem>
               </TouchableWithoutFeedback>

package/src/components/Tabs/TabWithBadge.tsx

@@ -17,27 +17,13 @@ export type CounterBadgeType = {
 export type BadgeConfigType = StatusBadgeType | CounterBadgeType;
 
 interface TabWithBadgeProps {
-  showBadge?: boolean;
   config?: BadgeConfigType;
   tabItem: ReactNode;
 }
 
-const TabWithBadge = ({ showBadge, config, tabItem }: TabWithBadgeProps) => {
+const TabWithBadge = ({ 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') {

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

@@ -32,7 +32,9 @@ const TestTabsComponent = (
       activeItem: 'home',
       inactiveItem: 'home-outlined',
       component: <Text>Home Screen</Text>,
-      showBadge: true,
+      badge: {
+        type: 'status',
+      },
     },
     {
       key: 'calendar',

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

@@ -12,18 +12,6 @@ const counterBadge = {
 } 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" />);
 

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

@@ -148,12 +148,14 @@ exports[`Tabs.Scroll renders correctly 1`] = `
             },
             Object {
               "activeItem": "home",
+              "badge": Object {
+                "type": "status",
+              },
               "component": <Text>
                 Home Screen
               </Text>,
               "inactiveItem": "home-outlined",
               "key": "home",
-              "showBadge": true,
             },
             Object {
               "activeItem": "calendar",
@@ -467,10 +469,9 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                 <View
                   style={
                     Object {
-                      "paddingHorizontal": 8,
+                      "paddingHorizontal": 4,
                     }
                   }
-                  testID="deprecated-badge"
                 >
                   <HeroIcon
                     name="home-outlined"

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

@@ -1,75 +1,5 @@
 // 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={

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

@@ -253,10 +253,9 @@ exports[`Tabs renders correctly 1`] = `
             <View
               style={
                 Object {
-                  "paddingHorizontal": 8,
+                  "paddingHorizontal": 4,
                 }
               }
-              testID="deprecated-badge"
             >
               <Text
                 numberOfLines={1}

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

@@ -30,7 +30,9 @@ const TestTabsComponent = (
       key: 'home',
       activeItem: 'Home',
       component: <Text>Home Screen</Text>,
-      showBadge: true,
+      badge: {
+        type: 'status',
+      },
     },
     {
       key: 'wallet',

package/src/components/Tabs/index.tsx

@@ -1,26 +1,25 @@
-import React, { useEffect } from 'react';
-import { Animated, TouchableWithoutFeedback, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@emotion/react';
-import PagerView from 'react-native-pager-view';
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import React, { useEffect } from 'react';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { Animated, TouchableWithoutFeedback, View } from 'react-native';
 import type { PagerViewOnPageScrollEventData } from 'react-native-pager-view';
+import PagerView from 'react-native-pager-view';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { IconName } from '../Icon';
 import Typography from '../Typography';
+import ActiveTabIndicator from './ActiveTabIndicator';
+import ScrollableTabs from './ScrollableTabs';
 import {
   ContentWrapper,
-  HeaderTabWrapper,
+  HeaderTab,
   HeaderTabItem,
+  HeaderTabWrapper,
   TabContainer,
   TabScreen,
-  HeaderTab,
 } from './StyledTabs';
-import ActiveTabIndicator from './ActiveTabIndicator';
-import ScrollableTabs from './ScrollableTabs';
-import TabWithBadge from './TabWithBadge';
 import type { BadgeConfigType } from './TabWithBadge';
-import { IconName } from '../Icon';
-import { useDeprecation } from '../../utils/hooks';
+import TabWithBadge from './TabWithBadge';
 
 export type ItemType =
   | string
@@ -33,7 +32,6 @@ export type TabType = {
   inactiveItem?: ItemType;
   component: ReactNode;
   testID?: string;
-  showBadge?: boolean;
   badge?: BadgeConfigType;
 };
 
@@ -114,11 +112,6 @@ const Tabs = ({
   swipeEnabled = true,
   testID: componentTestID,
 }: TabsProps): JSX.Element => {
-  useDeprecation(
-    "Tabs' showBadge will be removed in the next major release. Please use badge prop instead.",
-    tabs.some((item) => item.showBadge !== undefined)
-  );
-
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const pagerViewRef = React.useRef<PagerView>(null);
@@ -157,7 +150,6 @@ const Tabs = ({
                 testID,
                 activeItem,
                 inactiveItem: originalInactiveItem,
-                showBadge,
                 badge,
               } = tab;
 
@@ -178,11 +170,7 @@ const Tabs = ({
                   testID={testID}
                 >
                   <HeaderTabItem>
-                    <TabWithBadge
-                      showBadge={showBadge}
-                      config={badge}
-                      tabItem={tabItem}
-                    />
+                    <TabWithBadge config={badge} tabItem={tabItem} />
                   </HeaderTabItem>
                 </TouchableWithoutFeedback>
               );

package/src/components/Tag/StyledTag.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/native';
 import { Theme } from '../../theme';
 
 type ThemeIntent =
-  | 'default'
   | 'primary'
   | 'info'
   | 'success'

package/src/components/Tag/__tests__/Tag.spec.tsx

@@ -40,15 +40,6 @@ describe('Tag', () => {
     expect(getByText('INFO')).toBeDefined();
   });
 
-  it('has default style when intent is default', () => {
-    const { getByText, toJSON } = renderWithTheme(
-      <Tag content="DEFAULT" intent="default" />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('DEFAULT')).toBeDefined();
-  });
-
   it('has archived style when intent is archived', () => {
     const { getByText, toJSON } = renderWithTheme(
       <Tag content="ARCHIVED" intent="archived" />

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -120,46 +120,6 @@ exports[`Tag has danger style when intent is danger 1`] = `
 </View>
 `;
 
-exports[`Tag has default style when intent is default 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "backgroundColor": undefined,
-        "borderColor": "#001f23",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "paddingHorizontal": 8,
-        "paddingVertical": 2,
-      },
-      undefined,
-    ]
-  }
-  themeIntent="default"
-  themeVariant="outlined"
->
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "includeFontPadding": false,
-          "textAlign": "center",
-          "textAlignVertical": "center",
-        },
-        undefined,
-      ]
-    }
-    themeIntent="default"
-    themeVariant="outlined"
-  >
-    DEFAULT
-  </Text>
-</View>
-`;
-
 exports[`Tag has info style when intent is info 1`] = `
 <View
   style={

package/src/components/Tag/index.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
-import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { useDeprecation } from '../../utils/hooks';
-import { StyledView, StyledText } from './StyledTag';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { StyledText, StyledView } from './StyledTag';
 
 interface TagProps extends ViewProps {
   /**
@@ -11,14 +10,7 @@ interface TagProps extends ViewProps {
   /**
    * Visual intent color to apply to Tag.
    */
-  intent?:
-    | 'primary'
-    | 'default' // Will be deprecated in the future
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'archived';
+  intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
   /**
    * Tag variant.
    */
@@ -41,11 +33,6 @@ const Tag = ({
   testID,
   ...nativeProps
 }: TagProps): JSX.Element => {
-  useDeprecation(
-    "Tag's default intent is deprecated and will be removed in the next major release.\nPlease use primary intent instead.",
-    intent !== 'default'
-  );
-
   return (
     <StyledView
       {...nativeProps}