@transferwise/components 0.0.0-experimental-14afc1f → 0.0.0-experimental-ecf13ed

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 (19) hide show
  1. package/build/index.js +15 -15
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +15 -15
  4. package/build/index.mjs.map +1 -1
  5. package/build/main.css +0 -16
  6. package/build/styles/logo/Logo.css +0 -16
  7. package/build/styles/main.css +0 -16
  8. package/build/types/logo/Logo.d.ts.map +1 -1
  9. package/build/types/segmentedControl/SegmentedControl.d.ts +2 -2
  10. package/build/types/segmentedControl/SegmentedControl.d.ts.map +1 -1
  11. package/package.json +1 -1
  12. package/src/logo/Logo.css +0 -16
  13. package/src/logo/Logo.js +7 -2
  14. package/src/logo/Logo.less +0 -16
  15. package/src/logo/__snapshots__/Logo.spec.js.snap +8 -104
  16. package/src/main.css +0 -16
  17. package/src/segmentedControl/SegmentedControl.spec.tsx +39 -1
  18. package/src/segmentedControl/SegmentedControl.story.tsx +54 -16
  19. package/src/segmentedControl/SegmentedControl.tsx +11 -18
package/build/main.css CHANGED
@@ -3023,22 +3023,6 @@ a {
3023
3023
  .np-theme-personal--dark .np-logo-svg path {
3024
3024
  fill: var(--color-white);
3025
3025
  }
3026
- .np-logo-svg--size-sm {
3027
- display: block;
3028
- }
3029
- @media (min-width: 576px) {
3030
- .np-logo-svg--size-sm {
3031
- display: none;
3032
- }
3033
- }
3034
- .np-logo-svg--size-md {
3035
- display: none;
3036
- }
3037
- @media (min-width: 576px) {
3038
- .np-logo-svg--size-md {
3039
- display: block;
3040
- }
3041
- }
3042
3026
  .tw-modal--scrollable {
3043
3027
  max-height: 100%;
3044
3028
  /* mobile viewport bug fix */
package/build/styles/logo/Logo.css CHANGED
@@ -8,19 +8,3 @@
8
8
  .np-theme-personal--dark .np-logo-svg path {
9
9
  fill: var(--color-white);
10
10
  }
11
- .np-logo-svg--size-sm {
12
- display: block;
13
- }
14
- @media (min-width: 576px) {
15
- .np-logo-svg--size-sm {
16
- display: none;
17
- }
18
- }
19
- .np-logo-svg--size-md {
20
- display: none;
21
- }
22
- @media (min-width: 576px) {
23
- .np-logo-svg--size-md {
24
- display: block;
25
- }
26
- }
package/build/styles/main.css CHANGED
@@ -3023,22 +3023,6 @@ a {
3023
3023
  .np-theme-personal--dark .np-logo-svg path {
3024
3024
  fill: var(--color-white);
3025
3025
  }
3026
- .np-logo-svg--size-sm {
3027
- display: block;
3028
- }
3029
- @media (min-width: 576px) {
3030
- .np-logo-svg--size-sm {
3031
- display: none;
3032
- }
3033
- }
3034
- .np-logo-svg--size-md {
3035
- display: none;
3036
- }
3037
- @media (min-width: 576px) {
3038
- .np-logo-svg--size-md {
3039
- display: block;
3040
- }
3041
- }
3042
3026
  .tw-modal--scrollable {
3043
3027
  max-height: 100%;
3044
3028
  /* mobile viewport bug fix */
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":";AA0BA;;;;gCAuBC"}
1
+ {"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.js"],"names":[],"mappings":";AA6BA;;;;gCAyBC"}
package/build/types/segmentedControl/SegmentedControl.d.ts CHANGED
@@ -13,7 +13,7 @@ type SegmentWithControls = SegmentBase & {
13
13
  export type Segments = readonly Segment[] | readonly SegmentWithControls[];
14
14
  type SegmentedControlPropsBase = {
15
15
  name: string;
16
- defaultValue: string;
16
+ value: string;
17
17
  mode: 'input' | 'view';
18
18
  onChange: (value: string) => void;
19
19
  };
@@ -26,6 +26,6 @@ type SegmentedControlInputProps = {
26
26
  segments: readonly Segment[];
27
27
  };
28
28
  export type SegmentedControlProps = SegmentedControlPropsBase & (SegmentedControlViewProps | SegmentedControlInputProps);
29
- declare const SegmentedControl: ({ name, defaultValue, mode, segments, onChange, }: SegmentedControlProps) => import("react").JSX.Element;
29
+ declare const SegmentedControl: ({ name, value, mode, segments, onChange, }: SegmentedControlProps) => import("react").JSX.Element;
30
30
  export default SegmentedControl;
31
31
  //# sourceMappingURL=SegmentedControl.d.ts.map
package/build/types/segmentedControl/SegmentedControl.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,sDAMnB,qBAAqB,gCAiIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,+CAMnB,qBAAqB,gCA0HvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-14afc1f",
3
+ "version": "0.0.0-experimental-ecf13ed",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/logo/Logo.css CHANGED
@@ -8,19 +8,3 @@
8
8
  .np-theme-personal--dark .np-logo-svg path {
9
9
  fill: var(--color-white);
10
10
  }
11
- .np-logo-svg--size-sm {
12
- display: block;
13
- }
14
- @media (min-width: 576px) {
15
- .np-logo-svg--size-sm {
16
- display: none;
17
- }
18
- }
19
- .np-logo-svg--size-md {
20
- display: none;
21
- }
22
- @media (min-width: 576px) {
23
- .np-logo-svg--size-md {
24
- display: block;
25
- }
26
- }
package/src/logo/Logo.js CHANGED
@@ -1,6 +1,9 @@
1
1
  import classNames from 'classnames';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
+ import { Breakpoint } from '../common';
5
+ import { useScreenSize } from '../common/hooks/useScreenSize';
6
+
4
7
  import { LogoType } from './logoTypes';
5
8
  import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
6
9
  import { ReactComponent as LogoFlagPlatformInverse } from './svg/flag-platform-white.svg';
@@ -31,6 +34,8 @@ const Logo = ({ className, inverse, type }) => {
31
34
  ];
32
35
  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
33
36
 
37
+ const screenMd = useScreenSize(Breakpoint.MEDIUM);
38
+
34
39
  return (
35
40
  <span
36
41
  aria-label={
@@ -43,8 +48,8 @@ const Logo = ({ className, inverse, type }) => {
43
48
  role="img"
44
49
  className={classNames(className, 'np-logo')}
45
50
  >
46
- <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
47
- <LogoMd className="np-logo-svg np-logo-svg--size-md" />
51
+ {!screenMd && <LogoSm className="np-logo-svg" />}
52
+ {screenMd && <LogoMd className="np-logo-svg" />}
48
53
  </span>
49
54
  );
50
55
  };
package/src/logo/Logo.less CHANGED
@@ -13,20 +13,4 @@
13
13
  fill: var(--color-white);
14
14
  }
15
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
- }
32
16
  }
package/src/logo/__snapshots__/Logo.spec.js.snap CHANGED
@@ -8,7 +8,7 @@ exports[`Logo on mobile renders only fast flag 1`] = `
8
8
  role="img"
9
9
  >
10
10
  <svg
11
- class="np-logo-svg np-logo-svg--size-sm"
11
+ class="np-logo-svg"
12
12
  fill="none"
13
13
  height="24"
14
14
  width="26"
@@ -19,18 +19,6 @@ exports[`Logo on mobile renders only fast flag 1`] = `
19
19
  fill="#163300"
20
20
  />
21
21
  </svg>
22
- <svg
23
- class="np-logo-svg np-logo-svg--size-md"
24
- fill="none"
25
- height="24"
26
- width="106"
27
- xmlns="http://www.w3.org/2000/svg"
28
- >
29
- <path
30
- 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"
31
- fill="#163300"
32
- />
33
- </svg>
34
22
  </span>
35
23
  </div>
36
24
  `;
@@ -43,19 +31,7 @@ exports[`Logo renders wise business logo 1`] = `
43
31
  role="img"
44
32
  >
45
33
  <svg
46
- class="np-logo-svg np-logo-svg--size-sm"
47
- fill="none"
48
- height="24"
49
- width="26"
50
- xmlns="http://www.w3.org/2000/svg"
51
- >
52
- <path
53
- 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"
54
- fill="#163300"
55
- />
56
- </svg>
57
- <svg
58
- class="np-logo-svg np-logo-svg--size-md"
34
+ class="np-logo-svg"
59
35
  fill="none"
60
36
  height="24"
61
37
  width="106"
@@ -78,19 +54,7 @@ exports[`Logo renders wise business logo inversed 1`] = `
78
54
  role="img"
79
55
  >
80
56
  <svg
81
- class="np-logo-svg np-logo-svg--size-sm"
82
- fill="none"
83
- height="24"
84
- width="26"
85
- xmlns="http://www.w3.org/2000/svg"
86
- >
87
- <path
88
- 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"
89
- fill="#9FE870"
90
- />
91
- </svg>
92
- <svg
93
- class="np-logo-svg np-logo-svg--size-md"
57
+ class="np-logo-svg"
94
58
  fill="none"
95
59
  height="24"
96
60
  width="106"
@@ -113,19 +77,7 @@ exports[`Logo renders wise logo 1`] = `
113
77
  role="img"
114
78
  >
115
79
  <svg
116
- class="np-logo-svg np-logo-svg--size-sm"
117
- fill="none"
118
- height="24"
119
- width="26"
120
- xmlns="http://www.w3.org/2000/svg"
121
- >
122
- <path
123
- 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"
124
- fill="#163300"
125
- />
126
- </svg>
127
- <svg
128
- class="np-logo-svg np-logo-svg--size-md"
80
+ class="np-logo-svg"
129
81
  fill="none"
130
82
  height="24"
131
83
  width="106"
@@ -148,19 +100,7 @@ exports[`Logo renders wise logo by default 1`] = `
148
100
  role="img"
149
101
  >
150
102
  <svg
151
- class="np-logo-svg np-logo-svg--size-sm"
152
- fill="none"
153
- height="24"
154
- width="26"
155
- xmlns="http://www.w3.org/2000/svg"
156
- >
157
- <path
158
- 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"
159
- fill="#163300"
160
- />
161
- </svg>
162
- <svg
163
- class="np-logo-svg np-logo-svg--size-md"
103
+ class="np-logo-svg"
164
104
  fill="none"
165
105
  height="24"
166
106
  width="106"
@@ -183,19 +123,7 @@ exports[`Logo renders wise logo inversed 1`] = `
183
123
  role="img"
184
124
  >
185
125
  <svg
186
- class="np-logo-svg np-logo-svg--size-sm"
187
- fill="none"
188
- height="24"
189
- width="26"
190
- xmlns="http://www.w3.org/2000/svg"
191
- >
192
- <path
193
- 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"
194
- fill="#9FE870"
195
- />
196
- </svg>
197
- <svg
198
- class="np-logo-svg np-logo-svg--size-md"
126
+ class="np-logo-svg"
199
127
  fill="none"
200
128
  height="24"
201
129
  width="106"
@@ -218,19 +146,7 @@ exports[`Logo renders wise platform logo 1`] = `
218
146
  role="img"
219
147
  >
220
148
  <svg
221
- class="np-logo-svg np-logo-svg--size-sm"
222
- fill="none"
223
- height="18"
224
- width="111"
225
- xmlns="http://www.w3.org/2000/svg"
226
- >
227
- <path
228
- d="M4.887 5.92 0 11.525h8.726l.98-2.642H5.969L8.252 6.29l.008-.068-1.486-2.508h6.683L8.276 17.7h3.546L18.079.84H1.916l2.97 5.08Zm17.114 11.8V.792h6.15c1.341 0 2.454.24 3.334.719.882.48 1.541 1.134 1.979 1.963.438.83.657 1.762.657 2.798s-.22 1.976-.662 2.806c-.44.829-1.104 1.485-1.988 1.967-.885.482-1.995.723-3.331.723h-4.23V9.603h3.994c.848 0 1.536-.144 2.064-.434.528-.29.914-.684 1.162-1.186.248-.501.37-1.07.37-1.71 0-.639-.122-1.206-.37-1.702-.248-.497-.636-.885-1.166-1.165-.531-.282-1.228-.422-2.093-.422h-3.268v14.735H22h.001ZM38.823.793v16.926h-2.518V.793h2.518ZM45.712 18c-.82 0-1.561-.15-2.224-.45a3.665 3.665 0 0 1-1.572-1.31c-.385-.573-.576-1.275-.576-2.107 0-.717.14-1.307.42-1.768.281-.462.661-.83 1.138-1.1a6.036 6.036 0 0 1 1.6-.612c.59-.139 1.19-.243 1.802-.314.775-.088 1.404-.16 1.887-.218.482-.058.834-.153 1.052-.286.22-.132.33-.347.33-.644v-.058c0-.72-.208-1.28-.62-1.678-.412-.396-1.025-.595-1.84-.595-.813 0-1.514.183-2 .55-.486.366-.822.772-1.007 1.218L41.736 8.1c.28-.772.692-1.395 1.234-1.873a5.034 5.034 0 0 1 1.874-1.041 7.562 7.562 0 0 1 2.232-.327c.516 0 1.065.06 1.647.178a4.949 4.949 0 0 1 1.634.65c.509.313.925.76 1.25 1.342.325.58.49 1.334.49 2.26v8.43h-2.46v-1.736h-.101c-.163.32-.408.634-.733.942-.326.309-.744.565-1.255.77-.512.204-1.123.305-1.836.305Zm.547-1.984c.696 0 1.294-.135 1.79-.405.497-.27.876-.623 1.138-1.062a2.71 2.71 0 0 0 .392-1.409v-1.637c-.09.089-.262.17-.518.244a7.313 7.313 0 0 1-.871.19c-.327.054-.644.1-.952.14l-.774.104c-.489.06-.933.162-1.336.306-.4.144-.722.348-.96.616-.239.267-.358.62-.358 1.062 0 .612.23 1.073.69 1.385.46.31 1.048.466 1.76.466ZM60.833 5.025V7.01h-7.067V5.025h7.067Zm-5.172-3.04h2.518v12.008c0 .48.074.838.22 1.078a1.1 1.1 0 0 0 .568.488c.233.086.487.128.763.128.201 0 .378-.014.53-.04l.354-.066.455 2.041a4.53 4.53 0 0 1-.624.17c-.27.058-.607.09-1.01.095a4.509 4.509 0 0 1-1.853-.347 3.166 3.166 0 0 1-1.39-1.124c-.355-.506-.531-1.143-.531-1.91V1.985Zm13.846 3.041V7.01h-7.312V5.026h7.312ZM64.2 17.72V3.555c0-.794.177-1.453.531-1.98.354-.525.823-.92 1.406-1.18a4.615 4.615 0 0 1 1.904-.393A6.072 6.072 0 0 1 70.14.34l-.59 2c-.117-.034-.27-.074-.454-.12a2.81 2.81 0 0 0-.674-.07c-.612 0-1.048.148-1.309.445-.26.297-.392.728-.392 1.29V17.72H64.2Zm12.182.257c-1.213 0-2.27-.273-3.175-.818-.904-.545-1.606-1.31-2.106-2.289-.5-.981-.75-2.127-.75-3.438 0-1.312.25-2.469.75-3.455.5-.986 1.202-1.753 2.106-2.298.904-.545 1.963-.818 3.175-.818 1.213 0 2.271.273 3.176.818.904.545 1.605 1.312 2.106 2.298.499.986.75 2.138.75 3.455 0 1.316-.251 2.457-.75 3.438-.5.981-1.202 1.744-2.106 2.289-.905.545-1.963.818-3.176.818Zm.008-2.075c.787 0 1.438-.203 1.954-.611.517-.41.9-.95 1.15-1.628.25-.678.374-1.425.374-2.24 0-.815-.124-1.555-.374-2.236-.25-.68-.633-1.227-1.15-1.64-.516-.415-1.167-.62-1.954-.62-.786 0-1.448.206-1.967.62-.519.412-.904.96-1.153 1.64a6.43 6.43 0 0 0-.375 2.236c0 .81.125 1.562.375 2.24.25.677.634 1.22 1.153 1.627.52.408 1.176.613 1.967.613Zm8.044 1.818V5.026h2.434v2.016h.135a3.098 3.098 0 0 1 1.25-1.617 3.618 3.618 0 0 1 2.034-.591 10.677 10.677 0 0 1 1.071.058v2.363a5.1 5.1 0 0 0-.538-.095 5.6 5.6 0 0 0-.775-.054c-.595 0-1.124.122-1.588.368-.464.245-.83.583-1.1 1.017-.27.432-.405.924-.405 1.475v7.752h-2.518v.002Zm8.589 0V5.025h2.418v2.067h.16c.27-.7.71-1.246 1.322-1.641.612-.394 1.345-.592 2.2-.592.854 0 1.59.198 2.177.596.587.396 1.021.942 1.302 1.637h.135c.309-.678.8-1.22 1.474-1.624.674-.405 1.477-.607 2.409-.607 1.174 0 2.132.361 2.876 1.082.744.722 1.117 1.81 1.117 3.265v8.512h-2.519V9.44c0-.86-.239-1.483-.716-1.869-.477-.386-1.047-.578-1.71-.578-.82 0-1.457.246-1.912.739-.455.492-.683 1.125-.683 1.896v8.092h-2.509V9.283c0-.69-.219-1.243-.657-1.662-.437-.419-1.007-.627-1.71-.627-.477 0-.917.122-1.318.368a2.74 2.74 0 0 0-.969 1.02c-.243.435-.365.94-.365 1.513v7.826h-2.519l-.003-.001Z"
229
- fill="#163300"
230
- />
231
- </svg>
232
- <svg
233
- class="np-logo-svg np-logo-svg--size-md"
149
+ class="np-logo-svg"
234
150
  fill="none"
235
151
  height="18"
236
152
  width="172"
@@ -253,19 +169,7 @@ exports[`Logo renders wise platform logo inversed 1`] = `
253
169
  role="img"
254
170
  >
255
171
  <svg
256
- class="np-logo-svg np-logo-svg--size-sm"
257
- fill="none"
258
- height="18"
259
- width="111"
260
- xmlns="http://www.w3.org/2000/svg"
261
- >
262
- <path
263
- d="M4.887 5.918 0 11.523h8.726l.98-2.642H5.969l2.284-2.593.008-.068-1.486-2.508h6.683L8.276 17.699h3.546L18.079.838H1.916l2.97 5.08Zm17.114 11.799V.791h6.15c1.341 0 2.454.24 3.334.719.882.48 1.541 1.134 1.979 1.963.438.83.657 1.762.657 2.798s-.22 1.976-.662 2.806c-.44.83-1.104 1.485-1.988 1.967-.885.482-1.995.723-3.331.723h-4.23V9.6h3.994c.848 0 1.536-.144 2.064-.434.528-.29.914-.684 1.162-1.186.248-.501.37-1.07.37-1.71 0-.639-.122-1.206-.37-1.702-.248-.497-.636-.885-1.166-1.165-.531-.282-1.228-.422-2.093-.422h-3.268v14.735H22h.001ZM38.823.791v16.926h-2.518V.791h2.518Zm6.889 17.207c-.82 0-1.561-.15-2.224-.45a3.665 3.665 0 0 1-1.572-1.31c-.385-.573-.576-1.275-.576-2.107 0-.716.14-1.307.42-1.768.281-.462.661-.83 1.138-1.1a6.036 6.036 0 0 1 1.6-.612c.59-.139 1.19-.243 1.802-.313.775-.09 1.404-.161 1.887-.22.482-.057.834-.152 1.052-.285.22-.132.33-.347.33-.644v-.058c0-.72-.208-1.28-.62-1.678-.412-.396-1.025-.595-1.84-.595-.813 0-1.514.183-2 .55-.486.366-.822.772-1.007 1.218l-2.366-.528c.28-.772.692-1.395 1.234-1.872a5.034 5.034 0 0 1 1.874-1.042 7.562 7.562 0 0 1 2.232-.327c.516 0 1.065.06 1.647.178a4.949 4.949 0 0 1 1.634.65c.509.313.925.76 1.25 1.342.325.58.49 1.334.49 2.26v8.43h-2.46V15.98h-.101c-.163.32-.408.634-.733.942-.326.309-.744.565-1.255.77-.512.204-1.123.305-1.836.305Zm.547-1.984c.696 0 1.294-.135 1.79-.405.497-.27.876-.623 1.138-1.062a2.71 2.71 0 0 0 .392-1.409v-1.637c-.09.089-.262.17-.518.245a7.313 7.313 0 0 1-.871.19 33.88 33.88 0 0 1-.952.14l-.774.103c-.489.06-.933.162-1.336.306-.4.144-.722.348-.96.616-.239.267-.358.62-.358 1.062 0 .612.23 1.073.69 1.385.46.31 1.048.466 1.76.466ZM60.833 5.023v1.984h-7.067V5.023h7.067Zm-5.172-3.04h2.518V13.99c0 .48.074.838.22 1.078a1.1 1.1 0 0 0 .568.488c.233.086.487.128.763.128.201 0 .378-.014.53-.04l.354-.066.455 2.041a4.518 4.518 0 0 1-.624.17c-.27.058-.607.09-1.01.095a4.509 4.509 0 0 1-1.853-.347 3.165 3.165 0 0 1-1.39-1.124c-.355-.506-.531-1.143-.531-1.91V1.983Zm13.846 3.041v1.984h-7.312V5.024h7.312ZM64.2 17.718V3.553c0-.794.177-1.453.531-1.98.354-.525.823-.92 1.406-1.18A4.615 4.615 0 0 1 68.041 0a6.072 6.072 0 0 1 2.098.338l-.59 2c-.117-.034-.27-.074-.454-.12a2.81 2.81 0 0 0-.674-.07c-.612 0-1.048.148-1.309.445-.26.297-.392.728-.392 1.29v13.835H64.2Zm12.182.257c-1.213 0-2.27-.273-3.175-.818-.904-.545-1.606-1.31-2.106-2.289-.5-.981-.75-2.127-.75-3.438 0-1.312.25-2.469.75-3.455.5-.986 1.202-1.753 2.106-2.298.904-.545 1.963-.818 3.175-.818 1.213 0 2.271.273 3.176.818.904.545 1.605 1.312 2.106 2.298.499.986.75 2.138.75 3.455 0 1.316-.251 2.457-.75 3.438-.5.981-1.202 1.744-2.106 2.289-.905.545-1.963.818-3.176.818Zm.008-2.074c.787 0 1.438-.204 1.954-.612.517-.41.9-.95 1.15-1.628.25-.678.374-1.425.374-2.24 0-.815-.124-1.555-.374-2.236-.25-.68-.633-1.227-1.15-1.64-.516-.415-1.167-.62-1.954-.62-.786 0-1.448.206-1.967.62-.519.412-.904.96-1.153 1.64a6.43 6.43 0 0 0-.375 2.236c0 .81.125 1.562.375 2.24.25.677.634 1.22 1.153 1.628.52.407 1.176.612 1.967.612Zm8.044 1.817V5.024h2.434V7.04h.135a3.098 3.098 0 0 1 1.25-1.617 3.619 3.619 0 0 1 2.034-.591 10.666 10.666 0 0 1 1.071.058v2.363a5.1 5.1 0 0 0-.538-.095 5.6 5.6 0 0 0-.775-.054c-.595 0-1.124.122-1.588.368-.464.245-.83.584-1.1 1.017-.27.432-.405.924-.405 1.475v7.752h-2.518v.002Zm8.589 0V5.023h2.418V7.09h.16c.27-.7.71-1.246 1.322-1.641.612-.394 1.345-.592 2.2-.592.854 0 1.59.198 2.177.596.587.396 1.021.942 1.302 1.637h.135c.309-.678.8-1.22 1.474-1.624.674-.405 1.477-.607 2.409-.607 1.174 0 2.132.361 2.876 1.082.744.722 1.117 1.81 1.117 3.265v8.512h-2.519v-8.28c0-.86-.239-1.483-.716-1.869-.477-.386-1.047-.578-1.71-.578-.82 0-1.457.246-1.912.739-.455.492-.683 1.125-.683 1.896v8.092h-2.509V9.281c0-.69-.219-1.242-.657-1.662-.437-.419-1.007-.627-1.71-.627-.477 0-.917.122-1.318.368a2.74 2.74 0 0 0-.969 1.02c-.243.435-.365.94-.365 1.513v7.826h-2.522Z"
264
- fill="#fff"
265
- />
266
- </svg>
267
- <svg
268
- class="np-logo-svg np-logo-svg--size-md"
172
+ class="np-logo-svg"
269
173
  fill="none"
270
174
  height="18"
271
175
  width="172"
package/src/main.css CHANGED
@@ -3023,22 +3023,6 @@ a {
3023
3023
  .np-theme-personal--dark .np-logo-svg path {
3024
3024
  fill: var(--color-white);
3025
3025
  }
3026
- .np-logo-svg--size-sm {
3027
- display: block;
3028
- }
3029
- @media (min-width: 576px) {
3030
- .np-logo-svg--size-sm {
3031
- display: none;
3032
- }
3033
- }
3034
- .np-logo-svg--size-md {
3035
- display: none;
3036
- }
3037
- @media (min-width: 576px) {
3038
- .np-logo-svg--size-md {
3039
- display: block;
3040
- }
3041
- }
3042
3026
  .tw-modal--scrollable {
3043
3027
  max-height: 100%;
3044
3028
  /* mobile viewport bug fix */
package/src/segmentedControl/SegmentedControl.spec.tsx CHANGED
@@ -32,7 +32,7 @@ const onChange = jest.fn();
32
32
 
33
33
  const defaultProps: SegmentedControlProps = {
34
34
  name: 'segmentedControl',
35
- defaultValue: defaultSegments[0].value,
35
+ value: defaultSegments[0].value,
36
36
  mode: 'input',
37
37
  segments: defaultSegments,
38
38
  onChange,
@@ -134,6 +134,44 @@ describe('SegmentedControl', () => {
134
134
  });
135
135
  });
136
136
 
137
+ it('updates the selected segment when the selectedValue prop changes', () => {
138
+ const { rerender } = render(<SegmentedControl {...defaultProps} />);
139
+
140
+ const payroll = screen.getByRole('radio', { name: 'Payroll' });
141
+ userEvent.click(payroll);
142
+
143
+ expect(onChange).toHaveBeenCalledWith('payroll');
144
+
145
+ rerender(<SegmentedControl {...defaultProps} value="reporting" />);
146
+
147
+ const reporting = screen.getByRole('radio', { name: 'Reporting' });
148
+ expect(reporting).toBeChecked();
149
+ });
150
+
151
+ it('updates the options when the segments prop changes', () => {
152
+ const { rerender } = render(<SegmentedControl {...defaultProps} />);
153
+
154
+ const newSegments = [
155
+ {
156
+ id: '1',
157
+ value: 'payroll',
158
+ label: 'Payroll',
159
+ },
160
+ {
161
+ id: '3',
162
+ value: 'anotherOne',
163
+ label: 'Another One',
164
+ },
165
+ ];
166
+
167
+ rerender(<SegmentedControl {...defaultProps} segments={newSegments} />);
168
+
169
+ const anotherOne = screen.getByRole('radio', { name: 'Another One' });
170
+ userEvent.click(anotherOne);
171
+
172
+ expect(onChange).toHaveBeenCalledWith('anotherOne');
173
+ });
174
+
137
175
  it('throws error if user tries to add too many segments', () => {
138
176
  expect(() => {
139
177
  renderSegmentedControl({
package/src/segmentedControl/SegmentedControl.story.tsx CHANGED
@@ -1,40 +1,78 @@
1
1
  import { StoryFn } from '@storybook/react';
2
2
  import React from 'react';
3
3
 
4
- import SegmentedControl, { Segments } from './SegmentedControl';
4
+ import Button from '../button';
5
+
6
+ import SegmentedControl from './SegmentedControl';
5
7
 
6
8
  export default {
7
9
  component: SegmentedControl,
8
10
  title: 'Forms/SegmentedControl',
9
11
  };
10
12
 
11
- const segments: Segments = [
12
- { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
13
- { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
14
- { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
15
- ];
13
+ const Template: StoryFn = (args) => {
14
+ const [segments, setSegments] = React.useState([
15
+ { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
16
+ { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
17
+ { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
18
+ ]);
16
19
 
17
- const segmentsWithControls: Segments = [
18
- { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
19
- { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
20
- { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
21
- ];
20
+ const [segmentsWithControls, setSegmentsWithControls] = React.useState([
21
+ { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
22
+ { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
23
+ { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
24
+ ]);
22
25
 
23
- const Template: StoryFn = (args) => {
24
- const [selectedValue, setSelectedValue] = React.useState(segments[0].value);
26
+ const [value, setValue] = React.useState(segments[0].value);
25
27
 
28
+ console.log('render: segments.length', segments.length);
26
29
  return (
27
30
  <div className="p-a-2">
28
31
  <SegmentedControl
29
32
  name="aSegmentedControl"
30
- defaultValue={selectedValue}
31
- onChange={setSelectedValue}
33
+ value={value}
34
+ onChange={setValue}
32
35
  {...(args.mode === 'view'
33
36
  ? { segments: segmentsWithControls, mode: 'view', controls: 'aControlId' }
34
37
  : { segments, mode: 'input' })}
35
38
  />
36
39
  <div className="m-a-2" id="aControlId">
37
- <p>Selected value: {selectedValue}</p>
40
+ <p>Selected value: {value}</p>
41
+ </div>
42
+ <div className="m-a-2">
43
+ <p>
44
+ Force the <b>selectedValue</b> to be one of the following:
45
+ <ul>
46
+ {segments.map((segment) => (
47
+ <li key={segment.id}>
48
+ <a
49
+ href="/"
50
+ onClick={(e) => {
51
+ e.preventDefault();
52
+ setValue(segment.value);
53
+ }}
54
+ >
55
+ {segment.label}
56
+ </a>
57
+ </li>
58
+ ))}
59
+ </ul>
60
+ </p>
61
+ </div>
62
+ <div className="m-a-2">
63
+ <Button
64
+ priority="secondary"
65
+ type="danger"
66
+ size="sm"
67
+ disabled={segments.length < 2}
68
+ onClick={() => {
69
+ const index = segments.findIndex((s) => s.value !== value);
70
+ setSegments((prev) => prev.filter((_, i) => i !== index));
71
+ setSegmentsWithControls((prev) => prev.filter((_, i) => i !== index));
72
+ }}
73
+ >
74
+ Remove one segment
75
+ </Button>
38
76
  </div>
39
77
  </div>
40
78
  );
package/src/segmentedControl/SegmentedControl.tsx CHANGED
@@ -13,7 +13,7 @@ export type Segments = readonly Segment[] | readonly SegmentWithControls[];
13
13
 
14
14
  type SegmentedControlPropsBase = {
15
15
  name: string;
16
- defaultValue: string;
16
+ value: string;
17
17
  mode: 'input' | 'view';
18
18
  onChange: (value: string) => void;
19
19
  };
@@ -33,12 +33,11 @@ export type SegmentedControlProps = SegmentedControlPropsBase &
33
33
 
34
34
  const SegmentedControl = ({
35
35
  name,
36
- defaultValue,
36
+ value,
37
37
  mode = 'input',
38
38
  segments,
39
39
  onChange,
40
40
  }: SegmentedControlProps) => {
41
- const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
42
41
  const [animate, setAnimate] = useState(false);
43
42
 
44
43
  const segmentsRef = useRef<HTMLDivElement>(null);
@@ -55,9 +54,7 @@ const SegmentedControl = ({
55
54
  }));
56
55
 
57
56
  const updateSegmentPosition = () => {
58
- const selectedSegmentRef = segmentsWithRefs.find(
59
- (segment) => segment.value === selectedValue,
60
- )?.ref;
57
+ const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;
61
58
 
62
59
  // We grab the active segments style object from the ref
63
60
  // and set the css variables to the selected segments width and x position.
@@ -70,6 +67,7 @@ const SegmentedControl = ({
70
67
  };
71
68
 
72
69
  useEffect(() => {
70
+ setAnimate(true);
73
71
  updateSegmentPosition();
74
72
 
75
73
  const handleWindowSizeChange = () => {
@@ -83,7 +81,7 @@ const SegmentedControl = ({
83
81
  };
84
82
 
85
83
  // eslint-disable-next-line react-hooks/exhaustive-deps
86
- }, [segmentsWithRefs, selectedValue]);
84
+ }, [segmentsWithRefs, value]);
87
85
 
88
86
  return (
89
87
  <div
@@ -102,7 +100,6 @@ const SegmentedControl = ({
102
100
  {segmentsWithRefs.map((segment) => {
103
101
  const onSelect = () => {
104
102
  setAnimate(true);
105
- setSelectedValue(segment.value);
106
103
  onChange(segment.value);
107
104
  };
108
105
  return mode === 'input' ? (
@@ -111,7 +108,7 @@ const SegmentedControl = ({
111
108
  key={segment.id}
112
109
  htmlFor={segment.id}
113
110
  className={classNames('segmented-control__segment', {
114
- 'segmented-control__selected-segment': selectedValue === segment.value,
111
+ 'segmented-control__selected-segment': value === segment.value,
115
112
  })}
116
113
  >
117
114
  <input
@@ -120,16 +117,14 @@ const SegmentedControl = ({
120
117
  id={segment.id}
121
118
  name={name}
122
119
  value={segment.value}
123
- checked={selectedValue === segment.value}
120
+ checked={value === segment.value}
124
121
  onChange={onSelect}
125
122
  />
126
123
  <Body
127
124
  className="segmented-control__text"
128
125
  as="span"
129
126
  type={
130
- selectedValue === segment.value
131
- ? Typography.BODY_DEFAULT_BOLD
132
- : Typography.BODY_DEFAULT
127
+ value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT
133
128
  }
134
129
  >
135
130
  {segment.label}
@@ -143,9 +138,9 @@ const SegmentedControl = ({
143
138
  role="tab"
144
139
  id={segment.id}
145
140
  aria-controls={segment.controls}
146
- aria-selected={selectedValue === segment.value}
141
+ aria-selected={value === segment.value}
147
142
  className={classNames('segmented-control__segment', 'segmented-control__button', {
148
- 'segmented-control__selected-segment': selectedValue === segment.value,
143
+ 'segmented-control__selected-segment': value === segment.value,
149
144
  })}
150
145
  onClick={onSelect}
151
146
  >
@@ -153,9 +148,7 @@ const SegmentedControl = ({
153
148
  as="span"
154
149
  className="segmented-control__text"
155
150
  type={
156
- selectedValue === segment.value
157
- ? Typography.BODY_DEFAULT_BOLD
158
- : Typography.BODY_DEFAULT
151
+ value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT
159
152
  }
160
153
  >
161
154
  {segment.label}