@hero-design/rn 8.0.0-4 → 8.0.0-5

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

@@ -18,7 +18,10 @@ describe('TabWithBadge', () => {
     ${false}
   `('renders correctly when showBadge prop is available', ({ showBadge }) => {
     const { toJSON } = renderWithTheme(
-      <TabWithBadge showBadge={showBadge} tabItem="Tab Item" />
+      <TabWithBadge
+        config={showBadge ? { type: 'status' } : undefined}
+        tabItem="Tab Item"
+      />
     );
 
     expect(toJSON()).toMatchSnapshot();

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

@@ -4,10 +4,9 @@ exports[`TabWithBadge renders correctly when showBadge prop is available 1`] = `
 <View
   style={
     Object {
-      "paddingHorizontal": 8,
+      "paddingHorizontal": 4,
     }
   }
-  testID="deprecated-badge"
 >
   Tab Item
   <View
@@ -36,37 +35,8 @@ exports[`TabWithBadge renders correctly when showBadge prop is available 1`] = `
 `;
 
 exports[`TabWithBadge renders correctly when showBadge prop is available 2`] = `
-<View
-  style={
-    Object {
-      "paddingHorizontal": 8,
-    }
-  }
-  testID="deprecated-badge"
->
+<View>
   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>
 `;
 

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}

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -674,29 +674,19 @@ Object {
         },
       },
       "sizes": Object {
-        "heights": Object {
-          "medium": 32,
-          "small": 24,
-        },
+        "height": 24,
         "selector": Object {
           "height": 56,
         },
-        "thumbs": Object {
-          "medium": 24,
-          "small": 16,
-        },
-        "widths": Object {
-          "medium": 64,
-          "small": 48,
-        },
+        "thumb": 16,
+        "width": 48,
       },
       "spaces": Object {
-        "medium": 4,
+        "paddingHorizontal": 4,
         "selector": Object {
           "iconPadding": 16,
           "wrapperPadding": 4,
         },
-        "small": 4,
       },
     },
     "tabs": Object {
@@ -735,8 +725,6 @@ Object {
         "archivedBackground": "#f1f2f3",
         "danger": "#de350b",
         "dangerBackground": "#fcebe7",
-        "default": "#001f23",
-        "defaultBackground": undefined,
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
         "primary": "#401960",
@@ -945,54 +933,25 @@ Object {
   },
   "colors": Object {
     "archived": "#abacaf",
-    "archivedBackground": "#f6f6f7",
-    "archivedDark": "#737479",
-    "archivedLight": "#bfc1c5",
     "archivedSurface": "#f1f2f3",
-    "backgroundDark": "#001f23",
-    "backgroundLight": "#f6f6f7",
-    "black": "#000000",
-    "danger": "#de350b",
-    "dangerBackground": "#fcebe7",
-    "dangerLight": "#f46363",
-    "dangerMediumLight": "#e3602a",
     "darkGlobalSurface": "#001f23",
     "decorativePrimary": "#ffffff",
     "decorativePrimarySurface": "#ccd2d3",
     "defaultGlobalSurface": "#ffffff",
     "defaultSurface": "#f6f6f7",
-    "disabledLightText": "#bfc1c5",
     "disabledOnDefaultGlobalSurface": "#bfc1c5",
     "disabledOutline": "#bfc1c5",
-    "disabledSecondary": "#a08cb0",
-    "disabledText": "#808f91",
     "error": "#f46363",
     "errorSurface": "#fcebe7",
-    "globalPrimary": "#001f23",
-    "globalPrimaryBackground": "#e6e9e9",
-    "globalPrimaryLight": "#808f91",
-    "globalPrimaryOutline": "#001f23",
-    "globalSecondary": "#4d6265",
-    "globalSecondaryOutline": "#e8e9ea",
-    "highlightedSecondarySurface": "#ecf0ff",
     "highlightedSurface": "#ece8ef",
-    "inactiveBackground": "#808f91",
     "inactiveOnDefaultGlobalSurface": "#808f91",
     "inactiveOutline": "#808f91",
     "info": "#b5c3fd",
-    "infoBackground": "#ecf0ff",
-    "infoLight": "#b5c3fd",
-    "infoMediumLight": "#b5c3fd",
     "infoSurface": "#ecf0ff",
-    "invertedText": "#ffffff",
-    "lightHighlightedSurface": "#ece8ef",
     "mutedArchived": "#bcbdbf",
     "mutedError": "#f68282",
-    "mutedGlobalPrimary": "#4d6265",
     "mutedInfo": "#c4cffd",
     "mutedOnDefaultGlobalSurface": "#4d6265",
-    "mutedPrimary": "#e6e9e9",
-    "mutedSecondary": "#808f91",
     "mutedSuccess": "#7bd897",
     "mutedWarning": "#ffcb8d",
     "neutralGlobalSurface": "#f6f6f7",
@@ -1000,38 +959,20 @@ Object {
     "onDarkGlobalSurface": "#ffffff",
     "onDefaultGlobalSurface": "#001f23",
     "onErrorSurface": "#de350b",
-    "onGlobalPrimary": "#ffffff",
     "onInfoSurface": "#4568fb",
     "onPrimary": "#ffffff",
     "onSecondary": "#ffffff",
     "onSuccessSurface": "#017d6d",
     "onWarningSurface": "#ffa234",
-    "outline": "#e8e9ea",
     "overlayGlobalSurface": "#000000",
-    "platformBackground": "#ffffff",
     "pressedSurface": "#664780",
     "primary": "#401960",
-    "primaryBackground": "#f3e6f6",
-    "primaryBackgroundDark": "#4d6265",
-    "primaryDark": "#795e90",
-    "primaryLight": "#c282d1",
     "primaryOutline": "#001f23",
     "secondary": "#795e90",
-    "secondaryBackground": "#ecf0ff",
-    "secondaryLight": "#b5c3fd",
     "secondaryOutline": "#e8e9ea",
-    "shadow": "#ccced1",
-    "subduedText": "#4d6265",
     "success": "#5ace7d",
-    "successBackground": "#f0fef4",
-    "successDark": "#017d6d",
-    "successLight": "#5ace7d",
     "successSurface": "#f0fef4",
-    "text": "#001f23",
     "warning": "#ffbe71",
-    "warningBackground": "#fff6eb",
-    "warningDark": "#ffa234",
-    "warningLight": "#ffbe71",
     "warningSurface": "#fff6eb",
   },
   "fontSizes": Object {

package/src/theme/components/switch.ts

@@ -16,26 +16,16 @@ const getSwitchTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    thumbs: {
-      small: theme.sizes.medium,
-      medium: theme.sizes.large,
-    },
-    widths: {
-      small: theme.sizes.xxxlarge,
-      medium: theme.sizes.xxxxxlarge,
-    },
-    heights: {
-      small: theme.sizes.large,
-      medium: theme.sizes.xlarge,
-    },
+    thumb: theme.sizes.medium,
+    width: theme.sizes.xxxlarge,
+    height: theme.sizes.large,
     selector: {
       height: theme.sizes.xxxxlarge,
     },
   };
 
   const spaces = {
-    small: theme.space.xsmall,
-    medium: theme.space.xsmall,
+    paddingHorizontal: theme.space.xsmall,
     selector: {
       iconPadding: theme.space.medium,
       wrapperPadding: theme.space.xsmall,

package/src/theme/components/tag.ts

@@ -6,8 +6,6 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    default: theme.colors.onDefaultGlobalSurface,
-    defaultBackground: undefined,
     primary: theme.colors.primary,
     primaryBackground: undefined,
     info: theme.colors.onInfoSurface,

package/src/theme/global/colors/swag.ts

@@ -1,11 +1,6 @@
 import { swagPalette as palette } from '@hero-design/colors';
-import type {
-  SystemPalette,
-  BrandSystemPalette,
-  LegacyBrandSystemPalette,
-} from './types';
+import type { SystemPalette, BrandSystemPalette } from './types';
 import globalPalette from './global';
-import legacySystemPalette from './legacySystemPalette';
 
 const swagBrandSystemPallete: BrandSystemPalette = {
   primary: palette.scarletGum,
@@ -20,21 +15,7 @@ const swagBrandSystemPallete: BrandSystemPalette = {
   decorativePrimarySurface: palette.maasstrichtBlueLight80,
 };
 
-const swagLegacyBrandSystemPalette: LegacyBrandSystemPalette = {
-  mutedPrimary: palette.maasstrichtBlueLight90,
-  highlightedSecondarySurface: palette.aliceBlue,
-  mutedSecondary: palette.maasstrichtBlueLight50,
-  disabledSecondary: palette.scarletGumLight50,
-  lightHighlightedSurface: palette.scarletGumLight90,
-};
-
 const swagSystemPalette: SystemPalette = {
-  // TODO: Remove legacy in V8
-  // Legacy system
-  ...legacySystemPalette,
-  // Legacy brand
-  ...swagLegacyBrandSystemPalette,
-
   // Global
   ...globalPalette,
   // Brand