@hero-design/rn 7.23.0 → 7.25.0

package/src/components/Select/StyledOptionList.tsx

@@ -45,7 +45,6 @@ const StyledOptionList = <V, T extends OptionType<V>>({
       keyExtractor={keyExtractor}
       onEndReachedThreshold={0.1}
       onEndReached={() => setOnEndReachedCalled(true)}
-      onScrollToIndexFailed={() => {}}
       onMomentumScrollBegin={() => {
         if (onEndReached && onEndReachedCalled && !loading) onEndReached();
         setOnEndReachedCalled(false);

package/src/components/Select/__tests__/__snapshots__/StyledSelect.spec.tsx.snap

@@ -13,7 +13,7 @@ exports[`FooterText has correct style 1`] = `
       },
       Array [
         Object {
-          "color": "#401960",
+          "color": "#795e90",
         },
         undefined,
       ],

package/src/components/Spinner/AnimatedSpinner.tsx

@@ -7,7 +7,13 @@ const AnimatedRow = Animated.createAnimatedComponent(StyledSpinnerRow);
 
 const AnimatedDot = Animated.createAnimatedComponent(StyledSpinnerDot);
 
-const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
+const AnimatedSpinner = ({
+  size,
+  intent,
+}: {
+  size: 'small' | 'medium';
+  intent: 'primary' | 'inverted';
+}) => {
   const rotateAnimation = useRef<Animated.Value>(new Animated.Value(0));
 
   useEffect(() => {
@@ -32,6 +38,15 @@ const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
     outputRange: ['0deg', '360deg'],
   });
 
+  const rowProps = {
+    themeSize: size,
+  };
+
+  const dotProps = {
+    themeSize: size,
+    themeIntent: intent,
+  };
+
   return (
     <Animated.View
       style={StyleSheet.flatten([
@@ -40,13 +55,13 @@ const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
         },
       ])}
     >
-      <AnimatedRow themePosition="top" themeSize={size}>
-        <AnimatedDot themePosition="topLeft" themeSize={size} />
-        <AnimatedDot themePosition="topRight" themeSize={size} />
+      <AnimatedRow themePosition="top" {...rowProps}>
+        <AnimatedDot themePosition="topLeft" {...dotProps} />
+        <AnimatedDot themePosition="topRight" {...dotProps} />
       </AnimatedRow>
-      <AnimatedRow themePosition="bottom" themeSize={size}>
-        <AnimatedDot themePosition="bottomLeft" themeSize={size} />
-        <AnimatedDot themePosition="bottomRight" themeSize={size} />
+      <AnimatedRow themePosition="bottom" {...rowProps}>
+        <AnimatedDot themePosition="bottomLeft" {...dotProps} />
+        <AnimatedDot themePosition="bottomRight" {...dotProps} />
       </AnimatedRow>
     </Animated.View>
   );

package/src/components/Spinner/StyledSpinner.tsx

@@ -25,30 +25,34 @@ const StyledSpinnerRow = styled(View)<{
 const StyledSpinnerDot = styled(View)<{
   themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
   themeSize: 'small' | 'medium';
-}>(({ themePosition, themeSize = 'medium', theme }) => {
+  themeIntent: 'primary' | 'inverted';
+}>(({ themePosition, themeSize, themeIntent, theme }) => {
   const themeStyling = () => {
+    const backgroundColor = theme.__hd__.spinner.colors.dot[themeIntent];
+    const dotPadding = theme.__hd__.spinner.space.spinnerDotPadding[themeSize];
+
     switch (themePosition) {
       case 'topLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 1,
+          backgroundColor,
+          opacity: 0.9,
         };
       case 'topRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 0.75,
+          marginLeft: dotPadding,
+          backgroundColor,
+          opacity: 0.675,
         };
       case 'bottomLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 0.5,
+          backgroundColor,
+          opacity: 0.45,
         };
       case 'bottomRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 0.25,
+          marginLeft: dotPadding,
+          backgroundColor,
+          opacity: 0.225,
         };
     }
   };

package/src/components/Spinner/__tests__/AnimatedSpinner.spec.tsx

@@ -4,7 +4,9 @@ import { AnimatedSpinner } from '../AnimatedSpinner';
 
 describe('AnimatedSpinner', () => {
   it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<AnimatedSpinner size="medium" />);
+    const { toJSON } = renderWithTheme(
+      <AnimatedSpinner size="medium" intent="primary" />
+    );
 
     expect(toJSON()).toMatchSnapshot();
   });

package/src/components/Spinner/__tests__/StyledSpinner.spec.tsx

@@ -8,25 +8,24 @@ import {
 } from '../StyledSpinner';
 
 describe('StyledSpinnerContainer', () => {
-  it('renders correctly in small size', () => {
-    const { toJSON } = renderWithTheme(
-      <StyledSpinnerContainer>
-        <AnimatedSpinner size="small" />
-      </StyledSpinnerContainer>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly in medium size', () => {
-    const { toJSON } = renderWithTheme(
-      <StyledSpinnerContainer>
-        <AnimatedSpinner size="medium" />
-      </StyledSpinnerContainer>
-    );
+  it.each`
+    intent        | size
+    ${'primary'}  | ${'small'}
+    ${'inverted'} | ${'small'}
+    ${'primary'}  | ${'medium'}
+    ${'inverted'} | ${'medium'}
+  `(
+    'renders correctly when intent is $themeIntent, and size is $themeSize',
+    ({ intent, size }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledSpinnerContainer>
+          <AnimatedSpinner size={size} intent={intent} />
+        </StyledSpinnerContainer>
+      );
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 });
 
 describe('StyledSpinnerRow', () => {
@@ -48,22 +47,34 @@ describe('StyledSpinnerRow', () => {
   );
 });
 
-describe('StyledSpinnerText', () => {
+describe('StyledSpinnerDot', () => {
   it.each`
-    themePosition    | themeSize
-    ${'topLeft'}     | ${'small'}
-    ${'topRight'}    | ${'small'}
-    ${'bottomLeft'}  | ${'small'}
-    ${'bottomRight'} | ${'small'}
-    ${'topLeft'}     | ${'medium'}
-    ${'topRight'}    | ${'medium'}
-    ${'bottomLeft'}  | ${'medium'}
-    ${'bottomRight'} | ${'medium'}
+    themePosition    | themeSize   | themeIntent
+    ${'topLeft'}     | ${'small'}  | ${'primary'}
+    ${'topRight'}    | ${'small'}  | ${'primary'}
+    ${'bottomLeft'}  | ${'small'}  | ${'primary'}
+    ${'bottomRight'} | ${'small'}  | ${'primary'}
+    ${'topLeft'}     | ${'medium'} | ${'primary'}
+    ${'topRight'}    | ${'medium'} | ${'primary'}
+    ${'bottomLeft'}  | ${'medium'} | ${'primary'}
+    ${'bottomRight'} | ${'medium'} | ${'primary'}
+    ${'topLeft'}     | ${'small'}  | ${'inverted'}
+    ${'topRight'}    | ${'small'}  | ${'inverted'}
+    ${'bottomLeft'}  | ${'small'}  | ${'inverted'}
+    ${'bottomRight'} | ${'small'}  | ${'inverted'}
+    ${'topLeft'}     | ${'medium'} | ${'inverted'}
+    ${'topRight'}    | ${'medium'} | ${'inverted'}
+    ${'bottomLeft'}  | ${'medium'} | ${'inverted'}
+    ${'bottomRight'} | ${'medium'} | ${'inverted'}
   `(
-    'renders correctly when position is $themePosition, size is $themeSize',
-    ({ themePosition, themeSize }) => {
+    'renders correctly when position is $themePosition, size is $themeSize, intent is $themeIntent',
+    ({ themePosition, themeSize, themeIntent }) => {
       const { toJSON } = renderWithTheme(
-        <StyledSpinnerDot themePosition={themePosition} themeSize={themeSize} />
+        <StyledSpinnerDot
+          themePosition={themePosition}
+          themeSize={themeSize}
+          themeIntent={themeIntent}
+        />
       );
 
       expect(toJSON()).toMatchSnapshot();

package/src/components/Spinner/__tests__/__snapshots__/AnimatedSpinner.spec.tsx.snap

@@ -35,15 +35,16 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 16,
-            "opacity": 1,
+            "opacity": 0.9,
             "width": 16,
           },
           Object {},
         ]
       }
+      themeIntent="primary"
       themePosition="topLeft"
       themeSize="medium"
     />
@@ -53,16 +54,17 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,
-            "opacity": 0.75,
+            "opacity": 0.675,
             "width": 16,
           },
           Object {},
         ]
       }
+      themeIntent="primary"
       themePosition="topRight"
       themeSize="medium"
     />
@@ -88,15 +90,16 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 16,
-            "opacity": 0.5,
+            "opacity": 0.45,
             "width": 16,
           },
           Object {},
         ]
       }
+      themeIntent="primary"
       themePosition="bottomLeft"
       themeSize="medium"
     />
@@ -106,16 +109,17 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,
-            "opacity": 0.25,
+            "opacity": 0.225,
             "width": 16,
           },
           Object {},
         ]
       }
+      themeIntent="primary"
       themePosition="bottomRight"
       themeSize="medium"
     />