@hero-design/rn 7.3.2 → 7.6.0

package/src/components/Icon/IconList.ts

@@ -13,6 +13,7 @@ const IconList = [
   'cake',
   'calendar-clock',
   'calendar',
+  'candy-box-menu',
   'carat-down-small',
   'carat-down',
   'carat-left',
@@ -124,6 +125,7 @@ const IconList = [
   'stopwatch',
   'suitcase',
   'survey',
+  'swag',
   'switch',
   'tag',
   'target',
@@ -259,6 +261,7 @@ const IconList = [
   'print-outlined',
   'qr-code-outlined',
   're-assign',
+  'redeem',
   'refresh',
   'remove',
   'reply-outlined',
@@ -279,6 +282,7 @@ const IconList = [
   'star-outlined',
   'stopwatch-outlined',
   'strikethrough',
+  'suitcase-outlined',
   'survey-outlined',
   'switch-outlined',
   'sync',
@@ -290,9 +294,13 @@ const IconList = [
   'underline',
   'unlock-outlined',
   'upload-outlined',
+  'user-circle-outlined',
   'user-outlined',
+  'user-rectangle-outlined',
   'video-1-outlined',
   'video-2-outlined',
+  'wallet-outlined',
+  'warning',
 ] as const;
 
 export default IconList;

package/src/components/Icon/index.tsx

@@ -13,7 +13,14 @@ export interface IconProps {
   /**
    * Intent of the Icon.
    */
-  intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+  intent?:
+    | 'text'
+    | 'primary'
+    | 'info'
+    | 'danger'
+    | 'success'
+    | 'warning'
+    | 'disabled-text';
   /**
    * Size of the Icon.
    */

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,51 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+import Typography from '../Typography';
+import { Circle, InnerCircle, Wrapper } from './StyledRadio';
+
+export interface RadioProps {
+  /**
+   * Whether the radio is checked.
+   */
+  checked?: boolean;
+  /**
+   * Press event handler.
+   */
+  onPress: () => void;
+  /**
+   * Radio text.
+   */
+  text: string;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Radio = ({
+  text,
+  checked = false,
+  onPress,
+  style,
+  testID,
+}: RadioProps): ReactElement => (
+  <Wrapper
+    onPress={onPress}
+    themeChecked={checked}
+    style={style}
+    testID={testID}
+  >
+    <View style={{ flex: 1 }}>
+      <Typography.Text fontSize="large">{text}</Typography.Text>
+    </View>
+    <Circle themeChecked={checked}>
+      {checked && <InnerCircle testID={`${text}-selected-circle`} />}
+    </Circle>
+  </Wrapper>
+);
+
+export default Radio;

package/src/components/Radio/RadioGroup.tsx

@@ -0,0 +1,74 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+import Radio from './Radio';
+import { Spacer } from './StyledRadio';
+import { OptionType } from './types';
+
+export interface RadioGroupProps<T> {
+  /**
+   * An array of radio options to be selected.
+   */
+  options: OptionType<T>[];
+  /**
+   * Radio input value.
+   */
+  value: T;
+  /**
+   * Press event handler receiving selected radio's value.
+   */
+  onPress: (value: T) => void;
+  /**
+   * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
+   * The default extractor checks option.key, and then falls back to using the index, like React does.
+   */
+  keyExtractor?: (option: OptionType<T>, index?: number) => string;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+function getKey<T>(
+  option: OptionType<T>,
+  index: number,
+  keyExtractor?: (opt: OptionType<T>, i?: number) => string
+) {
+  let key: React.Key = '';
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+}
+
+const RadioGroup = <T,>({
+  value,
+  onPress,
+  options,
+  keyExtractor,
+  style,
+  testID,
+}: RadioGroupProps<T>): ReactElement => (
+  <View style={style} testID={testID}>
+    {options.map((option, index) => (
+      <React.Fragment key={getKey(option, index, keyExtractor)}>
+        {index !== 0 && <Spacer />}
+        <Radio
+          text={option.text}
+          checked={option.value === value}
+          onPress={() => onPress(option.value)}
+        />
+      </React.Fragment>
+    ))}
+  </View>
+);
+
+export default RadioGroup;

package/src/components/Radio/StyledRadio.tsx

@@ -0,0 +1,42 @@
+import { View, TouchableOpacity } from 'react-native';
+import styled from '@emotion/native';
+
+const Wrapper = styled(TouchableOpacity)<{ themeChecked: boolean }>(
+  ({ theme, themeChecked }) => ({
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: theme.__hd__.radio.radii.wrapper,
+    padding: theme.__hd__.radio.space.wrapperPadding,
+    backgroundColor: themeChecked
+      ? theme.__hd__.radio.colors.checkedWrapper
+      : theme.__hd__.radio.colors.wrapper,
+  })
+);
+
+const Circle = styled(View)<{ themeChecked: boolean }>(
+  ({ theme, themeChecked }) => ({
+    height: theme.__hd__.radio.sizes.circle,
+    width: theme.__hd__.radio.sizes.circle,
+    borderRadius: theme.radii.rounded,
+    borderWidth: theme.__hd__.radio.borderWidths.circle,
+    borderColor: themeChecked
+      ? theme.__hd__.radio.colors.checkedCircle
+      : theme.__hd__.radio.colors.circle,
+    alignItems: 'center',
+    justifyContent: 'center',
+  })
+);
+
+const InnerCircle = styled(View)(({ theme }) => ({
+  height: theme.__hd__.radio.sizes.innerCircle,
+  width: theme.__hd__.radio.sizes.innerCircle,
+  borderRadius: theme.radii.rounded,
+  backgroundColor: theme.__hd__.radio.colors.checkedCircle,
+}));
+
+const Spacer = styled(View)(({ theme }) => ({
+  marginTop: theme.__hd__.radio.space.groupTopMargin,
+}));
+
+export { Wrapper, Circle, InnerCircle, Spacer };

package/src/components/Radio/__tests__/Radio.spec.tsx

@@ -0,0 +1,38 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Radio from '../Radio';
+
+describe('rendering', () => {
+  it('renders correctly when checked', () => {
+    const { getByText, queryAllByTestId, toJSON } = renderWithTheme(
+      <Radio text="Option A" onPress={jest.fn} checked />
+    );
+
+    expect(getByText('Option A')).toBeDefined();
+    expect(queryAllByTestId('Option A-selected-circle')).toHaveLength(1);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when not checked', () => {
+    const { getByText, toJSON, queryAllByTestId } = renderWithTheme(
+      <Radio text="Option A" onPress={jest.fn} checked={false} />
+    );
+
+    expect(getByText('Option A')).toBeDefined();
+    expect(queryAllByTestId('Option A-selected-circle')).toHaveLength(0);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('behavior', () => {
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Radio text="Option A" onPress={onPress} checked />
+    );
+
+    fireEvent.press(getByText('Option A'));
+    expect(onPress).toBeCalledTimes(1);
+  });
+});

package/src/components/Radio/__tests__/RadioGroup.spec.tsx

@@ -0,0 +1,36 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import RadioGroup from '../RadioGroup';
+
+const options = [
+  { text: 'Everything', value: 'everything' },
+  { text: 'Direct mentions only', value: 'direct_mentions' },
+  { text: 'Nothing', value: 'nothing' },
+];
+
+describe('rendering', () => {
+  it('renders correctly', () => {
+    const { getByText, toJSON, queryAllByTestId } = renderWithTheme(
+      <RadioGroup options={options} value="nothing" onPress={jest.fn()} />
+    );
+
+    expect(getByText('Everything')).toBeDefined();
+    expect(getByText('Direct mentions only')).toBeDefined();
+    expect(getByText('Nothing')).toBeDefined();
+    expect(queryAllByTestId('Nothing-selected-circle')).toHaveLength(1);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('behavior', () => {
+  it('calls onPress with correct params', () => {
+    const onPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <RadioGroup options={options} value="nothing" onPress={onPress} />
+    );
+
+    fireEvent.press(getByText('Everything'));
+    expect(onPress).toBeCalledWith('everything');
+  });
+});

package/src/components/Radio/__tests__/StyledRadio.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { Wrapper, Circle, InnerCircle, Spacer } from '../StyledRadio';
+
+describe('Wrapper', () => {
+  it.each`
+    themeChecked
+    ${true}
+    ${false}
+  `('has checked style: $themeChecked', ({ themeChecked }) => {
+    const { toJSON } = renderWithTheme(<Wrapper themeChecked={themeChecked} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('Circle', () => {
+  it.each`
+    themeChecked
+    ${true}
+    ${false}
+  `('has checked style: $themeChecked', ({ themeChecked }) => {
+    const { toJSON } = renderWithTheme(<Circle themeChecked={themeChecked} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('InnerCircle', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<InnerCircle />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('Spacer', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<Spacer />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap

@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly when checked 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#f1e9fb",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Option A
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#7622d7",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "height": 20,
+          "justifyContent": "center",
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+    themeChecked={true}
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 999,
+            "height": 10,
+            "width": 10,
+          },
+          undefined,
+        ]
+      }
+      testID="Option A-selected-circle"
+    />
+  </View>
+</View>
+`;
+
+exports[`rendering renders correctly when not checked 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Option A
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#000000",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "height": 20,
+          "justifyContent": "center",
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+    themeChecked={false}
+  />
+</View>
+`;