@hero-design/rn 7.3.2 → 7.6.0

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

@@ -0,0 +1,235 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledSpinnerContainer renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+      },
+      undefined,
+    ]
+  }
+>
+  <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"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#7622d7",
+              "borderRadius": 8,
+              "height": 16,
+              "opacity": 1,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themePosition="topLeft"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#7622d7",
+              "borderRadius": 8,
+              "height": 16,
+              "marginLeft": 8,
+              "opacity": 0.7,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themePosition="topRight"
+      />
+    </View>
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "marginBottom": 0,
+          },
+          Object {},
+        ]
+      }
+      themePosition="bottom"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#7622d7",
+              "borderRadius": 8,
+              "height": 16,
+              "opacity": 0.5,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themePosition="bottomLeft"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#7622d7",
+              "borderRadius": 8,
+              "height": 16,
+              "marginLeft": 8,
+              "opacity": 0.3,
+              "width": 16,
+            },
+            Object {},
+          ]
+        }
+        themePosition="bottomRight"
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is bottom 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 0,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottom"
+/>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is top 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="top"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is bottomLeft 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 8,
+        "height": 16,
+        "opacity": 0.5,
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottomLeft"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is bottomRight 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 8,
+        "height": 16,
+        "marginLeft": 8,
+        "opacity": 0.3,
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottomRight"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is topLeft 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 8,
+        "height": 16,
+        "opacity": 1,
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themePosition="topLeft"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is topRight 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 8,
+        "height": 16,
+        "marginLeft": 8,
+        "opacity": 0.7,
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themePosition="topRight"
+/>
+`;

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

@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "height": "100%",
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+    testID="spinner"
+  >
+    <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"
+      >
+        <View
+          collapsable={false}
+          nativeID="animatedComponent"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 8,
+                "height": 16,
+                "opacity": 1,
+                "width": 16,
+              },
+              Object {},
+            ]
+          }
+          themePosition="topLeft"
+        />
+        <View
+          collapsable={false}
+          nativeID="animatedComponent"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 8,
+                "height": 16,
+                "marginLeft": 8,
+                "opacity": 0.7,
+                "width": 16,
+              },
+              Object {},
+            ]
+          }
+          themePosition="topRight"
+        />
+      </View>
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "marginBottom": 0,
+            },
+            Object {},
+          ]
+        }
+        themePosition="bottom"
+      >
+        <View
+          collapsable={false}
+          nativeID="animatedComponent"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 8,
+                "height": 16,
+                "opacity": 0.5,
+                "width": 16,
+              },
+              Object {},
+            ]
+          }
+          themePosition="bottomLeft"
+        />
+        <View
+          collapsable={false}
+          nativeID="animatedComponent"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 8,
+                "height": 16,
+                "marginLeft": 8,
+                "opacity": 0.3,
+                "width": 16,
+              },
+              Object {},
+            ]
+          }
+          themePosition="bottomRight"
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Spinner from '..';
+
+describe('Spinner', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<Spinner testID="spinner" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Spinner/index.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react';
+import { ViewProps } from 'react-native';
+
+import { StyledSpinnerContainer, StyledView } from './StyledSpinner';
+import { AnimatedSpinner } from './AnimatedSpinner';
+
+interface SpinnerProps extends ViewProps {
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Spinner = ({ testID, ...nativeProps }: SpinnerProps): ReactElement => (
+  <StyledView {...nativeProps}>
+    <StyledSpinnerContainer testID={testID}>
+      <AnimatedSpinner />
+    </StyledSpinnerContainer>
+  </StyledView>
+);
+
+export default Spinner;

package/src/components/Switch/StyledSwitch.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/native';
+import { Animated, View } from 'react-native';
+
+type ThemeSize = 'small' | 'medium';
+
+const StyledWrapper = styled(View)<{
+  themeChecked: boolean | undefined;
+  themeSize: ThemeSize;
+}>(({ theme, themeChecked, themeSize }) => ({
+  height: theme.__hd__.switch.heights[themeSize],
+  width: theme.__hd__.switch.widths[themeSize],
+  paddingHorizontal: theme.__hd__.switch.spaces[themeSize],
+  borderRadius: theme.__hd__.switch.radii.rounded,
+  backgroundColor: themeChecked
+    ? theme.__hd__.switch.colors.active
+    : theme.__hd__.switch.colors.inactive,
+}));
+
+const StyledDisabledWrapper = styled(View)<{
+  themeSize: ThemeSize;
+}>(({ theme, themeSize }) => ({
+  position: 'absolute',
+  height: theme.__hd__.switch.heights[themeSize],
+  width: theme.__hd__.switch.widths[themeSize],
+  borderRadius: theme.__hd__.switch.radii.rounded,
+  backgroundColor: theme.__hd__.switch.colors.thumb,
+  zIndex: 9999,
+  opacity: 0.8,
+}));
+
+const StyledThumbWrapper = styled(View)<{
+  themeSize: ThemeSize;
+}>(({ theme, themeSize }) => ({
+  height: theme.__hd__.switch.heights[themeSize],
+  width: theme.__hd__.switch.widths[themeSize],
+  borderRadius: theme.__hd__.switch.radii.rounded,
+  display: 'flex',
+  justifyContent: 'center',
+}));
+
+const StyledKnot = styled(Animated.View)<{
+  themeSize: ThemeSize;
+}>(({ theme, themeSize }) => ({
+  width: theme.__hd__.switch.thumbSizes[themeSize],
+  height: theme.__hd__.switch.thumbSizes[themeSize],
+  backgroundColor: theme.__hd__.switch.colors.thumb,
+  borderRadius: theme.__hd__.switch.radii.rounded,
+}));
+
+export { StyledWrapper, StyledDisabledWrapper, StyledThumbWrapper, StyledKnot };

package/src/components/Switch/__tests__/StyledHeading.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import {
+  StyledWrapper,
+  StyledDisabledWrapper,
+  StyledThumbWrapper,
+  StyledKnot,
+} from '../StyledSwitch';
+
+describe('StyledWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledWrapper themeChecked themeSize="medium" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledDisabledWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledDisabledWrapper themeSize="medium" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledThumbWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledThumbWrapper themeSize="medium" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledKnot', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(<StyledKnot themeSize="medium" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Switch/__tests__/__snapshots__/StyledHeading.spec.tsx.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledDisabledWrapper renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 28.799999999999997,
+        "opacity": 0.8,
+        "position": "absolute",
+        "width": 56,
+        "zIndex": 9999,
+      },
+      undefined,
+    ]
+  }
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledKnot renders correct style 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "borderRadius": 999,
+      "height": 20.8,
+      "width": 20.8,
+    }
+  }
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledThumbWrapper renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 999,
+        "display": "flex",
+        "height": 28.799999999999997,
+        "justifyContent": "center",
+        "width": 56,
+      },
+      undefined,
+    ]
+  }
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledWrapper renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 999,
+        "height": 28.799999999999997,
+        "paddingHorizontal": 4,
+        "width": 56,
+      },
+      undefined,
+    ]
+  }
+  themeChecked={true}
+  themeSize="medium"
+/>
+`;

package/src/components/Switch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch renders correctly 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#727478",
+        "borderRadius": 999,
+        "height": 28.799999999999997,
+        "paddingHorizontal": 4,
+        "width": 56,
+      },
+      undefined,
+    ]
+  }
+  testID="switch"
+  themeSize="medium"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderRadius": 999,
+          "display": "flex",
+          "height": 28.799999999999997,
+          "justifyContent": "center",
+          "width": 56,
+        },
+        undefined,
+      ]
+    }
+    themeSize="medium"
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+          "height": 20.8,
+          "left": 0,
+          "width": 20.8,
+        }
+      }
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;
+
+exports[`Switch trigger press function correctly 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#727478",
+        "borderRadius": 999,
+        "height": 28.799999999999997,
+        "paddingHorizontal": 4,
+        "width": 56,
+      },
+      undefined,
+    ]
+  }
+  testID="switch"
+  themeSize="medium"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderRadius": 999,
+          "display": "flex",
+          "height": 28.799999999999997,
+          "justifyContent": "center",
+          "width": 56,
+        },
+        undefined,
+      ]
+    }
+    themeSize="medium"
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+          "height": 20.8,
+          "left": 0,
+          "width": 20.8,
+        }
+      }
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;