@hero-design/rn 8.44.0-alpha.0 → 8.44.0

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Chip from '..';
+
+describe('Chip', () => {
+  it.each`
+    selected
+    ${true}
+    ${false}
+  `('renders correctly when selected is $selected', ({ selected }) => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Chip label="Cover my bills" selected={selected} />
+    );
+
+    expect(getByText('Cover my bills')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with default icon', () => {
+    const ChipWithoutIcon = () => {
+      const [selected, setSelected] = React.useState(false);
+
+      return (
+        <Chip
+          label="Cover my bills"
+          testID="chip"
+          selected={selected}
+          onPress={() => setSelected(!selected)}
+        />
+      );
+    };
+
+    const { getByTestId, queryByTestId, toJSON } = renderWithTheme(
+      <ChipWithoutIcon />
+    );
+
+    expect(queryByTestId('chip-icon-checkmark')).toBeFalsy();
+    expect(toJSON()).toMatchSnapshot();
+
+    fireEvent.press(getByTestId('chip'));
+
+    expect(getByTestId('chip-icon-checkmark')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('does not render icon when variant is outlined', () => {
+    const ChipWithIcon = () => {
+      const [selected, setSelected] = React.useState(false);
+
+      return (
+        <Chip
+          label="Cover my bills"
+          testID="chip"
+          icon="charging-station-outlined"
+          selected={selected}
+          variant="outlined"
+          onPress={() => setSelected(!selected)}
+        />
+      );
+    };
+
+    const { getByTestId, toJSON, queryByTestId } = renderWithTheme(
+      <ChipWithIcon />
+    );
+
+    expect(queryByTestId('chip-icon-charging-station-outlined')).toBeFalsy();
+    expect(toJSON()).toMatchSnapshot();
+
+    fireEvent.press(getByTestId('chip'));
+
+    expect(queryByTestId('chip-icon-charging-station-outlined')).toBeFalsy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with custom icon', () => {
+    const ChipWithIcon = () => {
+      const [selected, setSelected] = React.useState(false);
+
+      return (
+        <Chip
+          label="Cover my bills"
+          testID="chip"
+          icon="charging-station-outlined"
+          selected={selected}
+          variant="filled"
+          onPress={() => setSelected(!selected)}
+        />
+      );
+    };
+
+    const { getByTestId, toJSON } = renderWithTheme(<ChipWithIcon />);
+
+    expect(getByTestId('chip-icon-charging-station-outlined')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+
+    fireEvent.press(getByTestId('chip'));
+
+    expect(getByTestId('chip-icon-charging-station-outlined')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    variant       | selected
+    ${'filled'}   | ${true}
+    ${'filled'}   | ${false}
+    ${'outlined'} | ${true}
+    ${'outlined'} | ${false}
+  `(
+    'renders correctly with variant $variant and selected $selected',
+    ({ variant, selected }) => {
+      const { toJSON } = renderWithTheme(
+        <Chip
+          label="Cover my bills"
+          testID="chip"
+          variant={variant}
+          selected={selected}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+
+    const { getByTestId } = renderWithTheme(
+      <Chip label="Cover my bills" testID="chip" onPress={onPress} />
+    );
+
+    fireEvent.press(getByTestId('chip'));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Chip/index.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { IconName } from '../Icon';
+import {
+  StyledChipWrapper,
+  StyledIcon,
+  StyledIconWrapper,
+  StyledLabel,
+} from './StyledChip';
+
+export interface ChipProps extends ViewProps {
+  /**
+   * The label of the chip.
+   */
+  label: string;
+  /**
+   * Variant of the chip.
+   */
+  variant?: 'outlined' | 'filled';
+  /**
+   * Whether the chip is selected.
+   */
+  selected?: boolean;
+  /**
+   * Icon of the chip. Usable only with `variant="filled"`.
+   */
+  icon?: IconName;
+  /**
+   * Callback when the chip is pressed.
+   */
+  onPress?: () => void;
+}
+
+const Chip = ({
+  label,
+  variant = 'outlined',
+  selected = false,
+  icon,
+  onPress,
+  ...otherProps
+}: ChipProps) => {
+  const internalIcon = React.useMemo(() => {
+    if (icon && variant === 'filled') {
+      return icon;
+    }
+    if (selected) {
+      return 'checkmark';
+    }
+    return undefined;
+  }, [icon, selected, variant]);
+
+  return (
+    <StyledChipWrapper
+      onPress={onPress}
+      themeVariant={variant}
+      themeSelected={selected}
+      {...otherProps}
+    >
+      {internalIcon && (
+        <StyledIconWrapper>
+          <StyledIcon
+            size="xsmall"
+            icon={internalIcon}
+            themeSelected={selected}
+            themeVariant={variant}
+            testID={`chip-icon-${internalIcon}`}
+          />
+        </StyledIconWrapper>
+      )}
+
+      <StyledLabel
+        variant="small"
+        themeVariant={variant}
+        themeSelected={selected}
+      >
+        {label}
+      </StyledLabel>
+    </StyledChipWrapper>
+  );
+};
+
+export default Chip;

package/src/components/Collapse/__tests__/__snapshots__/StyledCollapse.spec.tsx.snap

@@ -3,34 +3,90 @@
 exports[`StyledChildWrapper renders correct style 1`] = `
 <View
   style={
-    [
-      {
-        "margin": 0,
-        "padding": 0,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
-  <Text>
-    Sample Child
-  </Text>
+  <View
+    style={
+      [
+        {
+          "margin": 0,
+          "padding": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Sample Child
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
 </View>
 `;
 
 exports[`StyledWrapper renders correct style 1`] = `
 <View
-  collapsable={false}
   style={
     {
-      "margin": 0,
-      "overflow": "hidden",
-      "padding": 0,
+      "flex": 1,
     }
   }
 >
-  <Text>
-    Sample Child
-  </Text>
+  <View
+    collapsable={false}
+    style={
+      {
+        "margin": 0,
+        "overflow": "hidden",
+        "padding": 0,
+      }
+    }
+  >
+    <Text>
+      Sample Child
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
 </View>
 `;

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

@@ -2,88 +2,144 @@
 
 exports[`Collapse renders correctly 1`] = `
 <View
-  collapsable={false}
-  onLayout={[Function]}
   style={
     {
-      "height": 0,
-      "margin": 0,
-      "overflow": "hidden",
-      "padding": 0,
+      "flex": 1,
     }
   }
-  testID="collapse"
 >
   <View
+    collapsable={false}
+    onLayout={[Function]}
     style={
-      [
-        {
-          "height": 1334,
-        },
-        undefined,
-      ]
+      {
+        "height": 0,
+        "margin": 0,
+        "overflow": "hidden",
+        "padding": 0,
+      }
     }
+    testID="collapse"
   >
     <View
-      onLayout={[Function]}
       style={
         [
           {
-            "margin": 0,
-            "padding": 0,
+            "height": 1334,
           },
           undefined,
         ]
       }
     >
-      <Text>
-        Sample Text
-      </Text>
+      <View
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "margin": 0,
+              "padding": 0,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text>
+          Sample Text
+        </Text>
+      </View>
     </View>
   </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
 </View>
 `;
 
 exports[`Collapse should render Sample Text but not visible 1`] = `
 <View
-  collapsable={false}
-  onLayout={[Function]}
   style={
     {
-      "height": 0,
-      "margin": 0,
-      "overflow": "hidden",
-      "padding": 0,
+      "flex": 1,
     }
   }
-  testID="collapse"
 >
   <View
+    collapsable={false}
+    onLayout={[Function]}
     style={
-      [
-        {
-          "height": 1334,
-        },
-        undefined,
-      ]
+      {
+        "height": 0,
+        "margin": 0,
+        "overflow": "hidden",
+        "padding": 0,
+      }
     }
+    testID="collapse"
   >
     <View
-      onLayout={[Function]}
       style={
         [
           {
-            "margin": 0,
-            "padding": 0,
+            "height": 1334,
           },
           undefined,
         ]
       }
     >
-      <Text>
-        Sample Text
-      </Text>
+      <View
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "margin": 0,
+              "padding": 0,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text>
+          Sample Text
+        </Text>
+      </View>
     </View>
   </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
 </View>
 `;

package/src/components/Collapse/index.tsx

@@ -62,7 +62,7 @@ const Collapse = ({
     }
   }, [open, previousOpenState, contentHeight]);
 
-  const fetchMaxHeight = useCallback(({ height }) => {
+  const fetchMaxHeight = useCallback(({ height }: { height: number }) => {
     setContentHeight(height);
   }, []);
 

package/src/components/ContentNavigator/__tests__/__snapshots__/StyledContentNavigator.spec.tsx.snap

@@ -3,14 +3,42 @@
 exports[`Wrapper has correct style 1`] = `
 <View
   style={
-    [
-      {
-        "flex": 1,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;