@hero-design/rn 7.7.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/index.tsx

@@ -18,7 +18,7 @@ export interface CheckboxProps {
    */
   onPress?: () => void;
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**

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

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

@@ -0,0 +1,110 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { View } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Avatar from '../../Avatar';
+import Switch from '../../Switch';
+import Typography from '../../Typography';
+import ListItem from '../ListItem';
+
+describe('ListItem', () => {
+  it('renders correctly ListItem with icon', () => {
+    const wrapper = renderWithTheme(
+      <ListItem
+        title="List item"
+        subtitle="subtitle"
+        suffix="checkmark"
+        testID="list-item"
+      />
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByTestId('list-item')).toHaveLength(1);
+    expect(wrapper.queryAllByText('List item')).toHaveLength(1);
+    expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('leadingStatus')).toHaveLength(0);
+  });
+
+  it('renders correctly ListItem with prefix suffix is React.Element', () => {
+    const wrapper = renderWithTheme(
+      <ListItem
+        prefix={<Avatar title="ML" />}
+        suffix={<Switch checked testID="switch" />}
+        title="List item"
+        subtitle="subtitle"
+        testID="list-item"
+      />
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByTestId('list-item')).toHaveLength(1);
+    expect(wrapper.queryAllByText('List item')).toHaveLength(1);
+    expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
+    expect(wrapper.queryAllByText('ML')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('switch')).toHaveLength(1);
+  });
+
+  it('renders correctly ListItem with children', () => {
+    const wrapper = renderWithTheme(
+      <ListItem
+        prefix={<Avatar title="ML" />}
+        suffix="arrow-right"
+        title="Menu List"
+        subtitle="Got a common question?"
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignSelf: 'stretch',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Typography.Text>Gross pay</Typography.Text>
+          <Typography.Text>$1052.03</Typography.Text>
+        </View>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignSelf: 'stretch',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Typography.Text>Gross pay</Typography.Text>
+          <Typography.Text>$1052.03</Typography.Text>
+        </View>
+      </ListItem>
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByText('Menu List')).toHaveLength(1);
+    expect(wrapper.queryAllByText('Got a common question?')).toHaveLength(1);
+    expect(wrapper.queryAllByText('ML')).toHaveLength(1);
+    expect(wrapper.queryAllByText('Gross pay')).toHaveLength(2);
+    expect(wrapper.queryAllByText('$1052.03')).toHaveLength(2);
+  });
+
+  it('renders correctly ListItem with leading status', () => {
+    const wrapper = renderWithTheme(
+      <ListItem
+        leadingStatus="archived"
+        suffix="arrow-right"
+        title="03:00 PM - 9:00 PM"
+      />
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByText('03:00 PM - 9:00 PM')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('leadingStatus')).toHaveLength(1);
+  });
+  it('onPress', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <ListItem
+        title="List item"
+        subtitle="subtitle"
+        suffix="checkmark"
+        testID="list-item"
+        onPress={onPress}
+      />
+    );
+
+    fireEvent.press(getByTestId('list-item'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledListItemContainer } from '../StyledBasicListItem';
+
+describe('ListItemContainer', () => {
+  it.each`
+    themeSelected | themeDisabled
+    ${true}       | ${false}
+    ${false}      | ${true}
+    ${false}      | ${false}
+    ${true}       | ${true}
+  `(
+    'renders correctly themeSelected $themeSelected themeDisabled $themeDisabled',
+    ({ themeSelected, themeDisabled }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledListItemContainer
+          themeSelected={themeSelected}
+          themeDisabled={themeDisabled}
+        />
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import {
+  StyledLeadingStatus,
+  StyledListItemContainer,
+} from '../StyledListItem';
+
+describe('ListItemContainer', () => {
+  it.each`
+    themeSelected | themeVariant
+    ${true}       | ${'full-width'}
+    ${false}      | ${'card'}
+    ${false}      | ${'full-width'}
+    ${true}       | ${'card'}
+  `(
+    'renders correctly themeSelected $themeSelected themeVariant $themeVariant',
+    ({ themeSelected, themeVariant }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledListItemContainer
+          themeSelected={themeSelected}
+          themeVariant={themeVariant}
+        />
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
+describe('LeadingStatus', () => {
+  it.each`
+    themeLeadingStausIntent
+    ${'archived'}
+    ${'info'}
+    ${'success'}
+    ${'warning'}
+    ${'danger'}
+  `(
+    'renders correctly themeLeadingStausIntent $themeLeadingStausIntent',
+    ({ themeLeadingStausIntent }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledLeadingStatus
+          themeLeadingStatusIntent={themeLeadingStausIntent}
+        />
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});