@hero-design/rn 7.10.2 → 7.12.0

package/src/components/Icon/IconList.ts

@@ -33,6 +33,7 @@ const IconList = [
   'circle-up',
   'circle-warning',
   'clock',
+  'clock-3',
   'cloud-download',
   'cloud-upload',
   'cog',

package/src/components/PinInput/PinCell.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  State,
+  StyledCell,
+  StyledCellText,
+  StyledFilledMask,
+  StyledMask,
+} from './StyledPinInput';
+
+function PinCell({
+  value,
+  secure = true,
+  focused = false,
+  state = 'default',
+}: {
+  value: string;
+  secure?: boolean;
+  focused?: boolean;
+  state?: State;
+}) {
+  return (
+    <StyledCell themeFocused={focused} themeState={state}>
+      {value === '' && <StyledMask themeState={state} testID="pin-cell-mask" />}
+      {value !== '' && secure && (
+        <StyledFilledMask themeState={state} testID="pin-cell-filled-mask" />
+      )}
+      {value !== '' && !secure && (
+        <StyledCellText themeState={state}>{value}</StyledCellText>
+      )}
+    </StyledCell>
+  );
+}
+
+export default PinCell;

package/src/components/PinInput/StyledPinInput.tsx

@@ -0,0 +1,88 @@
+import styled from '@emotion/native';
+import { Text, TextInput, View } from 'react-native';
+
+export const StyledWrapper = styled(View)(() => ({
+  alignContent: 'flex-start',
+}));
+
+export const StyledPinWrapper = styled(View)(() => ({
+  flexDirection: 'row',
+}));
+
+export type State = 'default' | 'disabled' | 'error';
+
+export const StyledCell = styled(View)<{
+  themeFocused: boolean;
+  themeState: State;
+}>(({ theme, themeFocused, themeState }) => ({
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: theme.__hd__.pinInput.sizes.cellWidth,
+  height: theme.__hd__.pinInput.sizes.cellHeight,
+  borderWidth: themeFocused
+    ? theme.__hd__.pinInput.borderWidths.focused
+    : theme.__hd__.pinInput.borderWidths.default,
+  borderRadius: theme.__hd__.pinInput.radii.cell,
+  borderColor: theme.__hd__.pinInput.colors[themeState],
+}));
+
+export const StyledCellText = styled(Text)<{
+  themeState: State;
+}>(({ theme, themeState }) => ({
+  fontFamily: theme.__hd__.pinInput.fonts.cellText,
+  fontSize: theme.__hd__.pinInput.fontSizes.cellText,
+  color: theme.__hd__.pinInput.colors[themeState],
+}));
+
+export const StyledSpacer = styled(View)(({ theme }) => ({
+  marginLeft: theme.__hd__.pinInput.space.spacer,
+}));
+
+export const StyledMask = styled(View)<{
+  themeState: State;
+}>(({ theme, themeState }) => ({
+  width: theme.__hd__.pinInput.sizes.mask,
+  height: theme.__hd__.pinInput.sizes.mask,
+  borderWidth: theme.__hd__.pinInput.borderWidths.default,
+  borderRadius: theme.__hd__.pinInput.radii.mask,
+  borderColor: theme.__hd__.pinInput.colors[themeState],
+}));
+
+export const StyledFilledMask = styled(View)<{
+  themeState: State;
+}>(({ theme, themeState }) => ({
+  width: theme.__hd__.pinInput.sizes.mask,
+  height: theme.__hd__.pinInput.sizes.mask,
+  borderWidth: theme.__hd__.pinInput.borderWidths.default,
+  borderRadius: theme.__hd__.pinInput.radii.mask,
+  borderColor: theme.__hd__.pinInput.colors[themeState],
+  backgroundColor: theme.__hd__.pinInput.colors[themeState],
+}));
+
+export const StyledHiddenInput = styled(TextInput)<{ themePinLength: number }>(
+  ({ themePinLength, theme }) => {
+    const { cellWidth } = theme.__hd__.pinInput.sizes;
+    const spacerWidth = theme.__hd__.pinInput.space.spacer;
+
+    return {
+      position: 'absolute',
+      opacity: 0,
+      left: 0,
+      top: 0,
+      width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
+      height: '100%',
+    };
+  }
+);
+
+export const StyledErrorContainer = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  paddingTop: theme.__hd__.pinInput.space.errorMessagePadding,
+}));
+
+export const StyledErrorMessage = styled(Text)(({ theme }) => ({
+  fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
+  fontSize: theme.__hd__.pinInput.fontSizes.errorMessage,
+  color: theme.__hd__.pinInput.colors.error,
+  paddingLeft: theme.__hd__.pinInput.space.errorMessagePadding,
+}));

package/src/components/PinInput/__tests__/PinCell.spec.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import PinCell from '../PinCell';
+
+describe('PinCell', () => {
+  it('renders mask when value is an empty string', () => {
+    const { getByTestId } = renderWithTheme(<PinCell value="" />);
+
+    expect(getByTestId('pin-cell-mask')).toBeDefined();
+  });
+
+  it('renders text when secure is false', () => {
+    const { queryAllByText } = renderWithTheme(
+      <PinCell value="1" secure={false} />
+    );
+
+    expect(queryAllByText('1')).toHaveLength(1);
+  });
+
+  it('renders filled mask when secure is true', () => {
+    const { getByTestId, queryAllByText } = renderWithTheme(
+      <PinCell value="1" secure />
+    );
+
+    expect(queryAllByText('1')).toHaveLength(0);
+    expect(getByTestId('pin-cell-filled-mask')).toBeDefined();
+  });
+
+  // this covers tests for Styled-Components in PinCell
+  // including StyledCell, StyledMask, StyledCellText, StyledFilledMask
+  it.each`
+    focused  | state
+    ${true}  | ${'default'}
+    ${true}  | ${'error'}
+    ${false} | ${'default'}
+    ${false} | ${'disabled'}
+    ${false} | ${'error'}
+  `(
+    'renders correctly when focused is $focused, state is $state',
+    ({ focused, state }) => {
+      const { toJSON } = renderWithTheme(
+        <PinCell value="1" secure={false} focused={focused} state={state} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});

package/src/components/PinInput/__tests__/StyledPinInput.spec.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledHiddenInput } from '../StyledPinInput';
+
+describe('StyledHiddenInput', () => {
+  it.each`
+    themePinLength | width
+    ${4}           | ${208}
+    ${6}           | ${320}
+    ${8}           | ${432}
+  `(
+    'has correct width when pin length is $themePinLength',
+    ({ themePinLength, width }) => {
+      const wrapper = renderWithTheme(
+        <StyledHiddenInput themePinLength={themePinLength} />
+      );
+
+      expect(wrapper.toJSON()).toHaveStyle({ width });
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    }
+  );
+});

package/src/components/PinInput/__tests__/__snapshots__/PinCell.spec.tsx.snap

@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PinCell renders correctly when focused is false, state is default 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderColor": "#292a2b",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "height": 48,
+        "justifyContent": "center",
+        "width": 40,
+      },
+      undefined,
+    ]
+  }
+  themeFocused={false}
+  themeState="default"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+        },
+        undefined,
+      ]
+    }
+    themeState="default"
+  >
+    1
+  </Text>
+</View>
+`;
+
+exports[`PinCell renders correctly when focused is false, state is disabled 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderColor": "#bfc1c5",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "height": 48,
+        "justifyContent": "center",
+        "width": 40,
+      },
+      undefined,
+    ]
+  }
+  themeFocused={false}
+  themeState="disabled"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#bfc1c5",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+        },
+        undefined,
+      ]
+    }
+    themeState="disabled"
+  >
+    1
+  </Text>
+</View>
+`;
+
+exports[`PinCell renders correctly when focused is false, state is error 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderColor": "#de350b",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "height": 48,
+        "justifyContent": "center",
+        "width": 40,
+      },
+      undefined,
+    ]
+  }
+  themeFocused={false}
+  themeState="error"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#de350b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+        },
+        undefined,
+      ]
+    }
+    themeState="error"
+  >
+    1
+  </Text>
+</View>
+`;
+
+exports[`PinCell renders correctly when focused is true, state is default 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderColor": "#292a2b",
+        "borderRadius": 8,
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "width": 40,
+      },
+      undefined,
+    ]
+  }
+  themeFocused={true}
+  themeState="default"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+        },
+        undefined,
+      ]
+    }
+    themeState="default"
+  >
+    1
+  </Text>
+</View>
+`;
+
+exports[`PinCell renders correctly when focused is true, state is error 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderColor": "#de350b",
+        "borderRadius": 8,
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "width": 40,
+      },
+      undefined,
+    ]
+  }
+  themeFocused={true}
+  themeState="error"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#de350b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+        },
+        undefined,
+      ]
+    }
+    themeState="error"
+  >
+    1
+  </Text>
+</View>
+`;

package/src/components/PinInput/__tests__/__snapshots__/StyledPinInput.spec.tsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledHiddenInput has correct width when pin length is 4 1`] = `
+<TextInput
+  style={
+    Array [
+      Object {
+        "height": "100%",
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "top": 0,
+        "width": 208,
+      },
+      undefined,
+    ]
+  }
+  themePinLength={4}
+/>
+`;
+
+exports[`StyledHiddenInput has correct width when pin length is 6 1`] = `
+<TextInput
+  style={
+    Array [
+      Object {
+        "height": "100%",
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "top": 0,
+        "width": 320,
+      },
+      undefined,
+    ]
+  }
+  themePinLength={6}
+/>
+`;
+
+exports[`StyledHiddenInput has correct width when pin length is 8 1`] = `
+<TextInput
+  style={
+    Array [
+      Object {
+        "height": "100%",
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "top": 0,
+        "width": 432,
+      },
+      undefined,
+    ]
+  }
+  themePinLength={8}
+/>
+`;