@hero-design/rn 7.6.1-alpha.0 → 7.8.0

package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListItemContainer renders correctly themeSelected false themeDisabled false 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "flex": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`ListItemContainer renders correctly themeSelected false themeDisabled true 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "flex": 1,
+      "flexDirection": "row",
+      "opacity": 0.38,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`ListItemContainer renders correctly themeSelected true themeDisabled false 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#f1e9fb",
+      "flex": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`ListItemContainer renders correctly themeSelected true themeDisabled true 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#f1e9fb",
+      "flex": 1,
+      "flexDirection": "row",
+      "opacity": 0.38,
+      "padding": 16,
+    }
+  }
+/>
+`;

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LeadingStatus renders correctly themeLeadingStausIntent archived 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ccced1",
+        "borderRadius": 999,
+        "marginRight": 8,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themeLeadingStatusIntent="archived"
+/>
+`;
+
+exports[`LeadingStatus renders correctly themeLeadingStausIntent danger 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#de350b",
+        "borderRadius": 999,
+        "marginRight": 8,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themeLeadingStatusIntent="danger"
+/>
+`;
+
+exports[`LeadingStatus renders correctly themeLeadingStausIntent info 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#d1d9fe",
+        "borderRadius": 999,
+        "marginRight": 8,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themeLeadingStatusIntent="info"
+/>
+`;
+
+exports[`LeadingStatus renders correctly themeLeadingStausIntent success 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#017d6d",
+        "borderRadius": 999,
+        "marginRight": 8,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themeLeadingStatusIntent="success"
+/>
+`;
+
+exports[`LeadingStatus renders correctly themeLeadingStausIntent warning 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffbe71",
+        "borderRadius": 999,
+        "marginRight": 8,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themeLeadingStatusIntent="warning"
+/>
+`;
+
+exports[`ListItemContainer renders correctly themeSelected false themeVariant card 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "borderRadius": 8,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+      "shadowColor": "#dadbde",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 1,
+      "shadowRadius": 4,
+    }
+  }
+/>
+`;
+
+exports[`ListItemContainer renders correctly themeSelected false themeVariant full-width 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`ListItemContainer renders correctly themeSelected true themeVariant card 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#f1e9fb",
+      "borderRadius": 8,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+      "shadowColor": "#dadbde",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 1,
+      "shadowRadius": 4,
+    }
+  }
+/>
+`;
+
+exports[`ListItemContainer renders correctly themeSelected true themeVariant full-width 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#f1e9fb",
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;

package/src/components/List/index.tsx

@@ -0,0 +1,14 @@
+import ListItem from './ListItem';
+import BasicListItem from './BasicListItem';
+
+interface ListType {
+  Item: typeof ListItem;
+  BasicItem: typeof BasicListItem;
+}
+
+const List: ListType = {
+  Item: ListItem,
+  BasicItem: BasicListItem,
+};
+
+export default List;

package/src/components/SectionHeading/index.tsx

@@ -35,7 +35,7 @@ export interface SectionHeadingProps extends ViewProps {
    */
   intent?: 'subdued' | 'body' | 'primary';
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**

package/src/components/Select/Footer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { FooterText } from './StyledSelect';
+
+const Footer = ({ label, onPress }: { label: string; onPress: () => void }) => (
+  <TouchableOpacity onPress={onPress}>
+    <FooterText fontSize="large" fontWeight="semi-bold">
+      {label}
+    </FooterText>
+  </TouchableOpacity>
+);
+
+export default Footer;

package/src/components/Select/MultiSelect/Option.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import Typography from '../../Typography';
+import Icon from '../../Icon';
+import { OptionWrapper } from '../StyledSelect';
+
+const Option = ({
+  text,
+  selected,
+  onPress,
+}: {
+  text: string;
+  selected: boolean;
+  onPress: () => void;
+}) => (
+  <OptionWrapper themeSelected={selected} onPress={onPress}>
+    <View style={{ flex: 1 }}>
+      <Typography.Text fontSize="large">{text}</Typography.Text>
+    </View>
+    {selected && <Icon icon="checkmark" size="small" />}
+  </OptionWrapper>
+);
+
+export default Option;

package/src/components/Select/MultiSelect/OptionList.tsx

@@ -1,76 +1,43 @@
 import React from 'react';
-import { View } from 'react-native';
 import { MultiSelectProps } from '.';
-import Icon from '../../Icon';
-import Typography from '../../Typography';
-import { OptionListWrapper, OptionWrapper, Spacer } from './StyledMultiSelect';
-import { OptionType } from './types';
+import { getKey } from '../helpers';
+import Option from './Option';
+import { OptionListWrapper, Spacer } from '../StyledSelect';
 
-function Option({
-  text,
-  selected,
-  onPress,
-}: {
-  text: string;
-  selected: boolean;
-  onPress: () => void;
-}) {
-  return (
-    <OptionWrapper themeSelected={selected} onPress={onPress}>
-      <View style={{ flex: 1 }}>
-        <Typography.Text fontSize="large">{text}</Typography.Text>
-      </View>
-      {selected && <Icon icon="checkmark" size="small" />}
-    </OptionWrapper>
-  );
+interface OptionListProps<T> extends MultiSelectProps<T> {
+  /**
+   * event handler for select
+   */
+  onPress: (value: T[]) => void;
 }
 
-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;
-}
-
-function OptionList<T>({
+const OptionList = <T,>({
   value,
   options,
   onPress,
   keyExtractor,
 }: Pick<
-  MultiSelectProps<T>,
+  OptionListProps<T>,
   'value' | 'options' | 'onPress' | 'keyExtractor'
->) {
-  return (
-    <OptionListWrapper>
-      {options.map((opt, index) => (
-        <React.Fragment key={getKey(opt, index, keyExtractor)}>
-          {index !== 0 && <Spacer />}
-          <Option
-            text={opt.text}
-            selected={value.includes(opt.value)}
-            onPress={() => {
-              if (value.includes(opt.value)) {
-                onPress(value.filter(val => val !== opt.value));
-              } else {
-                onPress([...value, opt.value]);
-              }
-            }}
-          />
-        </React.Fragment>
-      ))}
-    </OptionListWrapper>
-  );
-}
+>) => (
+  <OptionListWrapper>
+    {options.map((opt, index) => (
+      <React.Fragment key={getKey(opt, index, keyExtractor)}>
+        {index !== 0 && <Spacer />}
+        <Option
+          text={opt.text}
+          selected={value.includes(opt.value)}
+          onPress={() => {
+            if (value.includes(opt.value)) {
+              onPress(value.filter(val => val !== opt.value));
+            } else {
+              onPress([...value, opt.value]);
+            }
+          }}
+        />
+      </React.Fragment>
+    ))}
+  </OptionListWrapper>
+);
 
 export default OptionList;

package/src/components/Select/MultiSelect/__tests__/Option.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import Option from '../Option';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+describe('Option', () => {
+  it('renders correctly', () => {
+    const pressFn = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <Option text="testOption" selected onPress={pressFn} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    fireEvent.press(getByText('testOption'));
+    expect(pressFn).toBeCalled();
+  });
+});

package/src/components/Select/MultiSelect/__tests__/OptionList.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import OptionList from '../OptionList';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+const mockOptions = [
+  { text: 'A', value: 'a' },
+  { text: 'B', value: 'b' },
+  { text: 'C', value: 'c' },
+];
+
+describe('OptionList', () => {
+  it('renders correctly', () => {
+    const pressFn = jest.fn();
+    const { toJSON } = renderWithTheme(
+      <OptionList value={['a']} options={mockOptions} onPress={pressFn} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger onPress correctly on select additional value', () => {
+    const pressFn = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <OptionList value={['a']} options={mockOptions} onPress={pressFn} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    fireEvent.press(getByText('B'));
+    expect(pressFn).toBeCalledTimes(1);
+    expect(pressFn).toHaveBeenCalledWith(['a', 'b']);
+  });
+
+  it('trigger onPress correctly on changing selection', () => {
+    const pressFn = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <OptionList value={['a', 'b']} options={mockOptions} onPress={pressFn} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    fireEvent.press(getByText('A'));
+    expect(pressFn).toBeCalledTimes(1);
+    expect(pressFn).toHaveBeenCalledWith(['b']);
+  });
+});

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

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Option renders correctly 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"
+    >
+      testOption
+    </Text>
+  </View>
+  <HeroIcon
+    name="checkmark"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 20,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="text"
+    themeSize="small"
+  />
+</View>
+`;