@transferwise/components 0.0.0-experimental-baecac9 → 0.0.0-experimental-4554e38

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 (15) hide show
  1. package/build/index.esm.js +3 -3
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +3 -3
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +4 -26
  6. package/build/styles/flowNavigation/FlowNavigation.css +4 -26
  7. package/build/styles/main.css +4 -26
  8. package/build/types/typeahead/util/highlight.d.ts +1 -1
  9. package/build/types/typeahead/util/highlight.d.ts.map +1 -1
  10. package/package.json +4 -4
  11. package/src/dateLookup/DateLookup.story.js +12 -8
  12. package/src/flowNavigation/FlowNavigation.css +4 -26
  13. package/src/main.css +4 -26
  14. package/src/typeahead/typeaheadOption/TypeaheadOption.js +3 -3
  15. package/src/typeahead/util/highlight.js +1 -1
package/build/main.css CHANGED
@@ -2047,19 +2047,9 @@ button.np-option {
2047
2047
  max-width: 1164px;
2048
2048
  }
2049
2049
  .np-flow-navigation__stepper {
2050
- padding-bottom: 0 !important;
2051
- }
2052
- [dir="rtl"] .np-flow-navigation__stepper {
2053
- padding-right: 0 !important;
2054
- }
2055
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
2056
- padding-left: 0 !important;
2057
- }
2058
- [dir="rtl"] .np-flow-navigation__stepper {
2059
- padding-left: 0 !important;
2060
- }
2061
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
2062
- padding-right: 0 !important;
2050
+ padding-bottom: 0px !important;
2051
+ padding-left: 0px !important;
2052
+ padding-right: 0px !important;
2063
2053
  }
2064
2054
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
2065
2055
  display: none;
@@ -2071,23 +2061,11 @@ html:not([dir="rtl"]) .np-flow-navigation__stepper {
2071
2061
  height: auto;
2072
2062
  }
2073
2063
  .np-flow-navigation--sm .np-flow-navigation__stepper {
2074
- min-height: 56px;
2075
- }
2076
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2077
- padding-right: 24px !important;
2078
- padding-right: var(--size-24) !important;
2079
- }
2080
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2081
2064
  padding-left: 24px !important;
2082
2065
  padding-left: var(--size-24) !important;
2083
- }
2084
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2085
- padding-left: 24px !important;
2086
- padding-left: var(--size-24) !important;
2087
- }
2088
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2089
2066
  padding-right: 24px !important;
2090
2067
  padding-right: var(--size-24) !important;
2068
+ min-height: 56px;
2091
2069
  }
2092
2070
  .np-flow-navigation--lg .np-flow-navigation__stepper {
2093
2071
  max-width: 562px;
package/build/styles/flowNavigation/FlowNavigation.css CHANGED
@@ -13,19 +13,9 @@
13
13
  max-width: 1164px;
14
14
  }
15
15
  .np-flow-navigation__stepper {
16
- padding-bottom: 0 !important;
17
- }
18
- [dir="rtl"] .np-flow-navigation__stepper {
19
- padding-right: 0 !important;
20
- }
21
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
22
- padding-left: 0 !important;
23
- }
24
- [dir="rtl"] .np-flow-navigation__stepper {
25
- padding-left: 0 !important;
26
- }
27
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
28
- padding-right: 0 !important;
16
+ padding-bottom: 0px !important;
17
+ padding-left: 0px !important;
18
+ padding-right: 0px !important;
29
19
  }
30
20
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
31
21
  display: none;
@@ -37,23 +27,11 @@ html:not([dir="rtl"]) .np-flow-navigation__stepper {
37
27
  height: auto;
38
28
  }
39
29
  .np-flow-navigation--sm .np-flow-navigation__stepper {
40
- min-height: 56px;
41
- }
42
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
43
- padding-right: 24px !important;
44
- padding-right: var(--size-24) !important;
45
- }
46
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
47
30
  padding-left: 24px !important;
48
31
  padding-left: var(--size-24) !important;
49
- }
50
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
51
- padding-left: 24px !important;
52
- padding-left: var(--size-24) !important;
53
- }
54
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
55
32
  padding-right: 24px !important;
56
33
  padding-right: var(--size-24) !important;
34
+ min-height: 56px;
57
35
  }
58
36
  .np-flow-navigation--lg .np-flow-navigation__stepper {
59
37
  max-width: 562px;
package/build/styles/main.css CHANGED
@@ -2047,19 +2047,9 @@ button.np-option {
2047
2047
  max-width: 1164px;
2048
2048
  }
2049
2049
  .np-flow-navigation__stepper {
2050
- padding-bottom: 0 !important;
2051
- }
2052
- [dir="rtl"] .np-flow-navigation__stepper {
2053
- padding-right: 0 !important;
2054
- }
2055
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
2056
- padding-left: 0 !important;
2057
- }
2058
- [dir="rtl"] .np-flow-navigation__stepper {
2059
- padding-left: 0 !important;
2060
- }
2061
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
2062
- padding-right: 0 !important;
2050
+ padding-bottom: 0px !important;
2051
+ padding-left: 0px !important;
2052
+ padding-right: 0px !important;
2063
2053
  }
2064
2054
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
2065
2055
  display: none;
@@ -2071,23 +2061,11 @@ html:not([dir="rtl"]) .np-flow-navigation__stepper {
2071
2061
  height: auto;
2072
2062
  }
2073
2063
  .np-flow-navigation--sm .np-flow-navigation__stepper {
2074
- min-height: 56px;
2075
- }
2076
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2077
- padding-right: 24px !important;
2078
- padding-right: var(--size-24) !important;
2079
- }
2080
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2081
2064
  padding-left: 24px !important;
2082
2065
  padding-left: var(--size-24) !important;
2083
- }
2084
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2085
- padding-left: 24px !important;
2086
- padding-left: var(--size-24) !important;
2087
- }
2088
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2089
2066
  padding-right: 24px !important;
2090
2067
  padding-right: var(--size-24) !important;
2068
+ min-height: 56px;
2091
2069
  }
2092
2070
  .np-flow-navigation--lg .np-flow-navigation__stepper {
2093
2071
  max-width: 562px;
package/build/types/typeahead/util/highlight.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export default function highlight(value: any, query: any): any;
1
+ export default function hightlight(value: any, query: any): any;
2
2
  //# sourceMappingURL=highlight.d.ts.map
package/build/types/typeahead/util/highlight.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.js"],"names":[],"mappings":"AAAA,+DAeC"}
1
+ {"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.js"],"names":[],"mappings":"AAAA,gEAeC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-baecac9",
3
+ "version": "0.0.0-experimental-4554e38",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -77,13 +77,13 @@
77
77
  "react-intl": "^5.10.0",
78
78
  "rollup": "^3.28.1",
79
79
  "storybook": "^7.4.5",
80
- "@transferwise/less-config": "0.0.0-experimental-baecac9",
81
- "@transferwise/neptune-css": "0.0.0-experimental-baecac9",
80
+ "@transferwise/less-config": "3.1.0",
81
+ "@transferwise/neptune-css": "0.0.0-experimental-4554e38",
82
82
  "@wise/components-theming": "0.8.4"
83
83
  },
84
84
  "peerDependencies": {
85
85
  "@transferwise/icons": "^3.7.0",
86
- "@transferwise/neptune-css": "0.0.0-experimental-baecac9",
86
+ "@transferwise/neptune-css": "0.0.0-experimental-4554e38",
87
87
  "@wise/art": "^2.7.0",
88
88
  "@wise/components-theming": "^0.8.4",
89
89
  "currency-flags": "^4.0.2",
package/src/dateLookup/DateLookup.story.js CHANGED
@@ -11,13 +11,14 @@ export default {
11
11
  title: 'Forms/DateLookup',
12
12
  };
13
13
 
14
- let theFuture = new Date();
15
- theFuture.setDate(theFuture.getDate() + 10);
16
- let thePast = new Date();
17
- thePast.setDate(thePast.getDate() - 10);
14
+ const epoch = new Date('2011-01-01');
15
+ let theFuture = new Date(epoch);
16
+ theFuture.setUTCDate(epoch.getUTCDate() + 10);
17
+ let thePast = new Date(epoch);
18
+ thePast.setUTCDate(epoch.getUTCDate() - 10);
18
19
 
19
20
  export const Basic = () => {
20
- const [value, setValue] = useState(null);
21
+ const [value, setValue] = useState(epoch);
21
22
  const disabled = boolean('disabled', false);
22
23
  const label = text('label', 'label');
23
24
  const monthFormat = select('monthFormat', ['long', 'short']);
@@ -36,7 +37,10 @@ export const Basic = () => {
36
37
  size={size}
37
38
  value={value}
38
39
  clearable={clearable}
39
- onChange={(v) => setValue(v)}
40
+ onChange={(v) => {
41
+ console.log(v);
42
+ setValue(v);
43
+ }}
40
44
  />
41
45
  );
42
46
  };
@@ -54,7 +58,7 @@ export const Basic400Zoom = storyConfig(
54
58
  );
55
59
 
56
60
  export const RightAligned = () => {
57
- const [value, setValue] = useState(null);
61
+ const [value, setValue] = useState(epoch);
58
62
  const disabled = boolean('disabled', false);
59
63
  const label = text('label', 'label');
60
64
  const monthFormat = select('monthFormat', ['long', 'short']);
@@ -78,8 +82,8 @@ export const RightAligned = () => {
78
82
  <DateLookup
79
83
  disabled={disabled}
80
84
  label={label}
81
- max={new Date(maxvalue)}
82
85
  min={new Date(minvalue)}
86
+ max={new Date(maxvalue)}
83
87
  monthFormat={monthFormat}
84
88
  placeholder={placeholder}
85
89
  size={size}
package/src/flowNavigation/FlowNavigation.css CHANGED
@@ -13,19 +13,9 @@
13
13
  max-width: 1164px;
14
14
  }
15
15
  .np-flow-navigation__stepper {
16
- padding-bottom: 0 !important;
17
- }
18
- [dir="rtl"] .np-flow-navigation__stepper {
19
- padding-right: 0 !important;
20
- }
21
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
22
- padding-left: 0 !important;
23
- }
24
- [dir="rtl"] .np-flow-navigation__stepper {
25
- padding-left: 0 !important;
26
- }
27
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
28
- padding-right: 0 !important;
16
+ padding-bottom: 0px !important;
17
+ padding-left: 0px !important;
18
+ padding-right: 0px !important;
29
19
  }
30
20
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
31
21
  display: none;
@@ -37,23 +27,11 @@ html:not([dir="rtl"]) .np-flow-navigation__stepper {
37
27
  height: auto;
38
28
  }
39
29
  .np-flow-navigation--sm .np-flow-navigation__stepper {
40
- min-height: 56px;
41
- }
42
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
43
- padding-right: 24px !important;
44
- padding-right: var(--size-24) !important;
45
- }
46
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
47
30
  padding-left: 24px !important;
48
31
  padding-left: var(--size-24) !important;
49
- }
50
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
51
- padding-left: 24px !important;
52
- padding-left: var(--size-24) !important;
53
- }
54
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
55
32
  padding-right: 24px !important;
56
33
  padding-right: var(--size-24) !important;
34
+ min-height: 56px;
57
35
  }
58
36
  .np-flow-navigation--lg .np-flow-navigation__stepper {
59
37
  max-width: 562px;
package/src/main.css CHANGED
@@ -2047,19 +2047,9 @@ button.np-option {
2047
2047
  max-width: 1164px;
2048
2048
  }
2049
2049
  .np-flow-navigation__stepper {
2050
- padding-bottom: 0 !important;
2051
- }
2052
- [dir="rtl"] .np-flow-navigation__stepper {
2053
- padding-right: 0 !important;
2054
- }
2055
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
2056
- padding-left: 0 !important;
2057
- }
2058
- [dir="rtl"] .np-flow-navigation__stepper {
2059
- padding-left: 0 !important;
2060
- }
2061
- html:not([dir="rtl"]) .np-flow-navigation__stepper {
2062
- padding-right: 0 !important;
2050
+ padding-bottom: 0px !important;
2051
+ padding-left: 0px !important;
2052
+ padding-right: 0px !important;
2063
2053
  }
2064
2054
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
2065
2055
  display: none;
@@ -2071,23 +2061,11 @@ html:not([dir="rtl"]) .np-flow-navigation__stepper {
2071
2061
  height: auto;
2072
2062
  }
2073
2063
  .np-flow-navigation--sm .np-flow-navigation__stepper {
2074
- min-height: 56px;
2075
- }
2076
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2077
- padding-right: 24px !important;
2078
- padding-right: var(--size-24) !important;
2079
- }
2080
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2081
2064
  padding-left: 24px !important;
2082
2065
  padding-left: var(--size-24) !important;
2083
- }
2084
- [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2085
- padding-left: 24px !important;
2086
- padding-left: var(--size-24) !important;
2087
- }
2088
- html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2089
2066
  padding-right: 24px !important;
2090
2067
  padding-right: var(--size-24) !important;
2068
+ min-height: 56px;
2091
2069
  }
2092
2070
  .np-flow-navigation--lg .np-flow-navigation__stepper {
2093
2071
  max-width: 562px;
package/src/typeahead/typeaheadOption/TypeaheadOption.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import classNames from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
4
 
5
- import highlight from '../util/highlight';
5
+ import hightlight from '../util/highlight';
6
6
 
7
7
  const Option = (props) => {
8
8
  const { option, selected, onClick, query } = props;
@@ -17,10 +17,10 @@ const Option = (props) => {
17
17
  })}
18
18
  >
19
19
  <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
20
- <span>{highlight(label, query)}</span>
20
+ <span>{hightlight(label, query)}</span>
21
21
  {note && <span className="np-text-body-default m-l-1">{note}</span>}
22
22
  {secondary && (
23
- <span className="np-text-body-default text-ellipsis">{highlight(secondary, query)}</span>
23
+ <span className="np-text-body-default text-ellipsis">{hightlight(secondary, query)}</span>
24
24
  )}
25
25
  </a>
26
26
  </li>
package/src/typeahead/util/highlight.js CHANGED
@@ -1,4 +1,4 @@
1
- export default function highlight(value, query) {
1
+ export default function hightlight(value, query) {
2
2
  if (value && query) {
3
3
  const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
4
4
  const highlightEnd = highlightStart + query.trim().length;