@hero-design/rn 7.19.0 → 7.20.0

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>