@hero-design/rn 7.2.0 → 7.3.0

package/src/components/FAB/FAB.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { AnimatedFABIcon } from './AnimatedFABIcon';
-import { StyledFABContainer, StyledFABIcon } from './StyledFAB';
+import { StyledFABContainer, StyledFABIcon, StyledFABText } from './StyledFAB';
 import { IconName } from '../Icon';
 
 export interface FABProps {
@@ -10,41 +10,91 @@ export interface FABProps {
    */
   icon: IconName;
 
+  /**
+   * title of the component.
+   */
+  title?: string;
+
   /**
    * This function is called on pressing the button.
    */
   onPress?: () => void;
+
   /**
    * Specify if the button is animated.
    */
   animated?: boolean;
+
   /**
    * Specify if the button is in active state. It only works if animated is true.
    */
   active?: boolean;
+
   /**
    * Additional style.
    */
   style?: StyleProp<ViewStyle>;
+
   /**
    * Testing id of the component.
    */
   testID?: string;
 }
 
-const FAB = ({ onPress, icon, animated, testID, active, style }: FABProps) => (
-  <StyledFABContainer
-    testID={testID}
-    onPress={onPress}
-    activeOpacity={0.6}
-    style={style}
-  >
-    {animated ? (
+const IconOnlyContent = ({
+  icon,
+  animated,
+  active,
+}: {
+  icon: IconName;
+  animated?: boolean;
+
+  active?: boolean;
+}) => {
+  if (animated) {
+    return (
       <AnimatedFABIcon active={active} icon={icon} testID="animated-fab-icon" />
-    ) : (
-      <StyledFABIcon icon={icon} testID="styled-fab-icon" />
-    )}
-  </StyledFABContainer>
+    );
+  }
+  return <StyledFABIcon icon={icon} testID="styled-fab-icon" />;
+};
+
+const IconWithTextContent = ({
+  icon,
+  title,
+}: {
+  icon: IconName;
+  title?: string;
+}) => (
+  <>
+    <StyledFABIcon size="xsmall" icon={icon} testID="styled-fab-icon" />
+    <StyledFABText>{title}</StyledFABText>
+  </>
 );
+const FAB = ({
+  onPress,
+  title,
+  icon,
+  animated,
+  testID,
+  active,
+  style,
+}: FABProps): JSX.Element => {
+  const isIconOnly = !title;
+  return (
+    <StyledFABContainer
+      testID={testID}
+      style={style}
+      onPress={onPress}
+      activeOpacity={0.6}
+    >
+      {isIconOnly ? (
+        <IconOnlyContent animated={animated} active={active} icon={icon} />
+      ) : (
+        <IconWithTextContent icon={icon} title={title} />
+      )}
+    </StyledFABContainer>
+  );
+};
 
 export default FAB;

package/src/components/FAB/StyledFAB.tsx

@@ -1,22 +1,41 @@
-import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
+import {
+  Text,
+  TextProps,
+  TouchableHighlight,
+  TouchableHighlightProps,
+} from 'react-native';
 import styled from '@emotion/native';
 import Icon, { IconProps } from '../Icon';
 
 const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>(
   ({ theme }) => ({
-    height: theme.__hd__.fab.sizes.height,
-    width: theme.__hd__.fab.sizes.width,
     backgroundColor: theme.__hd__.fab.colors.buttonBackground,
-    borderRadius: 999,
+    borderRadius: theme.radii.rounded,
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',
+    alignSelf: 'flex-start',
+    paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
+    paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
+    flexDirection: 'row',
   })
 );
 
 const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
   color: theme.__hd__.fab.colors.icon,
-  fontSize: theme.__hd__.fab.fontSizes.buttonIcon,
+  lineHeight: theme.__hd__.fab.lineHeights.icon,
+  textAlignVertical: 'center',
+  textAlign: 'center',
 }));
 
-export { StyledFABContainer, StyledFABIcon };
+const StyledFABText = styled(Text)<TextProps>(({ theme }) => ({
+  fontFamily: theme.__hd__.fab.fonts.title,
+  fontSize: theme.__hd__.fab.fontSizes.title,
+  lineHeight: theme.__hd__.fab.lineHeights.title,
+  color: theme.__hd__.fab.colors.titleText,
+  textAlignVertical: 'center',
+  textAlign: 'center',
+  marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal,
+}));
+
+export { StyledFABContainer, StyledFABIcon, StyledFABText };

package/src/components/FAB/__tests__/__snapshots__/AnimatedFABIcon.spec.tsx.snap

@@ -25,7 +25,9 @@ exports[`AnimatedFABIcon renders correctly when isActive is false 1`] = `
         Array [
           Object {
             "color": "#ffffff",
-            "fontSize": 24,
+            "lineHeight": 24,
+            "textAlign": "center",
+            "textAlignVertical": "center",
           },
           Object {},
         ],
@@ -62,7 +64,9 @@ exports[`AnimatedFABIcon renders correctly when isActive is true 1`] = `
         Array [
           Object {
             "color": "#ffffff",
-            "fontSize": 24,
+            "lineHeight": 24,
+            "textAlign": "center",
+            "textAlignVertical": "center",
           },
           Object {},
         ],

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -15,12 +15,14 @@ exports[`StyledFABContainer renders correctly 1`] = `
     Array [
       Object {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "#292a2b",
         "borderRadius": 999,
-        "height": 64,
+        "flexDirection": "row",
         "justifyContent": "center",
         "overflow": "hidden",
-        "width": 64,
+        "paddingHorizontal": 16,
+        "paddingVertical": 16,
       },
       undefined,
     ]
@@ -60,7 +62,9 @@ exports[`StyledFABIcon renders correctly 1`] = `
       Array [
         Object {
           "color": "#ffffff",
-          "fontSize": 24,
+          "lineHeight": 24,
+          "textAlign": "center",
+          "textAlignVertical": "center",
         },
         undefined,
       ],

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

@@ -15,12 +15,14 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
     Array [
       Object {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "#292a2b",
         "borderRadius": 999,
-        "height": 64,
+        "flexDirection": "row",
         "justifyContent": "center",
         "overflow": "hidden",
-        "width": 64,
+        "paddingHorizontal": 16,
+        "paddingVertical": 16,
       },
       Object {
         "backgroundColor": "#292a2b",
@@ -39,7 +41,9 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
         Array [
           Object {
             "color": "#ffffff",
-            "fontSize": 24,
+            "lineHeight": 24,
+            "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -67,12 +71,14 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
     Array [
       Object {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "#292a2b",
         "borderRadius": 999,
-        "height": 64,
+        "flexDirection": "row",
         "justifyContent": "center",
         "overflow": "hidden",
-        "width": 64,
+        "paddingHorizontal": 16,
+        "paddingVertical": 16,
       },
       Object {
         "backgroundColor": "#292a2b",
@@ -104,7 +110,9 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
           Array [
             Object {
               "color": "#ffffff",
-              "fontSize": 24,
+              "lineHeight": 24,
+              "textAlign": "center",
+              "textAlignVertical": "center",
             },
             Object {},
           ],
@@ -117,3 +125,77 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
   </View>
 </View>
 `;
+
+exports[`FAB when title has value renders correctly 1`] = `
+<View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#292a2b",
+        "borderRadius": 999,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "paddingHorizontal": 16,
+        "paddingVertical": 16,
+      },
+      Object {
+        "backgroundColor": "#292a2b",
+      },
+    ]
+  }
+>
+  <HeroIcon
+    name="pencil"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 16,
+        },
+        Array [
+          Object {
+            "color": "#ffffff",
+            "lineHeight": 24,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="styled-fab-icon"
+    themeIntent="text"
+    themeSize="xsmall"
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 16,
+          "lineHeight": 24,
+          "marginHorizontal": 8,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    Shout out
+  </Text>
+</View>
+`;

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

@@ -20,6 +20,22 @@ describe('FAB', () => {
     });
   });
 
+  describe('when title has value', () => {
+    it('renders correctly', () => {
+      const { queryAllByTestId, queryAllByText, toJSON } = renderWithTheme(
+        <FAB
+          icon="pencil"
+          title="Shout out"
+          style={{ backgroundColor: theme.colors.backgroundDark }}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('styled-fab-icon')).toHaveLength(1);
+      expect(queryAllByText('Shout out')).toHaveLength(1);
+    });
+  });
+
   describe('when animated is false', () => {
     it('renders StyledFABIcon', () => {
       const { queryAllByTestId, toJSON } = renderWithTheme(

package/src/components/Progress/ProgressBar.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, StyleProp, ViewStyle, ViewProps } from 'react-native';
+
+import { StyledWrapper, StyledInner } from './StyledProgressBar';
+
+export interface ProgressBarProps extends ViewProps {
+  /**
+   * The progress completion percentage: 0-100.
+   */
+  value: number;
+  /**
+   * Set intent for your progress.
+   */
+  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /*
+   * Testing id of the component.
+   * */
+  testID?: string;
+}
+
+const ProgressBar = ({
+  value,
+  intent = 'primary',
+  style,
+  testID,
+  ...nativeProps
+}: ProgressBarProps): JSX.Element => {
+  const [width, setWidth] = useState(0);
+  const progressAnimatedValue = useRef<Animated.Value>(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.timing(progressAnimatedValue.current, {
+      toValue: value,
+      useNativeDriver: true,
+    });
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [value]);
+
+  const interpolateTranslateX = progressAnimatedValue.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [-width, 0],
+    extrapolate: 'clamp',
+  });
+
+  const interpolateBorderRadius = progressAnimatedValue.current.interpolate({
+    inputRange: [99, 100], // Transition range to remove bother when reached 100%
+    outputRange: [999, 0],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <StyledWrapper {...nativeProps} testID={testID} style={style}>
+      <StyledInner
+        themeIntent={intent}
+        onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
+        style={{
+          transform: [{ translateX: interpolateTranslateX }],
+          borderTopRightRadius: interpolateBorderRadius,
+          borderBottomRightRadius: interpolateBorderRadius,
+        }}
+      />
+    </StyledWrapper>
+  );
+};
+
+export default ProgressBar;

package/src/components/Progress/ProgressCircle.tsx

@@ -0,0 +1,165 @@
+import { useTheme } from '@emotion/react';
+import React, { useEffect, useRef } from 'react';
+import {
+  Animated,
+  View,
+  StyleSheet,
+  ViewProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import {
+  DonutCircle,
+  HalfCircleInnerFG,
+  HalfCircleInnerBG,
+  HalfCircleWrapper,
+  StrokeEnd,
+} from './StyledProgressCircle';
+import { ThemeIntent } from './types';
+import Typography from '../Typography';
+
+export interface ProgressCircleProps extends ViewProps {
+  /**
+   * The progress completion percentage: 0-100.
+   */
+  value: number;
+  /**
+   * Set intent for your progress.
+   */
+  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /*
+   * Testing id of the component.
+   * */
+  testID?: string;
+}
+
+const HalfCircle = ({
+  type,
+  themeIntent = 'primary',
+}: {
+  type: 'background' | 'foreground';
+  themeIntent?: ThemeIntent;
+}) => (
+  <HalfCircleWrapper>
+    {type === 'background' ? (
+      <HalfCircleInnerBG />
+    ) : (
+      <HalfCircleInnerFG themeIntent={themeIntent} />
+    )}
+  </HalfCircleWrapper>
+);
+
+const ProgressCircle = ({
+  value,
+  intent = 'primary',
+  style,
+  testID,
+  ...nativeProps
+}: ProgressCircleProps): JSX.Element => {
+  const theme = useTheme();
+  const { radius } = theme.__hd__.progress.sizes;
+  const progressAnimatedValue = useRef<Animated.Value>(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.timing(progressAnimatedValue.current, {
+      toValue: value,
+      useNativeDriver: true,
+    });
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [value]);
+
+  // Animate progress circle: 0% => 50%
+  const interpolateRotateRightHalf = progressAnimatedValue.current.interpolate({
+    inputRange: [0, 50],
+    outputRange: ['0deg', '180deg'],
+    extrapolate: 'clamp',
+  });
+
+  const interpolateOpacityRightHalf = progressAnimatedValue.current.interpolate(
+    {
+      inputRange: [50, 51], // Transition between left and right half
+      outputRange: [1, 0],
+      extrapolate: 'clamp',
+    }
+  );
+
+  // Animate progress circle: 50% => 100%
+  const interpolateRotateSecondHalf = progressAnimatedValue.current.interpolate(
+    {
+      inputRange: [50, 100],
+      outputRange: ['0deg', '180deg'],
+      extrapolate: 'clamp',
+    }
+  );
+
+  // Curve at the end of progress stroke
+  const interpolateDotRotate = progressAnimatedValue.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: ['0deg', '360deg'],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <View {...nativeProps} testID={testID} style={style}>
+      <View
+        style={{
+          flexDirection: 'row',
+        }}
+      >
+        <View>
+          <HalfCircle type="foreground" themeIntent={intent} />
+          <Animated.View
+            style={{
+              ...StyleSheet.absoluteFillObject,
+              transform: [
+                { translateX: radius / 2 },
+                { rotate: interpolateRotateSecondHalf },
+                { translateX: -radius / 2 },
+              ],
+            }}
+          >
+            <HalfCircle type="background" />
+          </Animated.View>
+        </View>
+        <View style={{ transform: [{ rotate: '180deg' }], zIndex: 1 }}>
+          <HalfCircle type="foreground" themeIntent={intent} />
+          <Animated.View
+            style={{
+              ...StyleSheet.absoluteFillObject,
+              transform: [
+                { translateX: radius / 2 },
+                { rotate: interpolateRotateRightHalf },
+                { translateX: -radius / 2 },
+              ],
+              opacity: interpolateOpacityRightHalf,
+            }}
+          >
+            <HalfCircle type="background" />
+          </Animated.View>
+        </View>
+        <StrokeEnd themeIntent={intent} />
+        <Animated.View
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            zIndex: 2,
+            transform: [{ rotate: interpolateDotRotate }],
+          }}
+        >
+          <StrokeEnd themeIntent={intent} />
+        </Animated.View>
+        <DonutCircle>
+          <Typography.Text fontSize="xlarge">{`${value}%`}</Typography.Text>
+        </DonutCircle>
+      </View>
+    </View>
+  );
+};
+
+export default ProgressCircle;

package/src/components/Progress/StyledProgressBar.tsx

@@ -0,0 +1,21 @@
+import { Animated, View, ViewProps } from 'react-native';
+import styled from '@emotion/native';
+
+import { ThemeIntent } from './types';
+
+const StyledWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  height: theme.__hd__.progress.sizes.barHeight,
+  alignSelf: 'stretch',
+  backgroundColor: theme.__hd__.progress.colors.background,
+  overflow: 'hidden',
+}));
+
+const StyledInner = styled(Animated.View)<{ themeIntent: ThemeIntent }>(
+  ({ theme, themeIntent }) => ({
+    flex: 1,
+    alignSelf: 'stretch',
+    backgroundColor: theme.__hd__.progress.colors[themeIntent],
+  })
+);
+
+export { StyledWrapper, StyledInner };

package/src/components/Progress/StyledProgressCircle.tsx

@@ -0,0 +1,66 @@
+import { View, ViewProps } from 'react-native';
+import styled from '@emotion/native';
+
+import { ThemeIntent } from './types';
+
+const HalfCircleWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  width: theme.__hd__.progress.sizes.radius,
+  height: theme.__hd__.progress.sizes.radius * 2,
+  overflow: 'hidden',
+}));
+
+const HalfCircleInnerFG = styled(View)<{ themeIntent: ThemeIntent }>(
+  ({ theme, themeIntent }) => ({
+    width: theme.__hd__.progress.sizes.radius * 2,
+    height: theme.__hd__.progress.sizes.radius * 2,
+    backgroundColor: theme.__hd__.progress.colors[themeIntent],
+    borderRadius: theme.__hd__.progress.radii.default,
+  })
+);
+
+const HalfCircleInnerBG = styled(View)<ViewProps>(({ theme }) => ({
+  width: theme.__hd__.progress.sizes.radius * 2,
+  height: theme.__hd__.progress.sizes.radius * 2,
+  backgroundColor: theme.__hd__.progress.colors.background,
+  borderRadius: theme.__hd__.progress.radii.default,
+}));
+
+const DonutCircle = styled(View)<ViewProps>(({ theme }) => ({
+  position: 'absolute',
+  top: theme.__hd__.progress.sizes.strokeWidth,
+  left: theme.__hd__.progress.sizes.strokeWidth,
+  width:
+    theme.__hd__.progress.sizes.radius * 2 -
+    theme.__hd__.progress.sizes.strokeWidth * 2,
+  height:
+    theme.__hd__.progress.sizes.radius * 2 -
+    theme.__hd__.progress.sizes.strokeWidth * 2,
+  zIndex: 3,
+  backgroundColor: theme.__hd__.progress.colors.innerBackground,
+  borderRadius: theme.__hd__.progress.radii.default,
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StrokeEnd = styled(View)<{ themeIntent: ThemeIntent }>(
+  ({ theme, themeIntent }) => ({
+    position: 'absolute',
+    top: 0,
+    left:
+      theme.__hd__.progress.sizes.radius -
+      theme.__hd__.progress.sizes.strokeWidth / 2,
+    width: theme.__hd__.progress.sizes.strokeWidth,
+    height: theme.__hd__.progress.sizes.strokeWidth,
+    borderRadius: theme.__hd__.progress.radii.default,
+    backgroundColor: theme.__hd__.progress.colors[themeIntent],
+    zIndex: 2,
+  })
+);
+
+export {
+  DonutCircle,
+  HalfCircleWrapper,
+  HalfCircleInnerFG,
+  HalfCircleInnerBG,
+  StrokeEnd,
+};