@hero-design/rn 7.6.1-alpha.0 → 7.8.0

package/src/components/Card/DataCard/index.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import { StyledDataCard, Indicator } from './StyledDataCard';
+
+export interface DataCardProps extends ViewProps {
+  /**
+   * Card's content.
+   */
+  children?: ReactNode;
+  /**
+   * Visual intent color to apply to card.
+   */
+  intent?: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const DataCard = ({
+  intent = 'info',
+  children,
+  ...nativeProps
+}: DataCardProps): JSX.Element => (
+  <StyledDataCard {...nativeProps}>
+    <Indicator themeIntent={intent} testID="data-card-indicator" />
+    {children}
+  </StyledDataCard>
+);
+
+export default DataCard;

package/src/components/Card/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import DataCard from './DataCard';
 import { StyledCard, LeftDataCard } from './StyledCard';
 
 interface CardProps extends ViewProps {
@@ -9,10 +10,12 @@ interface CardProps extends ViewProps {
   children?: ReactNode;
   /**
    * Card type.
+   * This is now deprecated. If you want to use "data" variant, please use Card.Data instead.
+   * @deprecated
    */
   variant?: 'basic' | 'data';
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**
@@ -32,4 +35,6 @@ const Card = ({
   </StyledCard>
 );
 
-export default Card;
+export default Object.assign(Card, {
+  Data: DataCard,
+});

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/native';
+import { TouchableOpacity } from 'react-native';
+
+const StyledWrapper = styled(TouchableOpacity)(({ theme, disabled }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  height: theme.__hd__.checkbox.sizes.base,
+  width: theme.__hd__.checkbox.sizes.base,
+  borderRadius: theme.__hd__.checkbox.radii.base,
+  borderWidth: theme.__hd__.checkbox.borderWidths.default,
+  borderColor: disabled
+    ? theme.__hd__.checkbox.colors.disabled
+    : theme.__hd__.checkbox.colors.borderColor,
+  overflow: 'hidden',
+}));
+
+export { StyledWrapper };

package/src/components/Checkbox/__tests__/StyledCheckbox.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledWrapper } from '../StyledCheckbox';
+
+describe('StyledWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(<StyledWrapper />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledWrapper renders correct style 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#7622d7",
+      "borderRadius": 4,
+      "borderWidth": 2,
+      "display": "flex",
+      "flexDirection": "row",
+      "height": 24,
+      "justifyContent": "center",
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 24,
+    }
+  }
+/>
+`;

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

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox renders correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#7622d7",
+      "borderRadius": 4,
+      "borderWidth": 2,
+      "display": "flex",
+      "flexDirection": "row",
+      "height": 24,
+      "justifyContent": "center",
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 24,
+    }
+  }
+  testID="checkbox"
+/>
+`;
+
+exports[`Checkbox trigger press function correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#7622d7",
+      "borderRadius": 4,
+      "borderWidth": 2,
+      "display": "flex",
+      "flexDirection": "row",
+      "height": 24,
+      "justifyContent": "center",
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 24,
+    }
+  }
+  testID="checkbox"
+/>
+`;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Checkbox from '..';
+
+describe('Checkbox', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(<Checkbox testID="checkbox" />);
+    expect(wrapper.queryAllByTestId('checkbox')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger press function correctly', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(
+      <Checkbox testID="checkbox" onPress={pressFn} />
+    );
+    fireEvent.press(wrapper.getByTestId('checkbox'));
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(pressFn).toBeCalled();
+  });
+});

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import theme from '../../theme';
+import Icon from '../Icon';
+import { StyledWrapper } from './StyledCheckbox';
+
+export interface CheckboxProps {
+  /**
+   * Control whether the switch is checked
+   */
+  checked?: boolean;
+  /**
+   * Whether the switch is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Event handler.
+   */
+  onPress?: () => void;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const CheckBox = ({
+  checked,
+  disabled,
+  onPress,
+  style,
+  testID,
+}: CheckboxProps) => (
+  <StyledWrapper
+    onPress={onPress}
+    disabled={disabled}
+    style={style}
+    testID={testID}
+  >
+    {checked && (
+      <Icon
+        icon="circle-ok"
+        intent="primary"
+        size="large"
+        style={{
+          position: 'absolute',
+          top: theme.__hd__.checkbox.space.iconTop,
+          ...(disabled ? { color: theme.__hd__.checkbox.colors.disabled } : {}),
+        }}
+      />
+    )}
+  </StyledWrapper>
+);
+
+export default CheckBox;

package/src/components/Collapse/index.tsx

@@ -23,7 +23,7 @@ interface CollapseProps extends ViewProps {
    */
   open?: boolean;
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**

package/src/components/Icon/index.tsx

@@ -26,7 +26,7 @@ export interface IconProps {
    */
   size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<TextStyle>;
   /**

package/src/components/List/BasicListItem.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import { StyleProp, ViewStyle } from 'react-native';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
+import {
+  StyledPrefixContainer,
+  StyledSuffixContainer,
+  StyledTitleContainer,
+  StyledListItemContainer,
+} from './StyledBasicListItem';
+
+export interface ListItemProps {
+  /**
+   * Name of Icon or component to render on the left side of title.
+   */
+  prefix?: IconName | React.ReactElement;
+  /**
+   * Name of Icon or component to render on the right side of title.
+   */
+  suffix?: IconName | React.ReactElement;
+  /**
+   * The title of the component.
+   */
+  title: string;
+  /**
+   * The subtile title of the component.
+   */
+  subtitle?: string;
+  /**
+   * Whether the component is disabled. Default value is false
+   */
+  disabled?: boolean;
+  /**
+   * Whether the component is selected. Default value is false
+   */
+  selected?: boolean;
+  /**
+   * Additional wrapper style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Set the handler to handle press event.
+   */
+  onPress?: () => void;
+}
+
+const BasicListItem = ({
+  prefix,
+  suffix,
+  title,
+  subtitle,
+  style,
+  testID,
+  selected = false,
+  disabled = false,
+  onPress,
+}: ListItemProps): JSX.Element => (
+  <StyledListItemContainer
+    style={style}
+    testID={testID}
+    themeSelected={selected}
+    themeDisabled={disabled}
+    onPress={onPress}
+    disabled={disabled}
+  >
+    {prefix && (
+      <StyledPrefixContainer>
+        {typeof prefix === 'string' ? <Icon icon={prefix} /> : prefix}
+      </StyledPrefixContainer>
+    )}
+    <StyledTitleContainer>
+      <Typography.Text intent="body" fontSize="large">
+        {title}
+      </Typography.Text>
+      {subtitle && (
+        <Typography.Text intent="subdued" fontSize="small">
+          {subtitle}
+        </Typography.Text>
+      )}
+    </StyledTitleContainer>
+    {suffix && (
+      <StyledSuffixContainer>
+        {typeof suffix === 'string' ? (
+          <Icon icon={suffix} intent="text" size="small" />
+        ) : (
+          suffix
+        )}
+      </StyledSuffixContainer>
+    )}
+  </StyledListItemContainer>
+);
+
+export default BasicListItem;

package/src/components/List/ListItem.tsx

@@ -0,0 +1,142 @@
+import React, { ReactNode } from 'react';
+
+import { StyleProp, ViewStyle, View } from 'react-native';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
+import {
+  StyledListItemContainer,
+  StyledChildrenContainer,
+  StyledLeadingStatus,
+  StyledContentContainer,
+  StyledPrefixContainer,
+  StyledSuffixContainer,
+  StyledTitleContainer,
+} from './StyledListItem';
+
+export interface ListItemProps {
+  /**
+   * Name of Icon or ReactElement to render on the left side of title.
+   */
+  prefix?: IconName | React.ReactElement;
+  /**
+   * Name of Icon or ReactElement to render on the right side of title.
+   */
+  suffix?: IconName | React.ReactElement;
+  /**
+   * The title of the component.
+   */
+  title?: string;
+  /**
+   * The subtile title of the component.
+   */
+  subtitle?: string;
+  /**
+   * Additional wrapper style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Children to be rendered inside the component.
+   */
+  children?: ReactNode;
+  /**
+   * Leading status of the component
+   * */
+  leadingStatus?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
+
+  /*
+   * Card styles. Default is `full-width`
+   */
+  variant?: 'full-width' | 'card';
+  /**
+   * Whether the component is disabled. Default value is false
+   */
+  disabled?: boolean;
+  /** * Whether the component is selected. Default value is false
+   */
+  selected?: boolean;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Set the handler to handle press event.
+   */
+  onPress?: () => void;
+}
+
+const ListItem = ({
+  prefix,
+  suffix,
+  title,
+  subtitle,
+  style,
+  testID,
+  selected = false,
+  children,
+  leadingStatus,
+  variant = 'full-width',
+  onPress,
+  disabled = false,
+}: ListItemProps): JSX.Element => (
+  <StyledListItemContainer
+    style={style}
+    testID={testID}
+    themeSelected={selected}
+    themeVariant={variant}
+    onPress={onPress}
+    disabled={disabled}
+  >
+    {leadingStatus && (
+      <StyledLeadingStatus
+        themeLeadingStatusIntent={leadingStatus}
+        testID="leadingStatus"
+      />
+    )}
+    <StyledContentContainer>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}
+      >
+        {prefix && (
+          <StyledPrefixContainer>
+            {typeof prefix === 'string' ? <Icon icon={prefix} /> : prefix}
+          </StyledPrefixContainer>
+        )}
+        <StyledTitleContainer>
+          <Typography.Text
+            intent="body"
+            fontSize="large"
+            fontWeight="semi-bold"
+          >
+            {title}
+          </Typography.Text>
+          {subtitle && (
+            <Typography.Text intent="subdued" fontSize="small">
+              {subtitle}
+            </Typography.Text>
+          )}
+        </StyledTitleContainer>
+        {suffix && (
+          <StyledSuffixContainer>
+            {typeof suffix === 'string' ? (
+              <Icon
+                icon={suffix}
+                intent={disabled ? 'disabled-text' : 'primary'}
+                size="small"
+              />
+            ) : (
+              suffix
+            )}
+          </StyledSuffixContainer>
+        )}
+      </View>
+      {children && (
+        <StyledChildrenContainer>{children}</StyledChildrenContainer>
+      )}
+    </StyledContentContainer>
+  </StyledListItemContainer>
+);
+
+export default ListItem;

package/src/components/List/StyledBasicListItem.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/native';
+import { TouchableOpacity, View } from 'react-native';
+
+const StyledPrefixContainer = styled(View)(({ theme }) => ({
+  marginRight: theme.__hd__.list.space.prefixContainerMarginRight,
+}));
+const StyledSuffixContainer = styled(View)(({ theme }) => ({
+  marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft,
+}));
+const StyledTitleContainer = styled(View)(() => ({
+  flex: 1,
+}));
+
+const StyledListItemContainer = styled(TouchableOpacity)<{
+  themeSelected?: boolean;
+  themeDisabled?: boolean;
+}>(({ theme, themeSelected, themeDisabled }) => ({
+  alignItems: 'center',
+  flex: 1,
+  flexDirection: 'row',
+  backgroundColor: themeSelected
+    ? theme.__hd__.select.colors.checkedOption
+    : theme.__hd__.select.colors.option,
+  padding: theme.__hd__.list.space.listItemContainerPadding,
+  opacity: themeDisabled
+    ? theme.__hd__.list.opacity.disabled
+    : theme.__hd__.list.opacity.enabled,
+}));
+export {
+  StyledListItemContainer,
+  StyledPrefixContainer,
+  StyledTitleContainer,
+  StyledSuffixContainer,
+};

package/src/components/List/StyledListItem.tsx

@@ -0,0 +1,82 @@
+import { TouchableOpacity, View } from 'react-native';
+import styled from '@emotion/native';
+
+export type Variant = 'full-width' | 'card';
+export type LeadingStatusIntent =
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'archived';
+
+const StyledListItemContainer = styled(TouchableOpacity)<{
+  themeSelected?: boolean;
+  themeVariant?: Variant;
+}>(({ theme, themeSelected = false, themeVariant = 'basic' }) => {
+  const sharedStyles = {
+    flexDirection: 'row' as const,
+    backgroundColor: themeSelected
+      ? theme.__hd__.list.colors.checkedListItemContainerBackground
+      : theme.__hd__.list.colors.listItemContainerBackground,
+    padding: theme.__hd__.list.space.listItemContainerPadding,
+  };
+
+  switch (themeVariant) {
+    case 'basic':
+      return sharedStyles;
+    case 'card':
+      return {
+        ...sharedStyles,
+        alignItems: 'center',
+        borderRadius: theme.__hd__.list.radii.card,
+        shadowColor: theme.colors.shadow,
+        shadowRadius: theme.__hd__.list.radii.cardShadow,
+        shadowOffset: theme.__hd__.list.offsets.cardShadow,
+        shadowOpacity: theme.__hd__.list.opacity.cardShadow,
+      };
+    default:
+      return sharedStyles;
+  }
+});
+
+const StyledContentContainer = styled(View)(() => ({
+  flexDirection: 'column',
+  flex: 1,
+  flexGrow: 2,
+}));
+
+const StyledChildrenContainer = styled(View)(() => ({
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  alignItems: 'flex-start',
+}));
+
+const StyledLeadingStatus = styled(View)<{
+  themeLeadingStatusIntent: LeadingStatusIntent;
+}>(({ theme, themeLeadingStatusIntent }) => ({
+  width: theme.__hd__.list.widths.leadingStatus,
+  marginRight: theme.__hd__.list.space.leadingStatusMarginRight,
+  borderRadius: theme.__hd__.list.radii.leadingStatus,
+  backgroundColor:
+    theme.__hd__.list.colors.leadingStatus[themeLeadingStatusIntent],
+}));
+
+const StyledPrefixContainer = styled(View)(({ theme }) => ({
+  marginRight: theme.__hd__.list.space.prefixContainerMarginRight,
+}));
+const StyledSuffixContainer = styled(View)(({ theme }) => ({
+  marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft,
+}));
+const StyledTitleContainer = styled(View)(() => ({
+  flex: 1,
+}));
+
+export {
+  StyledListItemContainer,
+  StyledContentContainer,
+  StyledChildrenContainer,
+  StyledLeadingStatus,
+  StyledPrefixContainer,
+  StyledTitleContainer,
+  StyledSuffixContainer,
+};

package/src/components/List/__tests__/BasicListItem.spec.tsx

@@ -0,0 +1,37 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import BasicListItem from '../BasicListItem';
+
+describe('BasicListItem', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <BasicListItem
+        title="List item"
+        subtitle="subtitle"
+        suffix="checkmark"
+        testID="basic-list-item"
+      />
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
+    expect(wrapper.queryAllByText('List item')).toHaveLength(1);
+    expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
+  });
+
+  it('onPress', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <BasicListItem
+        title="List item"
+        subtitle="subtitle"
+        suffix="checkmark"
+        testID="basic-list-item"
+        onPress={onPress}
+      />
+    );
+
+    fireEvent.press(getByTestId('basic-list-item'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});