@hero-design/rn 8.68.0-alpha.1 → 8.69.0

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

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchSuffixIcon renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+          "display": "flex",
+          "height": 40,
+          "justifyContent": "center",
+          "width": 40,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 16,
+          "justifyContent": "center",
+          "minWidth": 16,
+          "opacity": 1,
+          "paddingHorizontal": undefined,
+          "position": "absolute",
+          "right": -2,
+          "top": -2,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "zIndex": 2,
+        }
+      }
+      themeIntent="primary"
+      themePadding="narrowContent"
+      themeSize="small"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 16,
+            },
+            [
+              {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 8,
+                "includeFontPadding": false,
+                "lineHeight": 10,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeSize="small"
+      >
+        7
+      </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
+    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>
+`;

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

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchTwoLine renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderColor": "#f6f6f7",
+            "borderRadius": 999,
+            "borderWidth": 2,
+            "flexDirection": "row",
+            "height": 56,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+    >
+      <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,
+            },
+            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>
+`;

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

@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`utils renderPrefix renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "paddingHorizontal": 4,
+        },
+        undefined,
+      ]
+    }
+  >
+    <HeroIcon
+      name="search-outlined"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      testID="input-prefix"
+      themeIntent="text"
+      themeSize="small"
+    />
+  </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[`utils renderSuffix renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "paddingHorizontal": 4,
+        },
+        undefined,
+      ]
+    }
+  >
+    <HeroIcon
+      name="adjustment"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      testID="input-suffix"
+      themeIntent="text"
+      themeSize="small"
+    />
+  </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>
+`;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { renderPrefix, renderSuffix } from '../utils';
+
+describe('utils', () => {
+  it('renderPrefix renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <>{renderPrefix({ prefix: 'search-outlined' })}</>
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renderSuffix renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <>{renderSuffix({ suffix: 'adjustment' })}</>
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Search/index.tsx

@@ -0,0 +1,17 @@
+import SearchTwoLine from './SearchTwoLine';
+import SearchOneLine from './SearchOneLine';
+import SearchSuffixIcon from './SearchSuffixIcon';
+
+type SearchType = {
+  OneLine: typeof SearchOneLine;
+  TwoLine: typeof SearchTwoLine;
+  SuffixIcon: typeof SearchSuffixIcon;
+};
+
+const Search: SearchType = {
+  OneLine: SearchOneLine,
+  TwoLine: SearchTwoLine,
+  SuffixIcon: SearchSuffixIcon,
+};
+
+export default Search;

package/src/components/Search/utils.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Icon, { IconName } from '../Icon';
+import { StyledAffixContainer } from './StyledSearch';
+
+export const renderPrefix = ({
+  prefix,
+}: {
+  prefix?: IconName | React.ReactElement;
+}) => {
+  return typeof prefix === 'string' ? (
+    <StyledAffixContainer>
+      <Icon intent="text" testID="input-prefix" icon={prefix} size="small" />
+    </StyledAffixContainer>
+  ) : (
+    prefix
+  );
+};
+
+export const renderSuffix = ({
+  suffix,
+}: {
+  suffix?: IconName | React.ReactElement;
+}) => {
+  return typeof suffix === 'string' ? (
+    <StyledAffixContainer>
+      <Icon intent="text" testID="input-suffix" icon={suffix} size="small" />
+    </StyledAffixContainer>
+  ) : (
+    suffix
+  );
+};

package/src/components/SectionHeading/__tests__/__snapshots__/StyledHeading.spec.tsx.snap

@@ -62,7 +62,7 @@ exports[`StyledHeading renders correct style with small 1`] = `
       [
         {
           "alignContent": "center",
-          "backgroundColor": "#B382FD",
+          "backgroundColor": "#ccd2d3",
           "display": "flex",
           "flexDirection": "row",
           "justifyContent": "space-between",

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

@@ -68,7 +68,7 @@ exports[`SectionHeading allows to customise the icon 1`] = `
         style={
           [
             {
-              "color": "#7622d7",
+              "color": "#401960",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.48,
@@ -437,7 +437,7 @@ exports[`SectionHeading renders correct style with small 1`] = `
       [
         {
           "alignContent": "center",
-          "backgroundColor": "#B382FD",
+          "backgroundColor": "#ccd2d3",
           "display": "flex",
           "flexDirection": "row",
           "justifyContent": "space-between",

package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -35,7 +35,7 @@ exports[`Option renders correctly 1`] = `
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,
@@ -91,7 +91,7 @@ exports[`Option renders correctly 1`] = `
         style={
           [
             {
-              "color": "#7622d7",
+              "color": "#401960",
               "fontSize": 20,
             },
             {

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -224,7 +224,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#F1E9FB",
+                  "backgroundColor": "#ece8ef",
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -280,7 +280,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                 style={
                   [
                     {
-                      "color": "#7622d7",
+                      "color": "#401960",
                       "fontSize": 20,
                     },
                     {
@@ -771,7 +771,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                     style={
                       [
                         {
-                          "backgroundColor": "#7622d7",
+                          "backgroundColor": "#401960",
                           "borderRadius": 999,
                           "height": 16,
                           "opacity": 0.9,
@@ -789,7 +789,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                     style={
                       [
                         {
-                          "backgroundColor": "#7622d7",
+                          "backgroundColor": "#401960",
                           "borderRadius": 999,
                           "height": 16,
                           "marginLeft": 8,
@@ -823,7 +823,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                     style={
                       [
                         {
-                          "backgroundColor": "#7622d7",
+                          "backgroundColor": "#401960",
                           "borderRadius": 999,
                           "height": 16,
                           "opacity": 0.45,
@@ -841,7 +841,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                     style={
                       [
                         {
-                          "backgroundColor": "#7622d7",
+                          "backgroundColor": "#401960",
                           "borderRadius": 999,
                           "height": 16,
                           "marginLeft": 8,
@@ -1098,7 +1098,7 @@ exports[`OptionList renders correctly 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#F1E9FB",
+                  "backgroundColor": "#ece8ef",
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -1154,7 +1154,7 @@ exports[`OptionList renders correctly 1`] = `
                 style={
                   [
                     {
-                      "color": "#7622d7",
+                      "color": "#401960",
                       "fontSize": 20,
                     },
                     {
@@ -1819,7 +1819,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#F1E9FB",
+                  "backgroundColor": "#ece8ef",
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -1875,7 +1875,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                 style={
                   [
                     {
-                      "color": "#7622d7",
+                      "color": "#401960",
                       "fontSize": 20,
                     },
                     {
@@ -2085,7 +2085,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#F1E9FB",
+                  "backgroundColor": "#ece8ef",
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -2141,7 +2141,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                 style={
                   [
                     {
-                      "color": "#7622d7",
+                      "color": "#401960",
                       "fontSize": 20,
                     },
                     {
@@ -2568,7 +2568,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#F1E9FB",
+                  "backgroundColor": "#ece8ef",
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -2624,7 +2624,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
                 style={
                   [
                     {
-                      "color": "#7622d7",
+                      "color": "#401960",
                       "fontSize": 20,
                     },
                     {