@hero-design/rn 7.12.1 → 7.14.0

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import Accordion, { AccordionProps } from '..';
+
+const AccordionExample = (props: Omit<AccordionProps<string>, 'items'>) => (
+  <Accordion
+    items={[
+      {
+        header: 'Accordion header 1',
+        content: <Typography.Text>Accordion content 1</Typography.Text>,
+        key: 'acc1',
+      },
+      {
+        header: 'Accordion header 2',
+        content: <Typography.Text>Accordion content 2</Typography.Text>,
+        key: 'acc2',
+      },
+    ]}
+    {...props}
+  />
+);
+
+const ControlledAccordionExample = () => {
+  const [activeItem, setActiveItem] = React.useState('acc2');
+  return (
+    <AccordionExample activeItemKey={activeItem} onItemPress={setActiveItem} />
+  );
+};
+
+describe('Accordion', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(<AccordionExample />);
+
+    expect(wrapper.getAllByText('Accordion header 1')).toHaveLength(1);
+    expect(wrapper.getAllByText('Accordion header 2')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('allows fully controlled', () => {
+    const wrapper = renderWithTheme(<ControlledAccordionExample />);
+
+    expect(wrapper.getAllByText('Accordion header 1')).toHaveLength(1);
+    expect(wrapper.getAllByText('Accordion header 2')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when variant is card', () => {
+    const wrapper = renderWithTheme(<AccordionExample variant="card" />);
+
+    expect(wrapper.getAllByTestId('accordion-spacer')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Accordion/index.tsx

@@ -0,0 +1,82 @@
+import React, { Key, ReactElement, useMemo } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import AccordionItem from './AccordionItem';
+import { Spacer, StyledWrapper } from './StyledAccordion';
+import { usePropsOrInternalState } from './utils';
+
+export interface AccordionProps<K extends Key> {
+  /**
+   * List of accordion items to be rendered. Each item must have an unique key.
+   */
+  items: {
+    header: string | ReactElement;
+    content: ReactElement;
+    key: K;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+  }[];
+  /**
+   * Key of the active item.
+   * When activeItemKey and onItemPress is passed, the component is fully controlled.
+   * Otherwise, it would be uncontrolled.
+   */
+  activeItemKey?: K;
+  /**
+   * Callback invoked when an item is pressed.
+   */
+  onItemPress?: (key: K) => void;
+  /**
+   * Item type.
+   */
+  variant?: 'default' | 'card';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Accordion = <K extends Key>({
+  items,
+  activeItemKey,
+  onItemPress,
+  variant = 'default',
+  style,
+  testID,
+}: AccordionProps<K>) => {
+  const defaultValue = useMemo(
+    () => (typeof activeItemKey === 'number' ? NaN : '') as K,
+    [activeItemKey]
+  );
+  const [_activeItemKey, _onItemPress] = usePropsOrInternalState<K>(
+    defaultValue,
+    activeItemKey,
+    onItemPress
+  );
+
+  return (
+    <StyledWrapper style={style} testID={testID}>
+      {items.map(({ key, ...props }, index) => {
+        const open = _activeItemKey === key;
+        return (
+          <React.Fragment key={key}>
+            {variant === 'card' && index !== 0 && (
+              <Spacer testID="accordion-spacer" />
+            )}
+            <AccordionItem
+              {...props}
+              open={open}
+              onPress={() => _onItemPress(open ? defaultValue : key)}
+              variant={variant}
+            />
+          </React.Fragment>
+        );
+      })}
+    </StyledWrapper>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/utils.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export function usePropsOrInternalState<T>(
+  initialState: T,
+  state: T | undefined,
+  setState: ((val: T) => void) | undefined
+): [T, (val: T) => void] {
+  const [internalState, setInternalState] = React.useState<T>(initialState);
+
+  return [state || internalState, setState || setInternalState];
+}

package/src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
+import { useTheme } from '@emotion/react';
 import React, { ReactChild } from 'react';
-import { Pressable, StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
 
 import { IconName } from '../Icon';
 import LoadingIndicator from './LoadingIndicator';
@@ -110,64 +111,67 @@ const Button = ({
   testID,
   text,
   variant = 'filled',
-}: ButtonProps) => (
-  <Pressable
-    accessibilityHint={accessibilityHint}
-    accessibilityLabel={accessibilityLabel}
-    disabled={disabled || loading}
-    onPress={onPress}
-    testID={testID}
-  >
-    {({ pressed }) => (
-      <StyledButtonContainer
-        disabled={disabled}
-        pressed={pressed}
-        style={style}
-        themeVariant={getThemeVariant(variant, intent)}
-      >
-        {loading === true ? (
-          <LoadingIndicator
-            testID={`${testID}-loading-indicator`}
-            themeVariant={getThemeVariant(variant, intent)}
-          />
-        ) : (
-          <>
-            {icon !== undefined && (
-              <StyledButtonIconWrapper themePosition="left">
-                <StyledButtonIcon
-                  disabled={disabled}
-                  icon={icon}
-                  pressed={pressed}
-                  testID={`${testID}-left-icon`}
-                  themeVariant={getThemeVariant(variant, intent)}
-                />
-              </StyledButtonIconWrapper>
-            )}
-            <StyledButtonText
-              disabled={disabled}
-              ellipsizeMode="tail"
-              numberOfLines={1}
-              pressed={pressed}
-              themeVariant={getThemeVariant(variant, intent)}
-            >
-              {text}
-            </StyledButtonText>
-            {rightIcon !== undefined && (
-              <StyledButtonIconWrapper themePosition="right">
-                <StyledButtonIcon
-                  disabled={disabled}
-                  icon={rightIcon}
-                  pressed={pressed}
-                  testID={`${testID}-right-icon`}
-                  themeVariant={getThemeVariant(variant, intent)}
-                />
-              </StyledButtonIconWrapper>
-            )}
-          </>
-        )}
-      </StyledButtonContainer>
-    )}
-  </Pressable>
-);
+}: ButtonProps): JSX.Element => {
+  const [pressed, setPressed] = React.useState(false);
+  const theme = useTheme();
+  const themeVariant = getThemeVariant(variant, intent);
+  return (
+    <StyledButtonContainer
+      onShowUnderlay={() => setPressed(true)}
+      onHideUnderlay={() => setPressed(false)}
+      underlayColor={theme.__hd__.button.colors.underlayColors[themeVariant]}
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled || loading}
+      activeOpacity={0.5}
+      onPress={onPress}
+      testID={testID}
+      pressed={pressed}
+      themeVariant={themeVariant}
+      style={style}
+    >
+      {loading === true ? (
+        <LoadingIndicator
+          testID={`${testID}-loading-indicator`}
+          themeVariant={themeVariant}
+        />
+      ) : (
+        <>
+          {icon !== undefined && (
+            <StyledButtonIconWrapper themePosition="left">
+              <StyledButtonIcon
+                disabled={disabled}
+                icon={icon}
+                pressed={pressed}
+                testID={`${testID}-left-icon`}
+                themeVariant={themeVariant}
+              />
+            </StyledButtonIconWrapper>
+          )}
+          <StyledButtonText
+            disabled={disabled}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            pressed={pressed}
+            themeVariant={themeVariant}
+          >
+            {text}
+          </StyledButtonText>
+          {rightIcon !== undefined && (
+            <StyledButtonIconWrapper themePosition="right">
+              <StyledButtonIcon
+                disabled={disabled}
+                icon={rightIcon}
+                pressed={pressed}
+                testID={`${testID}-right-icon`}
+                themeVariant={themeVariant}
+              />
+            </StyledButtonIconWrapper>
+          )}
+        </>
+      )}
+    </StyledButtonContainer>
+  );
+};
 
 export default Button;

package/src/components/Button/IconButton.tsx

@@ -29,7 +29,7 @@ export interface IconButtonProps {
   /**
    * Set the handler to handle press event.
    */
-  onPress: () => void;
+  onPress?: () => void;
   /**
    * Size of the Icon.
    */

package/src/components/Button/StyledButton.tsx

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import styled, { ReactNativeStyle } from '@emotion/native';
 import { Theme } from '@emotion/react';
 
@@ -79,10 +79,10 @@ const genFilledContainerStyles = (
   };
 
   return {
-    width: '100%',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    alignSelf: 'stretch',
     padding: theme.__hd__.button.space.buttonPadding,
     borderRadius: theme.__hd__.button.radii.default,
     ...backgroundColorStyling(),
@@ -112,10 +112,10 @@ const genOutlineContainerStyles = (
   };
 
   return {
-    width: '100%',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    alignSelf: 'stretch',
     padding:
       theme.__hd__.button.space.buttonPadding -
       theme.__hd__.button.borderWidth.default,
@@ -184,7 +184,7 @@ const genTextVariantTextStyles = (
   };
 };
 
-const StyledButtonContainer = styled(View)<{
+const StyledButtonContainer = styled(TouchableHighlight)<{
   disabled?: boolean;
   pressed?: boolean;
   themeVariant: ThemeVariant;
@@ -208,13 +208,11 @@ const StyledButtonContainer = styled(View)<{
     case 'text-secondary':
     case 'text-danger':
       return {
-        width: '100%',
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
         padding: theme.__hd__.button.space.buttonPadding,
         borderWidth: 0,
-        backgroundColor: 'transparent',
       };
   }
 });

package/src/components/Button/__tests__/StyledButton.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Text } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 
 import {
@@ -22,9 +23,11 @@ describe('StyledButtonContainer', () => {
     ${'text-primary'}
     ${'text-secondary'}
     ${'text-danger'}
-  `('has $themeVariant style', ({ themeVariant }) => {
+  `('has $themeVariant style', ({ themeVariant }): void => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonContainer themeVariant={themeVariant} />
+      <StyledButtonContainer themeVariant={themeVariant}>
+        <Text>Title</Text>
+      </StyledButtonContainer>
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -46,7 +49,9 @@ describe('StyledButtonContainer', () => {
     'has pressed with the correct variant $themeVariant style',
     ({ themeVariant }) => {
       const { toJSON } = renderWithTheme(
-        <StyledButtonContainer themeVariant={themeVariant} pressed />
+        <StyledButtonContainer themeVariant={themeVariant} pressed>
+          <Text>Title</Text>
+        </StyledButtonContainer>
       );
       expect(toJSON()).toMatchSnapshot();
     }
@@ -54,7 +59,9 @@ describe('StyledButtonContainer', () => {
 
   it('renders disabled correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonContainer themeVariant="filled-primary" disabled />
+      <StyledButtonContainer themeVariant="filled-primary" disabled>
+        <Text>Title</Text>
+      </StyledButtonContainer>
     );
 
     expect(toJSON()).toMatchSnapshot();