@hero-design/rn 7.3.2 → 7.4.0

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import SectionHeading from '..';
+
+describe('SectionHeading', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <SectionHeading testID="sectionHeading" text="test demo" />
+    );
+    expect(wrapper.queryAllByTestId('sectionHeading')).toHaveLength(1);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('render icon correctly', () => {
+    const wrapper = renderWithTheme(
+      <SectionHeading
+        testID="sectionHeading"
+        text="test demo"
+        icon="document"
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('render right children correctly', () => {
+    const wrapper = renderWithTheme(
+      <SectionHeading
+        testID="sectionHeading"
+        text="test demo"
+        rightChildren={<Text>right children</Text>}
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/SectionHeading/index.tsx

@@ -0,0 +1,93 @@
+import React, { ReactElement } from 'react';
+
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
+import {
+  StyledHeading,
+  StyledIconWrapper,
+  StyledWrapper,
+} from './StyledHeading';
+
+export interface SectionHeadingProps extends ViewProps {
+  /**
+   * Heading text.
+   */
+  text: string | ReactElement;
+  /**
+   * Name of the Icon.
+   */
+  icon?: IconName;
+  /**
+   * Right corner content
+   */
+  rightChildren?: ReactElement;
+  /**
+   * Size of the text.
+   */
+  fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Heading's font-weight.
+   */
+  fontWeight?: 'light' | 'regular' | 'semi-bold';
+  /**
+   * Visual intent color to apply to text.
+   */
+  intent?: 'subdued' | 'body' | 'primary';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const ICON_SIZE_MAP = {
+  small: 'small',
+  medium: 'medium',
+  large: 'medium',
+  xlarge: 'large',
+} as const;
+
+const ICON_INTENT_MAP = {
+  body: 'text',
+  subdued: 'text',
+  primary: 'primary',
+} as const;
+
+const SectionHeading = ({
+  icon,
+  text,
+  rightChildren,
+  fontSize = 'large',
+  intent = 'body',
+  fontWeight = 'regular',
+  style,
+  testID,
+}: SectionHeadingProps): ReactElement => (
+  <StyledHeading style={style} testID={testID}>
+    <StyledWrapper>
+      <StyledIconWrapper>
+        {icon && (
+          <Icon
+            icon={icon}
+            size={ICON_SIZE_MAP[fontSize]}
+            intent={ICON_INTENT_MAP[intent]}
+          />
+        )}
+      </StyledIconWrapper>
+      <Typography.Text
+        fontSize={fontSize}
+        intent={intent}
+        fontWeight={fontWeight}
+      >
+        {text}
+      </Typography.Text>
+    </StyledWrapper>
+    {rightChildren}
+  </StyledHeading>
+);
+
+export default SectionHeading;

package/src/components/Spinner/AnimatedSpinner.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet } from 'react-native';
+
+import { StyledSpinnerDot, StyledSpinnerRow } from './StyledSpinner';
+
+const AnimatedRow = Animated.createAnimatedComponent(StyledSpinnerRow);
+
+const AnimatedDot = Animated.createAnimatedComponent(StyledSpinnerDot);
+
+const AnimatedSpinner = () => {
+  const rotateAnimation = useRef<Animated.Value>(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(rotateAnimation.current, {
+        toValue: 1,
+        duration: 1200,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, []);
+
+  const interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View
+      style={StyleSheet.flatten([
+        {
+          transform: [{ rotate: interpolatedRotateAnimation }],
+        },
+      ])}
+    >
+      <AnimatedRow themePosition="top">
+        <AnimatedDot themePosition="topLeft" />
+        <AnimatedDot themePosition="topRight" />
+      </AnimatedRow>
+      <AnimatedRow themePosition="bottom">
+        <AnimatedDot themePosition="bottomLeft" />
+        <AnimatedDot themePosition="bottomRight" />
+      </AnimatedRow>
+    </Animated.View>
+  );
+};
+
+export { AnimatedSpinner };

package/src/components/Spinner/StyledSpinner.tsx

@@ -0,0 +1,59 @@
+import { View, ViewProps } from 'react-native';
+import styled from '@emotion/native';
+import { scale } from '../../utils/scale';
+
+const StyledView = styled(View)<ViewProps>();
+
+const StyledSpinnerContainer = styled(View)<ViewProps>({
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const StyledSpinnerRow = styled(View)<{ themePosition: 'top' | 'bottom' }>(
+  ({ themePosition, theme }) => ({
+    flexDirection: 'row',
+    marginBottom:
+      themePosition === 'top'
+        ? theme.__hd__.spinner.space.spinnerDotPadding
+        : 0,
+  })
+);
+
+const StyledSpinnerDot = styled(View)<{
+  themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+}>(({ themePosition, theme }) => {
+  const themeStyling = () => {
+    switch (themePosition) {
+      case 'topLeft':
+        return { opacity: 1 };
+      case 'topRight':
+        return {
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
+          opacity: 0.7,
+        };
+      case 'bottomLeft':
+        return { opacity: 0.5 };
+      case 'bottomRight':
+        return {
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
+          opacity: 0.3,
+        };
+    }
+  };
+
+  return {
+    height: scale(theme.__hd__.spinner.space.spinnerDot),
+    width: scale(theme.__hd__.spinner.space.spinnerDot),
+    borderRadius: theme.__hd__.spinner.radii.default,
+    backgroundColor: theme.__hd__.spinner.color.default,
+    ...themeStyling(),
+  };
+});
+
+export {
+  StyledView,
+  StyledSpinnerContainer,
+  StyledSpinnerRow,
+  StyledSpinnerDot,
+};

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

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

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { AnimatedSpinner } from '../AnimatedSpinner';
+import {
+  StyledSpinnerContainer,
+  StyledSpinnerDot,
+  StyledSpinnerRow,
+} from '../StyledSpinner';
+
+describe('StyledSpinnerContainer', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledSpinnerContainer>
+        <AnimatedSpinner />
+      </StyledSpinnerContainer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledSpinnerRow', () => {
+  it.each`
+    themePosition
+    ${'top'}
+    ${'bottom'}
+  `(
+    'renders correctly when position is $themePosition',
+    ({ themePosition }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledSpinnerRow themePosition={themePosition} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
+describe('StyledSpinnerText', () => {
+  it.each`
+    themePosition
+    ${'topLeft'}
+    ${'topRight'}
+    ${'bottomLeft'}
+    ${'bottomRight'}
+  `(
+    'renders correctly when position is $themePosition',
+    ({ themePosition }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledSpinnerDot themePosition={themePosition} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});

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

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnimatedSpinner renders correctly 1`] = `
+<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>
+`;

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"
+/>
+`;