@hero-design/rn 7.22.3 → 7.24.0

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

@@ -38,12 +38,13 @@ exports[`AnimatedSpinner renders correctly 1`] = `
             "backgroundColor": "#001f23",
             "borderRadius": 999,
             "height": 16,
-            "opacity": 1,
+            "opacity": 0.9,
             "width": 16,
           },
           Object {},
         ]
       }
+      themeIntent="primary"
       themePosition="topLeft"
       themeSize="medium"
     />
@@ -57,12 +58,13 @@ exports[`AnimatedSpinner renders correctly 1`] = `
             "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,
-            "opacity": 0.75,
+            "opacity": 0.675,
             "width": 16,
           },
           Object {},
         ]
       }
+      themeIntent="primary"
       themePosition="topRight"
       themeSize="medium"
     />
@@ -91,12 +93,13 @@ exports[`AnimatedSpinner renders correctly 1`] = `
             "backgroundColor": "#001f23",
             "borderRadius": 999,
             "height": 16,
-            "opacity": 0.5,
+            "opacity": 0.45,
             "width": 16,
           },
           Object {},
         ]
       }
+      themeIntent="primary"
       themePosition="bottomLeft"
       themeSize="medium"
     />
@@ -110,12 +113,13 @@ exports[`AnimatedSpinner renders correctly 1`] = `
             "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,
-            "opacity": 0.25,
+            "opacity": 0.225,
             "width": 16,
           },
           Object {},
         ]
       }
+      themeIntent="primary"
       themePosition="bottomRight"
       themeSize="medium"
     />