@transferwise/components 0.0.0-experimental-8a06fb3 → 0.0.0-experimental-0985009

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 (20) hide show
  1. package/build/i18n/en.json +1 -0
  2. package/build/index.js +24 -30
  3. package/build/index.js.map +1 -1
  4. package/build/index.mjs +24 -30
  5. package/build/index.mjs.map +1 -1
  6. package/build/main.css +11 -6
  7. package/build/styles/main.css +11 -6
  8. package/build/styles/selectOption/SelectOption.css +11 -6
  9. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  10. package/build/types/selectOption/SelectOption.d.ts.map +1 -1
  11. package/build/types/selectOption/SelectOption.messages.d.ts +4 -0
  12. package/build/types/selectOption/SelectOption.messages.d.ts.map +1 -1
  13. package/package.json +3 -3
  14. package/src/i18n/en.json +1 -0
  15. package/src/inlineAlert/InlineAlert.tsx +4 -6
  16. package/src/main.css +11 -6
  17. package/src/selectOption/SelectOption.css +11 -6
  18. package/src/selectOption/SelectOption.less +11 -6
  19. package/src/selectOption/SelectOption.messages.ts +4 -0
  20. package/src/selectOption/SelectOption.tsx +5 -8
package/build/main.css CHANGED
@@ -1497,8 +1497,8 @@ button.np-option {
1497
1497
  .np-select-option-placeholder:not(.disabled):hover {
1498
1498
  background-color: var(--color-background-neutral-hover);
1499
1499
  }
1500
- .np-select-option-placeholder:focus,
1501
- .np-select-option-placeholder:active {
1500
+ .np-select-option-placeholder:not(.disabled):focus,
1501
+ .np-select-option-placeholder:not(.disabled):active {
1502
1502
  background-color: var(--color-background-neutral-active);
1503
1503
  }
1504
1504
  .np-select-option-selected {
@@ -1509,14 +1509,19 @@ button.np-option {
1509
1509
  max-height: 350px;
1510
1510
  overflow-y: auto;
1511
1511
  }
1512
- .np-select-option-section {
1513
- margin-top: 0 !important;
1512
+ .np-select-option-list > .np-section {
1513
+ margin-top: 0;
1514
+ }
1515
+ .form-group label > .np-select-option {
1516
+ margin-bottom: 0;
1514
1517
  }
1515
1518
  .has-error * .np-select-option {
1516
1519
  --ring-outline-color: var(--color-sentiment-negative);
1517
- --ring-outline-offset: 0;
1520
+ --ring-outline-width: 3px;
1521
+ --ring-outline-offset: calc(-1 * var(--ring-outline-width));
1522
+ outline: var(--ring-outline-color) solid 3px;
1518
1523
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
1519
- outline-offset: 0;
1524
+ outline-offset: calc(-1 * 3px);
1520
1525
  outline-offset: var(--ring-outline-offset);
1521
1526
  }
1522
1527
  .has-error * .np-select-option:focus {
package/build/styles/main.css CHANGED
@@ -1497,8 +1497,8 @@ button.np-option {
1497
1497
  .np-select-option-placeholder:not(.disabled):hover {
1498
1498
  background-color: var(--color-background-neutral-hover);
1499
1499
  }
1500
- .np-select-option-placeholder:focus,
1501
- .np-select-option-placeholder:active {
1500
+ .np-select-option-placeholder:not(.disabled):focus,
1501
+ .np-select-option-placeholder:not(.disabled):active {
1502
1502
  background-color: var(--color-background-neutral-active);
1503
1503
  }
1504
1504
  .np-select-option-selected {
@@ -1509,14 +1509,19 @@ button.np-option {
1509
1509
  max-height: 350px;
1510
1510
  overflow-y: auto;
1511
1511
  }
1512
- .np-select-option-section {
1513
- margin-top: 0 !important;
1512
+ .np-select-option-list > .np-section {
1513
+ margin-top: 0;
1514
+ }
1515
+ .form-group label > .np-select-option {
1516
+ margin-bottom: 0;
1514
1517
  }
1515
1518
  .has-error * .np-select-option {
1516
1519
  --ring-outline-color: var(--color-sentiment-negative);
1517
- --ring-outline-offset: 0;
1520
+ --ring-outline-width: 3px;
1521
+ --ring-outline-offset: calc(-1 * var(--ring-outline-width));
1522
+ outline: var(--ring-outline-color) solid 3px;
1518
1523
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
1519
- outline-offset: 0;
1524
+ outline-offset: calc(-1 * 3px);
1520
1525
  outline-offset: var(--ring-outline-offset);
1521
1526
  }
1522
1527
  .has-error * .np-select-option:focus {
package/build/styles/selectOption/SelectOption.css CHANGED
@@ -11,8 +11,8 @@
11
11
  .np-select-option-placeholder:not(.disabled):hover {
12
12
  background-color: var(--color-background-neutral-hover);
13
13
  }
14
- .np-select-option-placeholder:focus,
15
- .np-select-option-placeholder:active {
14
+ .np-select-option-placeholder:not(.disabled):focus,
15
+ .np-select-option-placeholder:not(.disabled):active {
16
16
  background-color: var(--color-background-neutral-active);
17
17
  }
18
18
  .np-select-option-selected {
@@ -23,14 +23,19 @@
23
23
  max-height: 350px;
24
24
  overflow-y: auto;
25
25
  }
26
- .np-select-option-section {
27
- margin-top: 0 !important;
26
+ .np-select-option-list > .np-section {
27
+ margin-top: 0;
28
+ }
29
+ .form-group label > .np-select-option {
30
+ margin-bottom: 0;
28
31
  }
29
32
  .has-error * .np-select-option {
30
33
  --ring-outline-color: var(--color-sentiment-negative);
31
- --ring-outline-offset: 0;
34
+ --ring-outline-width: 3px;
35
+ --ring-outline-offset: calc(-1 * var(--ring-outline-width));
36
+ outline: var(--ring-outline-color) solid 3px;
32
37
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
33
- outline-offset: 0;
38
+ outline-offset: calc(-1 * 3px);
34
39
  outline-offset: var(--ring-outline-offset);
35
40
  }
36
41
  .has-error * .np-select-option:focus {
package/build/types/inlineAlert/InlineAlert.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAmBlB"}
1
+ {"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAiBlB"}
package/build/types/selectOption/SelectOption.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CAC/C,WAAW,EACX,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAC3C,GAAG;IACF,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,WAAW,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC3C,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,WAAW,EAAE,uBAAuB,CAAC;CACtC,GAAG,IAAI,CACN,WAAW,EACX,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,qBAAqB,GAAG,UAAU,CACnG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,QAAQ,EAAE,iBAA6B,EACvC,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAuGtB"}
1
+ {"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CAC/C,WAAW,EACX,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAC3C,GAAG;IACF,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,WAAW,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC3C,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,WAAW,EAAE,uBAAuB,CAAC;CACtC,GAAG,IAAI,CACN,WAAW,EACX,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,qBAAqB,GAAG,UAAU,CACnG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,QAAQ,EAAE,iBAA6B,EACvC,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAoGtB"}
package/build/types/selectOption/SelectOption.messages.d.ts CHANGED
@@ -3,6 +3,10 @@ declare const _default: {
3
3
  id: string;
4
4
  defaultMessage: string;
5
5
  };
6
+ selectedActionLabel: {
7
+ id: string;
8
+ defaultMessage: string;
9
+ };
6
10
  };
7
11
  export default _default;
8
12
  //# sourceMappingURL=SelectOption.messages.d.ts.map
package/build/types/selectOption/SelectOption.messages.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectOption.messages.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}
1
+ {"version":3,"file":"SelectOption.messages.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBASG"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-8a06fb3",
3
+ "version": "0.0.0-experimental-0985009",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -93,12 +93,12 @@
93
93
  "rollup": "^4.17.2",
94
94
  "storybook": "^8.1.10",
95
95
  "@transferwise/less-config": "3.1.0",
96
- "@transferwise/neptune-css": "14.11.0",
96
+ "@transferwise/neptune-css": "0.0.0-experimental-0985009",
97
97
  "@wise/components-theming": "1.3.0"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.7.0",
101
- "@transferwise/neptune-css": "^14.9.6",
101
+ "@transferwise/neptune-css": "0.0.0-experimental-0985009",
102
102
  "@wise/art": "^2.7.0",
103
103
  "@wise/components-theming": "^1.0.0",
104
104
  "react": ">=18",
package/src/i18n/en.json CHANGED
@@ -24,6 +24,7 @@
24
24
  "neptune.Select.searchPlaceholder": "Search...",
25
25
  "neptune.SelectInput.noResultsFound": "No results found",
26
26
  "neptune.SelectOption.action.label": "Choose",
27
+ "neptune.SelectOption.selected.action.label": "Change chosen option",
27
28
  "neptune.Summary.statusDone": "Item done",
28
29
  "neptune.Summary.statusNotDone": "Item to do",
29
30
  "neptune.Summary.statusPending": "Item pending",
package/src/inlineAlert/InlineAlert.tsx CHANGED
@@ -27,12 +27,10 @@ export default function InlineAlert({
27
27
  className,
28
28
  )}
29
29
  >
30
- <div className="d-inline-flex">
31
- {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
32
- <StatusIcon sentiment={type} size={Size.SMALL} />
33
- )}
34
- <div className="np-text-body-default">{children}</div>
35
- </div>
30
+ {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
31
+ <StatusIcon sentiment={type} size={Size.SMALL} />
32
+ )}
33
+ <div className="np-text-body-default">{children}</div>
36
34
  </div>
37
35
  );
38
36
  }
package/src/main.css CHANGED
@@ -1497,8 +1497,8 @@ button.np-option {
1497
1497
  .np-select-option-placeholder:not(.disabled):hover {
1498
1498
  background-color: var(--color-background-neutral-hover);
1499
1499
  }
1500
- .np-select-option-placeholder:focus,
1501
- .np-select-option-placeholder:active {
1500
+ .np-select-option-placeholder:not(.disabled):focus,
1501
+ .np-select-option-placeholder:not(.disabled):active {
1502
1502
  background-color: var(--color-background-neutral-active);
1503
1503
  }
1504
1504
  .np-select-option-selected {
@@ -1509,14 +1509,19 @@ button.np-option {
1509
1509
  max-height: 350px;
1510
1510
  overflow-y: auto;
1511
1511
  }
1512
- .np-select-option-section {
1513
- margin-top: 0 !important;
1512
+ .np-select-option-list > .np-section {
1513
+ margin-top: 0;
1514
+ }
1515
+ .form-group label > .np-select-option {
1516
+ margin-bottom: 0;
1514
1517
  }
1515
1518
  .has-error * .np-select-option {
1516
1519
  --ring-outline-color: var(--color-sentiment-negative);
1517
- --ring-outline-offset: 0;
1520
+ --ring-outline-width: 3px;
1521
+ --ring-outline-offset: calc(-1 * var(--ring-outline-width));
1522
+ outline: var(--ring-outline-color) solid 3px;
1518
1523
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
1519
- outline-offset: 0;
1524
+ outline-offset: calc(-1 * 3px);
1520
1525
  outline-offset: var(--ring-outline-offset);
1521
1526
  }
1522
1527
  .has-error * .np-select-option:focus {
package/src/selectOption/SelectOption.css CHANGED
@@ -11,8 +11,8 @@
11
11
  .np-select-option-placeholder:not(.disabled):hover {
12
12
  background-color: var(--color-background-neutral-hover);
13
13
  }
14
- .np-select-option-placeholder:focus,
15
- .np-select-option-placeholder:active {
14
+ .np-select-option-placeholder:not(.disabled):focus,
15
+ .np-select-option-placeholder:not(.disabled):active {
16
16
  background-color: var(--color-background-neutral-active);
17
17
  }
18
18
  .np-select-option-selected {
@@ -23,14 +23,19 @@
23
23
  max-height: 350px;
24
24
  overflow-y: auto;
25
25
  }
26
- .np-select-option-section {
27
- margin-top: 0 !important;
26
+ .np-select-option-list > .np-section {
27
+ margin-top: 0;
28
+ }
29
+ .form-group label > .np-select-option {
30
+ margin-bottom: 0;
28
31
  }
29
32
  .has-error * .np-select-option {
30
33
  --ring-outline-color: var(--color-sentiment-negative);
31
- --ring-outline-offset: 0;
34
+ --ring-outline-width: 3px;
35
+ --ring-outline-offset: calc(-1 * var(--ring-outline-width));
36
+ outline: var(--ring-outline-color) solid 3px;
32
37
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
33
- outline-offset: 0;
38
+ outline-offset: calc(-1 * 3px);
34
39
  outline-offset: var(--ring-outline-offset);
35
40
  }
36
41
  .has-error * .np-select-option:focus {
package/src/selectOption/SelectOption.less CHANGED
@@ -11,8 +11,8 @@
11
11
  background-color: var(--color-background-neutral-hover);
12
12
  }
13
13
 
14
- &:focus,
15
- &:active {
14
+ &:not(.disabled):focus,
15
+ &:not(.disabled):active {
16
16
  background-color: var(--color-background-neutral-active);
17
17
  }
18
18
  }
@@ -24,16 +24,21 @@
24
24
  &-list {
25
25
  max-height: 350px;
26
26
  overflow-y: auto;
27
+
28
+ & > .np-section {
29
+ // remove large margin in Section & Header
30
+ margin-top: 0;
31
+ }
27
32
  }
28
33
 
29
- &-section {
30
- // override large margin in Section & Header
31
- margin-top: 0 !important;
34
+ .form-group label > & {
35
+ // remove margin-bottom for label
36
+ margin-bottom: 0;
32
37
  }
33
38
 
34
39
  .has-error * & {
35
40
  .ring-negative();
36
- .ring-offset-0();
41
+ .ring-inset();
37
42
  .ring();
38
43
  .focus-ring();
39
44
  }
package/src/selectOption/SelectOption.messages.ts CHANGED
@@ -5,4 +5,8 @@ export default defineMessages({
5
5
  id: 'neptune.SelectOption.action.label',
6
6
  defaultMessage: 'Choose',
7
7
  },
8
+ selectedActionLabel: {
9
+ id: 'neptune.SelectOption.selected.action.label',
10
+ defaultMessage: 'Change chosen option',
11
+ },
8
12
  });
package/src/selectOption/SelectOption.tsx CHANGED
@@ -78,17 +78,14 @@ export default function SelectOption<T>({
78
78
  function getOptions(isLargeScreen = false) {
79
79
  return (
80
80
  <div className={classNames({ 'np-select-option-list': isLargeScreen })}>
81
- {options.map((optionsSection) => (
82
- // eslint-disable-next-line react/jsx-key
83
- <Section
84
- className={classNames('np-select-option-section', { 'p-x-2 p-y-1': isLargeScreen })}
85
- >
81
+ {options.map((optionsSection, index) => (
82
+ <Section key={index} className={classNames({ 'p-x-2 p-y-1': isLargeScreen })}>
86
83
  {optionsSection.title && <Header title={optionsSection.title} />}
87
84
  <NavigationOptionsList>
88
- {optionsSection.options.map((option) => {
85
+ {optionsSection.options.map((option, index) => {
89
86
  return (
90
- // eslint-disable-next-line react/jsx-key
91
87
  <NavigationOption
88
+ key={index}
92
89
  isContainerAligned={!isLargeScreen}
93
90
  showMediaCircle
94
91
  showMediaAtAllSizes
@@ -133,7 +130,7 @@ export default function SelectOption<T>({
133
130
  onClick={handleOnClick(true)}
134
131
  >
135
132
  {hasSelected ? (
136
- <ChevronDown title={intl.formatMessage(messages.actionLabel)} />
133
+ <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />
137
134
  ) : (
138
135
  placeholder.actionLabel || intl.formatMessage(messages.actionLabel)
139
136
  )}