@hero-design/rn 8.2.1 → 8.2.3

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

@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={false}
+/>
+`;
+
 exports[`BottomSheet renders correctly with close state 1`] = `
 <Modal
   hardwareAccelerated={false}
@@ -196,34 +205,10 @@ exports[`BottomSheet renders correctly with open state 1`] = `
             </View>
           </View>
         </View>
-        <View
-          style={
-            Array [
-              Object {
-                "borderBottomColor": "#e8e9ea",
-                "borderBottomWidth": 1,
-                "maxWidth": "100%",
-              },
-              undefined,
-            ]
-          }
-        />
         <Text>
           Content
         </Text>
         <View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <View
             style={
               Array [

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

@@ -40,6 +40,23 @@ describe('BottomSheet', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it('renders correctly with BottomSheet.ScrollView', () => {
+    const { toJSON } = renderWithTheme(
+      <BottomSheet
+        open={false}
+        header="Title"
+        footer={<Button title="Footer CTA" />}
+        onRequestClose={jest.fn()}
+      >
+        <BottomSheet.ScrollView>
+          <Content />
+        </BottomSheet.ScrollView>
+      </BottomSheet>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
   describe('Header', () => {
     it('renders default header correctly', () => {
       const { getByText } = renderWithTheme(

package/src/components/BottomSheet/index.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
   Animated,
   Dimensions,
@@ -7,8 +9,7 @@ import {
   Modal,
   Platform,
 } from 'react-native';
-import type { ReactElement, ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import BottomSheetContext from './BottomSheetContext';
 import Footer from './Footer';
 import Header from './Header';
 import {
@@ -17,6 +18,7 @@ import {
   StyledKeyboardAvoidingView,
   StyledWrapper,
 } from './StyledBottomSheet';
+import ScrollView from './ScrollView';
 
 interface BottomSheetProps {
   /**
@@ -72,7 +74,6 @@ interface BottomSheetProps {
    * Testing id of the component.
    */
   testID?: string;
-
   /**
    * keyboardAvoidingView's props
    * */
@@ -90,7 +91,7 @@ const BottomSheet = ({
   onDismiss,
   showCloseButton = true,
   hasBackdrop = true,
-  showDivider = true,
+  showDivider = false,
   style,
   testID,
   keyboardAvoidingViewProps = {},
@@ -100,6 +101,8 @@ const BottomSheet = ({
   // Internal state to control modal open/close timing with animation
   const [visible, setVisibility] = useState<boolean>(open);
   const animatedValue = useRef(new Animated.Value(open ? 0 : 1));
+  const [internalShowDivider, setInternalShowDivider] =
+    useState<boolean>(showDivider);
 
   useEffect(() => {
     // Show the modal before the open animation start
@@ -146,6 +149,11 @@ const BottomSheet = ({
       })
     : 0;
 
+  const BottomSheetContextValue = useMemo(
+    () => ({ setInternalShowDivider }),
+    [setInternalShowDivider]
+  );
+
   return (
     <Modal
       visible={visible}
@@ -179,12 +187,15 @@ const BottomSheet = ({
             {header !== undefined ? (
               <Header
                 content={header}
-                showDivider={showDivider}
+                showDivider={internalShowDivider}
                 onRequestClose={onRequestClose}
                 showCloseButton={showCloseButton}
               />
             ) : null}
-            {children}
+            <BottomSheetContext.Provider value={BottomSheetContextValue}>
+              {children}
+            </BottomSheetContext.Provider>
+
             {footer ? (
               <Footer showDivider={showDivider}>{footer}</Footer>
             ) : null}
@@ -195,4 +206,6 @@ const BottomSheet = ({
   );
 };
 
-export default BottomSheet;
+export default Object.assign(BottomSheet, {
+  ScrollView,
+});

package/src/components/Box/StyledBox.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/native';
 import { Theme } from '@emotion/react';
 import { View } from 'react-native';
-import { StyleProps, ThemeScale } from './types';
+import { FlexStyleProps, StyleProps, ThemeScale } from './types';
 import { pick } from '../../utils/helpers';
 import config, { ConfigType, flexPropsKey } from './config';
 
@@ -44,10 +44,12 @@ const mapStylePropToThemeValue = (theme: Theme, props: StyleProps) => {
 
 const configKeys = Object.keys(config) as Array<keyof ConfigType>;
 
-const StyledBox = styled(View)<StyleProps>(({ theme, ...otherProps }) => {
-  const styleProps = pick(configKeys, otherProps);
-  const flexProps = pick([...flexPropsKey], otherProps);
-  return { ...mapStylePropToThemeValue(theme, styleProps), ...flexProps };
-});
+const StyledBox = styled(View)<StyleProps & FlexStyleProps>(
+  ({ theme, ...otherProps }) => {
+    const styleProps = pick(configKeys, otherProps);
+    const flexProps = pick([...flexPropsKey], otherProps);
+    return { ...mapStylePropToThemeValue(theme, styleProps), ...flexProps };
+  }
+);
 
 export { StyledBox };

package/src/components/Card/StyledCard.tsx

@@ -2,7 +2,7 @@ import { View } from 'react-native';
 import styled from '@emotion/native';
 
 const StyledCard = styled(View)<{
-  themeIntent?: 'primary' | 'success' | 'warning';
+  themeIntent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
 }>(({ theme, themeIntent }) => ({
   ...(themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent],

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

@@ -1,5 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Card renders correctly when intent is archived 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#abacaf",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="archived"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
+exports[`Card renders correctly when intent is danger 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f46363",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="danger"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
 exports[`Card renders correctly when intent is info 1`] = `
 <View
   style={

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

@@ -23,6 +23,8 @@ describe('Card', () => {
     ${'primary'}
     ${'success'}
     ${'info'}
+    ${'danger'}
+    ${'archived'}
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Card intent={intent}>

package/src/components/Card/index.tsx

@@ -12,7 +12,7 @@ interface CardProps extends ViewProps {
   /**
    * Visual intent color to apply to card.
    */
-  intent?: 'primary' | 'success' | 'warning';
+  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
   /**
    * Additional style.
    */

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -428,18 +428,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "borderBottomColor": "#e8e9ea",
-                        "borderBottomWidth": 1,
-                        "maxWidth": "100%",
-                      },
-                      undefined,
-                    ]
-                  }
-                />
                 <View
                   style={
                     Array [
@@ -464,18 +452,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   />
                 </View>
                 <View>
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "borderBottomColor": "#e8e9ea",
-                          "borderBottomWidth": 1,
-                          "maxWidth": "100%",
-                        },
-                        undefined,
-                      ]
-                    }
-                  />
                   <View
                     style={
                       Array [

package/src/components/Icon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StyleProp, TextStyle } from 'react-native';
+import type { AccessibilityProps, StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
 import AnimatedIcon from './AnimatedIcon';
@@ -7,7 +7,7 @@ import { useDeprecation } from '../../utils/hooks';
 
 export type IconName = typeof IconList[number];
 
-export interface IconProps {
+export interface IconProps extends AccessibilityProps {
   /**
    * Name of the Icon.
    */
@@ -50,6 +50,17 @@ const Icon = ({
   intent = 'text',
   testID,
   spin = false,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityState,
+  accessibilityValue,
+  accessibilityLiveRegion,
+  accessibilityElementsHidden,
+  accessible,
+  accessibilityIgnoresInvertColors,
+  accessibilityViewIsModal,
+  accessibilityActions,
 }: IconProps) => {
   useDeprecation(
     `${icon} icon is deprecated and will be removed in the next major release, please use ${icon.replace(
@@ -58,6 +69,19 @@ const Icon = ({
     )} instead.`,
     icon.startsWith('carat')
   );
+  const accessibilityProps = {
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityRole,
+    accessibilityState,
+    accessibilityValue,
+    accessibilityLiveRegion,
+    accessibilityElementsHidden,
+    accessible,
+    accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal,
+    accessibilityActions,
+  };
 
   return spin ? (
     <AnimatedIcon
@@ -66,6 +90,7 @@ const Icon = ({
       themeSize={size}
       style={style}
       testID={testID}
+      {...accessibilityProps}
     />
   ) : (
     <HeroIcon
@@ -74,6 +99,7 @@ const Icon = ({
       themeSize={size}
       style={style}
       testID={testID}
+      {...accessibilityProps}
     />
   );
 };

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -395,18 +395,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -1288,18 +1276,6 @@ Array [
             </View>
           </RCTScrollView>
           <View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderBottomColor": "#e8e9ea",
-                    "borderBottomWidth": 1,
-                    "maxWidth": "100%",
-                  },
-                  undefined,
-                ]
-              }
-            />
             <View
               style={
                 Array [
@@ -1985,18 +1961,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -3055,18 +3019,6 @@ Array [
             </View>
           </RCTScrollView>
           <View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderBottomColor": "#e8e9ea",
-                    "borderBottomWidth": 1,
-                    "maxWidth": "100%",
-                  },
-                  undefined,
-                ]
-              }
-            />
             <View
               style={
                 Array [
@@ -3765,18 +3717,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -4453,18 +4393,6 @@ Array [
             </View>
           </RCTScrollView>
           <View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderBottomColor": "#e8e9ea",
-                    "borderBottomWidth": 1,
-                    "maxWidth": "100%",
-                  },
-                  undefined,
-                ]
-              }
-            />
             <View
               style={
                 Array [

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -394,18 +394,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -1893,18 +1881,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -3528,18 +3504,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={