@hero-design/rn 7.19.0 → 7.20.1

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>
   );

package/src/components/Spinner/StyledSpinner.tsx

@@ -11,43 +11,48 @@ const StyledSpinnerContainer = styled(View)<ViewProps>({
   alignItems: 'center',
 });
 
-const StyledSpinnerRow = styled(View)<{ themePosition: 'top' | 'bottom' }>(
-  ({ themePosition, theme }) => ({
-    flexDirection: 'row',
-    marginBottom:
-      themePosition === 'top'
-        ? theme.__hd__.spinner.space.spinnerDotPadding
-        : 0,
-  })
-);
+const StyledSpinnerRow = styled(View)<{
+  themePosition: 'top' | 'bottom';
+  themeSize: 'small' | 'medium';
+}>(({ themePosition, themeSize = 'medium', theme }) => ({
+  flexDirection: 'row',
+  marginBottom:
+    themePosition === 'top'
+      ? theme.__hd__.spinner.space.spinnerDotPadding[themeSize]
+      : 0,
+}));
 
 const StyledSpinnerDot = styled(View)<{
   themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-}>(({ themePosition, theme }) => {
+  themeSize: 'small' | 'medium';
+}>(({ themePosition, themeSize = 'medium', theme }) => {
   const themeStyling = () => {
     switch (themePosition) {
       case 'topLeft':
-        return { opacity: 1 };
+        return {
+          backgroundColor: theme.__hd__.spinner.colors.dot1,
+        };
       case 'topRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
-          opacity: 0.7,
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
+          backgroundColor: theme.__hd__.spinner.colors.dot2,
         };
       case 'bottomLeft':
-        return { opacity: 0.5 };
+        return {
+          backgroundColor: theme.__hd__.spinner.colors.dot3,
+        };
       case 'bottomRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
-          opacity: 0.3,
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
+          backgroundColor: theme.__hd__.spinner.colors.dot4,
         };
     }
   };
 
   return {
-    height: scale(theme.__hd__.spinner.space.spinnerDot),
-    width: scale(theme.__hd__.spinner.space.spinnerDot),
+    height: scale(theme.__hd__.spinner.space.spinnerDot[themeSize]),
+    width: scale(theme.__hd__.spinner.space.spinnerDot[themeSize]),
     borderRadius: theme.__hd__.spinner.radii.default,
-    backgroundColor: theme.__hd__.spinner.color.default,
     ...themeStyling(),
   };
 });

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

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

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

@@ -8,10 +8,20 @@ import {
 } from '../StyledSpinner';
 
 describe('StyledSpinnerContainer', () => {
-  it('renders correctly', () => {
+  it('renders correctly in small size', () => {
     const { toJSON } = renderWithTheme(
       <StyledSpinnerContainer>
-        <AnimatedSpinner />
+        <AnimatedSpinner size="small" />
+      </StyledSpinnerContainer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly in medium size', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledSpinnerContainer>
+        <AnimatedSpinner size="medium" />
       </StyledSpinnerContainer>
     );
 
@@ -21,14 +31,16 @@ describe('StyledSpinnerContainer', () => {
 
 describe('StyledSpinnerRow', () => {
   it.each`
-    themePosition
-    ${'top'}
-    ${'bottom'}
+    themePosition | themeSize
+    ${'top'}      | ${'small'}
+    ${'bottom'}   | ${'small'}
+    ${'top'}      | ${'medium'}
+    ${'bottom'}   | ${'medium'}
   `(
-    'renders correctly when position is $themePosition',
-    ({ themePosition }) => {
+    'renders correctly when position is $themePosition, and size is $themeSize',
+    ({ themePosition, themeSize }) => {
       const { toJSON } = renderWithTheme(
-        <StyledSpinnerRow themePosition={themePosition} />
+        <StyledSpinnerRow themePosition={themePosition} themeSize={themeSize} />
       );
 
       expect(toJSON()).toMatchSnapshot();
@@ -38,16 +50,20 @@ describe('StyledSpinnerRow', () => {
 
 describe('StyledSpinnerText', () => {
   it.each`
-    themePosition
-    ${'topLeft'}
-    ${'topRight'}
-    ${'bottomLeft'}
-    ${'bottomRight'}
+    themePosition    | themeSize
+    ${'topLeft'}     | ${'small'}
+    ${'topRight'}    | ${'small'}
+    ${'bottomLeft'}  | ${'small'}
+    ${'bottomRight'} | ${'small'}
+    ${'topLeft'}     | ${'medium'}
+    ${'topRight'}    | ${'medium'}
+    ${'bottomLeft'}  | ${'medium'}
+    ${'bottomRight'} | ${'medium'}
   `(
-    'renders correctly when position is $themePosition',
-    ({ themePosition }) => {
+    'renders correctly when position is $themePosition, size is $themeSize',
+    ({ themePosition, themeSize }) => {
       const { toJSON } = renderWithTheme(
-        <StyledSpinnerDot themePosition={themePosition} />
+        <StyledSpinnerDot themePosition={themePosition} themeSize={themeSize} />
       );
 
       expect(toJSON()).toMatchSnapshot();

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

@@ -27,6 +27,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       ]
     }
     themePosition="top"
+    themeSize="medium"
   >
     <View
       collapsable={false}
@@ -34,16 +35,16 @@ exports[`AnimatedSpinner renders 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}
@@ -51,17 +52,17 @@ exports[`AnimatedSpinner renders 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
@@ -77,6 +78,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       ]
     }
     themePosition="bottom"
+    themeSize="medium"
   >
     <View
       collapsable={false}
@@ -84,16 +86,16 @@ exports[`AnimatedSpinner renders 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}
@@ -101,17 +103,17 @@ exports[`AnimatedSpinner renders 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>