@transferwise/components 0.0.0-experimental-6cef500 → 0.0.0-experimental-cb357a8

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 (8) hide show
  1. package/build/index.esm.js +3 -18
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +3 -18
  4. package/build/index.js.map +1 -1
  5. package/build/types/logo/Logo.d.ts.map +1 -1
  6. package/package.json +1 -1
  7. package/src/logo/Logo.js +3 -21
  8. package/src/logo/__snapshots__/Logo.spec.js.snap +78 -30
package/build/types/logo/Logo.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.js"],"names":[],"mappings":";AAmCA;;;;gCAkBC"}
1
+ {"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.js"],"names":[],"mappings":";AAsBA;;;;gCAaC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-6cef500",
3
+ "version": "0.0.0-experimental-cb357a8",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/logo/Logo.js CHANGED
@@ -1,4 +1,3 @@
1
- import { useTheme } from '@wise/components-theming';
2
1
  import classNames from 'classnames';
3
2
  import PropTypes from 'prop-types';
4
3
 
@@ -9,21 +8,9 @@ import { useClientWidth } from '../common/hooks';
9
8
  import { LogoType } from './logoTypes';
10
9
  import { LogoFlagInverse } from './svg/flag-inverse.svg';
11
10
  import { LogoFlag } from './svg/flag.svg';
12
- import { LogoWiseBusinessInverse } from './svg/logo-business-inverse.svg';
13
- import { LogoWiseBusiness } from './svg/logo-business.svg';
14
11
  import { LogoWiseInverse } from './svg/logo-inverse.svg';
15
12
  import { LogoWise } from './svg/logo.svg';
16
13
 
17
- const baseUrl = 'https://wise.com/public-resources/assets/logos/wise/';
18
-
19
- const logoPaths = {
20
- WISE: 'brand_logo.svg',
21
- WISE_BUSINESS: 'brand_logo_business.svg',
22
- WISE_INVERSE: 'brand_logo_inverse.svg',
23
- WISE_BUSINESS_INVERSE: 'brand_logo_business_inverse.svg',
24
- WISE_FLAG: 'brand_flag.svg',
25
- };
26
-
27
14
  const svgPaths = {
28
15
  WISE: LogoWise,
29
16
  WISE_BUSINESS: LogoWise,
@@ -34,21 +21,16 @@ const svgPaths = {
34
21
  };
35
22
 
36
23
  const Logo = ({ className, inverse, type }) => {
37
- const { isModern } = useTheme();
38
24
  const [clientWidth] = useClientWidth({ ref: isServerSide() ? undefined : window });
39
25
  const isSmall = clientWidth < Breakpoint.SMALL;
40
- const path = isSmall ? logoPaths['WISE_FLAG'] : logoPaths[`${type}${inverse ? '_INVERSE' : ''}`];
41
26
  const LogoSvg = isSmall
42
27
  ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`]
43
28
  : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
44
29
 
45
- return isModern ? (
46
- <LogoSvg className="np-logo-svg" />
47
- ) : (
48
- <img
49
- className={classNames('np-logo', className)}
30
+ return (
31
+ <LogoSvg
32
+ className={classNames('np-logo-svg', className)}
50
33
  alt={type === LogoType.WISE ? 'Wise' : 'Wise business'}
51
- src={`${baseUrl}${path}`}
52
34
  />
53
35
  );
54
36
  };
package/src/logo/__snapshots__/Logo.spec.js.snap CHANGED
@@ -1,61 +1,109 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`Logo on mobile renders only fast flag 1`] = `
4
+ <div>
5
+ <svg
6
+ alt="Wise"
7
+ class="np-logo-svg class"
8
+ fill="none"
9
+ height="24"
10
+ width="26"
11
+ xmlns="http://www.w3.org/2000/svg"
12
+ >
13
+ <path
14
+ d="M6.826 7.232 0 15.21h12.188l1.37-3.762H8.335l3.191-3.69.01-.098L9.461 4.09h9.336L11.56 24h4.953L25.25 0H2.676l4.15 7.232Z"
15
+ fill="#163300"
16
+ />
17
+ </svg>
18
+ </div>
19
+ `;
20
+
3
21
  exports[`Logo renders wise business logo 1`] = `
4
22
  <div>
5
- <img
23
+ <svg
6
24
  alt="Wise business"
7
- class="np-logo class"
8
- src="https://wise.com/public-resources/assets/logos/wise/brand_logo_business.svg"
9
- />
25
+ class="np-logo-svg class"
26
+ fill="none"
27
+ height="24"
28
+ width="106"
29
+ xmlns="http://www.w3.org/2000/svg"
30
+ >
31
+ <path
32
+ d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
33
+ fill="#163300"
34
+ />
35
+ </svg>
10
36
  </div>
11
37
  `;
12
38
 
13
39
  exports[`Logo renders wise business logo inversed 1`] = `
14
40
  <div>
15
- <img
41
+ <svg
16
42
  alt="Wise business"
17
- class="np-logo class"
18
- src="https://wise.com/public-resources/assets/logos/wise/brand_logo_business_inverse.svg"
19
- />
43
+ class="np-logo-svg class"
44
+ fill="none"
45
+ height="24"
46
+ width="106"
47
+ xmlns="http://www.w3.org/2000/svg"
48
+ >
49
+ <path
50
+ d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
51
+ fill="#9FE870"
52
+ />
53
+ </svg>
20
54
  </div>
21
55
  `;
22
56
 
23
57
  exports[`Logo renders wise logo 1`] = `
24
58
  <div>
25
- <img
59
+ <svg
26
60
  alt="Wise"
27
- class="np-logo class"
28
- src="https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"
29
- />
61
+ class="np-logo-svg class"
62
+ fill="none"
63
+ height="24"
64
+ width="106"
65
+ xmlns="http://www.w3.org/2000/svg"
66
+ >
67
+ <path
68
+ d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
69
+ fill="#163300"
70
+ />
71
+ </svg>
30
72
  </div>
31
73
  `;
32
74
 
33
75
  exports[`Logo renders wise logo by default 1`] = `
34
76
  <div>
35
- <img
77
+ <svg
36
78
  alt="Wise"
37
- class="np-logo class"
38
- src="https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"
39
- />
79
+ class="np-logo-svg class"
80
+ fill="none"
81
+ height="24"
82
+ width="106"
83
+ xmlns="http://www.w3.org/2000/svg"
84
+ >
85
+ <path
86
+ d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
87
+ fill="#163300"
88
+ />
89
+ </svg>
40
90
  </div>
41
91
  `;
42
92
 
43
93
  exports[`Logo renders wise logo inversed 1`] = `
44
94
  <div>
45
- <img
46
- alt="Wise"
47
- class="np-logo class"
48
- src="https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg"
49
- />
50
- </div>
51
- `;
52
-
53
- exports[`Logo on mobile renders only fast flag 1`] = `
54
- <div>
55
- <img
95
+ <svg
56
96
  alt="Wise"
57
- class="np-logo class"
58
- src="https://wise.com/public-resources/assets/logos/wise/brand_flag.svg"
59
- />
97
+ class="np-logo-svg class"
98
+ fill="none"
99
+ height="24"
100
+ width="106"
101
+ xmlns="http://www.w3.org/2000/svg"
102
+ >
103
+ <path
104
+ d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
105
+ fill="#9FE870"
106
+ />
107
+ </svg>
60
108
  </div>
61
109
  `;