@transferwise/components 0.0.0-experimental-8e7ab50 → 0.0.0-experimental-72aed20

package/build/types/dateInput/DateInput.d.ts

@@ -22,8 +22,10 @@ export interface DateInputProps {
     onFocus?: (...args: any[])=>any;
     onBlur?: (...args: any[])=>any;
     dayLabel?: string;
+    dayAutoComplete?: string;
     monthLabel?: string;
     yearLabel?: string;
+    yearAutoComplete?: string;
     monthFormat?: DateInputMonthFormat;
     mode?: DateInputMode;
     placeholders?: DateInputPlaceholders;

package/build/types/dateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;gCAkQC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;gCAsQC"}

package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.js"],"names":[],"mappings":";AAuBA,2EAwJC;;;;;;;;;;;;;;;;;;;;;;;;;;QAwBC,gCAAY;QACZ,+BAAW"}
+{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.js"],"names":[],"mappings":";AAuBA,2EAyJC;;;;;;;;;;;;;;;;;;;;;;;;;;QAwBC,gCAAY;QACZ,+BAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-8e7ab50",
+  "version": "0.0.0-experimental-72aed20",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/dateInput/DateInput.js

@@ -18,8 +18,10 @@ const DateInput = ({
   size,
   value,
   dayLabel,
+  dayAutoComplete,
   monthLabel,
   yearLabel,
+  yearAutoComplete,
   monthFormat,
   mode,
   onChange,
@@ -239,6 +241,7 @@ const DateInput = ({
                 <Input
                   type="number"
                   name="day"
+                  autoComplete={dayAutoComplete}
                   value={day || ''}
                   placeholder={placeholders.day}
                   disabled={disabled}
@@ -259,6 +262,7 @@ const DateInput = ({
               <Input
                 type="number"
                 name="year"
+                autoComplete={yearAutoComplete}
                 placeholder={placeholders.year}
                 value={year || ''}
                 disabled={disabled}
@@ -303,8 +307,10 @@ DateInput.propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   dayLabel: PropTypes.string,
+  dayAutoComplete: PropTypes.string,
   monthLabel: PropTypes.string,
   yearLabel: PropTypes.string,
+  yearAutoComplete: PropTypes.string,
   monthFormat: PropTypes.oneOf(['long', 'short']),
   mode: PropTypes.oneOf(['day-month-year', 'month-year']),
   placeholders: PropTypes.shape({
@@ -322,6 +328,8 @@ DateInput.defaultProps = {
   value: null,
   onFocus: null,
   onBlur: null,
+  dayAutoComplete: null,
+  yearAutoComplete: null,
   monthFormat: MonthFormat.LONG,
   mode: DateMode.DAY_MONTH_YEAR,
   id: '',

package/src/dateInput/DateInput.story.tsx

@@ -8,8 +8,10 @@ export default {
   title: 'Forms/DateInput',
   args: {
     dayLabel: 'Day input',
+    dayAutoComplete: 'bday-day',
     monthLabel: 'Month select',
     yearLabel: 'Year input',
+    yearAutoComplete: 'bday-year',
     selectProps: {
       buttonProps: {
         'aria-label': 'Select month',

package/src/phoneNumberInput/PhoneNumberInput.js

@@ -157,6 +157,7 @@ const PhoneNumberInput = (props) => {
         <div className={`input-group input-group-${size}`}>
           <input
             id={id}
+            autoComplete="tel-national"
             name="phoneNumber"
             inputMode="numeric"
             value={internalValue.suffix}