@hero-design/rn 7.2.0 → 7.3.0

package/src/components/Badge/__tests__/__snapshots__/Badge.spec.tsx.snap

@@ -2,33 +2,42 @@
 
 exports[`Badge has danger style when intent is danger 1`] = `
 <View
+  collapsable={false}
+  nativeID="animatedComponent"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#fcebe7",
-        "borderColor": "#de350b",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "paddingHorizontal": 8,
-        "paddingVertical": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#de350b",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
   }
   themeIntent="danger"
+  themePadding="wideContent"
 >
   <Text
     style={
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#ffffff",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
         },
         undefined,
       ]
     }
-    themeIntent="danger"
   >
     DECLINED
   </Text>
@@ -37,33 +46,42 @@ exports[`Badge has danger style when intent is danger 1`] = `
 
 exports[`Badge has info style when intent is info 1`] = `
 <View
+  collapsable={false}
+  nativeID="animatedComponent"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ecf0ff",
-        "borderColor": "#4568fb",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "paddingHorizontal": 8,
-        "paddingVertical": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#4568fb",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
   }
   themeIntent="info"
+  themePadding="wideContent"
 >
   <Text
     style={
       Array [
         Object {
-          "color": "#4568fb",
+          "color": "#ffffff",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
         },
         undefined,
       ]
     }
-    themeIntent="info"
   >
     SUBMITTED
   </Text>
@@ -72,33 +90,42 @@ exports[`Badge has info style when intent is info 1`] = `
 
 exports[`Badge has success style when intent is success 1`] = `
 <View
+  collapsable={false}
+  nativeID="animatedComponent"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#f0fef4",
-        "borderColor": "#017d6d",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "paddingHorizontal": 8,
-        "paddingVertical": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#017d6d",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
   }
   themeIntent="success"
+  themePadding="wideContent"
 >
   <Text
     style={
       Array [
         Object {
-          "color": "#017d6d",
+          "color": "#ffffff",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
         },
         undefined,
       ]
     }
-    themeIntent="success"
   >
     APPROVED
   </Text>
@@ -107,35 +134,89 @@ exports[`Badge has success style when intent is success 1`] = `
 
 exports[`Badge has warning style when intent is warning 1`] = `
 <View
+  collapsable={false}
+  nativeID="animatedComponent"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#fff6eb",
-        "borderColor": "#d98a2c",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "paddingHorizontal": 8,
-        "paddingVertical": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#d98a2c",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
   }
   themeIntent="warning"
+  themePadding="wideContent"
 >
   <Text
     style={
       Array [
         Object {
-          "color": "#d98a2c",
+          "color": "#ffffff",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
         },
         undefined,
       ]
     }
-    themeIntent="warning"
   >
     PENDING
   </Text>
 </View>
 `;
+
+exports[`Badge renders correctly with custom props 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#017d6d",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
+  }
+  testID="number-badge"
+  themeIntent="success"
+  themePadding="wideContent"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    50+
+  </Text>
+</View>
+`;

package/src/components/Badge/__tests__/__snapshots__/Status.spec.tsx.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Status Badge renders correctly 1`] = `
+<View>
+  <HeroIcon
+    name="activate"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    testID="activate-icon"
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "backgroundColor": "#de350b",
+        "borderRadius": 999,
+        "height": 8,
+        "opacity": 1,
+        "position": "absolute",
+        "right": -2,
+        "top": -2,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+        "width": 8,
+      }
+    }
+    themeIntent="danger"
+  />
+</View>
+`;
+
+exports[`Status Badge renders correctly with intent 1`] = `
+<View>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Activity
+  </Text>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "backgroundColor": "#017d6d",
+        "borderRadius": 999,
+        "height": 8,
+        "opacity": 1,
+        "position": "absolute",
+        "right": -2,
+        "top": -2,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+        "width": 8,
+      }
+    }
+    themeIntent="success"
+  />
+</View>
+`;

package/src/components/Badge/index.tsx

@@ -1,16 +1,25 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import React, { ReactElement } from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
 import { StyledView, StyledText } from './StyledBadge';
+import BadgeStatus from './Status';
 
-interface BadgeProps extends ViewProps {
+interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
   /**
    * Content of the Badge.
    */
-  content: string;
+  content: string | number;
+  /**
+   * Whether the Badge is visible.
+   */
+  visible?: boolean;
+  /**
+   * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
+   */
+  max?: number;
   /**
    * Visual intent color to apply to Badge.
    */
-  intent?: 'success' | 'warning' | 'danger' | 'info';
+  intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
   /**
    * Additional style.
    */
@@ -21,21 +30,70 @@ interface BadgeProps extends ViewProps {
   testID?: string;
 }
 
+const DEFAULT_MAX_NUMBER = 99;
+
+const getPaddingState = (content: string): 'narrowContent' | 'wideContent' =>
+  content.length > 1 ? 'wideContent' : 'narrowContent';
+
 const Badge = ({
-  content,
-  intent = 'info',
+  content: originalContent,
+  visible = true,
+  max = DEFAULT_MAX_NUMBER,
+  intent = 'danger',
   style,
   testID,
   ...nativeProps
-}: BadgeProps): ReactElement => (
-  <StyledView
-    themeIntent={intent}
-    style={style}
-    testID={testID}
-    {...nativeProps}
-  >
-    <StyledText themeIntent={intent}>{content}</StyledText>
-  </StyledView>
-);
-
-export default Badge;
+}: BadgeProps): JSX.Element => {
+  const { current: opacity } = React.useRef<Animated.Value>(
+    new Animated.Value(visible ? 1 : 0)
+  );
+  const isFirstRendering = React.useRef<boolean>(true);
+
+  React.useEffect(() => {
+    // Do not run animation on very first rendering
+    if (isFirstRendering.current) {
+      isFirstRendering.current = false;
+      return;
+    }
+
+    Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 150,
+      useNativeDriver: true,
+    }).start();
+  }, [visible, opacity]);
+
+  const content =
+    typeof originalContent === 'number' && originalContent > max
+      ? `${max}+`
+      : String(originalContent);
+
+  return (
+    <StyledView
+      {...nativeProps}
+      themeIntent={intent}
+      themePadding={getPaddingState(content)}
+      style={[
+        {
+          opacity,
+          transform: [
+            {
+              scale: opacity.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.5, 1],
+              }),
+            },
+          ],
+        },
+        style,
+      ]}
+      testID={testID}
+    >
+      <StyledText>{content}</StyledText>
+    </StyledView>
+  );
+};
+
+export default Object.assign(Badge, {
+  Status: BadgeStatus,
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,163 @@
+import React, { ReactChild } from 'react';
+import { Pressable, StyleProp, ViewStyle } from 'react-native';
+
+import { IconName } from '../Icon';
+import LoadingIndicator from './LoadingIndicator';
+import {
+  Intent,
+  StyledButtonContainer,
+  StyledButtonText,
+  StyledButtonIconWrapper,
+  StyledButtonIcon,
+  ThemeVariant,
+} from './StyledButton';
+
+export interface ButtonProps {
+  /**
+   * Helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+   */
+  accessibilityHint?: string;
+  /**
+   * A succinct label in a localized string that identifies the accessibility element
+   */
+  accessibilityLabel?: string;
+  /**
+   * Disable state of button.
+   */
+  disabled?: boolean;
+  /**
+   * Places an icon within the button, before the button's text
+   */
+  icon?: IconName;
+  /**
+   * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
+   */
+  intent?: 'primary' | 'secondary';
+  /**
+   * Loading state of button.
+   */
+  loading?: boolean;
+  /**
+   * Set the handler to handle press event.
+   */
+  onPress: () => void;
+  /**
+   * Places an icon within the button, after the button's text
+   */
+  rightIcon?: IconName;
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Button label.
+   */
+  text: ReactChild;
+  /**
+   * Button type.
+   */
+  variant?: 'basic-transparent' | 'filled' | 'outlined';
+}
+
+const FILLED_VARIANTS = {
+  primary: 'filled-primary',
+  secondary: 'filled-secondary',
+} as const;
+
+const OUTLINED_VARIANTS = {
+  primary: 'outlined-primary',
+  secondary: 'outlined-secondary',
+} as const;
+
+export const getThemeVariant = (
+  variant: 'basic-transparent' | 'filled' | 'outlined',
+  intent: Intent
+): ThemeVariant => {
+  switch (variant) {
+    case 'basic-transparent':
+      return variant;
+    case 'filled':
+      return FILLED_VARIANTS[intent];
+    case 'outlined':
+      return OUTLINED_VARIANTS[intent];
+  }
+};
+
+const Button = ({
+  accessibilityHint,
+  accessibilityLabel,
+  disabled = false,
+  icon,
+  intent = 'primary',
+  loading = false,
+  onPress,
+  rightIcon,
+  style,
+  testID,
+  text,
+  variant = 'filled',
+}: ButtonProps) => (
+  <Pressable
+    accessibilityHint={accessibilityHint}
+    accessibilityLabel={accessibilityLabel}
+    disabled={disabled || loading}
+    onPress={onPress}
+    testID={testID}
+  >
+    {({ pressed }) => (
+      <StyledButtonContainer
+        disabled={disabled}
+        pressed={pressed}
+        style={style}
+        themeVariant={getThemeVariant(variant, intent)}
+      >
+        {loading === true ? (
+          <LoadingIndicator
+            testID={`${testID}-loading-indicator`}
+            themeVariant={getThemeVariant(variant, intent)}
+          />
+        ) : (
+          <>
+            {icon !== undefined && (
+              <StyledButtonIconWrapper themePosition="left">
+                <StyledButtonIcon
+                  disabled={disabled}
+                  icon={icon}
+                  pressed={pressed}
+                  testID={`${testID}-left-icon`}
+                  themeVariant={getThemeVariant(variant, intent)}
+                />
+              </StyledButtonIconWrapper>
+            )}
+            <StyledButtonText
+              disabled={disabled}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              pressed={pressed}
+              themeVariant={getThemeVariant(variant, intent)}
+            >
+              {text}
+            </StyledButtonText>
+            {rightIcon !== undefined && (
+              <StyledButtonIconWrapper themePosition="right">
+                <StyledButtonIcon
+                  disabled={disabled}
+                  icon={rightIcon}
+                  pressed={pressed}
+                  testID={`${testID}-right-icon`}
+                  themeVariant={getThemeVariant(variant, intent)}
+                />
+              </StyledButtonIconWrapper>
+            )}
+          </>
+        )}
+      </StyledButtonContainer>
+    )}
+  </Pressable>
+);
+
+export default Button;

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

@@ -0,0 +1,58 @@
+import { View, ViewProps } from 'react-native';
+import styled, { ReactNativeStyle } from '@emotion/native';
+import { Theme } from '@emotion/react';
+
+type Intent = 'primary' | 'secondary';
+
+type ThemeVariant =
+  | 'basic-transparent'
+  | 'filled-primary'
+  | 'filled-secondary'
+  | 'outlined-primary'
+  | 'outlined-secondary';
+
+const genLoadingIndicatorStyles = (
+  theme: Theme,
+  intent: Intent
+): ReactNativeStyle => ({
+  backgroundColor: theme.__hd__.button.colors[intent],
+});
+
+const StyledLoadingIndicatorWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingVertical: theme.space.xxsmall,
+}));
+
+const StyledLoadingDot = styled(View)<{
+  size?: number;
+  themeVariant: ThemeVariant;
+}>(({ size = 12, themeVariant, theme }) => {
+  const themeStyling = () => {
+    switch (themeVariant) {
+      case 'basic-transparent':
+      case 'filled-primary':
+      case 'filled-secondary':
+        return {
+          backgroundColor: theme.__hd__.button.colors.invertedText,
+        };
+      case 'outlined-primary':
+        return genLoadingIndicatorStyles(theme, 'primary');
+      case 'outlined-secondary':
+        return genLoadingIndicatorStyles(theme, 'secondary');
+    }
+  };
+
+  return {
+    width: size,
+    height: size,
+    marginTop: theme.space.xsmall,
+    marginBottom: theme.space.xsmall,
+    marginHorizontal: theme.space.small,
+    borderRadius: theme.space.small,
+    ...themeStyling(),
+  };
+});
+
+export { StyledLoadingIndicatorWrapper, StyledLoadingDot };