@hero-design/rn 7.12.1 → 7.14.0

package/src/components/Icon/IconList.ts

@@ -1,8 +1,10 @@
 const IconList = [
   'activate',
+  'add-emoji',
   'add-person',
   'adjustment',
   'alignment',
+  'archive',
   'bank',
   'bell',
   'billing',
@@ -77,6 +79,13 @@ const IconList = [
   'file',
   'folder-user',
   'folder',
+  'format-bold',
+  'format-heading1',
+  'format-heading2',
+  'format-italic',
+  'format-list-bulleted',
+  'format-list-numbered',
+  'format-underlined',
   'funnel-filter',
   'global-dollar',
   'globe',
@@ -97,6 +106,7 @@ const IconList = [
   'lock',
   'looks-one',
   'looks-two',
+  'mandatory',
   'media-content',
   'menu',
   'moneybag',
@@ -118,10 +128,13 @@ const IconList = [
   'reschedule',
   'rostering',
   'save',
+  'schedule-send',
   'schedule',
   'search-person',
   'send',
   'speaker',
+  'star-award',
+  'star-badge',
   'star-medal',
   'star',
   'steps-circle',

package/src/components/List/BasicListItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
 import Icon, { IconName } from '../Icon';
 import Typography from '../Typography';
 import {
@@ -59,40 +60,49 @@ const BasicListItem = ({
   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
+}: ListItemProps): JSX.Element => {
+  const theme = useTheme();
+
+  return (
+    <StyledListItemContainer
+      style={style}
+      testID={testID}
+      themeSelected={selected}
+      themeDisabled={disabled}
+      onPress={onPress}
+      disabled={disabled}
+      underlayColor={
+        theme.__hd__.list.colors.highlightedListItemContainerBackground
+      }
+    >
+      <>
+        {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>
         )}
-      </StyledSuffixContainer>
-    )}
-  </StyledListItemContainer>
-);
+      </>
+    </StyledListItemContainer>
+  );
+};
 
 export default BasicListItem;

package/src/components/List/ListItem.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 
 import { StyleProp, ViewStyle, View } from 'react-native';
+import { useTheme } from '../../theme';
 import Icon, { IconName } from '../Icon';
 import Typography from '../Typography';
 import {
@@ -77,66 +78,74 @@ const ListItem = ({
   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>
+}: ListItemProps): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <StyledListItemContainer
+      style={style}
+      testID={testID}
+      themeSelected={selected}
+      themeVariant={variant}
+      onPress={onPress}
+      disabled={disabled}
+      underlayColor={
+        theme.__hd__.list.colors.highlightedListItemContainerBackground
+      }
+    >
+      <>
+        {leadingStatus && (
+          <StyledLeadingStatus
+            themeLeadingStatusIntent={leadingStatus}
+            testID="leadingStatus"
+          />
         )}
-        <StyledTitleContainer>
-          <Typography.Text
-            intent="body"
-            fontSize="large"
-            fontWeight="semi-bold"
+        <StyledContentContainer>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
           >
-            {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
+            {prefix && (
+              <StyledPrefixContainer>
+                {typeof prefix === 'string' ? <Icon icon={prefix} /> : prefix}
+              </StyledPrefixContainer>
             )}
-          </StyledSuffixContainer>
-        )}
-      </View>
-      {children && (
-        <StyledChildrenContainer>{children}</StyledChildrenContainer>
-      )}
-    </StyledContentContainer>
-  </StyledListItemContainer>
-);
+            <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

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 
 const StyledPrefixContainer = styled(View)(({ theme }) => ({
   marginRight: theme.__hd__.list.space.prefixContainerMarginRight,
@@ -11,12 +11,11 @@ const StyledTitleContainer = styled(View)(() => ({
   flex: 1,
 }));
 
-const StyledListItemContainer = styled(TouchableOpacity)<{
+const StyledListItemContainer = styled(TouchableHighlight)<{
   themeSelected?: boolean;
   themeDisabled?: boolean;
 }>(({ theme, themeSelected, themeDisabled }) => ({
   alignItems: 'center',
-  flex: 1,
   flexDirection: 'row',
   backgroundColor: themeSelected
     ? theme.__hd__.select.colors.checkedOption

package/src/components/List/StyledListItem.tsx

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import styled from '@emotion/native';
 
 export type Variant = 'full-width' | 'card';
@@ -9,7 +9,7 @@ export type LeadingStatusIntent =
   | 'info'
   | 'archived';
 
-const StyledListItemContainer = styled(TouchableOpacity)<{
+const StyledListItemContainer = styled(TouchableHighlight)<{
   themeSelected?: boolean;
   themeVariant?: Variant;
 }>(({ theme, themeSelected = false, themeVariant = 'basic' }) => {

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
 import { StyledListItemContainer } from '../StyledBasicListItem';
 
-describe('ListItemContainer', () => {
+describe('StyledListItemContainer', () => {
   it.each`
     themeSelected | themeDisabled
     ${true}       | ${false}
@@ -16,7 +17,9 @@ describe('ListItemContainer', () => {
         <StyledListItemContainer
           themeSelected={themeSelected}
           themeDisabled={themeDisabled}
-        />
+        >
+          <Typography.Text>StyledListItemContainer</Typography.Text>
+        </StyledListItemContainer>
       );
       expect(toJSON()).toMatchSnapshot();
     }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
 import {
   StyledLeadingStatus,
   StyledListItemContainer,
@@ -19,7 +20,9 @@ describe('ListItemContainer', () => {
         <StyledListItemContainer
           themeSelected={themeSelected}
           themeVariant={themeVariant}
-        />
+        >
+          <Typography.Text>StyledListItemContainer</Typography.Text>
+        </StyledListItemContainer>
       );
       expect(toJSON()).toMatchSnapshot();
     }

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

@@ -2,10 +2,13 @@
 
 exports[`BasicListItem renders correctly 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -14,14 +17,16 @@ exports[`BasicListItem renders correctly 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#ffffff",
-      "flex": 1,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
   testID="basic-list-item"
 >

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

@@ -2,10 +2,13 @@
 
 exports[`ListItem renders correctly ListItem with children 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -14,12 +17,14 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "backgroundColor": "#ffffff",
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <View
@@ -292,10 +297,13 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
 
 exports[`ListItem renders correctly ListItem with icon 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -304,12 +312,14 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "backgroundColor": "#ffffff",
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
   testID="list-item"
 >
@@ -414,10 +424,13 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
 
 exports[`ListItem renders correctly ListItem with leading status 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -426,12 +439,14 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "backgroundColor": "#ffffff",
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <View
@@ -531,10 +546,13 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
 
 exports[`ListItem renders correctly ListItem with prefix suffix is React.Element 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -543,12 +561,14 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "backgroundColor": "#ffffff",
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
   testID="list-item"
 >