@hero-design/rn 7.13.0 → 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/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/Calendar/CalendarRowItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import Typography from '../Typography';
+import {
+  StyledCalendarCell,
+  StyledCalendarRowItem,
+  StyledMark,
+} from './StyledCalendar';
+
+const getCellVariant = (
+  isSelected: boolean = false,
+  isCurrent: boolean = false
+) => {
+  if (isSelected) return 'selected';
+  if (isCurrent) return 'current';
+
+  return 'default';
+};
+
+export interface CalendarRowItemProps {
+  date?: Date;
+  onPress?: () => void;
+  isCurrent?: boolean;
+  isSelected?: boolean;
+  textIntent?: 'body' | 'subdued';
+  marked?: boolean;
+}
+
+const CalendarRowItem = ({
+  date,
+  onPress,
+  isCurrent,
+  isSelected,
+  textIntent = 'body',
+  marked = false,
+}: CalendarRowItemProps) => (
+  <StyledCalendarRowItem testID="calendar-date-cell">
+    <StyledCalendarCell
+      variant={getCellVariant(isSelected, isCurrent)}
+      onPress={onPress}
+    >
+      <Typography.Text intent={isSelected ? 'inverted' : textIntent}>
+        {date ? date.getDate() : ''}
+      </Typography.Text>
+      {marked ? (
+        <StyledMark
+          testID="calendar-date-mark"
+          variant={isSelected ? 'inverted' : 'primary'}
+        />
+      ) : null}
+    </StyledCalendarCell>
+  </StyledCalendarRowItem>
+);
+
+export default CalendarRowItem;

package/src/components/Calendar/StyledCalendar.tsx

@@ -0,0 +1,76 @@
+import styled from '@emotion/native';
+import { TouchableOpacity, View, ViewProps } from 'react-native';
+
+const StyledContainer = styled(View)(({ theme }) => ({
+  backgroundColor: theme.__hd__.calendar.colors.background,
+}));
+
+const StyledCalendarHeader = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  paddingHorizontal: theme.__hd__.calendar.space.headerHorizontalPadding,
+  paddingVertical: theme.__hd__.calendar.space.headerVerticalPadding,
+}));
+
+const StyledCalendarDayNameCell = styled(View)<ViewProps>(({ theme }) => ({
+  width: theme.__hd__.calendar.sizes.cellWidth,
+  height: theme.__hd__.calendar.sizes.cellHeight,
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledCalendarCell = styled(TouchableOpacity)<{
+  variant?: 'default' | 'current' | 'selected';
+}>(({ theme, variant = 'default' }) => ({
+  borderColor: theme.__hd__.calendar.colors.border,
+  borderWidth: variant === 'current' ? 1 : 0,
+  borderRadius: theme.__hd__.calendar.radii.default,
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor:
+    variant === 'selected' ? theme.__hd__.calendar.colors.primary : undefined,
+  width: theme.__hd__.calendar.sizes.cellCircleWidth,
+  height: theme.__hd__.calendar.sizes.cellCircleHeight,
+}));
+
+const StyledCalendarRow = styled(View)<ViewProps>(({ theme }) => ({
+  flexDirection: 'row',
+  paddingHorizontal: theme.__hd__.calendar.space.rowVerticalPadding,
+  flexWrap: 'wrap',
+}));
+
+const StyledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
+  flexBasis: `${Math.floor(100.0 / 7.0).toString()}%`,
+  alignItems: 'center',
+  width: theme.__hd__.calendar.sizes.cellWidth,
+  height: theme.__hd__.calendar.sizes.cellHeight,
+  justifyContent: 'center',
+}));
+
+const StyledDisabledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
+  flexBasis: `${Math.floor(100.0 / 7.0).toString()}%`,
+  alignItems: 'center',
+  width: theme.__hd__.calendar.sizes.cellWidth,
+  height: theme.__hd__.calendar.sizes.cellHeight,
+}));
+
+const StyledMark = styled(View)<{ variant: 'primary' | 'inverted' }>(
+  ({ theme, variant = 'primary' }) => ({
+    width: theme.__hd__.calendar.sizes.markWidth,
+    height: theme.__hd__.calendar.sizes.markHeight,
+    borderRadius: theme.__hd__.calendar.radii.default,
+    backgroundColor: theme.__hd__.calendar.colors[variant],
+    position: 'absolute',
+    bottom: '10%',
+  })
+);
+
+export {
+  StyledContainer,
+  StyledCalendarHeader,
+  StyledCalendarRow,
+  StyledCalendarRowItem,
+  StyledDisabledCalendarRowItem,
+  StyledCalendarDayNameCell,
+  StyledCalendarCell,
+  StyledMark,
+};

package/src/components/Calendar/__tests__/CalendarRowItem.spec.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import CalendarRowItem from '../CalendarRowItem';
+
+describe('CalendarRowItem', () => {
+  it.each`
+    textIntent
+    ${'body'}
+    ${'subdued'}
+  `('renders correctly', ({ textIntent }) => {
+    const { toJSON } = renderWithTheme(
+      <CalendarRowItem
+        date={new Date(2022, 10, 10)}
+        onPress={jest.fn()}
+        textIntent={textIntent}
+        marked
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    isCurrent
+    ${true}
+    ${false}
+  `(
+    'renders correctly when selected, and is current date equal to $current',
+    ({ isCurrent }) => {
+      const { toJSON } = renderWithTheme(
+        <CalendarRowItem
+          date={new Date(2022, 10, 10)}
+          onPress={jest.fn()}
+          marked
+          isSelected
+          isCurrent={isCurrent}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('renders correctly when is current date', () => {
+    const { toJSON } = renderWithTheme(
+      <CalendarRowItem
+        date={new Date(2022, 10, 10)}
+        onPress={jest.fn()}
+        marked
+        isSelected
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders mark when date is marked', () => {
+    const { queryByTestId } = renderWithTheme(
+      <CalendarRowItem
+        date={new Date(2022, 10, 10)}
+        onPress={jest.fn()}
+        marked
+      />
+    );
+
+    expect(queryByTestId('calendar-date-mark')).toBeTruthy();
+  });
+
+  it('not renders mark when date is not marked', () => {
+    const { queryByTestId } = renderWithTheme(
+      <CalendarRowItem date={new Date(2022, 10, 10)} onPress={jest.fn()} />
+    );
+
+    expect(queryByTestId('calendar-date-mark')).toBeNull();
+  });
+});