@transferwise/components 45.26.2 → 45.27.0

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 (21) hide show
  1. package/build/index.esm.js +19 -17
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +19 -17
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/logo/Logo.css +1 -1
  7. package/build/styles/main.css +1 -1
  8. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  9. package/build/types/inputs/SearchInput.d.ts +2 -1
  10. package/build/types/inputs/SearchInput.d.ts.map +1 -1
  11. package/build/types/logo/Logo.d.ts.map +1 -1
  12. package/package.json +1 -1
  13. package/src/flowNavigation/FlowNavigation.tsx +12 -2
  14. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +12 -8
  15. package/src/inputs/SearchInput.story.tsx +3 -1
  16. package/src/inputs/SearchInput.tsx +13 -5
  17. package/src/logo/Logo.css +1 -1
  18. package/src/logo/Logo.js +9 -18
  19. package/src/logo/Logo.less +21 -2
  20. package/src/logo/__snapshots__/Logo.spec.js.snap +168 -72
  21. package/src/main.css +1 -1
package/build/types/flowNavigation/FlowNavigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAMnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBAqErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAMnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBA+ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/build/types/inputs/SearchInput.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Size } from '../common';
2
3
  import { Merge } from '../utils';
3
4
  export interface SearchInputProps extends Merge<React.ComponentPropsWithRef<'input'>, {
4
- size?: 'sm' | 'md';
5
+ size?: Size.SMALL | Size.MEDIUM;
5
6
  shape?: 'rectangle' | 'pill';
6
7
  'aria-invalid'?: boolean;
7
8
  }> {
package/build/types/inputs/SearchInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SearchInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,WAAW,gBACf,SAAQ,KAAK,CACX,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC;IACE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,WAAW,4HAgBtB,CAAC"}
1
+ {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SearchInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,WAAW,gBACf,SAAQ,KAAK,CACX,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC;IACE,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,WAAW,4HAuBtB,CAAC"}
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":";AAsBA;;;;uCAkBC"}
1
+ {"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.js"],"names":[],"mappings":";AAkBA;;;;gCAaC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "45.26.2",
3
+ "version": "45.27.0",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/flowNavigation/FlowNavigation.tsx CHANGED
@@ -69,7 +69,7 @@ const FlowNavigation = ({
69
69
  {isSmall && displayGoBack ? (
70
70
  <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />
71
71
  ) : (
72
- logo
72
+ <div className="np-flow-header__left">{logo}</div>
73
73
  )}
74
74
  {isSmall && (
75
75
  <AnimatedLabel
@@ -81,7 +81,17 @@ const FlowNavigation = ({
81
81
  </>
82
82
  }
83
83
  rightContent={
84
- <div className={classNames('d-flex', 'align-items-center', { 'order-2': isLarge })}>
84
+ <div
85
+ className={classNames(
86
+ 'np-flow-header__right',
87
+ 'd-flex',
88
+ 'align-items-center',
89
+ 'justify-content-end',
90
+ {
91
+ 'order-2': isLarge,
92
+ },
93
+ )}
94
+ >
85
95
  {newAvatar}
86
96
  {newAvatar && closeButton && <span className="m-x-1" />}
87
97
  {closeButton}
package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap CHANGED
@@ -18,7 +18,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
18
18
  AnimatedLabel
19
19
  </div>
20
20
  <div
21
- class="d-flex align-items-center"
21
+ class="np-flow-header__right d-flex align-items-center justify-content-end"
22
22
  >
23
23
  <div
24
24
  class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -120,14 +120,18 @@ exports[`FlowNavigation renders as expected 1`] = `
120
120
  <div
121
121
  class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--sm np-flow-navigation--lg"
122
122
  >
123
- <img
124
- alt="logo"
125
- height="24"
126
- src="logo.svg"
127
- width="138"
128
- />
129
123
  <div
130
- class="d-flex align-items-center order-2"
124
+ class="np-flow-header__left"
125
+ >
126
+ <img
127
+ alt="logo"
128
+ height="24"
129
+ src="logo.svg"
130
+ width="138"
131
+ />
132
+ </div>
133
+ <div
134
+ class="np-flow-header__right d-flex align-items-center justify-content-end order-2"
131
135
  >
132
136
  <div
133
137
  class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
package/src/inputs/SearchInput.story.tsx CHANGED
@@ -1,6 +1,8 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import { useState } from 'react';
3
3
 
4
+ import { Size } from '../common';
5
+
4
6
  import { SearchInput } from './SearchInput';
5
7
 
6
8
  export default {
@@ -13,7 +15,7 @@ type Story = StoryObj<typeof SearchInput>;
13
15
  export const Basic: Story = {
14
16
  render: (args) => <SearchInputBasic {...args} />,
15
17
  args: {
16
- size: 'md',
18
+ size: Size.MEDIUM,
17
19
  shape: 'pill',
18
20
  disabled: false,
19
21
  },
package/src/inputs/SearchInput.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Search } from '@transferwise/icons';
2
2
  import { forwardRef } from 'react';
3
3
 
4
+ import { Size } from '../common';
4
5
  import { Merge } from '../utils';
5
6
 
6
7
  import { Input } from './Input';
@@ -10,26 +11,33 @@ export interface SearchInputProps
10
11
  extends Merge<
11
12
  React.ComponentPropsWithRef<'input'>,
12
13
  {
13
- size?: 'sm' | 'md';
14
+ size?: Size.SMALL | Size.MEDIUM;
14
15
  shape?: 'rectangle' | 'pill';
15
16
  'aria-invalid'?: boolean;
16
17
  }
17
18
  > {}
18
19
 
19
20
  export const SearchInput = forwardRef(function SearchInput(
20
- { shape = 'pill', disabled, className, ...restProps }: SearchInputProps,
21
+ { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,
21
22
  ref: React.ForwardedRef<HTMLInputElement>,
22
23
  ) {
23
24
  return (
24
25
  <InputGroup
25
26
  addonStart={{
26
- content: <Search size={24} />,
27
- initialContentWidth: 24,
27
+ content: <Search size={size === Size.SMALL ? 16 : 24} />,
28
+ initialContentWidth: size === Size.SMALL ? 16 : 24,
28
29
  }}
29
30
  disabled={disabled}
30
31
  className={className}
31
32
  >
32
- <Input ref={ref} role="searchbox" inputMode="search" shape={shape} {...restProps} />
33
+ <Input
34
+ ref={ref}
35
+ role="searchbox"
36
+ inputMode="search"
37
+ shape={shape}
38
+ size={size}
39
+ {...restProps}
40
+ />
33
41
  </InputGroup>
34
42
  );
35
43
  });
package/src/logo/Logo.css CHANGED
@@ -1 +1 @@
1
- .np-logo{height:24px;height:var(--size-24)}.np-theme-personal--bright-green .np-logo-svg path,.np-theme-personal--forest-green .np-logo-svg path{fill:var(--color-interactive-primary)}.np-theme-personal--dark .np-logo-svg path{fill:var(--color-white)}
1
+ .np-logo{display:inline-block}.np-theme-personal--bright-green .np-logo-svg path,.np-theme-personal--forest-green .np-logo-svg path{fill:var(--color-interactive-primary)}.np-theme-personal--dark .np-logo-svg path{fill:var(--color-white)}.np-logo-svg--size-sm{display:block}@media (min-width:576px){.np-logo-svg--size-sm{display:none}}.np-logo-svg--size-md{display:none}@media (min-width:576px){.np-logo-svg--size-md{display:block}}
package/src/logo/Logo.js CHANGED
@@ -1,10 +1,6 @@
1
1
  import classNames from 'classnames';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
- import { Breakpoint } from '../common';
5
- import { isServerSide } from '../common/domHelpers';
6
- import { useClientWidth } from '../common/hooks';
7
-
8
4
  import { LogoType } from './logoTypes';
9
5
  import { LogoFlagInverse } from './svg/flag-inverse.svg';
10
6
  import { LogoFlag } from './svg/flag.svg';
@@ -21,22 +17,17 @@ const svgPaths = {
21
17
  };
22
18
 
23
19
  const Logo = ({ className, inverse, type }) => {
24
- const [clientWidth] = useClientWidth({ ref: isServerSide() ? undefined : window });
25
- const isSmall = clientWidth < Breakpoint.SMALL;
26
- const LogoSvg = isSmall
27
- ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`]
28
- : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
29
-
30
- // If clientWidth is not defined, don't render anything
31
- if (clientWidth === null) {
32
- return null;
33
- }
20
+ const LogoSm = svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`];
21
+ const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
34
22
 
35
23
  return (
36
- <LogoSvg
37
- className={classNames('np-logo-svg', className)}
38
- alt={type === LogoType.WISE ? 'Wise' : 'Wise business'}
39
- />
24
+ <span
25
+ aria-label={type === LogoType.WISE ? 'Wise' : 'Wise business'}
26
+ className={classNames(className, 'np-logo')}
27
+ >
28
+ <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
29
+ <LogoMd className="np-logo-svg np-logo-svg--size-md" />
30
+ </span>
40
31
  );
41
32
  };
42
33
 
package/src/logo/Logo.less CHANGED
@@ -1,6 +1,9 @@
1
1
  .np-logo {
2
- height: var(--size-24);
3
- &-svg path {
2
+ display: inline-block;
3
+ }
4
+
5
+ .np-logo-svg {
6
+ path {
4
7
  .np-theme-personal--forest-green &,
5
8
  .np-theme-personal--bright-green & {
6
9
  fill: var(--color-interactive-primary);
@@ -10,4 +13,20 @@
10
13
  fill: var(--color-white);
11
14
  }
12
15
  }
16
+
17
+ &--size-sm {
18
+ display: block;
19
+
20
+ @media (--screen-sm) {
21
+ display: none;
22
+ }
23
+ }
24
+
25
+ &--size-md {
26
+ display: none;
27
+
28
+ @media (--screen-sm) {
29
+ display: block;
30
+ }
31
+ }
13
32
  }
package/src/logo/__snapshots__/Logo.spec.js.snap CHANGED
@@ -2,108 +2,204 @@
2
2
 
3
3
  exports[`Logo on mobile renders only fast flag 1`] = `
4
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"
5
+ <span
6
+ aria-label="Wise"
7
+ class="class np-logo"
12
8
  >
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>
9
+ <svg
10
+ class="np-logo-svg np-logo-svg--size-sm"
11
+ fill="none"
12
+ height="24"
13
+ width="26"
14
+ xmlns="http://www.w3.org/2000/svg"
15
+ >
16
+ <path
17
+ 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"
18
+ fill="#163300"
19
+ />
20
+ </svg>
21
+ <svg
22
+ class="np-logo-svg np-logo-svg--size-md"
23
+ fill="none"
24
+ height="24"
25
+ width="106"
26
+ xmlns="http://www.w3.org/2000/svg"
27
+ >
28
+ <path
29
+ 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"
30
+ fill="#163300"
31
+ />
32
+ </svg>
33
+ </span>
18
34
  </div>
19
35
  `;
20
36
 
21
37
  exports[`Logo renders wise business logo 1`] = `
22
38
  <div>
23
- <svg
24
- alt="Wise business"
25
- class="np-logo-svg class"
26
- fill="none"
27
- height="24"
28
- width="106"
29
- xmlns="http://www.w3.org/2000/svg"
39
+ <span
40
+ aria-label="Wise business"
41
+ class="class np-logo"
30
42
  >
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>
43
+ <svg
44
+ class="np-logo-svg np-logo-svg--size-sm"
45
+ fill="none"
46
+ height="24"
47
+ width="26"
48
+ xmlns="http://www.w3.org/2000/svg"
49
+ >
50
+ <path
51
+ 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"
52
+ fill="#163300"
53
+ />
54
+ </svg>
55
+ <svg
56
+ class="np-logo-svg np-logo-svg--size-md"
57
+ fill="none"
58
+ height="24"
59
+ width="106"
60
+ xmlns="http://www.w3.org/2000/svg"
61
+ >
62
+ <path
63
+ 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"
64
+ fill="#163300"
65
+ />
66
+ </svg>
67
+ </span>
36
68
  </div>
37
69
  `;
38
70
 
39
71
  exports[`Logo renders wise business logo inversed 1`] = `
40
72
  <div>
41
- <svg
42
- alt="Wise business"
43
- class="np-logo-svg class"
44
- fill="none"
45
- height="24"
46
- width="106"
47
- xmlns="http://www.w3.org/2000/svg"
73
+ <span
74
+ aria-label="Wise business"
75
+ class="class np-logo"
48
76
  >
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>
77
+ <svg
78
+ class="np-logo-svg np-logo-svg--size-sm"
79
+ fill="none"
80
+ height="24"
81
+ width="26"
82
+ xmlns="http://www.w3.org/2000/svg"
83
+ >
84
+ <path
85
+ 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"
86
+ fill="#9FE870"
87
+ />
88
+ </svg>
89
+ <svg
90
+ class="np-logo-svg np-logo-svg--size-md"
91
+ fill="none"
92
+ height="24"
93
+ width="106"
94
+ xmlns="http://www.w3.org/2000/svg"
95
+ >
96
+ <path
97
+ 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"
98
+ fill="#9FE870"
99
+ />
100
+ </svg>
101
+ </span>
54
102
  </div>
55
103
  `;
56
104
 
57
105
  exports[`Logo renders wise logo 1`] = `
58
106
  <div>
59
- <svg
60
- alt="Wise"
61
- class="np-logo-svg class"
62
- fill="none"
63
- height="24"
64
- width="106"
65
- xmlns="http://www.w3.org/2000/svg"
107
+ <span
108
+ aria-label="Wise"
109
+ class="class np-logo"
66
110
  >
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>
111
+ <svg
112
+ class="np-logo-svg np-logo-svg--size-sm"
113
+ fill="none"
114
+ height="24"
115
+ width="26"
116
+ xmlns="http://www.w3.org/2000/svg"
117
+ >
118
+ <path
119
+ 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"
120
+ fill="#163300"
121
+ />
122
+ </svg>
123
+ <svg
124
+ class="np-logo-svg np-logo-svg--size-md"
125
+ fill="none"
126
+ height="24"
127
+ width="106"
128
+ xmlns="http://www.w3.org/2000/svg"
129
+ >
130
+ <path
131
+ 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"
132
+ fill="#163300"
133
+ />
134
+ </svg>
135
+ </span>
72
136
  </div>
73
137
  `;
74
138
 
75
139
  exports[`Logo renders wise logo by default 1`] = `
76
140
  <div>
77
- <svg
78
- alt="Wise"
79
- class="np-logo-svg class"
80
- fill="none"
81
- height="24"
82
- width="106"
83
- xmlns="http://www.w3.org/2000/svg"
141
+ <span
142
+ aria-label="Wise"
143
+ class="class np-logo"
84
144
  >
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>
145
+ <svg
146
+ class="np-logo-svg np-logo-svg--size-sm"
147
+ fill="none"
148
+ height="24"
149
+ width="26"
150
+ xmlns="http://www.w3.org/2000/svg"
151
+ >
152
+ <path
153
+ 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"
154
+ fill="#163300"
155
+ />
156
+ </svg>
157
+ <svg
158
+ class="np-logo-svg np-logo-svg--size-md"
159
+ fill="none"
160
+ height="24"
161
+ width="106"
162
+ xmlns="http://www.w3.org/2000/svg"
163
+ >
164
+ <path
165
+ 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"
166
+ fill="#163300"
167
+ />
168
+ </svg>
169
+ </span>
90
170
  </div>
91
171
  `;
92
172
 
93
173
  exports[`Logo renders wise logo inversed 1`] = `
94
174
  <div>
95
- <svg
96
- alt="Wise"
97
- class="np-logo-svg class"
98
- fill="none"
99
- height="24"
100
- width="106"
101
- xmlns="http://www.w3.org/2000/svg"
175
+ <span
176
+ aria-label="Wise"
177
+ class="class np-logo"
102
178
  >
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>
179
+ <svg
180
+ class="np-logo-svg np-logo-svg--size-sm"
181
+ fill="none"
182
+ height="24"
183
+ width="26"
184
+ xmlns="http://www.w3.org/2000/svg"
185
+ >
186
+ <path
187
+ 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"
188
+ fill="#9FE870"
189
+ />
190
+ </svg>
191
+ <svg
192
+ class="np-logo-svg np-logo-svg--size-md"
193
+ fill="none"
194
+ height="24"
195
+ width="106"
196
+ xmlns="http://www.w3.org/2000/svg"
197
+ >
198
+ <path
199
+ 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"
200
+ fill="#9FE870"
201
+ />
202
+ </svg>
203
+ </span>
108
204
  </div>
109
205
  `;