@hero-design/rn 7.19.0 → 7.20.0

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Box from '..';
+
+describe('Box', () => {
+  it('renders content correctly', () => {
+    const { toJSON, getByTestId, getByText } = renderWithTheme(
+      <Box testID="box-test-id">
+        <Text>Box Content</Text>
+      </Box>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('box-test-id')).toBeTruthy();
+    expect(getByText('Box Content')).toBeTruthy();
+  });
+  it.each`
+    color
+    ${'warning'}
+    ${'danger'}
+    ${'success'}
+    ${'backgroundDark'}
+  `('map prop to valid property and correct color from theme', ({ color }) => {
+    const { toJSON } = renderWithTheme(
+      <Box
+        backgroundColor={color}
+        borderColor={color}
+        borderTopColor={color}
+        borderBottomColor={color}
+        borderStartColor={color}
+        borderEndColor={color}
+        borderLeftColor={color}
+        borderRightColor={color}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    color
+    ${'warning'}
+    ${'danger'}
+    ${'success'}
+    ${'backgroundDark'}
+  `(
+    'map prop with shortcut name to valid property and correct color from theme',
+    ({ color }) => {
+      const { toJSON } = renderWithTheme(<Box bgColor={color} />);
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it.each`
+    space
+    ${'large'}
+    ${'medium'}
+    ${'small'}
+    ${'xlarge'}
+  `('map prop to valid property and correct space from theme', ({ space }) => {
+    const { toJSON } = renderWithTheme(
+      <Box
+        margin={space}
+        marginBottom={space}
+        marginEnd={space}
+        marginHorizontal={space}
+        marginLeft={space}
+        marginRight={space}
+        marginStart={space}
+        marginTop={space}
+        marginVertical={space}
+        padding={space}
+        paddingBottom={space}
+        paddingEnd={space}
+        paddingHorizontal={space}
+        paddingLeft={space}
+        paddingRight={space}
+        paddingStart={space}
+        paddingTop={space}
+        paddingVertical={space}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    radii
+    ${'base'}
+    ${'large'}
+    ${'medium'}
+    ${'xlarge'}
+    ${'rounded'}
+  `('map prop to valid property and correct radius from theme', ({ radii }) => {
+    const { toJSON } = renderWithTheme(
+      <Box
+        borderBottomEndRadius={radii}
+        borderBottomLeftRadius={radii}
+        borderBottomRightRadius={radii}
+        borderBottomStartRadius={radii}
+        borderTopEndRadius={radii}
+        borderTopLeftRadius={radii}
+        borderTopRightRadius={radii}
+        borderTopStartRadius={radii}
+        borderRadius={radii}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    width
+    ${'base'}
+    ${'medium'}
+  `(
+    'map prop to valid property and correctborderWidth from theme',
+    ({ width }) => {
+      const { toJSON } = renderWithTheme(
+        <Box
+          borderWidth={width}
+          borderBottomWidth={width}
+          borderTopWidth={width}
+          borderLeftWidth={width}
+          borderRightWidth={width}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('allows flex props', () => {
+    const { toJSON } = renderWithTheme(
+      <Box
+        alignContent="center"
+        alignItems="flex-end"
+        alignSelf="baseline"
+        display="flex"
+        flex={1}
+        flexBasis={20}
+        flexDirection="row"
+        flexGrow={3}
+        flexShrink={5}
+        flexWrap="wrap"
+        justifyContent="space-around"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Box/config.ts

@@ -0,0 +1,201 @@
+const colors = {
+  backgroundColor: {
+    property: 'backgroundColor',
+    scale: 'colors',
+  },
+  bgColor: {
+    property: 'backgroundColor',
+    scale: 'colors',
+  },
+  borderColor: {
+    property: 'borderColor',
+    scale: 'colors',
+  },
+  borderTopColor: {
+    property: 'borderTopColor',
+    scale: 'colors',
+  },
+  borderBottomColor: {
+    property: 'borderBottomColor',
+    scale: 'colors',
+  },
+  borderStartColor: {
+    property: 'borderStartColor',
+    scale: 'colors',
+  },
+  borderEndColor: {
+    property: 'borderEndColor',
+    scale: 'colors',
+  },
+  borderLeftColor: {
+    property: 'borderLeftColor',
+    scale: 'colors',
+  },
+  borderRightColor: {
+    property: 'borderRightColor',
+    scale: 'colors',
+  },
+} as const;
+
+const space = {
+  margin: {
+    property: 'margin',
+    scale: 'space',
+  },
+  marginBottom: {
+    property: 'marginBottom',
+    scale: 'space',
+  },
+  marginEnd: {
+    property: 'marginEnd',
+    scale: 'space',
+  },
+  marginHorizontal: {
+    property: 'marginHorizontal',
+    scale: 'space',
+  },
+  marginLeft: {
+    property: 'marginLeft',
+    scale: 'space',
+  },
+  marginRight: {
+    property: 'marginRight',
+    scale: 'space',
+  },
+  marginStart: {
+    property: 'marginStart',
+    scale: 'space',
+  },
+  marginTop: {
+    property: 'marginTop',
+    scale: 'space',
+  },
+  marginVertical: {
+    property: 'marginVertical',
+    scale: 'space',
+  },
+  padding: {
+    property: 'padding',
+    scale: 'space',
+  },
+  paddingBottom: {
+    property: 'paddingBottom',
+    scale: 'space',
+  },
+  paddingEnd: {
+    property: 'paddingEnd',
+    scale: 'space',
+  },
+  paddingHorizontal: {
+    property: 'paddingHorizontal',
+    scale: 'space',
+  },
+  paddingLeft: {
+    property: 'paddingLeft',
+    scale: 'space',
+  },
+  paddingRight: {
+    property: 'paddingRight',
+    scale: 'space',
+  },
+  paddingStart: {
+    property: 'paddingStart',
+    scale: 'space',
+  },
+  paddingTop: {
+    property: 'paddingTop',
+    scale: 'space',
+  },
+  paddingVertical: {
+    property: 'paddingVertical',
+    scale: 'space',
+  },
+} as const;
+
+const radii = {
+  borderBottomEndRadius: {
+    property: 'borderBottomEndRadius',
+    scale: 'radii',
+  },
+  borderBottomLeftRadius: {
+    property: 'borderBottomLeftRadius',
+    scale: 'radii',
+  },
+  borderBottomRightRadius: {
+    property: 'borderBottomRightRadius',
+    scale: 'radii',
+  },
+  borderBottomStartRadius: {
+    property: 'borderBottomStartRadius',
+    scale: 'radii',
+  },
+  borderTopEndRadius: {
+    property: 'borderTopEndRadius',
+    scale: 'radii',
+  },
+  borderTopLeftRadius: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii',
+  },
+  borderTopRightRadius: {
+    property: 'borderTopRightRadius',
+    scale: 'radii',
+  },
+  borderTopStartRadius: {
+    property: 'borderTopStartRadius',
+    scale: 'radii',
+  },
+  borderRadius: {
+    property: 'borderRadius',
+    scale: 'radii',
+  },
+} as const;
+
+const borderWidths = {
+  borderWidth: {
+    property: 'borderWidth',
+    scale: 'borderWidths',
+  },
+  borderBottomWidth: {
+    property: 'borderBottomWidth',
+    scale: 'borderWidths',
+  },
+  borderTopWidth: {
+    property: 'borderTopWidth',
+    scale: 'borderWidths',
+  },
+  borderLeftWidth: {
+    property: 'borderLeftWidth',
+    scale: 'borderWidths',
+  },
+  borderRightWidth: {
+    property: 'borderRightWidth',
+    scale: 'borderWidths',
+  },
+} as const;
+
+const config = {
+  ...colors,
+  ...space,
+  ...radii,
+  ...borderWidths,
+} as const;
+
+export const flexPropsKey = [
+  'alignContent',
+  'alignItems',
+  'alignSelf',
+  'display',
+  'flex',
+  'flexBasis',
+  'flexDirection',
+  'flexGrow',
+  'flexShrink',
+  'flexWrap',
+  'justifyContent',
+] as const;
+
+export type ConfigType = typeof config;
+export type FlexPropsKeyType = typeof flexPropsKey[number];
+
+export default config;

package/src/components/Box/helpers.ts

@@ -0,0 +1,10 @@
+export const pick = (keys: Array<string>, props: Record<string, any>) =>
+  keys
+    .filter(key => key in props)
+    .reduce(
+      (result, cur) => ({
+        ...result,
+        [cur]: props[cur],
+      }),
+      {}
+    );

package/src/components/Box/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StyledBox } from './StyledBox';
+import type { BoxViewProps, FlexStyleProps, StyleProps } from './types';
+
+export interface BoxProps extends StyleProps, FlexStyleProps, BoxViewProps {}
+
+const Box = ({ children, style, testID, ...otherProps }: BoxProps) => (
+  <StyledBox {...otherProps} style={style} testID={testID}>
+    {children}
+  </StyledBox>
+);
+
+export default Box;

package/src/components/Box/types.ts

@@ -0,0 +1,38 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+
+import { SystemPalette } from '../../theme/global';
+import { BorderWidths, Radii } from '../../theme/global/borders';
+import { Space } from '../../theme/global/space';
+import { ConfigType, FlexPropsKeyType } from './config';
+
+export interface ThemeScale {
+  colors: keyof SystemPalette;
+  space: keyof Space;
+  radii: keyof Radii;
+  borderWidths: keyof BorderWidths;
+}
+
+type ConfigKeyType = keyof ConfigType;
+
+export type StyleProps = {
+  [key in ConfigKeyType]?: ThemeScale[ConfigType[key]['scale']];
+};
+export type FlexStyleProps = Pick<
+  Omit<ViewStyle, keyof StyleProps>,
+  FlexPropsKeyType
+>;
+
+export interface BoxViewProps extends ViewProps {
+  /**
+   * Box's content.
+   */
+  children?: React.ReactNode;
+  /**
+   * Addtional styles.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}

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

@@ -60,23 +60,19 @@ describe('Calendar', () => {
     const onTitlePress = jest.fn();
     const onPreviousPress = jest.fn();
     const onNextPress = jest.fn();
-    const {
-      getByText,
-      queryByText,
-      queryAllByTestId,
-      queryByTestId,
-    } = renderWithTheme(
-      <Calendar
-        value={new Date(2022, 10, 5)}
-        visibleDate={new Date(2022, 10, 5)}
-        onChange={onChange}
-        onTitlePress={onTitlePress}
-        onPreviousPress={onPreviousPress}
-        onNextPress={onNextPress}
-        minDate={new Date(2022, 10, 3)}
-        maxDate={new Date(2022, 10, 27)}
-      />
-    );
+    const { getByText, queryByText, queryAllByTestId, queryByTestId } =
+      renderWithTheme(
+        <Calendar
+          value={new Date(2022, 10, 5)}
+          visibleDate={new Date(2022, 10, 5)}
+          onChange={onChange}
+          onTitlePress={onTitlePress}
+          onPreviousPress={onPreviousPress}
+          onNextPress={onNextPress}
+          minDate={new Date(2022, 10, 3)}
+          maxDate={new Date(2022, 10, 27)}
+        />
+      );
 
     expect(queryAllByTestId('calendar-date-cell')).toHaveLength(25);
     expect(queryAllByTestId('calendar-disabled-cell')).toHaveLength(17);

package/src/components/Card/DataCard/StyledDataCard.tsx

@@ -8,9 +8,15 @@ const StyledDataCard = styled(View)(({ theme }) => ({
 }));
 
 const Indicator = styled(View)<{
-  themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+  themeIntent:
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger'
+    | 'archived'
+    | 'primary';
 }>(({ theme, themeIntent }) => ({
-  backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
+  backgroundColor: theme.__hd__.card.colors[themeIntent],
   width: theme.__hd__.card.sizes.indicatorWidth,
   height: '100%',
 }));

package/src/components/Card/DataCard/__tests__/StyledDataCard.spec.tsx

@@ -12,6 +12,7 @@ describe('StyledDataCard', () => {
 describe('Indicator', () => {
   it.each`
     intent
+    ${'primary'}
     ${'success'}
     ${'info'}
     ${'warning'}

package/src/components/Card/DataCard/__tests__/__snapshots__/StyledDataCard.spec.tsx.snap

@@ -48,6 +48,22 @@ exports[`Indicator renders correctly when intent is info 1`] = `
 />
 `;
 
+exports[`Indicator renders correctly when intent is primary 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#c38cee",
+        "height": "100%",
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+/>
+`;
+
 exports[`Indicator renders correctly when intent is success 1`] = `
 <View
   style={

package/src/components/Card/DataCard/index.tsx

@@ -11,7 +11,7 @@ export interface DataCardProps extends ViewProps {
   /**
    * Visual intent color to apply to card.
    */
-  intent?: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+  intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
   /**
    * Additional style.
    */

package/src/components/Card/StyledCard.tsx

@@ -1,26 +1,19 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
 
-const StyledCard = styled(View)<{ themeVariant: 'basic' | 'data' }>(
-  ({ themeVariant, theme }) => {
-    const sharedStyles = {
-      borderRadius: theme.__hd__.card.radii.default,
-      overflow: 'hidden',
-    } as const;
-
-    const dataStyles = {
-      flexDirection: 'row',
-    };
-
-    switch (themeVariant) {
-      case 'basic':
-        return sharedStyles;
-      case 'data':
-        return { ...sharedStyles, ...dataStyles };
-    }
-  }
-);
+const StyledCard = styled(View)<{
+  themeVariant: 'basic' | 'data';
+  themeIntent?: 'primary' | 'success' | 'warning';
+}>(({ themeVariant, theme, themeIntent }) => ({
+  ...(themeVariant === 'data' && { flexDirection: 'row' }),
+  ...(themeIntent !== undefined && {
+    backgroundColor: theme.__hd__.card.colors[themeIntent],
+  }),
+  borderRadius: theme.__hd__.card.radii.default,
+  overflow: 'hidden',
+}));
 
+// DEPRECATED
 const LeftDataCard = styled(View)(({ theme }) => ({
   backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
   width: theme.__hd__.card.sizes.indicatorWidth,

package/src/components/Card/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,147 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card renders correctly when intent is info 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#b5c3fd",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="info"
+  themeVariant="basic"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
+exports[`Card renders correctly when intent is primary 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#c38cee",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+  themeVariant="basic"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
+exports[`Card renders correctly when intent is success 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#5ace7d",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="success"
+  themeVariant="basic"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
+exports[`Card renders correctly when intent is undefined 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="basic"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Card Content
+  </Text>
+</View>
+`;