@hero-design/rn 7.18.1 → 7.20.0

package/src/components/Switch/__tests__/__snapshots__/{StyledHeading.spec.tsx.snap → StyledSwitch.spec.tsx.snap}

@@ -1,74 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledDisabledWrapper renders correct style 1`] = `
+exports[`StyledKnot renders correct style 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "borderRadius": 999,
+      "height": 20.8,
+      "width": 20.8,
+    }
+  }
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledWrapper renders correct style with variant checked 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#ffffff",
+        "backgroundColor": "#8505a2",
         "borderRadius": 999,
+        "display": "flex",
         "height": 28.799999999999997,
-        "opacity": 0.8,
-        "position": "absolute",
+        "justifyContent": "center",
+        "paddingHorizontal": 4,
         "width": 56,
-        "zIndex": 9999,
       },
       undefined,
     ]
   }
   themeSize="medium"
+  themeVariant="checked"
 />
 `;
 
-exports[`StyledKnot renders correct style 1`] = `
+exports[`StyledWrapper renders correct style with variant disabled-checked 1`] = `
 <View
-  collapsable={false}
-  nativeID="animatedComponent"
   style={
-    Object {
-      "backgroundColor": "#ffffff",
-      "borderRadius": 999,
-      "height": 20.8,
-      "width": 20.8,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#c282d1",
+        "borderRadius": 999,
+        "display": "flex",
+        "height": 28.799999999999997,
+        "justifyContent": "center",
+        "paddingHorizontal": 4,
+        "width": 56,
+      },
+      undefined,
+    ]
   }
   themeSize="medium"
+  themeVariant="disabled-checked"
 />
 `;
 
-exports[`StyledThumbWrapper renders correct style 1`] = `
+exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`] = `
 <View
   style={
     Array [
       Object {
+        "backgroundColor": "#ccced1",
         "borderRadius": 999,
         "display": "flex",
         "height": 28.799999999999997,
         "justifyContent": "center",
+        "paddingHorizontal": 4,
         "width": 56,
       },
       undefined,
     ]
   }
   themeSize="medium"
+  themeVariant="disabled-unchecked"
 />
 `;
 
-exports[`StyledWrapper renders correct style 1`] = `
+exports[`StyledWrapper renders correct style with variant unchecked 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
+        "backgroundColor": "#808f91",
         "borderRadius": 999,
+        "display": "flex",
         "height": 28.799999999999997,
+        "justifyContent": "center",
         "paddingHorizontal": 4,
         "width": 56,
       },
       undefined,
     ]
   }
-  themeChecked={true}
   themeSize="medium"
+  themeVariant="unchecked"
 />
 `;

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

@@ -21,7 +21,9 @@ exports[`Switch renders correctly 1`] = `
       Object {
         "backgroundColor": "#808f91",
         "borderRadius": 999,
+        "display": "flex",
         "height": 28.799999999999997,
+        "justifyContent": "center",
         "paddingHorizontal": 4,
         "width": 56,
       },
@@ -30,37 +32,22 @@ exports[`Switch renders correctly 1`] = `
   }
   testID="switch"
   themeSize="medium"
+  themeVariant="unchecked"
 >
   <View
+    collapsable={false}
+    nativeID="animatedComponent"
     style={
-      Array [
-        Object {
-          "borderRadius": 999,
-          "display": "flex",
-          "height": 28.799999999999997,
-          "justifyContent": "center",
-          "width": 56,
-        },
-        undefined,
-      ]
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 20.8,
+        "left": 0,
+        "width": 20.8,
+      }
     }
     themeSize="medium"
-  >
-    <View
-      collapsable={false}
-      nativeID="animatedComponent"
-      style={
-        Object {
-          "backgroundColor": "#ffffff",
-          "borderRadius": 999,
-          "height": 20.8,
-          "left": 0,
-          "width": 20.8,
-        }
-      }
-      themeSize="medium"
-    />
-  </View>
+  />
 </View>
 `;
 
@@ -85,7 +72,9 @@ exports[`Switch trigger press function correctly 1`] = `
       Object {
         "backgroundColor": "#808f91",
         "borderRadius": 999,
+        "display": "flex",
         "height": 28.799999999999997,
+        "justifyContent": "center",
         "paddingHorizontal": 4,
         "width": 56,
       },
@@ -94,36 +83,21 @@ exports[`Switch trigger press function correctly 1`] = `
   }
   testID="switch"
   themeSize="medium"
+  themeVariant="unchecked"
 >
   <View
+    collapsable={false}
+    nativeID="animatedComponent"
     style={
-      Array [
-        Object {
-          "borderRadius": 999,
-          "display": "flex",
-          "height": 28.799999999999997,
-          "justifyContent": "center",
-          "width": 56,
-        },
-        undefined,
-      ]
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 20.8,
+        "left": 0,
+        "width": 20.8,
+      }
     }
     themeSize="medium"
-  >
-    <View
-      collapsable={false}
-      nativeID="animatedComponent"
-      style={
-        Object {
-          "backgroundColor": "#ffffff",
-          "borderRadius": 999,
-          "height": 20.8,
-          "left": 0,
-          "width": 20.8,
-        }
-      }
-      themeSize="medium"
-    />
-  </View>
+  />
 </View>
 `;

package/src/components/Switch/index.tsx

@@ -1,20 +1,11 @@
 import { useTheme } from '@emotion/react';
-import React, { ReactElement, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
-import {
-  StyleProp,
-  ViewStyle,
-  Animated,
-  Easing,
-  TouchableWithoutFeedback,
-} from 'react-native';
+import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
 
-import {
-  StyledDisabledWrapper,
-  StyledKnot,
-  StyledThumbWrapper,
-  StyledWrapper,
-} from './StyledSwitch';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
 
 export interface SwitchProps {
   /**
@@ -31,6 +22,7 @@ export interface SwitchProps {
   onPress?: () => void;
   /**
    * Size of the switch
+   * size is deprecated and will be removed in the next major release.
    */
   size?: 'small' | 'medium';
   /**
@@ -43,15 +35,29 @@ export interface SwitchProps {
   testID?: string;
 }
 
+const getVariant = ({
+  disabled,
+  checked,
+}: {
+  disabled: boolean;
+  checked: boolean;
+}): Variant => {
+  if (disabled) {
+    return checked ? 'disabled-checked' : 'disabled-unchecked';
+  }
+  return checked ? 'checked' : 'unchecked';
+};
+
 const Switch = ({
   size = 'medium',
   disabled = false,
-  checked,
+  checked = false,
   onPress,
   style,
   testID,
 }: SwitchProps): ReactElement => {
   const theme = useTheme();
+  const variant = getVariant({ disabled, checked });
 
   const offset = checked
     ? theme.__hd__.switch.widths[size] -
@@ -74,11 +80,8 @@ const Switch = ({
       onPress={onPress}
       disabled={disabled}
     >
-      <StyledWrapper themeChecked={checked} themeSize={size} style={style}>
-        {disabled && <StyledDisabledWrapper themeSize={size} />}
-        <StyledThumbWrapper themeSize={size}>
-          <StyledKnot themeSize={size} style={{ left: animatedOffset }} />
-        </StyledThumbWrapper>
+      <StyledWrapper themeVariant={variant} themeSize={size} style={style}>
+        <StyledKnot themeSize={size} style={{ left: animatedOffset }} />
       </StyledWrapper>
     </TouchableWithoutFeedback>
   );

package/src/components/Tabs/ScrollableTabs.tsx

@@ -14,11 +14,11 @@ import {
   HeaderTabItemOutlineWrapper,
 } from './StyledScrollableTabs';
 import { useAnimatedValueArray } from './utils';
-import { ItemType, TabsProps, TabType } from '.';
 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,
 };

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

@@ -1,10 +1,12 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import { Text } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Tabs, { TabType } from '..';
+import Tabs from '..';
 import Button from '../../Button';
+import type { TabType } from '..';
 
 const TestTabsComponent = (
   props: Omit<
@@ -32,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 (
@@ -71,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();
+  });
+});