@transferwise/components 0.0.0-experimental-63cdd4d → 0.0.0-experimental-84d7c27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/build/index.esm.js +140 -159
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +140 -159
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/actionButton/ActionButton.css +1 -1
  7. package/build/styles/chips/Chip.css +1 -1
  8. package/build/styles/circularButton/CircularButton.css +1 -1
  9. package/build/styles/common/Option/Option.css +1 -1
  10. package/build/styles/common/bottomSheet/BottomSheet.css +1 -1
  11. package/build/styles/common/closeButton/CloseButton.css +1 -1
  12. package/build/styles/dateLookup/DateLookup.css +1 -1
  13. package/build/styles/drawer/Drawer.css +1 -1
  14. package/build/styles/flowNavigation/FlowNavigation.css +1 -1
  15. package/build/styles/main.css +1 -1
  16. package/build/styles/overlayHeader/OverlayHeader.css +1 -1
  17. package/build/styles/statusIcon/StatusIcon.css +1 -1
  18. package/build/styles/summary/Summary.css +1 -1
  19. package/build/styles/typeahead/Typeahead.css +1 -1
  20. package/build/styles/uploadInput/UploadInput.css +1 -1
  21. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  22. package/build/types/common/propsValues/breakpoint.d.ts +0 -1
  23. package/build/types/common/propsValues/breakpoint.d.ts.map +1 -1
  24. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  25. package/build/types/dateLookup/dateHeader/DateHeader.d.ts.map +1 -1
  26. package/build/types/test-utils/story-config.d.ts +1 -11
  27. package/build/types/test-utils/story-config.d.ts.map +1 -1
  28. package/package.json +3 -3
  29. package/src/actionButton/ActionButton.css +1 -1
  30. package/src/actionButton/ActionButton.less +1 -5
  31. package/src/chips/Chip.css +1 -1
  32. package/src/chips/Chip.less +0 -8
  33. package/src/circularButton/CircularButton.css +1 -1
  34. package/src/circularButton/CircularButton.less +3 -9
  35. package/src/common/Option/Option.css +1 -1
  36. package/src/common/Option/Option.less +0 -6
  37. package/src/common/bottomSheet/BottomSheet.css +1 -1
  38. package/src/common/bottomSheet/BottomSheet.less +1 -1
  39. package/src/common/bottomSheet/BottomSheet.spec.tsx +1 -4
  40. package/src/common/bottomSheet/BottomSheet.story.tsx +0 -4
  41. package/src/common/bottomSheet/BottomSheet.tsx +1 -10
  42. package/src/common/closeButton/CloseButton.css +1 -1
  43. package/src/common/closeButton/CloseButton.less +0 -12
  44. package/src/common/hooks/useMedia.spec.ts +17 -3
  45. package/src/common/propsValues/breakpoint.ts +0 -1
  46. package/src/dateLookup/DateLookup.css +1 -1
  47. package/src/dateLookup/DateLookup.js +3 -7
  48. package/src/dateLookup/DateLookup.keyboardEvents.spec.js +0 -3
  49. package/src/dateLookup/DateLookup.less +0 -6
  50. package/src/dateLookup/DateLookup.story.js +1 -6
  51. package/src/dateLookup/DateLookup.testingLibrary.spec.js +1 -3
  52. package/src/dateLookup/DateLookup.view.spec.js +0 -4
  53. package/src/dateLookup/dateHeader/DateHeader.js +2 -4
  54. package/src/drawer/Drawer.css +1 -1
  55. package/src/drawer/Drawer.less +0 -6
  56. package/src/drawer/Drawer.story.js +2 -42
  57. package/src/flowNavigation/FlowNavigation.css +1 -1
  58. package/src/inputs/SelectInput.tsx +1 -1
  59. package/src/main.css +1 -1
  60. package/src/modal/Modal.tsx +2 -2
  61. package/src/overlayHeader/OverlayHeader.css +1 -1
  62. package/src/popover/Popover.spec.js +1 -3
  63. package/src/select/Select.spec.js +9 -6
  64. package/src/statusIcon/StatusIcon.css +1 -1
  65. package/src/statusIcon/StatusIcon.less +0 -10
  66. package/src/summary/Summary.css +1 -1
  67. package/src/summary/Summary.less +1 -1
  68. package/src/test-utils/index.js +0 -1
  69. package/src/test-utils/story-config.ts +7 -21
  70. package/src/typeahead/Typeahead.css +1 -1
  71. package/src/typeahead/Typeahead.less +6 -5
  72. package/src/uploadInput/UploadInput.css +1 -1
  73. package/src/uploadInput/UploadInput.less +1 -5
  74. package/build/types/test-utils/window-mock.d.ts +0 -2
  75. package/build/types/test-utils/window-mock.d.ts.map +0 -1
  76. package/src/test-utils/window-mock.ts +0 -19
@@ -1,10 +1,8 @@
1
- import classNames from 'classnames';
2
1
  import PropTypes from 'prop-types';
3
2
  import { useIntl } from 'react-intl';
4
3
 
5
4
  import Chevron from '../../chevron';
6
5
  import { Position, Size, Typography } from '../../common';
7
- import { useLayout } from '../../common/hooks';
8
6
  import Title from '../../title';
9
7
  import messages from '../DateLookup.messages';
10
8
 
@@ -12,9 +10,9 @@ const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold
12
10
 
13
11
  const DateHeader = ({ label, onLabelClick, onPreviousClick, onNextClick, dateMode }) => {
14
12
  const intl = useIntl();
15
- const { isMobile } = useLayout();
13
+
16
14
  return (
17
- <div className={classNames('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>
15
+ <div className="text-xs-center p-t-1 p-b-2 clearfix">
18
16
  <div className="pull-left-single-direction">
19
17
  <button
20
18
  type="button"
@@ -1 +1 @@
1
- .np-drawer{display:flex;flex-direction:column;height:100vh;height:100dvh;justify-content:space-between;max-height:100vh;max-height:100dvh;max-width:600px;width:100vw}@media (max-width:770px){.np-drawer{max-width:unset}}.np-drawer .np-drawer-header{display:flex;flex-wrap:nowrap;min-height:56px;min-height:var(--size-56);padding:24px 16px;padding:var(--size-24) var(--size-16)}.np-theme-personal .np-drawer .np-drawer-header{padding:24px;padding:var(--size-24)}@media (max-width:385px){.np-theme-personal .np-drawer .np-drawer-header{padding:16px;padding:var(--size-16)}}.np-theme-personal .np-drawer .np-drawer-header .np-text-title-body{margin-bottom:0;padding-top:0}.np-theme-personal .np-drawer .np-drawer-header .np-close-button{margin-bottom:-8px;margin-bottom:calc(var(--size-8)*-1);margin-right:-8px;margin-right:calc(var(--size-8)*-1);margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-drawer .np-drawer-header.np-drawer-header--withborder{box-shadow:inset 0 -1px 0 0 #e2e6e8}.np-theme-personal .np-drawer .np-drawer-header.np-drawer-header--withborder{box-shadow:inset 0 -1px 0 0 #0000001a;box-shadow:inset 0 -1px 0 0 var(--color-border-neutral)}.np-drawer .np-drawer-header .np-text-title-body{font-size:1.125rem;font-size:var(--font-size-18);letter-spacing:-.01em;letter-spacing:var(--letter-spacing-negative-xs);line-height:1.5rem;line-height:var(--line-height-24);margin-bottom:-2px;margin-right:16px;margin-right:var(--size-16);padding-top:2px}.np-drawer .np-drawer-header .np-close-button{margin-left:auto}.np-drawer .np-drawer-header .tw-icon{fill:#00b9ff;cursor:pointer;display:block}.np-drawer .np-drawer-content{flex:1;overflow-y:auto}.np-drawer .np-drawer-content,.np-drawer .np-drawer-footer{padding:16px;padding:var(--size-16)}.np-drawer .np-drawer-footer{box-shadow:inset 0 1px 0 0 #e2e6e8}.np-theme-personal .np-drawer .np-drawer-footer{box-shadow:inset 0 1px 0 0 #0000001a;box-shadow:inset 0 1px 0 0 var(--color-border-neutral)}@media (min-width:768px){.np-drawer .np-drawer-header{padding:32px 24px;padding:var(--size-32) var(--size-24)}.np-drawer .np-drawer-content,.np-drawer .np-drawer-footer,.np-theme-personal .np-drawer .np-drawer-header{padding:24px;padding:var(--size-24)}}
1
+ .np-drawer{display:flex;flex-direction:column;height:100vh;height:100dvh;justify-content:space-between;max-height:100vh;max-height:100dvh;max-width:600px;width:100vw}.np-drawer .np-drawer-header{display:flex;flex-wrap:nowrap;min-height:56px;min-height:var(--size-56);padding:24px 16px;padding:var(--size-24) var(--size-16)}.np-theme-personal .np-drawer .np-drawer-header{padding:24px;padding:var(--size-24)}.np-theme-personal .np-drawer .np-drawer-header .np-text-title-body{margin-bottom:0;padding-top:0}.np-theme-personal .np-drawer .np-drawer-header .np-close-button{margin-bottom:-8px;margin-bottom:calc(var(--size-8)*-1);margin-right:-8px;margin-right:calc(var(--size-8)*-1);margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-drawer .np-drawer-header.np-drawer-header--withborder{box-shadow:inset 0 -1px 0 0 #e2e6e8}.np-theme-personal .np-drawer .np-drawer-header.np-drawer-header--withborder{box-shadow:inset 0 -1px 0 0 #0000001a;box-shadow:inset 0 -1px 0 0 var(--color-border-neutral)}.np-drawer .np-drawer-header .np-text-title-body{font-size:1.125rem;font-size:var(--font-size-18);letter-spacing:-.01em;letter-spacing:var(--letter-spacing-negative-xs);line-height:1.5rem;line-height:var(--line-height-24);margin-bottom:-2px;margin-right:16px;margin-right:var(--size-16);padding-top:2px}.np-drawer .np-drawer-header .np-close-button{margin-left:auto}.np-drawer .np-drawer-header .tw-icon{fill:#00b9ff;cursor:pointer;display:block}.np-drawer .np-drawer-content{flex:1;overflow-y:auto}.np-drawer .np-drawer-content,.np-drawer .np-drawer-footer{padding:16px;padding:var(--size-16)}.np-drawer .np-drawer-footer{box-shadow:inset 0 1px 0 0 #e2e6e8}.np-theme-personal .np-drawer .np-drawer-footer{box-shadow:inset 0 1px 0 0 #0000001a;box-shadow:inset 0 1px 0 0 var(--color-border-neutral)}@media (min-width:768px){.np-drawer .np-drawer-header{padding:32px 24px;padding:var(--size-32) var(--size-24)}.np-drawer .np-drawer-content,.np-drawer .np-drawer-footer,.np-theme-personal .np-drawer .np-drawer-header{padding:24px;padding:var(--size-24)}}
@@ -7,9 +7,6 @@
7
7
  justify-content: space-between;
8
8
  width: 100vw;
9
9
  max-width: 600px;
10
- @media (max-width: 770px) {
11
- max-width: unset;
12
- }
13
10
  height: 100vh;
14
11
  height: 100dvh;
15
12
  max-height: 100vh;
@@ -23,9 +20,6 @@
23
20
 
24
21
  .np-theme-personal & {
25
22
  padding: var(--size-24);
26
- @media (--screen-400-zoom) {
27
- padding: var(--size-16);
28
- }
29
23
 
30
24
  .np-text-title-body {
31
25
  padding-top: 0;
@@ -2,8 +2,7 @@ import { select } from '@storybook/addon-knobs';
2
2
  import { useState } from 'react';
3
3
 
4
4
  import { Section, Button, Input, Modal } from '..';
5
- import { Position, Priority } from '../common';
6
- import { storyConfig } from '../test-utils';
5
+ import { Position } from '../common';
7
6
 
8
7
  import Drawer from './Drawer';
9
8
 
@@ -41,10 +40,7 @@ export const Basic = () => {
41
40
  footerContent={
42
41
  <>
43
42
  <Button block onClick={() => {}}>
44
- Action 1
45
- </Button>
46
- <Button block priority={Priority.SECONDARY} onClick={() => {}}>
47
- Action 2
43
+ Action
48
44
  </Button>
49
45
  </>
50
46
  }
@@ -81,42 +77,6 @@ export const Basic = () => {
81
77
  onClose={handleModalClose}
82
78
  />
83
79
  </Section>
84
- <p>
85
- I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
86
- charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
87
- ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
88
- stumptown try-hard chartreuse.
89
- </p>
90
- <p>
91
- I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
92
- charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
93
- ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
94
- stumptown try-hard chartreuse.
95
- </p>
96
- <p>
97
- I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
98
- charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
99
- ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
100
- stumptown try-hard chartreuse.
101
- </p>
102
- <p>
103
- I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
104
- charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
105
- ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
106
- stumptown try-hard chartreuse.
107
- </p>
108
- <p>
109
- I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
110
- charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
111
- ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
112
- stumptown try-hard chartreuse.
113
- </p>
114
- <p>
115
- I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
116
- charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
117
- ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
118
- stumptown try-hard chartreuse.
119
- </p>
120
80
  </Drawer>
121
81
  </>
122
82
  );
@@ -1 +1 @@
1
- .np-flow-navigation{min-height:97px;width:100%}.np-flow-navigation--border-bottom{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);min-height:96px}.np-flow-navigation__content{max-width:1164px;min-width:320px;width:100%}.np-flow-navigation__stepper{padding-bottom:0!important}[dir=rtl] .np-flow-navigation__stepper{padding-right:0!important}[dir=rtl] .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation__stepper{padding-left:0!important}html:not([dir=rtl]) .np-flow-navigation__stepper{padding-right:0!important}.np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps{display:none}.np-flow-navigation--xs-max .np-flow-navigation__stepper .progress{margin-bottom:0}.np-flow-navigation--xs-max .np-animated-label{height:auto}.np-flow-navigation--sm .np-flow-navigation__stepper{min-height:56px}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important;padding-right:var(--size-24)!important}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-left:24px!important;padding-left:var(--size-24)!important}html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important;padding-right:var(--size-24)!important}.np-flow-navigation--lg .np-flow-navigation__stepper{max-width:562px}.np-flow-navigation--lg .np-flow-header__left,.np-flow-navigation--lg .np-flow-header__right{width:180px}.np-flow-navigation .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);min-width:1px;width:1px}[dir=rtl] .np-flow-navigation .separator{margin-right:16px!important;margin-right:var(--size-16)!important}[dir=rtl] .np-flow-navigation .separator,html:not([dir=rtl]) .np-flow-navigation .separator{margin-left:16px!important;margin-left:var(--size-16)!important}html:not([dir=rtl]) .np-flow-navigation .separator{margin-right:16px!important;margin-right:var(--size-16)!important}.np-flow-navigation--hidden{visibility:hidden}.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path,.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path{fill:var(--color-interactive-primary)}
1
+ .np-flow-navigation{min-height:97px;width:100%}.np-flow-navigation--border-bottom{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);min-height:96px}.np-flow-navigation__content{max-width:1164px;min-width:320px;width:100%}.np-flow-navigation__stepper{padding-bottom:0!important}[dir=rtl] .np-flow-navigation__stepper{padding-right:0!important}[dir=rtl] .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation__stepper{padding-left:0!important}html:not([dir=rtl]) .np-flow-navigation__stepper{padding-right:0!important}.np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps{display:none}.np-flow-navigation--xs-max .np-flow-navigation__stepper .progress{margin-bottom:0}.np-flow-navigation--xs-max .np-animated-label{height:auto}.np-flow-navigation--sm .np-flow-navigation__stepper{min-height:56px}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-left:24px!important}html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important}.np-flow-navigation--lg .np-flow-navigation__stepper{max-width:562px}.np-flow-navigation--lg .np-flow-header__left,.np-flow-navigation--lg .np-flow-header__right{width:180px}.np-flow-navigation .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);min-width:1px;width:1px}[dir=rtl] .np-flow-navigation .separator{margin-right:16px!important}[dir=rtl] .np-flow-navigation .separator,html:not([dir=rtl]) .np-flow-navigation .separator{margin-left:16px!important}html:not([dir=rtl]) .np-flow-navigation .separator{margin-right:16px!important}.np-flow-navigation--hidden{visibility:hidden}.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path,.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path{fill:var(--color-interactive-primary)}
@@ -21,7 +21,7 @@ import { ButtonInput } from './_ButtonInput';
21
21
  import { Popover } from './_Popover';
22
22
 
23
23
  function searchableString(value: string) {
24
- return value.trim().replace(/\s+/gu, ' ').toLowerCase();
24
+ return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
25
25
  }
26
26
 
27
27
  function inferSearchableStrings(value: unknown) {