@hero-design/rn 7.2.2 → 7.3.0

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 };

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { StyledLoadingDot } from '../StyledLoadingIndicator';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+describe('StyledLoadingIndicator', () => {
+  it.each`
+    themeVariant
+    ${'basic-transparent'}
+    ${'filled-primary'}
+    ${'filled-secondary'}
+    ${'outlined-primary'}
+    ${'outlined-secondary'}
+  `('has $themeVariant style', ({ themeVariant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledLoadingDot themeVariant={themeVariant} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledLoadingIndicator has basic-transparent style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="basic-transparent"
+/>
+`;
+
+exports[`StyledLoadingIndicator has filled-primary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-primary"
+/>
+`;
+
+exports[`StyledLoadingIndicator has filled-secondary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-secondary"
+/>
+`;
+
+exports[`StyledLoadingIndicator has outlined-primary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-primary"
+/>
+`;
+
+exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#4568fb",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-secondary"
+/>
+`;