@hero-design/rn 7.2.0 → 7.3.0

package/src/components/Button/LoadingIndicator/__tests__/StyledLoadingIndicator.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { StyledLoadingDot } from '../StyledLoadingIndicator';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+describe('StyledLoadingIndicator', () => {
+  it.each`
+    themeVariant
+    ${'basic-transparent'}
+    ${'filled-primary'}
+    ${'filled-secondary'}
+    ${'outlined-primary'}
+    ${'outlined-secondary'}
+  `('has $themeVariant style', ({ themeVariant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledLoadingDot themeVariant={themeVariant} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledLoadingIndicator has basic-transparent style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="basic-transparent"
+/>
+`;
+
+exports[`StyledLoadingIndicator has filled-primary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-primary"
+/>
+`;
+
+exports[`StyledLoadingIndicator has filled-secondary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-secondary"
+/>
+`;
+
+exports[`StyledLoadingIndicator has outlined-primary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-primary"
+/>
+`;
+
+exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#4568fb",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-secondary"
+/>
+`;

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,606 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoadingIndicator renders correctly when themeVariant is basic-transparent 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingVertical": 2,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="basic-transparent"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="basic-transparent"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="basic-transparent"
+    />
+  </View>
+</View>
+`;
+
+exports[`LoadingIndicator renders correctly when themeVariant is filled-primary 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingVertical": 2,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="filled-primary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="filled-primary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="filled-primary"
+    />
+  </View>
+</View>
+`;
+
+exports[`LoadingIndicator renders correctly when themeVariant is filled-secondary 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingVertical": 2,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="filled-secondary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="filled-secondary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="filled-secondary"
+    />
+  </View>
+</View>
+`;
+
+exports[`LoadingIndicator renders correctly when themeVariant is outlined-primary 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingVertical": 2,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="outlined-primary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="outlined-primary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="outlined-primary"
+    />
+  </View>
+</View>
+`;
+
+exports[`LoadingIndicator renders correctly when themeVariant is outlined-secondary 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingVertical": 2,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#4568fb",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="outlined-secondary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#4568fb",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="outlined-secondary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#4568fb",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="outlined-secondary"
+    />
+  </View>
+</View>
+`;