@hero-design/rn 7.14.1 → 7.14.3-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.14.1",
+  "version": "7.14.3-alpha",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.14.1",
+    "@hero-design/colors": "7.14.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"

package/rollup.config.js

@@ -25,6 +25,7 @@ export default {
   ],
   external: [
     'react',
+    'react-dom',
     'react-native',
     'react-native-safe-area-context',
     '@react-native-community/datetimepicker',

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -15,6 +15,7 @@ const DatePickerAndroid = ({
   disabled = false,
   required,
   error,
+  helpText,
   style,
   testID,
 }: DatePickerProps) => {
@@ -34,6 +35,7 @@ const DatePickerAndroid = ({
           disabled={disabled}
           error={error}
           required={required}
+          helpText={helpText}
           style={style}
           testID={testID}
         />

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -19,6 +19,7 @@ const DatePickerIOS = ({
   disabled = false,
   required,
   error,
+  helpText,
   style,
   testID,
 }: DatePickerProps) => {
@@ -38,6 +39,7 @@ const DatePickerIOS = ({
           disabled={disabled}
           error={error}
           required={required}
+          helpText={helpText}
           testID={testID}
           style={style}
         />

package/src/components/DatePicker/__tests__/DatePickerAndroid.spec.tsx

@@ -36,4 +36,18 @@ describe('DatePickerAndroid', () => {
 
     expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
   });
+
+  it('renders correct help text', () => {
+    const { getByText } = renderWithTheme(
+      <DatePickerAndroid
+        value={new Date('December 21, 1995')}
+        label="Start date"
+        confirmLabel="Confirm"
+        helpText="This is help text"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByText('This is help text')).toBeTruthy();
+  });
 });

package/src/components/DatePicker/__tests__/DatePickerIOS.spec.tsx

@@ -43,4 +43,18 @@ describe('DatePickerIOS', () => {
 
     expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
   });
+
+  it('renders correct help text', () => {
+    const { getByText } = renderWithTheme(
+      <DatePickerIOS
+        value={new Date('December 21, 1995')}
+        label="Start date"
+        confirmLabel="Confirm"
+        helpText="This is help text"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByText('This is help text')).toBeTruthy();
+  });
 });

package/src/components/DatePicker/types.ts

@@ -38,6 +38,10 @@ export interface DatePickerProps {
    *  Whether the value is required, if true, an asterisk will be appended to the label.
    */
   required?: boolean;
+  /**
+   * The helper text to display.
+   */
+  helpText?: string;
   /**
    * Addtional style.
    */