@transferwise/components 0.0.0-experimental-088517f → 0.0.0-experimental-db52174

package/build/types/dateLookup/DateLookup.d.ts

@@ -5,6 +5,7 @@ export type DateLookupSize = "sm" | "md" | "lg";
 export type DateLookupMonthFormat = "long" | "short";
 
 export interface DateLookupProps {
+    id?: string;
     value?: Date;
     min?: Date;
     max?: Date;

package/build/types/dateLookup/DateLookup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAoBA;IAoBE;;;;;;aAqBC;IApCD,wBAaC;IAjBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;;MAUC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,oBAME;IAEF,kBAME;IAEF,oCA6CE;IAEF,wEAmBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCAoCC;CACF"}
+{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAoBA;IAoBE;;;;;;aAqBC;IApCD,wBAaC;IAjBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;;MAUC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,oBAME;IAEF,kBAME;IAEF,oCA6CE;IAEF,wEAmBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCAqCC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-088517f",
+  "version": "0.0.0-experimental-db52174",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/dateLookup/DateLookup.js

@@ -253,6 +253,7 @@ class DateLookup extends PureComponent {
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
         ref={this.element}
+        id={this.props.id}
         aria-labelledby={ariaLabelledBy}
         className="input-group"
         onKeyDown={this.handleKeyDown}
@@ -277,6 +278,7 @@ class DateLookup extends PureComponent {
 }
 
 DateLookup.propTypes = {
+  id: PropTypes.string,
   value: PropTypes.instanceOf(Date),
   min: PropTypes.instanceOf(Date),
   max: PropTypes.instanceOf(Date),

package/src/dateLookup/DateLookup.story.js

@@ -25,12 +25,14 @@ export const Basic = () => {
   const monthFormat = select('monthFormat', ['long', 'short']);
   const placeholder = text('placeholder', 'placeholder');
   const size = select('size', Object.values(Size), Size.MEDIUM);
+  const id = text('id', 'date-lookup');
 
   const clearable = boolean('clearable', false);
 
   return (
     <DateLookup
       disabled={disabled}
+      id={id}
       label={label}
       min={thePast}
       monthFormat={monthFormat}
@@ -81,6 +83,7 @@ export const RightAligned = () => {
       </div>
       <div className="col-xs-6">
         <DateLookup
+          id="right-aligned"
           disabled={disabled}
           label={label}
           min={new Date(minvalue)}

package/src/dateLookup/DateLookup.view.spec.js

@@ -37,6 +37,7 @@ describe('DateLookup view', () => {
       placeholder: 'Asd..',
       label: 'Date..',
       onChange: jest.fn(),
+      id: '123456',
     };
     component = shallow(<DateLookup {...props} />);
   });
@@ -45,6 +46,10 @@ describe('DateLookup view', () => {
     expect(dateTrigger()).toHaveLength(1);
   });
 
+  it('passes id to the component', () => {
+    expect(component.prop('id')).toBe('123456');
+  });
+
   it('passes props forward to open button', () => {
     expect(+dateTrigger().prop('selectedDate')).toBe(+date);
     expect(dateTrigger().prop('size')).toBe('lg');