@hero-design/rn 7.2.2 → 7.3.0

package/src/components/Button/LoadingIndicator/index.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+} from 'react-native';
+import {
+  StyledLoadingDot,
+  StyledLoadingIndicatorWrapper,
+} from './StyledLoadingIndicator';
+
+type ThemeVariant =
+  | 'basic-transparent'
+  | 'filled-primary'
+  | 'filled-secondary'
+  | 'outlined-primary'
+  | 'outlined-secondary';
+
+const AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(
+  StyledLoadingIndicatorWrapper
+);
+
+const AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
+
+const renderDotComponent = ({
+  index,
+  size,
+  count,
+  animation,
+  themeVariant,
+}: {
+  index: number;
+  size: number;
+  count: number;
+  animation: React.MutableRefObject<Animated.Value>;
+  themeVariant: ThemeVariant;
+}) => {
+  const interpolatedProgressAnimation = animation.current.interpolate({
+    inputRange: [
+      0.0,
+      (index + 0.5) / (count + 1),
+      (index + 1.0) / (count + 1),
+      (index + 1.5) / (count + 1),
+      1.0,
+    ],
+    outputRange: [1.0, 1.36, 1.56, 1.06, 1.0],
+  });
+
+  return (
+    <Animated.View
+      style={StyleSheet.flatten([
+        {
+          transform: [
+            {
+              scale: interpolatedProgressAnimation,
+            },
+          ],
+        },
+      ])}
+      {...{ key: index }}
+    >
+      <AnimatedLoadingDot size={size} themeVariant={themeVariant} />
+    </Animated.View>
+  );
+};
+
+interface LoadingIndicatorProps extends ViewProps {
+  /**
+   * Size of the loading dot.
+   */
+  count?: number;
+  /**
+   * Size of the loading dot.
+   */
+  size?: number;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Testing id of the component.
+   */
+  themeVariant: ThemeVariant;
+}
+
+const LoadingIndicator = ({
+  count = 3,
+  size = 12,
+  testID,
+  themeVariant,
+  ...nativeProps
+}: LoadingIndicatorProps) => {
+  const progressAnimation = useRef<Animated.Value>(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(progressAnimation.current, {
+        toValue: 1,
+        duration: 1200,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, []);
+
+  const renderLoadingDot = (item: any, index: number) => {
+    if (typeof renderDotComponent === 'function') {
+      return renderDotComponent({
+        index,
+        count,
+        size,
+        animation: progressAnimation,
+        themeVariant,
+      });
+    }
+
+    return null;
+  };
+
+  return (
+    <AnimatedLoadingIndicatorWrapper testID={testID} {...nativeProps}>
+      {Array.from(new Array(count), renderLoadingDot, themeVariant)}
+    </AnimatedLoadingIndicatorWrapper>
+  );
+};
+
+export default LoadingIndicator;

package/src/components/Button/StyledButton.tsx

@@ -0,0 +1,254 @@
+import { View } from 'react-native';
+import styled, { ReactNativeStyle } from '@emotion/native';
+import { Theme } from '@emotion/react';
+
+import Icon from '../Icon';
+import Typography from '../Typography';
+
+type Intent = 'primary' | 'secondary';
+
+type ThemeVariant =
+  | 'basic-transparent'
+  | 'filled-primary'
+  | 'filled-secondary'
+  | 'outlined-primary'
+  | 'outlined-secondary';
+
+const PRESSED_COLORS = {
+  primary: 'pressedPrimary',
+  secondary: 'pressedSecondary',
+} as const;
+
+const genBasicTransparentContainerStyles = (
+  theme: Theme,
+  pressed: boolean,
+  disabled: boolean
+): ReactNativeStyle => {
+  const borderColorStyling = () => {
+    if (disabled) {
+      return {
+        borderColor: theme.__hd__.button.colors.disabledBorder,
+      };
+    }
+
+    return { borderColor: theme.__hd__.button.colors.invertedText };
+  };
+
+  return {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding:
+      theme.__hd__.button.space.buttonPadding -
+      theme.__hd__.button.borderWidth.default,
+    borderWidth: theme.__hd__.button.borderWidth.default,
+    borderRadius: theme.__hd__.button.radii.default,
+    backgroundColor: 'transparent',
+    opacity: pressed ? 0.6 : 1,
+    ...borderColorStyling(),
+  };
+};
+
+const genFilledContainerStyles = (
+  theme: Theme,
+  intent: Intent,
+  pressed: boolean,
+  disabled: boolean
+): ReactNativeStyle => {
+  const backgroundColorStyling = () => {
+    if (disabled) {
+      return {
+        backgroundColor: theme.__hd__.button.colors.disabledBorder,
+      };
+    }
+
+    if (pressed) {
+      return {
+        backgroundColor: theme.__hd__.button.colors[PRESSED_COLORS[intent]],
+      };
+    }
+
+    return { backgroundColor: theme.__hd__.button.colors[intent] };
+  };
+
+  return {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.__hd__.button.space.buttonPadding,
+    borderRadius: theme.__hd__.button.radii.default,
+    ...backgroundColorStyling(),
+  };
+};
+
+const genOutlineContainerStyles = (
+  theme: Theme,
+  intent: Intent,
+  pressed: boolean,
+  disabled: boolean
+): ReactNativeStyle => {
+  const borderColorStyling = () => {
+    if (disabled) {
+      return {
+        borderColor: theme.__hd__.button.colors.disabledBorder,
+      };
+    }
+
+    if (pressed) {
+      return {
+        borderColor: theme.__hd__.button.colors[PRESSED_COLORS[intent]],
+      };
+    }
+
+    return { borderColor: theme.__hd__.button.colors[intent] };
+  };
+
+  return {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding:
+      theme.__hd__.button.space.buttonPadding -
+      theme.__hd__.button.borderWidth.default,
+    borderWidth: theme.__hd__.button.borderWidth.default,
+    borderRadius: theme.__hd__.button.radii.default,
+    backgroundColor: 'transparent',
+    ...borderColorStyling(),
+  };
+};
+
+const genOutlineTextStyles = (
+  theme: Theme,
+  intent: Intent,
+  pressed?: boolean,
+  disabled?: boolean
+): ReactNativeStyle => {
+  const textColorStyling = () => {
+    if (disabled) {
+      return {
+        color: theme.__hd__.button.colors.disabledText,
+      };
+    }
+
+    if (pressed) {
+      return {
+        color: theme.__hd__.button.colors[PRESSED_COLORS[intent]],
+      };
+    }
+
+    return { color: theme.__hd__.button.colors[intent] };
+  };
+
+  return {
+    fontSize: theme.__hd__.button.fontSize.default,
+    lineHeight: theme.__hd__.button.lineHeight.default,
+    ...textColorStyling(),
+  };
+};
+
+const StyledButtonContainer = styled(View)<{
+  disabled?: boolean;
+  pressed?: boolean;
+  themeVariant: ThemeVariant;
+}>(({ disabled = false, pressed = false, themeVariant, theme }) => {
+  switch (themeVariant) {
+    case 'basic-transparent':
+      return genBasicTransparentContainerStyles(theme, pressed, disabled);
+    case 'filled-primary':
+      return genFilledContainerStyles(theme, 'primary', pressed, disabled);
+    case 'filled-secondary':
+      return genFilledContainerStyles(theme, 'secondary', pressed, disabled);
+    case 'outlined-primary':
+      return genOutlineContainerStyles(theme, 'primary', pressed, disabled);
+    case 'outlined-secondary':
+      return genOutlineContainerStyles(theme, 'secondary', pressed, disabled);
+  }
+});
+
+const StyledButtonText = styled(Typography.Text)<{
+  disabled?: boolean;
+  pressed?: boolean;
+  themeVariant: ThemeVariant;
+}>(({ disabled, pressed, themeVariant, theme }) => {
+  const themeStyling = () => {
+    switch (themeVariant) {
+      case 'basic-transparent':
+        return {
+          fontSize: theme.__hd__.button.fontSize.default,
+          lineHeight: theme.__hd__.button.lineHeight.default,
+          color: disabled
+            ? theme.__hd__.button.colors.disabledText
+            : theme.__hd__.button.colors.invertedText,
+        };
+      case 'filled-primary':
+      case 'filled-secondary':
+        return {
+          fontSize: theme.__hd__.button.fontSize.default,
+          lineHeight: theme.__hd__.button.lineHeight.default,
+          color: theme.__hd__.button.colors.invertedText,
+        };
+      case 'outlined-primary':
+        return genOutlineTextStyles(theme, 'primary', pressed, disabled);
+      case 'outlined-secondary':
+        return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+    }
+  };
+  return {
+    flexShrink: 1,
+    textAlign: 'center',
+    fontFamily: theme.__hd__.button.fonts.default,
+    ...themeStyling(),
+  };
+});
+
+const StyledButtonIconWrapper = styled(View)<{
+  themePosition: 'left' | 'right';
+}>(({ themePosition, theme }) => {
+  switch (themePosition) {
+    case 'left':
+      return { paddingRight: theme.__hd__.button.space.iconPadding };
+    case 'right':
+      return { paddingLeft: theme.__hd__.button.space.iconPadding };
+  }
+});
+
+const StyledButtonIcon = styled(Icon)<{
+  disabled?: boolean;
+  pressed?: boolean;
+  themeVariant: ThemeVariant;
+}>(({ disabled, pressed, themeVariant, theme }) => {
+  const themeStyling = () => {
+    switch (themeVariant) {
+      case 'basic-transparent':
+        return {
+          color: disabled
+            ? theme.__hd__.button.colors.disabledText
+            : theme.__hd__.button.colors.invertedText,
+        };
+      case 'filled-primary':
+      case 'filled-secondary':
+        return { color: theme.__hd__.button.colors.invertedText };
+      case 'outlined-primary':
+        return genOutlineTextStyles(theme, 'primary', pressed, disabled);
+      case 'outlined-secondary':
+        return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+    }
+  };
+
+  return {
+    fontSize: theme.__hd__.button.sizes.iconSize,
+    ...themeStyling(),
+  };
+});
+
+export {
+  StyledButtonContainer,
+  StyledButtonText,
+  StyledButtonIconWrapper,
+  StyledButtonIcon,
+  Intent,
+  ThemeVariant,
+};

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+import Button from '..';
+import { getThemeVariant } from '../Button';
+
+describe('Button', () => {
+  it('renders button text', () => {
+    const { getByText } = renderWithTheme(
+      <Button text="A button" onPress={() => {}} />
+    );
+    expect(getByText('A button')).toBeDefined();
+  });
+
+  it('renders no icon by default', () => {
+    const { queryByTestId } = renderWithTheme(
+      <Button text="A button" testID="button" onPress={() => {}} />
+    );
+    expect(queryByTestId('button-left-icon')).toBeNull();
+  });
+
+  it('renders icon', () => {
+    const { getByTestId } = renderWithTheme(
+      <Button text="A button" icon="heart" testID="button" onPress={() => {}} />
+    );
+    expect(getByTestId('button-left-icon')).toBeDefined();
+  });
+
+  it('renders right icon', () => {
+    const { getByTestId } = renderWithTheme(
+      <Button
+        text="A button"
+        rightIcon="heart"
+        testID="button"
+        onPress={() => {}}
+      />
+    );
+    expect(getByTestId('button-right-icon')).toBeDefined();
+  });
+
+  it('renders loading icon', () => {
+    const { getByTestId } = renderWithTheme(
+      <Button text="A button" testID="button" onPress={() => {}} loading />
+    );
+    expect(getByTestId('button-loading-indicator')).toBeDefined();
+  });
+
+  describe('interaction', () => {
+    describe('button is disabled', () => {
+      it('NOT allows to click on', () => {
+        const onPress = jest.fn();
+        const { getByText } = renderWithTheme(
+          <Button text="A button" disabled onPress={onPress} />
+        );
+        fireEvent.press(getByText('A button'));
+        expect(onPress).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('button is enabled', () => {
+      it('allows to click on', () => {
+        const onPress = jest.fn();
+        const { getByText } = renderWithTheme(
+          <Button text="A button" onPress={onPress} />
+        );
+        fireEvent.press(getByText('A button'));
+        expect(onPress).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});
+
+describe('getThemeVariant', () => {
+  it.each`
+    variant                | intent         | themeVariant
+    ${'basic-transparent'} | ${'primary'}   | ${'basic-transparent'}
+    ${'filled'}            | ${'primary'}   | ${'filled-primary'}
+    ${'filled'}            | ${'secondary'} | ${'filled-secondary'}
+    ${'outlined'}          | ${'primary'}   | ${'outlined-primary'}
+    ${'outlined'}          | ${'secondary'} | ${'outlined-secondary'}
+  `('returns $themeVariant', ({ variant, intent, themeVariant }) => {
+    expect(getThemeVariant(variant, intent)).toBe(themeVariant);
+  });
+});

package/src/components/Button/__tests__/StyledButton.spec.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+import {
+  StyledButtonContainer,
+  StyledButtonText,
+  StyledButtonIconWrapper,
+  StyledButtonIcon,
+} from '../StyledButton';
+
+describe('StyledButtonContainer', () => {
+  it.each`
+    themeVariant
+    ${'basic-transparent'}
+    ${'filled-primary'}
+    ${'filled-secondary'}
+    ${'outlined-primary'}
+    ${'outlined-secondary'}
+  `('has $themeVariant style', ({ themeVariant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonContainer themeVariant={themeVariant} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    themeVariant
+    ${'basic-transparent'}
+    ${'filled-primary'}
+    ${'filled-secondary'}
+    ${'outlined-primary'}
+    ${'outlined-secondary'}
+  `(
+    'has pressed with the correct variant $themeVariant style',
+    ({ themeVariant }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledButtonContainer themeVariant={themeVariant} pressed />
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('renders disabled correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonContainer themeVariant="filled-primary" disabled />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledButtonText', () => {
+  it.each`
+    themeVariant
+    ${'basic-transparent'}
+    ${'filled-primary'}
+    ${'filled-secondary'}
+    ${'outlined-primary'}
+    ${'outlined-secondary'}
+  `('has $themeVariant style', ({ themeVariant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonText themeVariant={themeVariant}>Example</StyledButtonText>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    themeVariant
+    ${'basic-transparent'}
+    ${'filled-primary'}
+    ${'filled-secondary'}
+    ${'outlined-primary'}
+    ${'outlined-secondary'}
+  `(
+    'has pressed with the correct variant $themeVariant style',
+    ({ themeVariant }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledButtonText themeVariant={themeVariant} pressed>
+          Example
+        </StyledButtonText>
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('renders disabled correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonText themeVariant="filled-primary" disabled>
+        Example
+      </StyledButtonText>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledButtonIconWrapper', () => {
+  it.each`
+    themePosition
+    ${'left'}
+    ${'right'}
+  `('has $themePosition style', ({ themePosition }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonIconWrapper themePosition={themePosition} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledButtonIcon', () => {
+  it.each`
+    themeVariant
+    ${'basic-transparent'}
+    ${'filled-primary'}
+    ${'filled-secondary'}
+    ${'outlined-primary'}
+    ${'outlined-secondary'}
+  `('has $themeVariant style', ({ themeVariant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonIcon icon="bell" themeVariant={themeVariant} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    themeVariant
+    ${'basic-transparent'}
+    ${'filled-primary'}
+    ${'filled-secondary'}
+    ${'outlined-primary'}
+    ${'outlined-secondary'}
+  `(
+    'has pressed with the correct variant $themeVariant style',
+    ({ themeVariant }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledButtonIcon icon="bell" themeVariant={themeVariant} pressed />
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('renders disabled correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonIcon icon="bell" themeVariant="filled-primary" disabled />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});