@hero-design/rn 7.19.0 → 7.20.1

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Card from '..';
+import Typography from '../../Typography';
 
 describe('Card', () => {
   it('renders basic card', () => {
@@ -27,4 +28,21 @@ describe('Card', () => {
     expect(queryAllByTestId('child-view')).toHaveLength(1);
     expect(queryAllByTestId('data-card-indicator')).toHaveLength(1);
   });
+
+  it.each`
+    intent
+    ${undefined}
+    ${'primary'}
+    ${'success'}
+    ${'info'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const { toJSON, getByText } = renderWithTheme(
+      <Card intent={intent}>
+        <Typography.Text>Card Content</Typography.Text>
+      </Card>
+    );
+
+    expect(getByText('Card Content')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/Card/index.tsx

@@ -9,6 +9,10 @@ interface CardProps extends ViewProps {
    * Card's content.
    */
   children?: ReactNode;
+  /**
+   * Visual intent color to apply to card.
+   */
+  intent?: 'primary' | 'success' | 'warning';
   /**
    * Card type.
    * This is now deprecated. If you want to use "data" variant, please use Card.Data instead.
@@ -27,10 +31,11 @@ interface CardProps extends ViewProps {
 
 const Card = ({
   variant = 'basic',
+  intent,
   children,
   ...nativeProps
 }: CardProps): JSX.Element => (
-  <StyledCard {...nativeProps} themeVariant={variant}>
+  <StyledCard {...nativeProps} themeVariant={variant} themeIntent={intent}>
     {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
     {children}
   </StyledCard>

package/src/components/Drawer/DragableDrawer/helpers.ts

@@ -17,10 +17,9 @@ export const calculateSnapPointsData = (
   snapPoints: number[]
 ): SnapPointsData => {
   const filteredSnapPoints = snapPoints.filter(value => value >= minimumHeight);
-  const snapPointsOffsetValues = [
-    minimumHeight,
-    ...filteredSnapPoints,
-  ].map(value => getOffset(height, value));
+  const snapPointsOffsetValues = [minimumHeight, ...filteredSnapPoints].map(
+    value => getOffset(height, value)
+  );
   const uniqSnapPointOffsetValues = Array.from(
     new Set([...snapPointsOffsetValues, 0])
   );

package/src/components/FAB/ActionGroup/index.tsx

@@ -97,19 +97,17 @@ const ActionGroup = ({
       outputRange: [400, 0],
     }
   );
-  const interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate(
-    {
+  const interpolatedBackdropOpacityAnimation =
+    tranlateXAnimation.current.interpolate({
       inputRange: [0, 1],
       outputRange: [0, 0.9],
-    }
-  );
+    });
 
-  const interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate(
-    {
+  const interpolatedActionGroupOpacityAnimation =
+    tranlateXAnimation.current.interpolate({
       inputRange: [0, 1],
       outputRange: [0, 1],
-    }
-  );
+    });
 
   return (
     <StyledContainer testID={testID} pointerEvents="box-none" style={style}>

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ComponentType } from 'react';
 import Icon from '../Icon';
-import { ToolbarButtonName, ToolbarEvents } from './constants';
+import { ToolbarEvents } from './constants';
 import { emitter } from './EditorEvent';
 import {
   StyledSeparator,
   StyledToolbar,
   StyledToolbarButton,
 } from './StyledToolbar';
+import { ToolbarButtonName } from './types';
 import * as Events from './utils/events';
 import type { IconProps } from '../Icon';
 
@@ -35,34 +36,34 @@ interface ButtonConfig {
 }
 
 const buttonConfigs: Partial<Record<ToolbarButtonName, ButtonConfig>> = {
-  [ToolbarButtonName.Bold]: {
+  bold: {
     icon: 'format-bold',
     eventName: ToolbarEvents.Bold,
   },
-  [ToolbarButtonName.Italic]: {
+  italic: {
     icon: 'format-italic',
     eventName: ToolbarEvents.Italic,
   },
-  [ToolbarButtonName.Underline]: {
+  underline: {
     icon: 'format-underlined',
     eventName: ToolbarEvents.Underline,
   },
-  [ToolbarButtonName.BulletedList]: {
+  bulletedList: {
     icon: 'format-list-bulleted',
     eventName: ToolbarEvents.BulletedList,
     standalone: true,
   },
-  [ToolbarButtonName.NumberedList]: {
+  numberedList: {
     icon: 'format-list-numbered',
     eventName: ToolbarEvents.NumberedList,
     standalone: true,
   },
-  [ToolbarButtonName.HeadingOne]: {
+  headingOne: {
     icon: 'format-heading1',
     eventName: ToolbarEvents.HeadingOne,
     standalone: true,
   },
-  [ToolbarButtonName.HeadingTwo]: {
+  headingTwo: {
     icon: 'format-heading2',
     eventName: ToolbarEvents.HeadingTwo,
     standalone: true,
@@ -70,15 +71,15 @@ const buttonConfigs: Partial<Record<ToolbarButtonName, ButtonConfig>> = {
 };
 
 const defaultButtons: ToolbarButtonName[] = [
-  ToolbarButtonName.Bold,
-  ToolbarButtonName.Italic,
-  ToolbarButtonName.Underline,
-  ToolbarButtonName.Seperator,
-  ToolbarButtonName.BulletedList,
-  ToolbarButtonName.NumberedList,
-  ToolbarButtonName.Seperator,
-  ToolbarButtonName.HeadingOne,
-  ToolbarButtonName.HeadingTwo,
+  'bold',
+  'italic',
+  'underline',
+  '|',
+  'bulletedList',
+  'numberedList',
+  '|',
+  'headingOne',
+  'headingTwo',
 ];
 
 export interface EditorToolbarProps {
@@ -180,7 +181,7 @@ const EditorToolbar = ({
   const toolbarButtons = useMemo(
     () =>
       toolbarButtonArray.map(button => {
-        if (button.buttonName === ToolbarButtonName.Seperator) {
+        if (button.buttonName === '|') {
           return <StyledSeparator key={button.id} />;
         }
         const config = buttonConfigs[button.buttonName];

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -51,6 +51,10 @@ export type EditorValue = {
 }[];
 
 export interface RichTextEditorProps {
+  /**
+   * If true, the editor will be focused when the user enters the screen
+   */
+  autoFocus?: boolean;
   /**
    * Error message
    */
@@ -110,6 +114,7 @@ const defaultValue: EditorValue = [
 ];
 
 const RichTextEditor: ComponentType<RichTextEditorProps> = ({
+  autoFocus = true,
   name,
   placeholder = '',
   onChange = noop,
@@ -191,7 +196,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               placeholder: "${placeholder}",
               initialValue: ${initialValueString},
               isAndroid: ${isAndroid ? 'true' : 'false'},
-              autoFocus: true,
+              autoFocus: ${autoFocus},
               style: {
                 padding: '0 !important',
                 fontSize: ${theme.__hd__.richTextEditor.fontSizes.editor}
@@ -305,7 +310,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   );
 
   return (
-    <StyledContainer style={style} testID={testID}>
+    <StyledContainer testID={testID}>
       <StyledTextInputContainer>
         <StyledBorderBackDrop themeVariant={variant} />
         {(isFocused || (label && !isEmptyValue)) && (

package/src/components/RichTextEditor/StyledRichTextEditor.ts

@@ -14,7 +14,5 @@ export const StyledWebView = styled(WebView)<{
   backgroundColor: 'transparent',
   textAlignVertical: 'center',
   fontSize: theme.__hd__.textInput.fontSizes.text,
-  alignSelf: 'stretch',
-  flexGrow: 2,
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));

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

@@ -94,10 +94,13 @@ describe('RichTextEditor', () => {
         Events.on(EditorEventEmitter, 'rich-text-editor/editor-focus', () => {
           emittedEvents.push('called');
         });
-        onMessageOfLatestRendering({
-          nativeEvent: {
-            data: '{"type": "@hero-editor/webview/editor-focus", "data" : {}}',
-          },
+
+        act(() => {
+          onMessageOfLatestRendering({
+            nativeEvent: {
+              data: '{"type": "@hero-editor/webview/editor-focus", "data" : {}}',
+            },
+          });
         });
         expect(emittedEvents).toMatchObject(['called']);
       });
@@ -126,8 +129,7 @@ describe('RichTextEditor', () => {
         });
         onMessageOfLatestRendering({
           nativeEvent: {
-            data:
-              '{"type": "@hero-editor/webview/mention-search", "data" : {}}',
+            data: '{"type": "@hero-editor/webview/mention-search", "data" : {}}',
           },
         });
         expect(emittedEvents).toMatchObject(['called']);
@@ -142,8 +144,7 @@ describe('RichTextEditor', () => {
       it('should call onChange', () => {
         onMessageOfLatestRendering({
           nativeEvent: {
-            data:
-              '{"type": "@hero-editor/webview/editor-change", "data" : { "value": "text"}}',
+            data: '{"type": "@hero-editor/webview/editor-change", "data" : { "value": "text"}}',
           },
         });
         expect(onChangeMock).lastCalledWith('text');
@@ -158,8 +159,7 @@ describe('RichTextEditor', () => {
       it('should call onCursorChange', () => {
         onMessageOfLatestRendering({
           nativeEvent: {
-            data:
-              '{"type": "@hero-editor/webview/cursor-change", "data" : { "position": 32}}',
+            data: '{"type": "@hero-editor/webview/cursor-change", "data" : { "position": 32}}',
           },
         });
         expect(onCursorChangeMock).lastCalledWith({ position: 32 });
@@ -171,8 +171,7 @@ describe('RichTextEditor', () => {
         act(() => {
           onMessageOfLatestRendering({
             nativeEvent: {
-              data:
-                '{"type": "@hero-editor/webview/editor-layout", "data" : { "width": 320, "height": 480}}',
+              data: '{"type": "@hero-editor/webview/editor-layout", "data" : { "width": 320, "height": 480}}',
             },
           });
         });

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

@@ -8,9 +8,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         "marginVertical": 8,
         "width": "100%",
       },
-      Object {
-        "backgroundColor": "yellow",
-      },
+      undefined,
     ]
   }
 >
@@ -163,9 +161,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         style={
           Array [
             Object {
-              "alignSelf": "stretch",
               "backgroundColor": "transparent",
-              "flexGrow": 2,
               "fontSize": 14,
               "height": 480,
               "marginHorizontal": 8,
@@ -272,9 +268,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         "marginVertical": 8,
         "width": "100%",
       },
-      Object {
-        "backgroundColor": "yellow",
-      },
+      undefined,
     ]
   }
 >
@@ -426,9 +420,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         style={
           Array [
             Object {
-              "alignSelf": "stretch",
               "backgroundColor": "transparent",
-              "flexGrow": 2,
               "fontSize": 14,
               "height": undefined,
               "marginHorizontal": 8,

package/src/components/RichTextEditor/constants.ts

@@ -7,14 +7,3 @@ export enum ToolbarEvents {
   HeadingOne = 'heading-one',
   HeadingTwo = 'heading-two',
 }
-
-export enum ToolbarButtonName {
-  Bold = 'bold',
-  Italic = 'italic',
-  Underline = 'underline',
-  BulletedList = 'bulletedList',
-  NumberedList = 'numberedList',
-  HeadingOne = 'headingOne',
-  HeadingTwo = 'headingTwo',
-  Seperator = '|',
-}

package/src/components/RichTextEditor/index.tsx

@@ -1,4 +1,3 @@
-import { ToolbarButtonName } from './constants';
 import Toolbar from './EditorToolbar';
 import MentionList from './MentionList';
 import RichTextEditor from './RichTextEditor';
@@ -6,8 +5,6 @@ import type { RichTextEditorProps, RichTextEditorRef } from './RichTextEditor';
 
 export type { RichTextEditorProps, RichTextEditorRef };
 
-export { ToolbarButtonName };
-
 export default Object.assign(RichTextEditor, {
   MentionList,
   Toolbar,

package/src/components/RichTextEditor/types.ts

@@ -0,0 +1,9 @@
+export type ToolbarButtonName =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'bulletedList'
+  | 'numberedList'
+  | 'headingOne'
+  | 'headingTwo'
+  | '|';

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

@@ -6,7 +6,7 @@ exports[`StyledHeading renders correct style 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#e8e9ea",
+        "backgroundColor": "#f6f6f7",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",

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

@@ -6,7 +6,7 @@ exports[`SectionHeading allows to customise the icon 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#e8e9ea",
+        "backgroundColor": "#f6f6f7",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",
@@ -83,7 +83,7 @@ exports[`SectionHeading render icon correctly 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#e8e9ea",
+        "backgroundColor": "#f6f6f7",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",
@@ -161,7 +161,7 @@ exports[`SectionHeading render right children correctly 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#e8e9ea",
+        "backgroundColor": "#f6f6f7",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",
@@ -227,7 +227,7 @@ exports[`SectionHeading renders correctly 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#e8e9ea",
+        "backgroundColor": "#f6f6f7",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",

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

@@ -74,7 +74,7 @@ exports[`OptionList render isLoading correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -323,7 +323,7 @@ exports[`OptionList render isLoading correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -713,6 +713,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   ]
                 }
                 themePosition="top"
+                themeSize="medium"
               >
                 <View
                   collapsable={false}
@@ -720,16 +721,16 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#8505a2",
-                        "borderRadius": 8,
+                        "backgroundColor": "#795e90",
+                        "borderRadius": 999,
                         "height": 16,
-                        "opacity": 1,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
                   themePosition="topLeft"
+                  themeSize="medium"
                 />
                 <View
                   collapsable={false}
@@ -737,17 +738,17 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#8505a2",
-                        "borderRadius": 8,
+                        "backgroundColor": "#a08cb0",
+                        "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.7,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
                   themePosition="topRight"
+                  themeSize="medium"
                 />
               </View>
               <View
@@ -763,6 +764,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   ]
                 }
                 themePosition="bottom"
+                themeSize="medium"
               >
                 <View
                   collapsable={false}
@@ -770,16 +772,16 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#8505a2",
-                        "borderRadius": 8,
+                        "backgroundColor": "#d9d1df",
+                        "borderRadius": 999,
                         "height": 16,
-                        "opacity": 0.5,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
                   themePosition="bottomLeft"
+                  themeSize="medium"
                 />
                 <View
                   collapsable={false}
@@ -787,17 +789,17 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#8505a2",
-                        "borderRadius": 8,
+                        "backgroundColor": "#ece8ef",
+                        "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.3,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
                   themePosition="bottomRight"
+                  themeSize="medium"
                 />
               </View>
             </View>
@@ -871,7 +873,7 @@ exports[`OptionList renders correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -1120,7 +1122,7 @@ exports[`OptionList renders correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -1518,7 +1520,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -1767,7 +1769,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -2190,7 +2192,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -2439,7 +2441,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",

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

@@ -450,7 +450,7 @@ Array [
                   Array [
                     Object {
                       "alignContent": "center",
-                      "backgroundColor": "#e8e9ea",
+                      "backgroundColor": "#f6f6f7",
                       "display": "flex",
                       "flexDirection": "row",
                       "justifyContent": "space-between",
@@ -853,7 +853,7 @@ Array [
                   Array [
                     Object {
                       "alignContent": "center",
-                      "backgroundColor": "#e8e9ea",
+                      "backgroundColor": "#f6f6f7",
                       "display": "flex",
                       "flexDirection": "row",
                       "justifyContent": "space-between",
@@ -6337,7 +6337,7 @@ Array [
                   Array [
                     Object {
                       "alignContent": "center",
-                      "backgroundColor": "#e8e9ea",
+                      "backgroundColor": "#f6f6f7",
                       "display": "flex",
                       "flexDirection": "row",
                       "justifyContent": "space-between",
@@ -6561,7 +6561,7 @@ Array [
                   Array [
                     Object {
                       "alignContent": "center",
-                      "backgroundColor": "#e8e9ea",
+                      "backgroundColor": "#f6f6f7",
                       "display": "flex",
                       "flexDirection": "row",
                       "justifyContent": "space-between",