@hero-design/rn 7.3.2 → 7.6.0

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import SectionHeading from '..';
+
+describe('SectionHeading', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <SectionHeading testID="sectionHeading" text="test demo" />
+    );
+    expect(wrapper.queryAllByTestId('sectionHeading')).toHaveLength(1);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('render icon correctly', () => {
+    const wrapper = renderWithTheme(
+      <SectionHeading
+        testID="sectionHeading"
+        text="test demo"
+        icon="document"
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('render right children correctly', () => {
+    const wrapper = renderWithTheme(
+      <SectionHeading
+        testID="sectionHeading"
+        text="test demo"
+        rightChildren={<Text>right children</Text>}
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/SectionHeading/index.tsx

@@ -0,0 +1,93 @@
+import React, { ReactElement } from 'react';
+
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
+import {
+  StyledHeading,
+  StyledIconWrapper,
+  StyledWrapper,
+} from './StyledHeading';
+
+export interface SectionHeadingProps extends ViewProps {
+  /**
+   * Heading text.
+   */
+  text: string | ReactElement;
+  /**
+   * Name of the Icon.
+   */
+  icon?: IconName;
+  /**
+   * Right corner content
+   */
+  rightChildren?: ReactElement;
+  /**
+   * Size of the text.
+   */
+  fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Heading's font-weight.
+   */
+  fontWeight?: 'light' | 'regular' | 'semi-bold';
+  /**
+   * Visual intent color to apply to text.
+   */
+  intent?: 'subdued' | 'body' | 'primary';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const ICON_SIZE_MAP = {
+  small: 'small',
+  medium: 'medium',
+  large: 'medium',
+  xlarge: 'large',
+} as const;
+
+const ICON_INTENT_MAP = {
+  body: 'text',
+  subdued: 'text',
+  primary: 'primary',
+} as const;
+
+const SectionHeading = ({
+  icon,
+  text,
+  rightChildren,
+  fontSize = 'large',
+  intent = 'body',
+  fontWeight = 'regular',
+  style,
+  testID,
+}: SectionHeadingProps): ReactElement => (
+  <StyledHeading style={style} testID={testID}>
+    <StyledWrapper>
+      <StyledIconWrapper>
+        {icon && (
+          <Icon
+            icon={icon}
+            size={ICON_SIZE_MAP[fontSize]}
+            intent={ICON_INTENT_MAP[intent]}
+          />
+        )}
+      </StyledIconWrapper>
+      <Typography.Text
+        fontSize={fontSize}
+        intent={intent}
+        fontWeight={fontWeight}
+      >
+        {text}
+      </Typography.Text>
+    </StyledWrapper>
+    {rightChildren}
+  </StyledHeading>
+);
+
+export default SectionHeading;

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

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

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

@@ -0,0 +1,76 @@
+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';
+
+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>
+  );
+}
+
+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>({
+  value,
+  options,
+  onPress,
+  keyExtractor,
+}: Pick<
+  MultiSelectProps<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>
+  );
+}
+
+export default OptionList;

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

@@ -0,0 +1,30 @@
+import { View, TouchableOpacity } from 'react-native';
+import styled from '@emotion/native';
+import Typography from '../../Typography';
+
+const OptionWrapper = styled(TouchableOpacity)<{ themeSelected: boolean }>(
+  ({ theme, themeSelected }) => ({
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: theme.__hd__.select.radii.option,
+    padding: theme.__hd__.select.space.optionPadding,
+    backgroundColor: themeSelected
+      ? theme.__hd__.select.colors.checkedOption
+      : theme.__hd__.select.colors.option,
+  })
+);
+
+const OptionListWrapper = styled(View)(({ theme }) => ({
+  padding: theme.__hd__.select.space.optionListPadding,
+}));
+
+const Spacer = styled(View)(({ theme }) => ({
+  marginTop: theme.__hd__.select.space.optionListSpacing,
+}));
+
+const FooterText = styled(Typography.Text)(({ theme }) => ({
+  color: theme.__hd__.select.colors.footerText,
+}));
+
+export { OptionWrapper, OptionListWrapper, Spacer, FooterText };

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import {
+  OptionWrapper,
+  OptionListWrapper,
+  Spacer,
+  FooterText,
+} from '../StyledMultiSelect';
+
+describe('OptionWrapper', () => {
+  it.each`
+    themeSelected
+    ${true}
+    ${false}
+  `('has selected style: $themeSelected', ({ themeSelected }) => {
+    const { toJSON } = renderWithTheme(
+      <OptionWrapper themeSelected={themeSelected} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('OptionListWrapper', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<OptionListWrapper />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('Spacer', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<Spacer />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('FooterText', () => {
+  it('has correct style', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <FooterText>Confirm</FooterText>
+    );
+
+    expect(getByText('Confirm')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FooterText has correct style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#7622d7",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  Confirm
+</Text>
+`;
+
+exports[`OptionListWrapper has correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "padding": 16,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`OptionWrapper has selected style: 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",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`OptionWrapper has selected style: 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",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`Spacer has correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginTop": 4,
+      },
+      undefined,
+    ]
+  }
+/>
+`;