@hero-design/rn 7.23.0 → 7.25.0

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
+exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, and size is $themeSize 1`] = `
 <View
   style={
     Array [
@@ -33,13 +33,13 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         Array [
           Object {
             "flexDirection": "row",
-            "marginBottom": 8,
+            "marginBottom": 4,
           },
           Object {},
         ]
       }
       themePosition="top"
-      themeSize="medium"
+      themeSize="small"
     >
       <View
         collapsable={false}
@@ -47,17 +47,18 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
-              "height": 16,
-              "opacity": 1,
-              "width": 16,
+              "height": 8,
+              "opacity": 0.9,
+              "width": 8,
             },
             Object {},
           ]
         }
+        themeIntent="primary"
         themePosition="topLeft"
-        themeSize="medium"
+        themeSize="small"
       />
       <View
         collapsable={false}
@@ -65,18 +66,19 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
-              "height": 16,
-              "marginLeft": 8,
-              "opacity": 0.75,
-              "width": 16,
+              "height": 8,
+              "marginLeft": 4,
+              "opacity": 0.675,
+              "width": 8,
             },
             Object {},
           ]
         }
+        themeIntent="primary"
         themePosition="topRight"
-        themeSize="medium"
+        themeSize="small"
       />
     </View>
     <View
@@ -92,7 +94,7 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         ]
       }
       themePosition="bottom"
-      themeSize="medium"
+      themeSize="small"
     >
       <View
         collapsable={false}
@@ -100,17 +102,18 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
-              "height": 16,
-              "opacity": 0.5,
-              "width": 16,
+              "height": 8,
+              "opacity": 0.45,
+              "width": 8,
             },
             Object {},
           ]
         }
+        themeIntent="primary"
         themePosition="bottomLeft"
-        themeSize="medium"
+        themeSize="small"
       />
       <View
         collapsable={false}
@@ -118,25 +121,26 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
-              "height": 16,
-              "marginLeft": 8,
-              "opacity": 0.25,
-              "width": 16,
+              "height": 8,
+              "marginLeft": 4,
+              "opacity": 0.225,
+              "width": 8,
             },
             Object {},
           ]
         }
+        themeIntent="primary"
         themePosition="bottomRight"
-        themeSize="medium"
+        themeSize="small"
       />
     </View>
   </View>
 </View>
 `;
 
-exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
+exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, and size is $themeSize 2`] = `
 <View
   style={
     Array [
@@ -183,15 +187,16 @@ exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#ffffff",
               "borderRadius": 999,
               "height": 8,
-              "opacity": 1,
+              "opacity": 0.9,
               "width": 8,
             },
             Object {},
           ]
         }
+        themeIntent="inverted"
         themePosition="topLeft"
         themeSize="small"
       />
@@ -201,16 +206,17 @@ exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#ffffff",
               "borderRadius": 999,
               "height": 8,
               "marginLeft": 4,
-              "opacity": 0.75,
+              "opacity": 0.675,
               "width": 8,
             },
             Object {},
           ]
         }
+        themeIntent="inverted"
         themePosition="topRight"
         themeSize="small"
       />
@@ -236,15 +242,16 @@ exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#ffffff",
               "borderRadius": 999,
               "height": 8,
-              "opacity": 0.5,
+              "opacity": 0.45,
               "width": 8,
             },
             Object {},
           ]
         }
+        themeIntent="inverted"
         themePosition="bottomLeft"
         themeSize="small"
       />
@@ -254,16 +261,17 @@ exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#ffffff",
               "borderRadius": 999,
               "height": 8,
               "marginLeft": 4,
-              "opacity": 0.25,
+              "opacity": 0.225,
               "width": 8,
             },
             Object {},
           ]
         }
+        themeIntent="inverted"
         themePosition="bottomRight"
         themeSize="small"
       />
@@ -272,222 +280,674 @@ exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
 </View>
 `;
 
-exports[`StyledSpinnerRow renders correctly when position is bottom, and size is medium 1`] = `
+exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, and size is $themeSize 3`] = `
 <View
   style={
     Array [
       Object {
-        "flexDirection": "row",
-        "marginBottom": 0,
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
       },
       undefined,
     ]
   }
-  themePosition="bottom"
-  themeSize="medium"
-/>
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "rotate": "0deg",
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "marginBottom": 8,
+          },
+          Object {},
+        ]
+      }
+      themePosition="top"
+      themeSize="medium"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 16,
+              "opacity": 0.9,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themeIntent="primary"
+        themePosition="topLeft"
+        themeSize="medium"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 16,
+              "marginLeft": 8,
+              "opacity": 0.675,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themeIntent="primary"
+        themePosition="topRight"
+        themeSize="medium"
+      />
+    </View>
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "marginBottom": 0,
+          },
+          Object {},
+        ]
+      }
+      themePosition="bottom"
+      themeSize="medium"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 16,
+              "opacity": 0.45,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themeIntent="primary"
+        themePosition="bottomLeft"
+        themeSize="medium"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 16,
+              "marginLeft": 8,
+              "opacity": 0.225,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themeIntent="primary"
+        themePosition="bottomRight"
+        themeSize="medium"
+      />
+    </View>
+  </View>
+</View>
 `;
 
-exports[`StyledSpinnerRow renders correctly when position is bottom, and size is small 1`] = `
+exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, and size is $themeSize 4`] = `
 <View
   style={
     Array [
       Object {
-        "flexDirection": "row",
-        "marginBottom": 0,
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
       },
       undefined,
     ]
   }
-  themePosition="bottom"
-  themeSize="small"
-/>
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "rotate": "0deg",
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "marginBottom": 8,
+          },
+          Object {},
+        ]
+      }
+      themePosition="top"
+      themeSize="medium"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 999,
+              "height": 16,
+              "opacity": 0.9,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themeIntent="inverted"
+        themePosition="topLeft"
+        themeSize="medium"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 999,
+              "height": 16,
+              "marginLeft": 8,
+              "opacity": 0.675,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themeIntent="inverted"
+        themePosition="topRight"
+        themeSize="medium"
+      />
+    </View>
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "marginBottom": 0,
+          },
+          Object {},
+        ]
+      }
+      themePosition="bottom"
+      themeSize="medium"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 999,
+              "height": 16,
+              "opacity": 0.45,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themeIntent="inverted"
+        themePosition="bottomLeft"
+        themeSize="medium"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 999,
+              "height": 16,
+              "marginLeft": 8,
+              "opacity": 0.225,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themeIntent="inverted"
+        themePosition="bottomRight"
+        themeSize="medium"
+      />
+    </View>
+  </View>
+</View>
 `;
 
-exports[`StyledSpinnerRow renders correctly when position is top, and size is medium 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is medium, intent is inverted 1`] = `
 <View
   style={
     Array [
       Object {
-        "flexDirection": "row",
-        "marginBottom": 8,
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 16,
+        "opacity": 0.45,
+        "width": 16,
       },
       undefined,
     ]
   }
-  themePosition="top"
+  themeIntent="inverted"
+  themePosition="bottomLeft"
   themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerRow renders correctly when position is top, and size is small 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is medium, intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "flexDirection": "row",
-        "marginBottom": 4,
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 16,
+        "opacity": 0.45,
+        "width": 16,
       },
       undefined,
     ]
   }
-  themePosition="top"
-  themeSize="small"
+  themeIntent="primary"
+  themePosition="bottomLeft"
+  themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is bottomLeft, size is medium 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is small, intent is inverted 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
-        "height": 16,
-        "opacity": 0.5,
-        "width": 16,
+        "height": 8,
+        "opacity": 0.45,
+        "width": 8,
       },
       undefined,
     ]
   }
+  themeIntent="inverted"
   themePosition="bottomLeft"
-  themeSize="medium"
+  themeSize="small"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is bottomLeft, size is small 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is small, intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 8,
-        "opacity": 0.5,
+        "opacity": 0.45,
         "width": 8,
       },
       undefined,
     ]
   }
+  themeIntent="primary"
   themePosition="bottomLeft"
   themeSize="small"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is bottomRight, size is medium 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is bottomRight, size is medium, intent is inverted 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
-        "opacity": 0.25,
+        "opacity": 0.225,
         "width": 16,
       },
       undefined,
     ]
   }
+  themeIntent="inverted"
   themePosition="bottomRight"
   themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is bottomRight, size is small 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is bottomRight, size is medium, intent is primary 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 16,
+        "marginLeft": 8,
+        "opacity": 0.225,
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+  themePosition="bottomRight"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerDot renders correctly when position is bottomRight, size is small, intent is inverted 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 8,
+        "marginLeft": 4,
+        "opacity": 0.225,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="inverted"
+  themePosition="bottomRight"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerDot renders correctly when position is bottomRight, size is small, intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 8,
         "marginLeft": 4,
-        "opacity": 0.25,
+        "opacity": 0.225,
         "width": 8,
       },
       undefined,
     ]
   }
+  themeIntent="primary"
   themePosition="bottomRight"
   themeSize="small"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is topLeft, size is medium 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is topLeft, size is medium, intent is inverted 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 16,
+        "opacity": 0.9,
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="inverted"
+  themePosition="topLeft"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerDot renders correctly when position is topLeft, size is medium, intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 16,
-        "opacity": 1,
+        "opacity": 0.9,
         "width": 16,
       },
       undefined,
     ]
   }
+  themeIntent="primary"
   themePosition="topLeft"
   themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is topLeft, size is small 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is topLeft, size is small, intent is inverted 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 8,
+        "opacity": 0.9,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="inverted"
+  themePosition="topLeft"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerDot renders correctly when position is topLeft, size is small, intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 8,
-        "opacity": 1,
+        "opacity": 0.9,
         "width": 8,
       },
       undefined,
     ]
   }
+  themeIntent="primary"
   themePosition="topLeft"
   themeSize="small"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is topRight, size is medium 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is topRight, size is medium, intent is inverted 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
-        "opacity": 0.75,
+        "opacity": 0.675,
         "width": 16,
       },
       undefined,
     ]
   }
+  themeIntent="inverted"
   themePosition="topRight"
   themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is topRight, size is small 1`] = `
+exports[`StyledSpinnerDot renders correctly when position is topRight, size is medium, intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 16,
+        "marginLeft": 8,
+        "opacity": 0.675,
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+  themePosition="topRight"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerDot renders correctly when position is topRight, size is small, intent is inverted 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
         "height": 8,
         "marginLeft": 4,
-        "opacity": 0.75,
+        "opacity": 0.675,
         "width": 8,
       },
       undefined,
     ]
   }
+  themeIntent="inverted"
   themePosition="topRight"
   themeSize="small"
 />
 `;
+
+exports[`StyledSpinnerDot renders correctly when position is topRight, size is small, intent is primary 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 8,
+        "marginLeft": 4,
+        "opacity": 0.675,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+  themePosition="topRight"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is bottom, and size is medium 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 0,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottom"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is bottom, and size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 0,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottom"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is top, and size is medium 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="top"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is top, and size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 4,
+      },
+      undefined,
+    ]
+  }
+  themePosition="top"
+  themeSize="small"
+/>
+`;