@hero-design/rn 7.19.0 → 7.20.0

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/__tests__/RichTextEditor.spec.tsx

@@ -126,8 +126,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 +141,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 +156,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 +168,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/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",

package/src/components/Select/SingleSelect/__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",
@@ -298,7 +298,7 @@ exports[`OptionList render isLoading correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -688,6 +688,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   ]
                 }
                 themePosition="top"
+                themeSize="medium"
               >
                 <View
                   collapsable={false}
@@ -695,16 +696,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}
@@ -712,17 +713,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
@@ -738,6 +739,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   ]
                 }
                 themePosition="bottom"
+                themeSize="medium"
               >
                 <View
                   collapsable={false}
@@ -745,16 +747,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}
@@ -762,17 +764,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>
@@ -846,7 +848,7 @@ exports[`OptionList renders correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -1070,7 +1072,7 @@ exports[`OptionList renders correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -1468,7 +1470,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -1692,7 +1694,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -2090,7 +2092,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -2314,7 +2316,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",

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

@@ -449,7 +449,7 @@ Array [
                   Array [
                     Object {
                       "alignContent": "center",
-                      "backgroundColor": "#e8e9ea",
+                      "backgroundColor": "#f6f6f7",
                       "display": "flex",
                       "flexDirection": "row",
                       "justifyContent": "space-between",
@@ -852,7 +852,7 @@ Array [
                   Array [
                     Object {
                       "alignContent": "center",
-                      "backgroundColor": "#e8e9ea",
+                      "backgroundColor": "#f6f6f7",
                       "display": "flex",
                       "flexDirection": "row",
                       "justifyContent": "space-between",
@@ -5898,7 +5898,7 @@ Array [
                   Array [
                     Object {
                       "alignContent": "center",
-                      "backgroundColor": "#e8e9ea",
+                      "backgroundColor": "#f6f6f7",
                       "display": "flex",
                       "flexDirection": "row",
                       "justifyContent": "space-between",
@@ -6122,7 +6122,7 @@ Array [
                   Array [
                     Object {
                       "alignContent": "center",
-                      "backgroundColor": "#e8e9ea",
+                      "backgroundColor": "#f6f6f7",
                       "display": "flex",
                       "flexDirection": "row",
                       "justifyContent": "space-between",

package/src/components/Spinner/AnimatedSpinner.tsx

@@ -7,7 +7,7 @@ const AnimatedRow = Animated.createAnimatedComponent(StyledSpinnerRow);
 
 const AnimatedDot = Animated.createAnimatedComponent(StyledSpinnerDot);
 
-const AnimatedSpinner = () => {
+const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
   const rotateAnimation = useRef<Animated.Value>(new Animated.Value(0));
 
   useEffect(() => {
@@ -40,13 +40,13 @@ const AnimatedSpinner = () => {
         },
       ])}
     >
-      <AnimatedRow themePosition="top">
-        <AnimatedDot themePosition="topLeft" />
-        <AnimatedDot themePosition="topRight" />
+      <AnimatedRow themePosition="top" themeSize={size}>
+        <AnimatedDot themePosition="topLeft" themeSize={size} />
+        <AnimatedDot themePosition="topRight" themeSize={size} />
       </AnimatedRow>
-      <AnimatedRow themePosition="bottom">
-        <AnimatedDot themePosition="bottomLeft" />
-        <AnimatedDot themePosition="bottomRight" />
+      <AnimatedRow themePosition="bottom" themeSize={size}>
+        <AnimatedDot themePosition="bottomLeft" themeSize={size} />
+        <AnimatedDot themePosition="bottomRight" themeSize={size} />
       </AnimatedRow>
     </Animated.View>
   );