@hero-design/rn 7.12.1 → 7.14.0

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

@@ -1,5 +1,82 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SectionHeading allows to customise the icon 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignContent": "center",
+        "backgroundColor": "#dadbde",
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginBottom": 16,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "display": "flex",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginRight": 8,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="home"
+        style={
+          Array [
+            Object {
+              "color": "#de350b",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="danger"
+        themeSize="medium"
+      />
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#7622d7",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="primary"
+    >
+      test demo
+    </Text>
+  </View>
+</View>
+`;
+
 exports[`SectionHeading render icon correctly 1`] = `
 <View
   style={

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import SectionHeading from '..';
+import Icon from '../../Icon';
 
 describe('SectionHeading', () => {
   it('renders correctly', () => {
@@ -36,4 +37,17 @@ describe('SectionHeading', () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it('allows to customise the icon', () => {
+    const wrapper = renderWithTheme(
+      <SectionHeading
+        text="test demo"
+        intent="primary"
+        fontSize="large"
+        icon={<Icon icon="home" intent="danger" />}
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/SectionHeading/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 
 import { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import Icon, { IconName } from '../Icon';
+import Icon, { IconName, IconProps } from '../Icon';
 import Typography from '../Typography';
 import {
   StyledHeading,
@@ -17,7 +17,7 @@ export interface SectionHeadingProps extends ViewProps {
   /**
    * Name of the Icon.
    */
-  icon?: IconName;
+  icon?: IconName | ReactElement<IconProps>;
   /**
    * Right corner content
    */
@@ -70,13 +70,20 @@ const SectionHeading = ({
   <StyledHeading style={style} testID={testID}>
     <StyledWrapper>
       <StyledIconWrapper>
-        {icon && (
-          <Icon
-            icon={icon}
-            size={ICON_SIZE_MAP[fontSize]}
-            intent={ICON_INTENT_MAP[intent]}
-          />
-        )}
+        {icon !== undefined &&
+          (typeof icon === 'string' ? (
+            <Icon
+              icon={icon}
+              size={ICON_SIZE_MAP[fontSize]}
+              intent={ICON_INTENT_MAP[intent]}
+            />
+          ) : (
+            React.cloneElement(icon, {
+              size: ICON_SIZE_MAP[fontSize],
+              intent: ICON_INTENT_MAP[intent],
+              ...icon.props,
+            })
+          ))}
       </StyledIconWrapper>
       <Typography.Text
         fontSize={fontSize}

package/src/components/Tag/StyledTag.tsx

@@ -2,13 +2,23 @@ import { View, Text } from 'react-native';
 import styled from '@emotion/native';
 
 const BACKGROUND_INTENTS = {
+  default: 'defaultBackground',
+  primary: 'primaryBackground',
+  info: 'infoBackground',
   success: 'successBackground',
   warning: 'warningBackground',
   danger: 'dangerBackground',
-  info: 'infoBackground',
+  archived: 'archivedBackground',
 } as const;
 
-type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
+type ThemeIntent =
+  | 'default'
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'archived';
 
 const StyledView = styled(View)<{ themeIntent: ThemeIntent }>(
   ({ themeIntent, theme }) => ({

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

@@ -5,37 +5,64 @@ import Tag from '..';
 describe('Tag', () => {
   it('has success style when intent is success', () => {
     const { getByText, toJSON } = renderWithTheme(
-      <Tag content="APPROVED" intent="success" />
+      <Tag content="SUCCESS" intent="success" />
     );
 
     expect(toJSON()).toMatchSnapshot();
-    expect(getByText('APPROVED')).toBeDefined();
+    expect(getByText('SUCCESS')).toBeDefined();
   });
 
   it('has warning style when intent is warning', () => {
     const { getByText, toJSON } = renderWithTheme(
-      <Tag content="PENDING" intent="warning" />
+      <Tag content="WARNING" intent="warning" />
     );
 
     expect(toJSON()).toMatchSnapshot();
-    expect(getByText('PENDING')).toBeDefined();
+    expect(getByText('WARNING')).toBeDefined();
   });
 
   it('has danger style when intent is danger', () => {
     const { getByText, toJSON } = renderWithTheme(
-      <Tag content="DECLINED" intent="danger" />
+      <Tag content="DANGER" intent="danger" />
     );
 
     expect(toJSON()).toMatchSnapshot();
-    expect(getByText('DECLINED')).toBeDefined();
+    expect(getByText('DANGER')).toBeDefined();
   });
 
   it('has info style when intent is info', () => {
     const { getByText, toJSON } = renderWithTheme(
-      <Tag content="SUBMITTED" intent="info" />
+      <Tag content="INFO" intent="info" />
     );
 
     expect(toJSON()).toMatchSnapshot();
-    expect(getByText('SUBMITTED')).toBeDefined();
+    expect(getByText('INFO')).toBeDefined();
+  });
+
+  it('has default style when intent is default', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="DEFAULT" intent="default" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('DEFAULT')).toBeDefined();
+  });
+
+  it('has archived style when intent is archived', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="ARCHIVED" intent="archived" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('ARCHIVED')).toBeDefined();
+  });
+
+  it('has archived style when intent is primary', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="PRIMARY" intent="primary" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('PRIMARY')).toBeDefined();
   });
 });

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

@@ -1,5 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tag has archived style when intent is archived 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f1f2f3",
+        "borderColor": "#737479",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="archived"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#737479",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="archived"
+  >
+    ARCHIVED
+  </Text>
+</View>
+`;
+
+exports[`Tag has archived style when intent is primary 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f1e9fb",
+        "borderColor": "#7622d7",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#7622d7",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="primary"
+  >
+    PRIMARY
+  </Text>
+</View>
+`;
+
 exports[`Tag has danger style when intent is danger 1`] = `
 <View
   style={
@@ -33,7 +109,45 @@ exports[`Tag has danger style when intent is danger 1`] = `
     }
     themeIntent="danger"
   >
-    DECLINED
+    DANGER
+  </Text>
+</View>
+`;
+
+exports[`Tag has default style when intent is default 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": undefined,
+        "borderColor": "#292a2b",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="default"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="default"
+  >
+    DEFAULT
   </Text>
 </View>
 `;
@@ -71,7 +185,7 @@ exports[`Tag has info style when intent is info 1`] = `
     }
     themeIntent="info"
   >
-    SUBMITTED
+    INFO
   </Text>
 </View>
 `;
@@ -109,7 +223,7 @@ exports[`Tag has success style when intent is success 1`] = `
     }
     themeIntent="success"
   >
-    APPROVED
+    SUCCESS
   </Text>
 </View>
 `;
@@ -147,7 +261,7 @@ exports[`Tag has warning style when intent is warning 1`] = `
     }
     themeIntent="warning"
   >
-    PENDING
+    WARNING
   </Text>
 </View>
 `;

package/src/components/Tag/index.tsx

@@ -10,7 +10,14 @@ interface TagProps extends ViewProps {
   /**
    * Visual intent color to apply to Tag.
    */
-  intent?: 'success' | 'warning' | 'danger' | 'info';
+  intent?:
+    | 'default'
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'archived';
   /**
    * Additional style.
    */
@@ -23,7 +30,7 @@ interface TagProps extends ViewProps {
 
 const Tag = ({
   content,
-  intent = 'info',
+  intent = 'default',
   style,
   testID,
   ...nativeProps

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -732,6 +732,7 @@ exports[`StyledHelperText renders correctly 1`] = `
       },
       Array [
         Object {
+          "color": "#ffffff",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 24,
           "lineHeight": 32,

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -22,7 +22,7 @@ const TimePickerIOS = ({
   style,
   testID,
 }: TimePickerProps) => {
-  const [selectingDate, setSelectingDate] = useState<Date | null>(value);
+  const [selectingDate, setSelectingDate] = useState<Date | undefined>(value);
   const [open, setOpen] = useState(false);
 
   const is12Hour = displayFormat.includes('hh');

package/src/components/TimePicker/types.ts

@@ -8,7 +8,7 @@ export interface TimePickerProps {
   /**
    * Current time value. Must be in correct default format or format provided via format prop.
    */
-  value: Date | null;
+  value?: Date;
   /**
    * Input placeholder. Time format will be used as placeholder if not specified.
    */

package/src/components/Typography/Text/StyledText.tsx

@@ -17,7 +17,8 @@ const StyledText = styled(Text)<{
     | 'success'
     | 'info'
     | 'warning'
-    | 'danger';
+    | 'danger'
+    | 'inverted';
 }>(({ themeFontSize, themeFontWeight, themeIntent, theme }) => {
   const sizeStyles = {
     fontSize: theme.__hd__.typography.fontSizes[themeFontSize],

package/src/components/Typography/Text/__tests__/StyledText.spec.tsx

@@ -52,6 +52,7 @@ describe('StyledText', () => {
     ${'info'}
     ${'warning'}
     ${'danger'}
+    ${'inverted'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <StyledText

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -66,6 +66,28 @@ exports[`StyledText has info intent style 1`] = `
 </Text>
 `;
 
+exports[`StyledText has inverted intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#ffffff",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="inverted"
+>
+  This is a test
+</Text>
+`;
+
 exports[`StyledText has large fontSize style 1`] = `
 <Text
   style={

package/src/components/Typography/Text/index.tsx

@@ -29,7 +29,8 @@ export interface TextProps extends NativeTextProps {
     | 'success'
     | 'info'
     | 'warning'
-    | 'danger';
+    | 'danger'
+    | 'inverted';
   /**
    * Additional style.
    */

package/src/index.ts

@@ -1,18 +1,22 @@
 import theme, { getTheme, ThemeProvider, useTheme } from './theme';
 import { scale } from './utils/scale';
 
+import Accordion from './components/Accordion';
 import Alert from './components/Alert';
 import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import BottomSheet from './components/BottomSheet';
 import Button from './components/Button';
+import Calendar from './components/Calendar';
 import Card from './components/Card';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
 import ContentNavigator from './components/ContentNavigator';
+import DatePicker from './components/DatePicker';
 import Divider from './components/Divider';
 import Drawer from './components/Drawer';
+import Empty from './components/Empty';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
 import List from './components/List';
@@ -30,6 +34,7 @@ import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
+import RichTextEditor from './components/RichTextEditor';
 
 export {
   theme,
@@ -37,18 +42,22 @@ export {
   useTheme,
   scale,
   ThemeProvider,
+  Accordion,
   Alert,
   Avatar,
   Badge,
   BottomNavigation,
   BottomSheet,
   Button,
+  Calendar,
   Card,
   Collapse,
   Checkbox,
   ContentNavigator,
+  DatePicker,
   Divider,
   Drawer,
+  Empty,
   FAB,
   Icon,
   List,
@@ -66,6 +75,7 @@ export {
   Toast,
   Toolbar,
   Typography,
+  RichTextEditor,
 };
 
 export * from './types';