@transferwise/components 0.0.0-experimental-a4458ac → 0.0.0-experimental-210ef2c

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 (45) hide show
  1. package/build/index.esm.js +80 -99
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +80 -99
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/flowNavigation/FlowNavigation.css +1 -1
  7. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +1 -1
  8. package/build/styles/inputs/SelectInput.css +1 -1
  9. package/build/styles/main.css +1 -1
  10. package/build/styles/overlayHeader/OverlayHeader.css +1 -1
  11. package/build/types/common/flowHeader/FlowHeader.d.ts.map +1 -1
  12. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  13. package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts +2 -1
  14. package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map +1 -1
  15. package/build/types/flowNavigation/backButton/BackButton.d.ts +11 -10
  16. package/build/types/flowNavigation/backButton/BackButton.d.ts.map +1 -1
  17. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  18. package/build/types/overlayHeader/OverlayHeader.d.ts.map +1 -1
  19. package/package.json +1 -1
  20. package/src/common/flowHeader/FlowHeader.tsx +3 -9
  21. package/src/common/flowHeader/__snapshots__/FlowHeader.spec.js.snap +2 -2
  22. package/src/flowNavigation/FlowNavigation.css +1 -1
  23. package/src/flowNavigation/FlowNavigation.less +9 -0
  24. package/src/flowNavigation/FlowNavigation.spec.js +3 -3
  25. package/src/flowNavigation/FlowNavigation.story.js +183 -24
  26. package/src/flowNavigation/FlowNavigation.tsx +13 -9
  27. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +11 -14
  28. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +1 -1
  29. package/src/flowNavigation/animatedLabel/AnimatedLabel.less +6 -0
  30. package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js +21 -7
  31. package/src/flowNavigation/animatedLabel/AnimatedLabel.story.js +22 -0
  32. package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx +17 -8
  33. package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap +4 -4
  34. package/src/flowNavigation/backButton/BackButton.js +9 -14
  35. package/src/flowNavigation/backButton/BackButton.spec.js +2 -3
  36. package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap +21 -28
  37. package/src/inputs/SelectInput.css +1 -1
  38. package/src/inputs/SelectInput.less +1 -13
  39. package/src/inputs/SelectInput.tsx +61 -80
  40. package/src/main.css +1 -1
  41. package/src/overlayHeader/OverlayHeader.css +1 -1
  42. package/src/overlayHeader/OverlayHeader.js +2 -4
  43. package/src/overlayHeader/OverlayHeader.less +8 -0
  44. package/src/overlayHeader/OverlayHeader.spec.js +1 -1
  45. package/src/overlayHeader/__snapshots__/OverlayHeader.spec.js.snap +3 -3
package/src/overlayHeader/OverlayHeader.css CHANGED
@@ -1 +1 @@
1
- .np-overlay-header .np-overlay-header__content{max-width:1164px;min-height:97px;min-width:320px;width:100%}.np-theme-personal .np-overlay-header{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral)}.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,.np-theme-personal--dark .np-overlay-header .np-flow-header__left path,.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path{fill:var(--color-interactive-primary)}
1
+ .np-overlay-header .np-overlay-header__content{max-width:1164px;min-height:97px;min-width:320px;width:100%}.np-overlay-header .np-overlay-header__content .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);width:1px}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important;margin-right:var(--size-16)!important}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator,html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-left:16px!important;margin-left:var(--size-16)!important}html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important;margin-right:var(--size-16)!important}.np-theme-personal .np-overlay-header{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral)}.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,.np-theme-personal--dark .np-overlay-header .np-flow-header__left path,.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path{fill:var(--color-interactive-primary)}
package/src/overlayHeader/OverlayHeader.js CHANGED
@@ -1,13 +1,11 @@
1
- import classNames from 'classnames';
2
1
  import PropTypes from 'prop-types';
3
2
 
4
- import { Size } from '../common';
5
3
  import { CloseButton } from '../common/closeButton';
6
4
  import FlowHeader from '../common/flowHeader/FlowHeader';
7
5
  import Logo from '../logo';
8
6
 
9
7
  const OverlayHeader = ({ avatar, onClose, logo }) => {
10
- const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
8
+ const closeButton = onClose && <CloseButton onClick={onClose} />;
11
9
  return (
12
10
  <div className="np-overlay-header d-flex justify-content-center">
13
11
  <FlowHeader
@@ -16,7 +14,7 @@ const OverlayHeader = ({ avatar, onClose, logo }) => {
16
14
  rightContent={
17
15
  <>
18
16
  {avatar}
19
- {avatar && closeButton && <span className={classNames('m-x-1')} />}
17
+ {avatar && closeButton && <span className="separator" />}
20
18
  {closeButton}
21
19
  </>
22
20
  }
package/src/overlayHeader/OverlayHeader.less CHANGED
@@ -7,6 +7,14 @@
7
7
  width: 100%;
8
8
  min-width: 320px;
9
9
  max-width: 1164px;
10
+
11
+ .separator {
12
+ .m-x-2;
13
+
14
+ height: var(--size-32);
15
+ width: 1px;
16
+ background-color: var(--color-border-neutral);
17
+ }
10
18
  }
11
19
 
12
20
  .np-theme-personal & {
package/src/overlayHeader/OverlayHeader.spec.js CHANGED
@@ -20,7 +20,7 @@ describe('OverlayHeader', () => {
20
20
 
21
21
  it('renders separator only if avatar and onClose are provided', () => {
22
22
  const { container } = render(<OverlayHeader {...props} />);
23
- expect(container.querySelector('span.m-x-1')).toBeInTheDocument();
23
+ expect(container.querySelector('.separator')).toBeInTheDocument();
24
24
  });
25
25
 
26
26
  it("doesn't render separator if avatar or onClose are not provided", () => {
package/src/overlayHeader/__snapshots__/OverlayHeader.spec.js.snap CHANGED
@@ -9,7 +9,7 @@ exports[`OverlayHeader renders as expected 1`] = `
9
9
  class="np-flow-header d-flex flex-wrap align-items-center np-overlay-header__content p-a-3"
10
10
  >
11
11
  <div
12
- class="np-flow-header__left d-flex align-items-center justify-content-between"
12
+ class="np-flow-header__left"
13
13
  >
14
14
  <img
15
15
  alt="logo_desktop"
@@ -31,11 +31,11 @@ exports[`OverlayHeader renders as expected 1`] = `
31
31
  </div>
32
32
  </div>
33
33
  <span
34
- class="m-x-1"
34
+ class="separator"
35
35
  />
36
36
  <button
37
37
  aria-label="Close"
38
- class="np-close-button close btn-link text-no-decoration np-close-button--x-large"
38
+ class="np-close-button close btn-link text-no-decoration np-close-button--large"
39
39
  type="button"
40
40
  >
41
41
  <span