@hero-design/rn 8.71.0 → 8.73.0

package/src/components/Search/StyledSearch.tsx

@@ -1,28 +1,53 @@
 import styled from '@emotion/native';
 import { TextInput, View } from 'react-native';
-import Badge from '../Badge';
+import { Theme } from '../../theme';
+import Badge, { BadgeProps } from '../Badge';
 
 export type State = 'default' | 'filled' | 'disabled' | 'readonly';
 
+export type Variant = 'basic' | 'reversed';
+
 export const StyledContainer = styled(View)(() => ({
   width: '100%',
 }));
 
+const getBorderWidth = (
+  theme: Theme,
+  themeFocused: boolean,
+  themeVariant: Variant
+) =>
+  themeFocused
+    ? theme.__hd__.search.borderWidths.container[themeVariant].focused
+    : theme.__hd__.search.borderWidths.container[themeVariant].normal;
+
 export const StyledInputContainer = styled(View)<{
   themeFocused: boolean;
-}>(({ theme, themeFocused }) => ({
-  flexDirection: 'row',
-  alignItems: 'center',
-  paddingHorizontal: theme.__hd__.search.space.containerHorizontalPadding,
-  paddingVertical: theme.__hd__.search.space.containerVerticalPadding,
-  backgroundColor: theme.__hd__.search.colors.containerBackground,
-  height: 56,
-  borderRadius: theme.__hd__.search.radii.container,
-  borderWidth: theme.__hd__.search.borderWidths.container.focused,
-  borderColor: themeFocused
-    ? theme.__hd__.search.colors.borders
-    : theme.__hd__.search.colors.containerBackground,
-}));
+  themeVariant: Variant;
+}>(({ theme, themeFocused, themeVariant }) => {
+  const borderWidth = getBorderWidth(theme, themeFocused, themeVariant);
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal:
+      theme.__hd__.search.space.containerHorizontalPadding - borderWidth,
+    paddingVertical:
+      theme.__hd__.search.space.containerVerticalPadding - borderWidth,
+    backgroundColor:
+      theme.__hd__.search.colors[themeVariant].containerBackground,
+    height: 56,
+    borderRadius: theme.__hd__.search.radii.container,
+    borderWidth,
+    borderColor: themeFocused
+      ? theme.__hd__.search.colors[themeVariant].focusedBorder
+      : theme.__hd__.search.colors[themeVariant].border,
+    ...(themeVariant === 'reversed' && {
+      elevation: theme.__hd__.search.shadows.elevation,
+      shadowOffset: theme.__hd__.search.shadows.offset,
+      shadowOpacity: theme.__hd__.search.shadows.opacity,
+      shadowRadius: theme.__hd__.search.shadows.radius,
+    }),
+  };
+});
 
 export const StyledAffixContainer = styled(View)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.search.space.prefixHorizontalPadding,
@@ -34,7 +59,7 @@ export const StyledSuffixContainer = styled(View)(({ theme }) => ({
   alignItems: 'center',
   width: theme.__hd__.search.sizes.surfixSize,
   height: theme.__hd__.search.sizes.surfixSize,
-  backgroundColor: theme.__hd__.search.colors.surfixBackground,
+  backgroundColor: theme.__hd__.search.colors.suffixBackground,
   borderRadius: theme.__hd__.search.radii.surfix,
 }));
 
@@ -57,9 +82,10 @@ export const StyledHandlerContainer = styled(View)(({ theme }) => ({
   flexGrow: 1,
   height: '100%',
   marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin,
+  paddingVertical: theme.__hd__.search.space.inputVerticalPadding,
 }));
 
-export const StyledBadge = styled(Badge)(({ theme }) => ({
+export const StyledBadge = styled(Badge)<BadgeProps>(({ theme }) => ({
   position: 'absolute',
   top: theme.__hd__.search.space.badgeTop,
   right: theme.__hd__.search.space.badgeRight,

package/src/components/Search/__tests__/SearchOneLine.spec.tsx

@@ -56,6 +56,36 @@ describe('SearchOneLine', () => {
       ).toHaveLength(1);
     });
 
+    it('renders reserved variant correctly', () => {
+      const { getByTestId, toJSON } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          suffix="adjustment"
+          testID="idle-search-text-input"
+          placeholder="Search"
+          variant="reversed"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByTestId('idle-search-text-input')).toBeTruthy();
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'text-input'
+        )
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'input-prefix'
+        )
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'input-suffix'
+        )
+      ).toHaveLength(1);
+    });
+
     it('renders custom affix correctly', () => {
       const { getByTestId, toJSON } = renderWithTheme(
         <SearchOneLine

package/src/components/Search/__tests__/SearchTwoLine.spec.tsx

@@ -17,4 +17,19 @@ describe('SearchTwoLine', () => {
     expect(wrapper.getByText('Anywhere')).toBeDefined();
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it('renders reserved variant correctly', () => {
+    const wrapper = renderWithTheme(
+      <SearchTwoLine
+        label="Find Work"
+        content={<Typography.Caption>Anywhere</Typography.Caption>}
+        prefix="search-outlined"
+        suffix="adjustment"
+        variant="reversed"
+      />
+    );
+    expect(wrapper.getByText('Find Work')).toBeDefined();
+    expect(wrapper.getByText('Anywhere')).toBeDefined();
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/Search/__tests__/__snapshots__/SearchOneLine.spec.tsx.snap

@@ -31,13 +31,14 @@ exports[`SearchOneLine disabled renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={
@@ -176,13 +177,14 @@ exports[`SearchOneLine filled renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={
@@ -320,13 +322,14 @@ exports[`SearchOneLine idle renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={
@@ -463,13 +466,14 @@ exports[`SearchOneLine idle renders custom affix correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <Text
         allowFontScaling={false}
@@ -561,6 +565,157 @@ exports[`SearchOneLine idle renders custom affix correctly 1`] = `
 </View>
 `;
 
+exports[`SearchOneLine idle renders reserved variant correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="auto"
+    style={
+      [
+        {
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+    testID="idle-search-text-input"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "borderColor": "#e8e9ea",
+            "borderRadius": 999,
+            "borderWidth": 1,
+            "elevation": 3,
+            "flexDirection": "row",
+            "height": 56,
+            "paddingHorizontal": 7,
+            "paddingVertical": 7,
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 4,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeVariant="reversed"
+    >
+      <View
+        style={
+          [
+            {
+              "paddingHorizontal": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="search-outlined"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          testID="input-prefix"
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+      <TextInput
+        accessibilityState={
+          {
+            "disabled": false,
+          }
+        }
+        editable={true}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        placeholder="Search"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "marginHorizontal": 8,
+              "paddingVertical": 0,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="text-input"
+      />
+      <View
+        style={
+          [
+            {
+              "paddingHorizontal": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="adjustment"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`SearchOneLine readonly renders correctly 1`] = `
 <View
   style={
@@ -592,13 +747,14 @@ exports[`SearchOneLine readonly renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={

package/src/components/Search/__tests__/__snapshots__/SearchSuffixIcon.spec.tsx.snap

@@ -30,7 +30,9 @@ exports[`SearchSuffixIcon renders correctly 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "#401960",
+          "borderColor": "#401960",
           "borderRadius": 999,
+          "borderWidth": 2,
           "height": 16,
           "justifyContent": "center",
           "minWidth": 16,
@@ -50,6 +52,7 @@ exports[`SearchSuffixIcon renders correctly 1`] = `
       themeIntent="primary"
       themePadding="narrowContent"
       themeSize="small"
+      themeVariant="filled"
     >
       <Text
         allowFontScaling={false}

package/src/components/Search/__tests__/__snapshots__/SearchTwoLine.spec.tsx.snap

@@ -29,13 +29,14 @@ exports[`SearchTwoLine renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={
@@ -74,6 +75,185 @@ exports[`SearchTwoLine renders correctly 1`] = `
               "height": "100%",
               "justifyContent": "space-between",
               "marginHorizontal": 8,
+              "paddingVertical": 2,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 12,
+                "letterSpacing": 0.24,
+                "lineHeight": 16,
+              },
+              undefined,
+            ]
+          }
+          themeFontWeight="semi-bold"
+          themeIntent="body"
+        >
+          Find Work
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 12,
+                "letterSpacing": 0.36,
+                "lineHeight": 16,
+              },
+              undefined,
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Anywhere
+        </Text>
+      </View>
+      <View
+        style={
+          [
+            {
+              "paddingHorizontal": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="adjustment"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`SearchTwoLine renders reserved variant correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "borderColor": "#e8e9ea",
+            "borderRadius": 999,
+            "borderWidth": 1,
+            "elevation": 3,
+            "flexDirection": "row",
+            "height": 56,
+            "paddingHorizontal": 7,
+            "paddingVertical": 7,
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 4,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeVariant="reversed"
+    >
+      <View
+        style={
+          [
+            {
+              "paddingHorizontal": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="search-outlined"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          testID="input-prefix"
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignItems": "flex-start",
+              "display": "flex",
+              "flexDirection": "column",
+              "flexGrow": 1,
+              "height": "100%",
+              "justifyContent": "space-between",
+              "marginHorizontal": 8,
+              "paddingVertical": 2,
             },
             undefined,
           ]

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

@@ -150,7 +150,7 @@ exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`]
     style={
       [
         {
-          "backgroundColor": "#bfc1c5",
+          "backgroundColor": "#4d6265",
           "borderRadius": 999,
           "display": "flex",
           "height": 24,

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

@@ -693,7 +693,9 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                         {
                           "alignItems": "center",
                           "backgroundColor": "#355bfb",
+                          "borderColor": "#355bfb",
                           "borderRadius": 999,
+                          "borderWidth": 2,
                           "height": 24,
                           "justifyContent": "center",
                           "marginLeft": 4,
@@ -710,6 +712,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                       themeIntent="info"
                       themePadding="wideContent"
                       themeSize="medium"
+                      themeVariant="filled"
                     >
                       <Text
                         allowFontScaling={false}
@@ -1619,7 +1622,9 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                         {
                           "alignItems": "center",
                           "backgroundColor": "#355bfb",
+                          "borderColor": "#355bfb",
                           "borderRadius": 999,
+                          "borderWidth": 2,
                           "height": 24,
                           "justifyContent": "center",
                           "marginLeft": 4,
@@ -1636,6 +1641,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                       themeIntent="info"
                       themePadding="wideContent"
                       themeSize="medium"
+                      themeVariant="filled"
                     >
                       <Text
                         allowFontScaling={false}
@@ -2545,7 +2551,9 @@ exports[`useIsFocused renders correctly 1`] = `
                         {
                           "alignItems": "center",
                           "backgroundColor": "#355bfb",
+                          "borderColor": "#355bfb",
                           "borderRadius": 999,
+                          "borderWidth": 2,
                           "height": 24,
                           "justifyContent": "center",
                           "marginLeft": 4,
@@ -2562,6 +2570,7 @@ exports[`useIsFocused renders correctly 1`] = `
                       themeIntent="info"
                       themePadding="wideContent"
                       themeSize="medium"
+                      themeVariant="filled"
                     >
                       <Text
                         allowFontScaling={false}