@transferwise/components 0.0.0-experimental-cadb950 → 0.0.0-experimental-ceafa75

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 (9) hide show
  1. package/build/main.css +0 -26
  2. package/build/styles/main.css +0 -26
  3. package/build/styles/table/Table.css +0 -26
  4. package/build/types/table/TableCell.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/src/main.css +0 -26
  7. package/src/table/Table.css +0 -26
  8. package/src/table/Table.less +0 -26
  9. package/src/table/TableCell.tsx +4 -3
package/build/main.css CHANGED
@@ -5260,18 +5260,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5260
5260
  .np-table-cell:last-child .np-table-cell-content {
5261
5261
  padding-right: 0;
5262
5262
  }
5263
- .np-table-header .np-table-text-secondary,
5264
- .np-table-cell .np-table-text-secondary {
5265
- color: #768e9c;
5266
- color: var(--color-content-tertiary);
5267
- font-size: 0.75rem;
5268
- font-size: var(--font-size-12);
5269
- font-style: normal;
5270
- font-weight: 400;
5271
- font-weight: var(--font-weight-regular);
5272
- line-height: 1.125rem;
5273
- line-height: var(--line-height-18);
5274
- }
5275
5263
  .np-table-header.np-table-header--right > .np-text-body-default,
5276
5264
  .np-table-cell.np-table-cell--right > .np-text-body-default {
5277
5265
  text-align: right;
@@ -5333,14 +5321,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5333
5321
  .np-table-cell--currency .np-text-body-default {
5334
5322
  white-space: nowrap;
5335
5323
  }
5336
- .np-table-cell--status .status-circle {
5337
- width: 24px;
5338
- height: 24px;
5339
- }
5340
- .np-table-cell--status .status-circle .status-icon > svg {
5341
- width: 21px;
5342
- height: 21px;
5343
- }
5344
5324
  .np-table-cell .tw-chevron {
5345
5325
  margin-left: 8px;
5346
5326
  margin-left: var(--size-8);
@@ -5355,12 +5335,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5355
5335
  background-color: var(--color-background-neutral);
5356
5336
  padding: 0;
5357
5337
  }
5358
- .np-table-cell .np-text-body-default {
5359
- line-height: 1.375rem;
5360
- line-height: var(--line-height-22);
5361
- letter-spacing: 0.01em;
5362
- letter-spacing: var(--letter-spacing-xs);
5363
- }
5364
5338
  .np-table-cell .np-text-body-default-bold {
5365
5339
  display: flex;
5366
5340
  align-items: center;
package/build/styles/main.css CHANGED
@@ -5260,18 +5260,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5260
5260
  .np-table-cell:last-child .np-table-cell-content {
5261
5261
  padding-right: 0;
5262
5262
  }
5263
- .np-table-header .np-table-text-secondary,
5264
- .np-table-cell .np-table-text-secondary {
5265
- color: #768e9c;
5266
- color: var(--color-content-tertiary);
5267
- font-size: 0.75rem;
5268
- font-size: var(--font-size-12);
5269
- font-style: normal;
5270
- font-weight: 400;
5271
- font-weight: var(--font-weight-regular);
5272
- line-height: 1.125rem;
5273
- line-height: var(--line-height-18);
5274
- }
5275
5263
  .np-table-header.np-table-header--right > .np-text-body-default,
5276
5264
  .np-table-cell.np-table-cell--right > .np-text-body-default {
5277
5265
  text-align: right;
@@ -5333,14 +5321,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5333
5321
  .np-table-cell--currency .np-text-body-default {
5334
5322
  white-space: nowrap;
5335
5323
  }
5336
- .np-table-cell--status .status-circle {
5337
- width: 24px;
5338
- height: 24px;
5339
- }
5340
- .np-table-cell--status .status-circle .status-icon > svg {
5341
- width: 21px;
5342
- height: 21px;
5343
- }
5344
5324
  .np-table-cell .tw-chevron {
5345
5325
  margin-left: 8px;
5346
5326
  margin-left: var(--size-8);
@@ -5355,12 +5335,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5355
5335
  background-color: var(--color-background-neutral);
5356
5336
  padding: 0;
5357
5337
  }
5358
- .np-table-cell .np-text-body-default {
5359
- line-height: 1.375rem;
5360
- line-height: var(--line-height-22);
5361
- letter-spacing: 0.01em;
5362
- letter-spacing: var(--letter-spacing-xs);
5363
- }
5364
5338
  .np-table-cell .np-text-body-default-bold {
5365
5339
  display: flex;
5366
5340
  align-items: center;
package/build/styles/table/Table.css CHANGED
@@ -137,18 +137,6 @@
137
137
  .np-table-cell:last-child .np-table-cell-content {
138
138
  padding-right: 0;
139
139
  }
140
- .np-table-header .np-table-text-secondary,
141
- .np-table-cell .np-table-text-secondary {
142
- color: #768e9c;
143
- color: var(--color-content-tertiary);
144
- font-size: 0.75rem;
145
- font-size: var(--font-size-12);
146
- font-style: normal;
147
- font-weight: 400;
148
- font-weight: var(--font-weight-regular);
149
- line-height: 1.125rem;
150
- line-height: var(--line-height-18);
151
- }
152
140
  .np-table-header.np-table-header--right > .np-text-body-default,
153
141
  .np-table-cell.np-table-cell--right > .np-text-body-default {
154
142
  text-align: right;
@@ -210,14 +198,6 @@
210
198
  .np-table-cell--currency .np-text-body-default {
211
199
  white-space: nowrap;
212
200
  }
213
- .np-table-cell--status .status-circle {
214
- width: 24px;
215
- height: 24px;
216
- }
217
- .np-table-cell--status .status-circle .status-icon > svg {
218
- width: 21px;
219
- height: 21px;
220
- }
221
201
  .np-table-cell .tw-chevron {
222
202
  margin-left: 8px;
223
203
  margin-left: var(--size-8);
@@ -232,12 +212,6 @@
232
212
  background-color: var(--color-background-neutral);
233
213
  padding: 0;
234
214
  }
235
- .np-table-cell .np-text-body-default {
236
- line-height: 1.375rem;
237
- line-height: var(--line-height-22);
238
- letter-spacing: 0.01em;
239
- letter-spacing: var(--letter-spacing-xs);
240
- }
241
215
  .np-table-cell .np-text-body-default-bold {
242
216
  display: flex;
243
217
  align-items: center;
package/build/types/table/TableCell.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,iBAAiB;IACzB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;CAClD;AAGD,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,gBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,mBAAmB;IACrB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;CACH;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,mBAAmB;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,mBAAmB;IAC/E,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,iBAAiB,CAAC,EAAE,QAAQ,CAAC;CAC9B;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB,EAAE,kBAAkB;IAC5E,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;CACzE;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,gBAAgB,GAAG,aAAa,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,sDAAuD,cAAc,sBAoGnF,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,iBAAiB;IACzB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;CAClD;AAGD,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,gBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,mBAAmB;IACrB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;CACH;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,mBAAmB;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,mBAAmB;IAC/E,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,iBAAiB,CAAC,EAAE,QAAQ,CAAC;CAC9B;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB,EAAE,kBAAkB;IAC5E,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;CACzE;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,gBAAgB,GAAG,aAAa,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,sDAAuD,cAAc,sBAoGnF,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-cadb950",
3
+ "version": "0.0.0-experimental-ceafa75",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/main.css CHANGED
@@ -5260,18 +5260,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5260
5260
  .np-table-cell:last-child .np-table-cell-content {
5261
5261
  padding-right: 0;
5262
5262
  }
5263
- .np-table-header .np-table-text-secondary,
5264
- .np-table-cell .np-table-text-secondary {
5265
- color: #768e9c;
5266
- color: var(--color-content-tertiary);
5267
- font-size: 0.75rem;
5268
- font-size: var(--font-size-12);
5269
- font-style: normal;
5270
- font-weight: 400;
5271
- font-weight: var(--font-weight-regular);
5272
- line-height: 1.125rem;
5273
- line-height: var(--line-height-18);
5274
- }
5275
5263
  .np-table-header.np-table-header--right > .np-text-body-default,
5276
5264
  .np-table-cell.np-table-cell--right > .np-text-body-default {
5277
5265
  text-align: right;
@@ -5333,14 +5321,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5333
5321
  .np-table-cell--currency .np-text-body-default {
5334
5322
  white-space: nowrap;
5335
5323
  }
5336
- .np-table-cell--status .status-circle {
5337
- width: 24px;
5338
- height: 24px;
5339
- }
5340
- .np-table-cell--status .status-circle .status-icon > svg {
5341
- width: 21px;
5342
- height: 21px;
5343
- }
5344
5324
  .np-table-cell .tw-chevron {
5345
5325
  margin-left: 8px;
5346
5326
  margin-left: var(--size-8);
@@ -5355,12 +5335,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5355
5335
  background-color: var(--color-background-neutral);
5356
5336
  padding: 0;
5357
5337
  }
5358
- .np-table-cell .np-text-body-default {
5359
- line-height: 1.375rem;
5360
- line-height: var(--line-height-22);
5361
- letter-spacing: 0.01em;
5362
- letter-spacing: var(--letter-spacing-xs);
5363
- }
5364
5338
  .np-table-cell .np-text-body-default-bold {
5365
5339
  display: flex;
5366
5340
  align-items: center;
package/src/table/Table.css CHANGED
@@ -137,18 +137,6 @@
137
137
  .np-table-cell:last-child .np-table-cell-content {
138
138
  padding-right: 0;
139
139
  }
140
- .np-table-header .np-table-text-secondary,
141
- .np-table-cell .np-table-text-secondary {
142
- color: #768e9c;
143
- color: var(--color-content-tertiary);
144
- font-size: 0.75rem;
145
- font-size: var(--font-size-12);
146
- font-style: normal;
147
- font-weight: 400;
148
- font-weight: var(--font-weight-regular);
149
- line-height: 1.125rem;
150
- line-height: var(--line-height-18);
151
- }
152
140
  .np-table-header.np-table-header--right > .np-text-body-default,
153
141
  .np-table-cell.np-table-cell--right > .np-text-body-default {
154
142
  text-align: right;
@@ -210,14 +198,6 @@
210
198
  .np-table-cell--currency .np-text-body-default {
211
199
  white-space: nowrap;
212
200
  }
213
- .np-table-cell--status .status-circle {
214
- width: 24px;
215
- height: 24px;
216
- }
217
- .np-table-cell--status .status-circle .status-icon > svg {
218
- width: 21px;
219
- height: 21px;
220
- }
221
201
  .np-table-cell .tw-chevron {
222
202
  margin-left: 8px;
223
203
  margin-left: var(--size-8);
@@ -232,12 +212,6 @@
232
212
  background-color: var(--color-background-neutral);
233
213
  padding: 0;
234
214
  }
235
- .np-table-cell .np-text-body-default {
236
- line-height: 1.375rem;
237
- line-height: var(--line-height-22);
238
- letter-spacing: 0.01em;
239
- letter-spacing: var(--letter-spacing-xs);
240
- }
241
215
  .np-table-cell .np-text-body-default-bold {
242
216
  display: flex;
243
217
  align-items: center;
package/src/table/Table.less CHANGED
@@ -184,14 +184,6 @@
184
184
  padding-right: 0;
185
185
  }
186
186
  }
187
-
188
- .np-table-text-secondary {
189
- color: var(--color-content-tertiary);
190
- font-size: var(--font-size-12);
191
- font-style: normal;
192
- font-weight: var(--font-weight-regular);
193
- line-height: var(--line-height-18);
194
- }
195
187
  }
196
188
 
197
189
  &-header.np-table-header--right,
@@ -262,19 +254,6 @@
262
254
  }
263
255
  }
264
256
 
265
- // TODO: In next iterations this block of code should be removed after we'll have `24px` status icons
266
- &--status {
267
- .status-circle {
268
- width: 24px;
269
- height: 24px;
270
-
271
- .status-icon > svg {
272
- width: 21px;
273
- height: 21px;
274
- }
275
- }
276
- }
277
-
278
257
  .tw-chevron {
279
258
  margin-left: @table-spacing-md;
280
259
  }
@@ -287,11 +266,6 @@
287
266
  padding: 0;
288
267
  }
289
268
 
290
- .np-text-body-default {
291
- line-height: var(--line-height-22);
292
- letter-spacing: var(--letter-spacing-xs);
293
- }
294
-
295
269
  .np-text-body-default-bold {
296
270
  display: flex;
297
271
  align-items: center;
package/src/table/TableCell.tsx CHANGED
@@ -8,6 +8,7 @@ import React from 'react';
8
8
  import { clsx } from 'clsx';
9
9
  import { getInitials } from '../common';
10
10
  import Image from '../image';
11
+ import Body from '../body';
11
12
 
12
13
  interface TableCellTypeProp {
13
14
  type: 'leading' | 'text' | 'currency' | 'status';
@@ -91,7 +92,7 @@ const TableCell = ({ cell, alignment, className, colSpan, children }: TableCellP
91
92
  }
92
93
 
93
94
  if (cell?.type === 'status') {
94
- mediaContent = <StatusIcon size="md" sentiment={cell?.sentiment ?? 'neutral'} />;
95
+ mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;
95
96
  }
96
97
 
97
98
  if (mediaContent) {
@@ -153,11 +154,11 @@ const TableCell = ({ cell, alignment, className, colSpan, children }: TableCellP
153
154
  />
154
155
  )}
155
156
  {(cell?.secondaryCurrency ?? cell?.secondaryText) && (
156
- <div className="np-table-text-secondary">
157
+ <Body>
157
158
  {cell?.type === 'currency'
158
159
  ? formatCurrencyValue(cell?.secondaryCurrency)
159
160
  : cell?.secondaryText}
160
- </div>
161
+ </Body>
161
162
  )}
162
163
  </div>
163
164
  </div>