@hero-design/rn 7.17.1 → 7.18.1

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

@@ -12,6 +12,85 @@ exports[`Tabs renders correctly 1`] = `
     ]
   }
 >
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f6f6f7",
+        "borderRadius": 8,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "padding": 8,
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "paddingRight": 12,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="sync"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        testID="undefined-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Move to Work
+    </Text>
+  </View>
   <View
     style={
       Array [

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

@@ -4,6 +4,7 @@ import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tabs, { TabType } from '..';
+import Button from '../../Button';
 
 const TestTabsComponent = (
   props: Omit<
@@ -38,6 +39,11 @@ const TestTabsComponent = (
         insets: { top: 0, left: 0, right: 0, bottom: 0 },
       }}
     >
+      <Button.Utility
+        text="Move to Work"
+        onPress={() => setSelectedTabKey('work')}
+        icon="sync"
+      />
       <Tabs
         {...props}
         tabs={tabs}
@@ -61,6 +67,8 @@ describe('Tabs', () => {
     expect(getByText('Personal Screen')).toBeDefined();
     fireEvent.press(getByText('Home'));
     expect(getByText('Home Screen')).toBeDefined();
+    fireEvent.press(getByText('Move to Work'));
+    expect(getByText('Work Screen')).toBeDefined();
   });
 
   it('renders correctly with lazy preloaded', () => {

package/src/components/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import {
   Animated,
   TouchableWithoutFeedback,
@@ -118,6 +118,12 @@ const Tabs = ({
   const positionAnimatedValue = React.useRef(new Animated.Value(0)).current;
   const [tabsWidth, setTabsWidth] = React.useState<number>(0);
 
+  useEffect(() => {
+    if (selectedTabIndex !== -1) {
+      pagerViewRef.current?.setPage(selectedTabIndex);
+    }
+  }, [selectedTabIndex]);
+
   return (
     <TabContainer style={containerStyle}>
       <HeaderTabWrapper themeInsets={insets} style={barStyle}>
@@ -130,7 +136,7 @@ const Tabs = ({
               }
             }}
           >
-            {tabs.map((tab, index) => {
+            {tabs.map(tab => {
               const {
                 key,
                 testID,
@@ -152,7 +158,6 @@ const Tabs = ({
                   key={key}
                   onPress={() => {
                     onTabPress(key);
-                    pagerViewRef.current?.setPage(index);
                   }}
                   testID={testID}
                 >

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

@@ -5,7 +5,7 @@ exports[`Tag has archived style when intent is archived 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#f1f2f3",
+        "backgroundColor": "#f6f6f7",
         "borderColor": "#737479",
         "borderRadius": 4,
         "borderWidth": 1,

package/src/components/TextInput/StyledTextInput.tsx

@@ -122,6 +122,7 @@ const StyledTextInputAndLabelContainer = styled(View)(() => ({
   alignItems: 'center',
   alignSelf: 'stretch',
   flexGrow: 2,
+  flexShrink: 1,
 }));
 
 const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({

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

@@ -135,6 +135,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -388,6 +389,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -628,6 +630,7 @@ exports[`TextInput disabled renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -753,6 +756,7 @@ exports[`TextInput error renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -1054,6 +1058,7 @@ exports[`TextInput filled renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -1194,6 +1199,7 @@ exports[`TextInput helper text renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -1418,6 +1424,7 @@ exports[`TextInput idle renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -1606,6 +1613,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -1805,6 +1813,7 @@ exports[`TextInput loading renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -2030,6 +2039,7 @@ exports[`TextInput max length renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -2248,6 +2258,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -2540,6 +2551,7 @@ exports[`TextInput readonly renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -2680,6 +2692,7 @@ exports[`TextInput required renders correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]

package/src/components/TextInput/index.tsx

@@ -273,7 +273,7 @@ const TextInput = ({
       </StyledTextInputContainer>
       <StyledErrorAndHelpTextContainer>
         <StyledErrorAndMaxLengthContainer>
-          {error && (
+          {!!error && (
             <StyledErrorContainer>
               <Icon
                 testID="input-error-icon"
@@ -291,7 +291,7 @@ const TextInput = ({
             </StyledMaxLengthMessage>
           )}
         </StyledErrorAndMaxLengthContainer>
-        {helpText && <StyledHelperText>{helpText}</StyledHelperText>}
+        {!!helpText && <StyledHelperText>{helpText}</StyledHelperText>}
       </StyledErrorAndHelpTextContainer>
     </StyledContainer>
   );

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -115,6 +115,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 "alignSelf": "stretch",
                 "flexDirection": "row",
                 "flexGrow": 2,
+                "flexShrink": 1,
               },
               undefined,
             ]

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -115,6 +115,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 "alignSelf": "stretch",
                 "flexDirection": "row",
                 "flexGrow": 2,
+                "flexShrink": 1,
               },
               undefined,
             ]

package/src/index.ts

@@ -1,4 +1,10 @@
-import theme, { getTheme, ThemeProvider, useTheme } from './theme';
+import theme, {
+  getTheme,
+  ThemeProvider,
+  useTheme,
+  swagSystemPalette,
+  workSystemPalette,
+} from './theme';
 import { scale } from './utils/scale';
 
 import Accordion from './components/Accordion';
@@ -42,6 +48,8 @@ export {
   useTheme,
   scale,
   ThemeProvider,
+  swagSystemPalette,
+  workSystemPalette,
   Accordion,
   Alert,
   Avatar,

package/src/theme/ThemeProvider.ts

@@ -0,0 +1,19 @@
+import * as Emotion from '@emotion/react';
+import { Theme } from './getTheme';
+
+export interface ThemeProviderProps {
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+  children: React.ReactNode;
+}
+
+interface ThemeProviderType {
+  (props: ThemeProviderProps): React.ReactElement;
+}
+
+const ThemeProvider = Emotion.ThemeProvider as ThemeProviderType;
+
+const useTheme = Emotion.useTheme as () => Theme;
+
+export { useTheme };
+
+export default ThemeProvider;

package/src/theme/ThemeSwitcher.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+
+import getTheme from './getTheme';
+import { defaultScale, swagSystemPalette, workSystemPalette } from './global';
+import ThemeProvider from './ThemeProvider';
+
+type ThemeName = 'swag' | 'work';
+
+const ThemeSwitcher = ({
+  name = 'swag',
+  children,
+}: {
+  name?: ThemeName;
+  children: React.ReactNode;
+}) => {
+  const theme = useMemo(() => {
+    switch (name) {
+      case 'swag':
+        return getTheme(defaultScale, swagSystemPalette);
+      case 'work':
+        return getTheme(defaultScale, workSystemPalette);
+    }
+  }, [name]);
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export default ThemeSwitcher;

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

@@ -158,20 +158,20 @@ Object {
         "disabledText": "#bfc1c5",
         "invertedText": "#ffffff",
         "pressedDanger": "#f46363",
-        "pressedPrimary": "#c282d1",
+        "pressedPrimary": "#808f91",
         "pressedSecondary": "#b5c3fd",
-        "primary": "#8505a2",
+        "primary": "#001f23",
         "secondary": "#4568fb",
         "underlayColors": Object {
-          "basic-transparent": "#c282d1",
+          "basic-transparent": "#808f91",
           "filled-danger": "#f46363",
-          "filled-primary": "#c282d1",
+          "filled-primary": "#808f91",
           "filled-secondary": "#b5c3fd",
           "outlined-danger": "#fcebe7",
-          "outlined-primary": "#f3e6f6",
+          "outlined-primary": "#e6e9e9",
           "outlined-secondary": "#ecf0ff",
           "text-danger": "#fcebe7",
-          "text-primary": "#f3e6f6",
+          "text-primary": "#e6e9e9",
           "text-secondary": "#ecf0ff",
         },
         "utilityBackground": "#f6f6f7",
@@ -183,6 +183,7 @@ Object {
       },
       "fonts": Object {
         "default": "BeVietnamPro-SemiBold",
+        "utility": "BeVietnamPro-Regular",
       },
       "lineHeight": Object {
         "default": 24,
@@ -196,8 +197,7 @@ Object {
       },
       "space": Object {
         "buttonPadding": 16,
-        "iconPadding": 8,
-        "utilityIconPadding": 12,
+        "iconPadding": 12,
         "utilityPadding": 8,
       },
     },
@@ -291,10 +291,12 @@ Object {
       "colors": Object {
         "backdrop": "#001f23",
         "background": "#ffffff",
+        "handler": "#001f23",
         "shadow": "#001f23",
       },
       "radii": Object {
         "default": 16,
+        "handler": 4,
       },
       "shadows": Object {
         "elevation": 10,
@@ -305,6 +307,13 @@ Object {
         "opacity": 0.27,
         "radius": 4.65,
       },
+      "sizes": Object {
+        "handlerHeight": 4,
+        "handlerWidth": 56,
+      },
+      "space": Object {
+        "handlerPaddingVertical": 8,
+      },
     },
     "empty": Object {
       "colors": Object {
@@ -328,8 +337,9 @@ Object {
         "illustration": 168,
       },
       "space": Object {
-        "large": 24,
-        "medium": 16,
+        "illustrationMargin": 24,
+        "titleMargin": 16,
+        "wrapperPadding": 16,
       },
     },
     "fab": Object {
@@ -640,7 +650,7 @@ Object {
       },
       "colors": Object {
         "archived": "#737479",
-        "archivedBackground": "#f1f2f3",
+        "archivedBackground": "#f6f6f7",
         "danger": "#de350b",
         "dangerBackground": "#fcebe7",
         "default": "#001f23",
@@ -833,7 +843,7 @@ Object {
   },
   "colors": Object {
     "archived": "#ccced1",
-    "archivedBackground": "#f1f2f3",
+    "archivedBackground": "#f6f6f7",
     "archivedDark": "#737479",
     "archivedLight": "#bfc1c5",
     "backgroundDark": "#001f23",
@@ -845,6 +855,9 @@ Object {
     "dangerMediumLight": "#e3602a",
     "disabledLightText": "#bfc1c5",
     "disabledText": "#808f91",
+    "globalPrimary": "#001f23",
+    "globalPrimaryBackground": "#e6e9e9",
+    "globalPrimaryLight": "#808f91",
     "inactiveBackground": "#808f91",
     "info": "#4568fb",
     "infoBackground": "#ecf0ff",

package/src/theme/components/button.ts

@@ -3,6 +3,7 @@ import { GlobalTheme } from '../global';
 const getButtonTheme = (theme: GlobalTheme) => {
   const fonts = {
     default: theme.fonts.semiBold,
+    utility: theme.fonts.regular,
   };
 
   const fontSize = {
@@ -21,9 +22,8 @@ const getButtonTheme = (theme: GlobalTheme) => {
 
   const space = {
     buttonPadding: theme.space.medium,
-    iconPadding: theme.space.small,
+    iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small,
-    utilityIconPadding: theme.space.smallMedium,
   };
 
   const sizes = {
@@ -36,8 +36,8 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    primary: theme.colors.primary,
-    pressedPrimary: theme.colors.primaryLight,
+    primary: theme.colors.globalPrimary,
+    pressedPrimary: theme.colors.globalPrimaryLight,
     secondary: theme.colors.secondary,
     pressedSecondary: theme.colors.secondaryLight,
     danger: theme.colors.danger,
@@ -49,16 +49,17 @@ const getButtonTheme = (theme: GlobalTheme) => {
     invertedText: theme.colors.invertedText,
     utilityBackground: theme.colors.backgroundLight,
     underlayColors: {
-      'filled-primary': theme.colors.primaryLight,
+      'filled-primary': theme.colors.globalPrimaryLight,
       'filled-secondary': theme.colors.secondaryLight,
       'filled-danger': theme.colors.dangerLight,
-      'outlined-primary': theme.colors.primaryBackground,
+      'outlined-primary': theme.colors.globalPrimaryBackground,
       'outlined-secondary': theme.colors.secondaryBackground,
+
       'outlined-danger': theme.colors.dangerBackground,
-      'text-primary': theme.colors.primaryBackground,
+      'text-primary': theme.colors.globalPrimaryBackground,
       'text-secondary': theme.colors.secondaryBackground,
       'text-danger': theme.colors.dangerBackground,
-      'basic-transparent': theme.colors.primaryLight,
+      'basic-transparent': theme.colors.globalPrimaryLight,
     },
   };
 

package/src/theme/components/drawer.ts

@@ -1,14 +1,26 @@
 import { GlobalTheme } from '../global';
+import { scale } from '../../utils/scale';
 
 const getDrawerTheme = (theme: GlobalTheme) => {
   const colors = {
     shadow: theme.colors.backgroundDark,
     background: theme.colors.platformBackground,
     backdrop: theme.colors.backgroundDark,
+    handler: theme.colors.backgroundDark,
   };
 
   const radii = {
-    default: 16,
+    default: theme.radii.xlarge,
+    handler: theme.radii.base,
+  };
+
+  const space = {
+    handlerPaddingVertical: theme.space.small,
+  };
+
+  const sizes = {
+    handlerWidth: scale(56),
+    handlerHeight: scale(4),
   };
 
   const shadows = {
@@ -18,7 +30,7 @@ const getDrawerTheme = (theme: GlobalTheme) => {
     elevation: 10,
   };
 
-  return { colors, radii, shadows };
+  return { colors, radii, shadows, space, sizes };
 };
 
 export default getDrawerTheme;

package/src/theme/components/empty.ts

@@ -3,8 +3,9 @@ import { GlobalTheme } from '../global';
 
 const getEmptyTheme = (theme: GlobalTheme) => {
   const space = {
-    medium: theme.space.medium,
-    large: theme.space.large,
+    titleMargin: theme.space.medium,
+    illustrationMargin: theme.space.large,
+    wrapperPadding: theme.space.medium,
   };
 
   const sizes = {