@transferwise/components 0.0.0-experimental-3e282e9 → 0.0.0-experimental-c0c64e3

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

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

package/build/types/dateLookup/tableLink/TableLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,SAAS,EAAE,MAAM,YAAY,CAAC;AAInD,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,SAAS,CAAC;CACjB;;;;AA4DD,wBAAqC"}
+{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,SAAS,EAAE,MAAM,YAAY,CAAC;AAInD,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,SAAS,CAAC;CACjB;;;;AA8DD,wBAAqC"}

package/build/types/info/Info.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SizeSmall, SizeLarge } from '../common';
+import { Position, SizeSmall, SizeLarge } from '../common';
 export interface Props {
     'aria-label': string;
     /**
@@ -23,7 +23,11 @@ export interface Props {
      * Title displayed inside a Popover a Modal
      */
     title?: React.ReactNode;
+    /**
+     * Prferred placement of the Popover, does not apply to Modal
+     */
+    preferredPlacement?: Position;
 }
-declare const Info: ({ className, content, onClick, presentation, size, title, "aria-label": ariaLabel, }: Props) => import("react").JSX.Element;
+declare const Info: ({ className, content, onClick, presentation, size, title, "aria-label": ariaLabel, preferredPlacement, }: Props) => import("react").JSX.Element;
 export default Info;
 //# sourceMappingURL=Info.d.ts.map

package/build/types/info/Info.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAkB,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAMjE,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,yFAQP,KAAK,gCAgDP,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAMjE,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,QAAQ,CAAC;CAC/B;AAED,QAAA,MAAM,IAAI,6GASP,KAAK,gCAgDP,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-3e282e9",
+  "version": "0.0.0-experimental-c0c64e3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -78,7 +78,7 @@
     "rollup": "^3.28.1",
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.0.6",
-    "@transferwise/neptune-css": "14.7.0",
+    "@transferwise/neptune-css": "14.7.1",
     "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {

package/src/body/Body.story.tsx

@@ -30,6 +30,9 @@ export const Basic = () => {
           Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
           internationalen <b>Bericht der Welt auf</b>.
         </Body>
+        <Body as="p" type={Typography.BODY_LARGE_BOLD}>
+          ↑ ↓ {'<-'} {'->'}
+        </Body>
       </div>
       <div>
         <Title type={Typography.TITLE_SUBSECTION}>Body Default</Title>
@@ -49,6 +52,9 @@ export const Basic = () => {
           Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
           internationalen <b>Bericht der Welt auf</b>.
         </Body>
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          ↑ ↓ {'<-'} {'->'}
+        </Body>
       </div>
       <div>
         <Title type={Typography.TITLE_SUBSECTION}>Body Default Bold</Title>
@@ -68,6 +74,9 @@ export const Basic = () => {
           Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
           internationalen <b>Bericht der Welt auf</b>.
         </Body>
+        <Body as="p" type={Typography.BODY_DEFAULT_BOLD}>
+          ↑ ↓ {'<-'} {'->'}
+        </Body>
       </div>
       <div>
         <Title type={Typography.TITLE_SUBSECTION}>Body Large</Title>
@@ -87,6 +96,9 @@ export const Basic = () => {
           Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
           internationalen <b>Bericht der Welt auf</b>.
         </Body>
+        <Body as="p" type={Typography.BODY_LARGE}>
+          ↑ ↓ {'<-'} {'->'}
+        </Body>
       </div>
       <Title type={Typography.TITLE_SUBSECTION}>
         Copy Example without <code>{'<Body />'}</code> component
@@ -94,12 +106,12 @@ export const Basic = () => {
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus
         accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus,
-        modi possimus soluta. Et iusto odio autem debitis!
+        modi possimus soluta. Et iusto odio autem debitis! ↑ ↓ {'<-'} {'->'}
       </p>
       <Title type={Typography.TITLE_SUBSECTION}>Copy Example without any HTML tag</Title>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus
       accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus,
-      modi possimus soluta. Et iusto odio autem debitis!
+      modi possimus soluta. Et iusto odio autem debitis! ↑ ↓ {'<-'} {'->'}
     </>
   );
 };

package/src/dateLookup/DateLookup.js

@@ -28,6 +28,7 @@ class DateLookup extends PureComponent {
     super(props);
     this.state = {
       selectedDate: getStartOfDay(props.value),
+      originalDate: null,
       min: getStartOfDay(props.min),
       max: getStartOfDay(props.max),
       viewMonth: (props.value || new Date()).getMonth(),
@@ -92,7 +93,7 @@ class DateLookup extends PureComponent {
   };
 
   handleKeyDown = (event) => {
-    const { open } = this.state;
+    const { open, originalDate } = this.state;
     switch (event.keyCode) {
       case KeyCodes.LEFT:
         if (open) {
@@ -127,19 +128,20 @@ class DateLookup extends PureComponent {
         event.preventDefault();
         break;
       case KeyCodes.ESCAPE:
+        this.props.onChange(originalDate);
         this.close();
         event.preventDefault();
         break;
-      // case KeyCodes.ENTER:
-      //   this.handleSelectedDateUpdate(this.state.hoveredDate);
-      //   break;
       default:
         break;
     }
   };
 
   adjustDate = (daysToAdd, monthsToAdd, yearsToAdd) => {
-    const { selectedDate, min, max, mode } = this.state;
+    const { selectedDate, min, max, mode, originalDate } = this.state;
+    if (originalDate === null) {
+      this.setState({ originalDate: selectedDate });
+    }
     let date;
     if (selectedDate) {
       date = new Date(

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

@@ -80,6 +80,12 @@ describe('DateLookup (keyboard events)', () => {
       pressKey(KEY_CODES.DOWN);
       onChangeCalledWith(new Date(2019, 0, 3));
     });
+
+    it('resets to original date when escape key is pressed', () => {
+      pressKey(KEY_CODES.LEFT);
+      pressKey(KEY_CODES.ESCAPE);
+      onChangeCalledWith(date);
+    });
   });
 
   describe('when open and in month mode', () => {

package/src/dateLookup/tableLink/TableLink.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { useEffect, useRef } from 'react';
 import { injectIntl, IntlShape } from 'react-intl';
 
@@ -59,9 +60,11 @@ const TableLink = ({
       <button
         ref={buttonRef}
         type="button"
-        className={`tw-date-lookup-${type}-option ${active ? 'active' : ''} ${
-          today ? 'today' : ''
-        } np-text-body-default-bold`}
+        className={classNames(
+          `tw-date-lookup-${type}-option np-text-body-default-bold`,
+          { active: !!active },
+          { today: !!today },
+        )}
         disabled={disabled}
         tabIndex={autofocus ? 0 : -1}
         aria-label={calculateAriaLabel()}

package/src/info/Info.tsx

@@ -31,6 +31,10 @@ export interface Props {
    * Title displayed inside a Popover a Modal
    */
   title?: React.ReactNode;
+  /**
+   * Prferred placement of the Popover, does not apply to Modal
+   */
+  preferredPlacement?: Position;
 }
 
 const Info = ({
@@ -41,6 +45,7 @@ const Info = ({
   size = Size.SMALL,
   title = undefined,
   'aria-label': ariaLabel,
+  preferredPlacement = Position.BOTTOM,
 }: Props) => {
   const [open, setOpen] = useState(false);
 
@@ -75,7 +80,7 @@ const Info = ({
           <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />
         </>
       ) : (
-        <Popover content={content} preferredPlacement={Position.BOTTOM} title={title}>
+        <Popover content={content} preferredPlacement={preferredPlacement} title={title}>
           <button
             type="button"
             {...buttonProps}