@hero-design/rn 7.20.1 → 7.22.0

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

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image renders correctly when rounded is false 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "path_to_image",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "borderRadius": 0,
+        "height": 72,
+        "width": 72,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Image renders correctly when rounded is true 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "path_to_image",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "borderRadius": 36,
+        "height": 72,
+        "width": 72,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Image renders correctly when size is 6xlarge 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "path_to_image",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "borderRadius": 0,
+        "height": 72,
+        "width": 72,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Image renders correctly when size is 15xlarge 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "path_to_image",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "borderRadius": 0,
+        "height": 144,
+        "width": 144,
+      },
+      undefined,
+    ]
+  }
+/>
+`;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import Image from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+describe('Image', () => {
+  it.each`
+    size
+    ${'6xlarge'}
+    ${'15xlarge'}
+  `('renders correctly when size is $size', ({ size }) => {
+    const { toJSON } = renderWithTheme(
+      <Image size={size} source={{ uri: 'path_to_image' }} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    rounded
+    ${true}
+    ${false}
+  `('renders correctly when rounded is $rounded', ({ rounded }) => {
+    const { toJSON } = renderWithTheme(
+      <Image rounded={rounded} source={{ uri: 'path_to_image' }} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Image/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Image as RNImage } from 'react-native';
+import type { ImageProps as RNImageProps } from 'react-native';
+import { useTheme } from '../../theme';
+
+export interface ImageProps extends RNImageProps {
+  /**
+   * Whether the image is rounded.
+   */
+  rounded?: boolean;
+  /**
+   * Image sizes, following the same sizes as the `sizes` global theme.
+   */
+  size?: '6xlarge' | '15xlarge';
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Image = ({
+  rounded = false,
+  size = '6xlarge',
+  testID,
+  style,
+  ...imageNativeProps
+}: ImageProps): JSX.Element => {
+  const theme = useTheme();
+  const imageSize = theme.__hd__.image.sizes[size];
+  return (
+    <RNImage
+      testID={testID}
+      style={[
+        {
+          width: imageSize,
+          height: imageSize,
+          borderRadius: rounded ? imageSize / 2 : 0,
+        },
+        style,
+      ]}
+      {...imageNativeProps}
+    />
+  );
+};
+
+export default Image;

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -732,10 +732,10 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
                 "backgroundColor": "#8505a2",
                 "borderRadius": 999,
                 "display": "flex",
-                "height": 28.799999999999997,
+                "height": 32,
                 "justifyContent": "center",
                 "paddingHorizontal": 4,
-                "width": 56,
+                "width": 64,
               },
               undefined,
             ]
@@ -751,9 +751,9 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
               Object {
                 "backgroundColor": "#ffffff",
                 "borderRadius": 999,
-                "height": 20.8,
-                "left": 27.200000000000003,
-                "width": 20.8,
+                "height": 24,
+                "left": 32,
+                "width": 24,
               }
             }
             themeSize="medium"

package/src/components/PinInput/index.tsx

@@ -123,7 +123,7 @@ function PinInput({
   return (
     <StyledWrapper style={style} testID={testID}>
       <StyledPinWrapper>
-        {[...Array(length).keys()].map(index => (
+        {[...Array(length).keys()].map((index) => (
           <React.Fragment key={index}>
             {index !== 0 && <StyledSpacer />}
             <PinCell

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -96,9 +96,9 @@ exports[`Progress.Circle renders correctly 1`] = `
         style={
           Array [
             Object {
-              "height": 76,
+              "height": 72,
               "overflow": "hidden",
-              "width": 38,
+              "width": 36,
             },
             undefined,
           ]
@@ -110,8 +110,8 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "backgroundColor": "#8505a2",
                 "borderRadius": 999,
-                "height": 76,
-                "width": 76,
+                "height": 72,
+                "width": 72,
               },
               undefined,
             ]
@@ -131,13 +131,13 @@ exports[`Progress.Circle renders correctly 1`] = `
             "top": 0,
             "transform": Array [
               Object {
-                "translateX": 19,
+                "translateX": 18,
               },
               Object {
                 "rotate": "0deg",
               },
               Object {
-                "translateX": -19,
+                "translateX": -18,
               },
             ],
           }
@@ -147,9 +147,9 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "height": 76,
+                "height": 72,
                 "overflow": "hidden",
-                "width": 38,
+                "width": 36,
               },
               undefined,
             ]
@@ -161,8 +161,8 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "backgroundColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "height": 76,
-                  "width": 76,
+                  "height": 72,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -188,9 +188,9 @@ exports[`Progress.Circle renders correctly 1`] = `
         style={
           Array [
             Object {
-              "height": 76,
+              "height": 72,
               "overflow": "hidden",
-              "width": 38,
+              "width": 36,
             },
             undefined,
           ]
@@ -202,8 +202,8 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "backgroundColor": "#8505a2",
                 "borderRadius": 999,
-                "height": 76,
-                "width": 76,
+                "height": 72,
+                "width": 72,
               },
               undefined,
             ]
@@ -224,13 +224,13 @@ exports[`Progress.Circle renders correctly 1`] = `
             "top": 0,
             "transform": Array [
               Object {
-                "translateX": 19,
+                "translateX": 18,
               },
               Object {
                 "rotate": "0deg",
               },
               Object {
-                "translateX": -19,
+                "translateX": -18,
               },
             ],
           }
@@ -240,9 +240,9 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "height": 76,
+                "height": 72,
                 "overflow": "hidden",
-                "width": 38,
+                "width": 36,
               },
               undefined,
             ]
@@ -254,8 +254,8 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "backgroundColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "height": 76,
-                  "width": 76,
+                  "height": 72,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -270,11 +270,11 @@ exports[`Progress.Circle renders correctly 1`] = `
           Object {
             "backgroundColor": "#8505a2",
             "borderRadius": 999,
-            "height": 5.7,
-            "left": 35.15,
+            "height": 5.3999999999999995,
+            "left": 33.3,
             "position": "absolute",
             "top": 0,
-            "width": 5.7,
+            "width": 5.3999999999999995,
             "zIndex": 2,
           },
           undefined,
@@ -307,11 +307,11 @@ exports[`Progress.Circle renders correctly 1`] = `
             Object {
               "backgroundColor": "#8505a2",
               "borderRadius": 999,
-              "height": 5.7,
-              "left": 35.15,
+              "height": 5.3999999999999995,
+              "left": 33.3,
               "position": "absolute",
               "top": 0,
-              "width": 5.7,
+              "width": 5.3999999999999995,
               "zIndex": 2,
             },
             undefined,
@@ -327,12 +327,12 @@ exports[`Progress.Circle renders correctly 1`] = `
             "alignItems": "center",
             "backgroundColor": "#ffffff",
             "borderRadius": 999,
-            "height": 64.6,
+            "height": 61.199999999999996,
             "justifyContent": "center",
-            "left": 5.7,
+            "left": 5.3999999999999995,
             "position": "absolute",
-            "top": 5.7,
-            "width": 64.6,
+            "top": 5.3999999999999995,
+            "width": 61.199999999999996,
             "zIndex": 3,
           },
           undefined,
@@ -383,9 +383,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
         style={
           Array [
             Object {
-              "height": 76,
+              "height": 72,
               "overflow": "hidden",
-              "width": 38,
+              "width": 36,
             },
             undefined,
           ]
@@ -397,8 +397,8 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "backgroundColor": "#5ace7d",
                 "borderRadius": 999,
-                "height": 76,
-                "width": 76,
+                "height": 72,
+                "width": 72,
               },
               undefined,
             ]
@@ -418,13 +418,13 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             "top": 0,
             "transform": Array [
               Object {
-                "translateX": 19,
+                "translateX": 18,
               },
               Object {
                 "rotate": "0deg",
               },
               Object {
-                "translateX": -19,
+                "translateX": -18,
               },
             ],
           }
@@ -434,9 +434,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           style={
             Array [
               Object {
-                "height": 76,
+                "height": 72,
                 "overflow": "hidden",
-                "width": 38,
+                "width": 36,
               },
               undefined,
             ]
@@ -448,8 +448,8 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "backgroundColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "height": 76,
-                  "width": 76,
+                  "height": 72,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -475,9 +475,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
         style={
           Array [
             Object {
-              "height": 76,
+              "height": 72,
               "overflow": "hidden",
-              "width": 38,
+              "width": 36,
             },
             undefined,
           ]
@@ -489,8 +489,8 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "backgroundColor": "#5ace7d",
                 "borderRadius": 999,
-                "height": 76,
-                "width": 76,
+                "height": 72,
+                "width": 72,
               },
               undefined,
             ]
@@ -511,13 +511,13 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             "top": 0,
             "transform": Array [
               Object {
-                "translateX": 19,
+                "translateX": 18,
               },
               Object {
                 "rotate": "0deg",
               },
               Object {
-                "translateX": -19,
+                "translateX": -18,
               },
             ],
           }
@@ -527,9 +527,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           style={
             Array [
               Object {
-                "height": 76,
+                "height": 72,
                 "overflow": "hidden",
-                "width": 38,
+                "width": 36,
               },
               undefined,
             ]
@@ -541,8 +541,8 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "backgroundColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "height": 76,
-                  "width": 76,
+                  "height": 72,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -557,11 +557,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           Object {
             "backgroundColor": "#5ace7d",
             "borderRadius": 999,
-            "height": 5.7,
-            "left": 35.15,
+            "height": 5.3999999999999995,
+            "left": 33.3,
             "position": "absolute",
             "top": 0,
-            "width": 5.7,
+            "width": 5.3999999999999995,
             "zIndex": 2,
           },
           undefined,
@@ -594,11 +594,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             Object {
               "backgroundColor": "#5ace7d",
               "borderRadius": 999,
-              "height": 5.7,
-              "left": 35.15,
+              "height": 5.3999999999999995,
+              "left": 33.3,
               "position": "absolute",
               "top": 0,
-              "width": 5.7,
+              "width": 5.3999999999999995,
               "zIndex": 2,
             },
             undefined,
@@ -614,12 +614,12 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             "alignItems": "center",
             "backgroundColor": "#ffffff",
             "borderRadius": 999,
-            "height": 64.6,
+            "height": 61.199999999999996,
             "justifyContent": "center",
-            "left": 5.7,
+            "left": 5.3999999999999995,
             "position": "absolute",
-            "top": 5.7,
-            "width": 64.6,
+            "top": 5.3999999999999995,
+            "width": 61.199999999999996,
             "zIndex": 3,
           },
           undefined,

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -152,8 +152,8 @@ const EditorToolbar = ({
       const isStandalone =
         currentButtonConfig && currentButtonConfig.standalone;
 
-      setToolbarButtonArray(prevState =>
-        prevState.map(updatingButton => {
+      setToolbarButtonArray((prevState) =>
+        prevState.map((updatingButton) => {
           if (updatingButton.buttonName === currentButtonName) {
             return {
               ...updatingButton,
@@ -180,7 +180,7 @@ const EditorToolbar = ({
 
   const toolbarButtons = useMemo(
     () =>
-      toolbarButtonArray.map(button => {
+      toolbarButtonArray.map((button) => {
         if (button.buttonName === '|') {
           return <StyledSeparator key={button.id} />;
         }

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -221,8 +221,8 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   /* Forward events from Toolbar and MentionList to webview */
   useEffect(() => {
     const toolbarEventListenerRemovers = Object.values(ToolbarEvents).map(
-      eventName =>
-        Events.on(emitter, normalizeEventName(eventName), data => {
+      (eventName) =>
+        Events.on(emitter, normalizeEventName(eventName), (data) => {
           postMessageToWebview({
             type: `@hero-editor/webview/${eventName}`,
             data,
@@ -233,7 +233,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     const removeMentionApplyListener = Events.on(
       emitter,
       normalizeEventName('mention-apply'),
-      data =>
+      (data) =>
         postMessageToWebview({
           type: '@hero-editor/webview/mention-apply',
           data,
@@ -242,7 +242,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
 
     return () => {
       removeMentionApplyListener();
-      toolbarEventListenerRemovers.forEach(remover => remover());
+      toolbarEventListenerRemovers.forEach((remover) => remover());
     };
   }, []);
 
@@ -350,7 +350,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               )}
             </StyledLabelContainerInsideTextInput>
           )}
-          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
+          <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
             <StyledWebView
               ref={webview}
               testID="webview"

package/src/components/RichTextEditor/__tests__/EditorToolbar.spec.tsx

@@ -37,7 +37,7 @@ describe('EditorToolbar', () => {
         'format-list-numbered',
         'format-heading1',
         'format-heading2',
-      ].forEach(testId => {
+      ].forEach((testId) => {
         expect(wrapper.queryAllByTestId(testId)).toHaveLength(1);
       });
     });
@@ -105,7 +105,7 @@ describe('EditorToolbar', () => {
           'format-list-numbered',
           'format-heading1',
         ];
-        standaloneButtonTestIDs.forEach(testID => {
+        standaloneButtonTestIDs.forEach((testID) => {
           expect(wrapper.getByTestId(testID)).toHaveStyle({
             backgroundColor: undefined,
           });

package/src/components/RichTextEditor/__tests__/MentionList.spec.tsx

@@ -23,7 +23,7 @@ const SuggestionList = ({
   searchValue: string;
   onSelect: (id: string, name: string) => void;
 }) => {
-  const filteredData = SuggestionListData.filter(item =>
+  const filteredData = SuggestionListData.filter((item) =>
     item.name.includes(searchValue)
   );
 

package/src/components/RichTextEditor/__tests__/__snapshots__/EditorToolbar.spec.tsx.snap

@@ -143,7 +143,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
           "flexDirection": "row",
           "height": 16,
           "marginHorizontal": 8,
-          "width": 1,
+          "width": 2,
         },
         undefined,
       ]
@@ -236,7 +236,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
           "flexDirection": "row",
           "height": 16,
           "marginHorizontal": 8,
-          "width": 1,
+          "width": 2,
         },
         undefined,
       ]

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

@@ -165,7 +165,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               "fontSize": 14,
               "height": 480,
               "marginHorizontal": 8,
-              "minHeight": 21,
+              "minHeight": 24,
               "textAlignVertical": "center",
             },
             Object {
@@ -424,7 +424,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               "fontSize": 14,
               "height": undefined,
               "marginHorizontal": 8,
-              "minHeight": 21,
+              "minHeight": 24,
               "textAlignVertical": "center",
             },
             Object {