@hero-design/rn 7.22.2 → 7.23.0

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

@@ -251,7 +251,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#bfc1c5",
+            "borderColor": "#4d6265",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -268,8 +268,8 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#bfc1c5",
-              "borderColor": "#bfc1c5",
+              "backgroundColor": "#4d6265",
+              "borderColor": "#4d6265",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -297,7 +297,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#bfc1c5",
+            "borderColor": "#4d6265",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -314,8 +314,8 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#bfc1c5",
-              "borderColor": "#bfc1c5",
+              "backgroundColor": "#4d6265",
+              "borderColor": "#4d6265",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -343,7 +343,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#bfc1c5",
+            "borderColor": "#4d6265",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -360,7 +360,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#bfc1c5",
+              "borderColor": "#4d6265",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -388,7 +388,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#bfc1c5",
+            "borderColor": "#4d6265",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -405,7 +405,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#bfc1c5",
+              "borderColor": "#4d6265",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -786,7 +786,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#f46363",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -803,8 +803,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#f46363",
+              "borderColor": "#f46363",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -832,7 +832,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#f46363",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -849,8 +849,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#f46363",
+              "borderColor": "#f46363",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -878,7 +878,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#f46363",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -895,7 +895,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#f46363",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -923,7 +923,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#f46363",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -940,7 +940,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#f46363",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -984,7 +984,7 @@ exports[`rendering renders correctly when there is error 1`] = `
       style={
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#f46363",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "paddingLeft": 4,

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

@@ -22,7 +22,7 @@ exports[`Progress.Bar renders correctly 1`] = `
     style={
       Object {
         "alignSelf": "stretch",
-        "backgroundColor": "#8505a2",
+        "backgroundColor": "#001f23",
         "borderBottomRightRadius": 999,
         "borderTopRightRadius": 999,
         "flex": 1,
@@ -108,7 +108,7 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
+                "backgroundColor": "#001f23",
                 "borderRadius": 999,
                 "height": 72,
                 "width": 72,
@@ -200,7 +200,7 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
+                "backgroundColor": "#001f23",
                 "borderRadius": 999,
                 "height": 72,
                 "width": 72,
@@ -268,7 +268,7 @@ exports[`Progress.Circle renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "height": 5.3999999999999995,
             "left": 33.3,
@@ -305,7 +305,7 @@ exports[`Progress.Circle renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
+              "backgroundColor": "#001f23",
               "borderRadius": 999,
               "height": 5.3999999999999995,
               "left": 33.3,

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

@@ -20,7 +20,7 @@ exports[`rendering renders correctly when checked 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#ECE8EF",
+        "backgroundColor": "#d9d1df",
         "borderRadius": 4,
         "flexDirection": "row",
         "opacity": 1,

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -215,7 +215,7 @@ exports[`rendering renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "#ECE8EF",
+          "backgroundColor": "#d9d1df",
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,

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

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RefreshControl render correctly with props 1`] = `
+<RCTScrollView
+  contentContainerStyle={
+    Object {
+      "flex": 1,
+    }
+  }
+  refreshControl={
+    <RefreshControl
+      onRefresh={[MockFunction]}
+      progressViewOffset={100}
+      refreshing={true}
+    />
+  }
+>
+  <RCTRefreshControl />
+  <View>
+    <Text>
+      Pull down to see RefreshControl indicator
+    </Text>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`RefreshControl renders correctly when refreshing is false 1`] = `
+<RCTScrollView
+  contentContainerStyle={
+    Object {
+      "flex": 1,
+    }
+  }
+  refreshControl={
+    <RefreshControl
+      refreshing={false}
+    />
+  }
+>
+  <RCTRefreshControl />
+  <View>
+    <Text>
+      Pull down to see RefreshControl indicator
+    </Text>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`RefreshControl renders correctly when refreshing is true 1`] = `
+<RCTScrollView
+  contentContainerStyle={
+    Object {
+      "flex": 1,
+    }
+  }
+  refreshControl={
+    <RefreshControl
+      refreshing={true}
+    />
+  }
+>
+  <RCTRefreshControl />
+  <View>
+    <Text>
+      Pull down to see RefreshControl indicator
+    </Text>
+  </View>
+</RCTScrollView>
+`;

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

@@ -0,0 +1,55 @@
+import React, { ReactElement } from 'react';
+import { ScrollView, Text } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import RefreshControl from '..';
+
+const ExampleList = ({
+  refreshControl,
+}: {
+  refreshControl: ReactElement;
+}): ReactElement => {
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        flex: 1,
+      }}
+      refreshControl={refreshControl}
+    >
+      <Text>
+        Pull down to see RefreshControl indicator
+      </Text>
+    </ScrollView>
+  );
+};
+
+describe('RefreshControl', () => {
+  it.each`
+    refreshing
+    ${true}
+    ${false}
+  `('renders correctly when refreshing is $refreshing', ({ refreshing }) => {
+    const { toJSON } = renderWithTheme(
+      <ExampleList
+        refreshControl={<RefreshControl refreshing={refreshing} />}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('render correctly with props', () => {
+    const { toJSON } = renderWithTheme(
+      <ExampleList
+        refreshControl={
+          <RefreshControl
+            refreshing
+            progressViewOffset={100}
+            onRefresh={jest.fn()}
+          />
+        }
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/RefreshControl/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  RefreshControl as NativeRefreshControl,
+  RefreshControlProps as NativeRefreshControlProps,
+} from 'react-native';
+import { useTheme } from '../../theme';
+
+export interface RefreshControlProps
+  extends Omit<NativeRefreshControlProps, 'colors' | 'tintColor'> {}
+
+const RefreshControl = ({ ...props }: RefreshControlProps) => {
+  const theme = useTheme();
+
+  return (
+    <NativeRefreshControl
+      {...props}
+      colors={[theme.__hd__.refreshControl.colors.indicator]}
+      tintColor={theme.__hd__.refreshControl.colors.indicator}
+    />
+  );
+};
+
+export default RefreshControl;

package/src/components/RichTextEditor/MentionList.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { emitter } from './EditorEvent';
@@ -5,7 +6,12 @@ import * as Events from './utils/events';
 
 const isEmptyString = (s: string | null): boolean => !s || s.length === 0;
 
-export interface MentionListProps {
+interface OnSelectOptionsType<TMetaData> {
+  highlighted: boolean;
+  meta?: TMetaData;
+}
+
+export interface MentionListProps<TMetaData = unknown> {
   /**
    * Unique name used to communicate with webview, should be the same with the RichTextEditor component it used with
    */
@@ -15,17 +21,19 @@ export interface MentionListProps {
    */
   render: (
     searchText: string,
-    onSelect: (id: string, name: string) => void
+    onSelect: (id: string, name: string, options?: OnSelectOptionsType<TMetaData>) => void
   ) => JSX.Element;
 }
 
-const MentionList = ({ name: eventPrefix, render }: MentionListProps) => {
+const MentionList = <TMetaData, >({ name: eventPrefix, render }: MentionListProps<TMetaData>) => {
+  const theme = useTheme();
   const [search, setSearch] = useState<string>('');
   const [target, setTarget] = useState<string | null>(null);
   const normalizeEventName = useCallback(
     (event: string) => `${eventPrefix}/${event}`,
     [eventPrefix]
   );
+
   useEffect(() => {
     const removeMentionSearchListener = Events.on(
       emitter,
@@ -53,11 +61,24 @@ const MentionList = ({ name: eventPrefix, render }: MentionListProps) => {
 
   return (
     <View>
-      {render(search, (id, name) => {
+      {render(search, (id, name, options = { highlighted: false }) => {
+        const { highlighted, meta } = options;
+
+        const highlightStyle = {
+          color: theme.colors.secondary,
+          borderRadius: theme.__hd__.richTextEditor.radii.mention,
+          padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
+          background: highlighted ? theme.colors.lightHighlightedSurface : 'transparent',
+          marginTop: theme.space.xxsmall,
+          marginBottom: theme.space.xxsmall,
+          display: 'inline-flex',
+        };
         const data = {
           id,
           name,
           target,
+          meta,
+          style: highlightStyle,
         };
 
         Events.emit(emitter, normalizeEventName('mention-apply'), data);

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -20,6 +20,7 @@ import Icon from '../Icon';
 import {
   StyledAsteriskLabel,
   StyledAsteriskLabelInsideTextInput,
+  StyledBorderBackDrop,
   StyledContainer,
   StyledError,
   StyledErrorAndHelpTextContainer,
@@ -309,8 +310,9 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   );
 
   return (
-    <StyledContainer testID={testID} themeVariant={variant}>
+    <StyledContainer testID={testID}>
       <StyledTextInputContainer>
+        <StyledBorderBackDrop themeVariant={variant} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (

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

@@ -96,7 +96,7 @@ describe('EditorToolbar', () => {
 
           fireEvent(wrapper.getByTestId(testID), 'press');
           expect(wrapper.getByTestId(testID)).toHaveStyle({
-            backgroundColor: theme.colors.outline,
+            backgroundColor: theme.colors.lightHighlightedSurface,
           });
         });
 

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

@@ -1,10 +1,10 @@
-import { FlatList, Text } from 'react-native';
-import React from 'react';
-
-import { act, fireEvent, render } from '@testing-library/react-native';
 import type { RenderAPI } from '@testing-library/react-native';
-import MentionList from '../MentionList';
+import { act, fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
+import { FlatList, Text } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { emitter as editorEventEmitter } from '../EditorEvent';
+import MentionList from '../MentionList';
 import * as Events from '../utils/events';
 
 const SuggestionListData: Array<{ id: string; name: string }> = [
@@ -56,7 +56,7 @@ describe('MentionList', () => {
     let wrapper: RenderAPI;
 
     beforeEach(() => {
-      wrapper = render(
+      wrapper = renderWithTheme(
         <MentionList
           name="give-shout-out"
           render={(

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

@@ -5,16 +5,12 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="error"
 >
   <View
     style={
@@ -28,6 +24,24 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#f46363",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="error"
+    />
     <View
       style={
         Array [
@@ -225,7 +239,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#f46363",
                   "fontSize": 12,
                   "marginLeft": 4,
                 },
@@ -251,16 +265,12 @@ exports[`RichTextEditor should render correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="error"
 >
   <View
     style={
@@ -274,6 +284,24 @@ exports[`RichTextEditor should render correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#f46363",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="error"
+    />
     <View
       style={
         Array [
@@ -470,7 +498,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#f46363",
                   "fontSize": 12,
                   "marginLeft": 4,
                 },

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

@@ -58,7 +58,7 @@ exports[`SectionHeading allows to customise the icon 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,

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

@@ -20,7 +20,7 @@ exports[`Option renders correctly 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#ECE8EF",
+        "backgroundColor": "#d9d1df",
         "borderRadius": 4,
         "flexDirection": "row",
         "opacity": 1,