@transferwise/components 0.0.0-experimental-d69faf3 → 0.0.0-experimental-7d2a377
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.
- package/build/i18n/en.json +0 -1
- package/build/index.js +2391 -2482
- package/build/index.js.map +1 -1
- package/build/index.mjs +2394 -2484
- package/build/index.mjs.map +1 -1
- package/build/main.css +0 -33
- package/build/styles/main.css +0 -33
- package/build/types/common/panel/Panel.d.ts.map +1 -1
- package/build/types/common/responsivePanel/ResponsivePanel.d.ts.map +1 -1
- package/build/types/field/Field.d.ts +6 -1
- package/build/types/field/Field.d.ts.map +1 -1
- package/build/types/index.d.ts +0 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/inlineAlert/InlineAlert.d.ts +2 -2
- package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/common/panel/Panel.tsx +3 -7
- package/src/common/responsivePanel/ResponsivePanel.tsx +0 -2
- package/src/field/Field.story.tsx +20 -6
- package/src/field/Field.tsx +23 -13
- package/src/i18n/en.json +0 -1
- package/src/index.ts +0 -2
- package/src/inlineAlert/InlineAlert.story.tsx +13 -5
- package/src/inlineAlert/InlineAlert.tsx +45 -6
- package/src/label/Label.tsx +1 -1
- package/src/main.css +0 -33
- package/src/main.less +0 -1
- package/src/ssr.spec.js +0 -1
- package/build/styles/selectOption/SelectOption.css +0 -33
- package/build/types/selectOption/SelectOption.d.ts +0 -21
- package/build/types/selectOption/SelectOption.d.ts.map +0 -1
- package/build/types/selectOption/SelectOption.messages.d.ts +0 -8
- package/build/types/selectOption/SelectOption.messages.d.ts.map +0 -1
- package/build/types/selectOption/index.d.ts +0 -3
- package/build/types/selectOption/index.d.ts.map +0 -1
- package/src/selectOption/SelectOption.css +0 -33
- package/src/selectOption/SelectOption.less +0 -28
- package/src/selectOption/SelectOption.messages.ts +0 -8
- package/src/selectOption/SelectOption.spec.tsx +0 -14
- package/src/selectOption/SelectOption.story.tsx +0 -207
- package/src/selectOption/SelectOption.tsx +0 -154
- package/src/selectOption/index.ts +0 -2
package/build/main.css
CHANGED
|
@@ -1484,39 +1484,6 @@ button.np-option {
|
|
|
1484
1484
|
border-radius: var(--radius-small);
|
|
1485
1485
|
}
|
|
1486
1486
|
}
|
|
1487
|
-
.np-select-option {
|
|
1488
|
-
border-radius: 10px;
|
|
1489
|
-
border-radius: var(--radius-small);
|
|
1490
|
-
background-color: rgba(134,167,189,0.10196);
|
|
1491
|
-
background-color: var(--color-background-neutral);
|
|
1492
|
-
}
|
|
1493
|
-
.np-select-option-selected {
|
|
1494
|
-
background-color: #ffffff;
|
|
1495
|
-
background-color: var(--color-background-screen);
|
|
1496
|
-
border: 1px solid #c9cbce;
|
|
1497
|
-
border: 1px solid var(--color-interactive-secondary);
|
|
1498
|
-
}
|
|
1499
|
-
.np-select-option-list {
|
|
1500
|
-
max-height: 350px;
|
|
1501
|
-
overflow-y: auto;
|
|
1502
|
-
}
|
|
1503
|
-
.np-select-option-section {
|
|
1504
|
-
margin-top: 0 !important;
|
|
1505
|
-
}
|
|
1506
|
-
.has-error * .np-select-option {
|
|
1507
|
-
--ring-outline-color: var(--color-sentiment-negative);
|
|
1508
|
-
--ring-outline-offset: 0;
|
|
1509
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1510
|
-
outline-offset: 0;
|
|
1511
|
-
outline-offset: var(--ring-outline-offset);
|
|
1512
|
-
}
|
|
1513
|
-
.has-error * .np-select-option:focus {
|
|
1514
|
-
outline: none;
|
|
1515
|
-
}
|
|
1516
|
-
.has-error * .np-select-option:focus-visible {
|
|
1517
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1518
|
-
outline-offset: var(--ring-outline-offset);
|
|
1519
|
-
}
|
|
1520
1487
|
.np-panel__content {
|
|
1521
1488
|
opacity: 0;
|
|
1522
1489
|
visibility: hidden;
|
package/build/styles/main.css
CHANGED
|
@@ -1484,39 +1484,6 @@ button.np-option {
|
|
|
1484
1484
|
border-radius: var(--radius-small);
|
|
1485
1485
|
}
|
|
1486
1486
|
}
|
|
1487
|
-
.np-select-option {
|
|
1488
|
-
border-radius: 10px;
|
|
1489
|
-
border-radius: var(--radius-small);
|
|
1490
|
-
background-color: rgba(134,167,189,0.10196);
|
|
1491
|
-
background-color: var(--color-background-neutral);
|
|
1492
|
-
}
|
|
1493
|
-
.np-select-option-selected {
|
|
1494
|
-
background-color: #ffffff;
|
|
1495
|
-
background-color: var(--color-background-screen);
|
|
1496
|
-
border: 1px solid #c9cbce;
|
|
1497
|
-
border: 1px solid var(--color-interactive-secondary);
|
|
1498
|
-
}
|
|
1499
|
-
.np-select-option-list {
|
|
1500
|
-
max-height: 350px;
|
|
1501
|
-
overflow-y: auto;
|
|
1502
|
-
}
|
|
1503
|
-
.np-select-option-section {
|
|
1504
|
-
margin-top: 0 !important;
|
|
1505
|
-
}
|
|
1506
|
-
.has-error * .np-select-option {
|
|
1507
|
-
--ring-outline-color: var(--color-sentiment-negative);
|
|
1508
|
-
--ring-outline-offset: 0;
|
|
1509
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1510
|
-
outline-offset: 0;
|
|
1511
|
-
outline-offset: var(--ring-outline-offset);
|
|
1512
|
-
}
|
|
1513
|
-
.has-error * .np-select-option:focus {
|
|
1514
|
-
outline: none;
|
|
1515
|
-
}
|
|
1516
|
-
.has-error * .np-select-option:focus-visible {
|
|
1517
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1518
|
-
outline-offset: var(--ring-outline-offset);
|
|
1519
|
-
}
|
|
1520
1487
|
.np-panel__content {
|
|
1521
1488
|
opacity: 0;
|
|
1522
1489
|
visibility: hidden;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/panel/Panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAY,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/panel/Panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAY,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAexF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW,CAAC;IACvE,SAAS,EAAE,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAXD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW;eAC3D,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;kBAC7B,OAAO;;;mFAyGrB,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResponsivePanel.d.ts","sourceRoot":"","sources":["../../../../src/common/responsivePanel/ResponsivePanel.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,eAAe;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ResponsivePanel.d.ts","sourceRoot":"","sources":["../../../../src/common/responsivePanel/ResponsivePanel.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,eAAe;;;;;;;;;;;mGAoCnB,CAAC;AAEH,eAAe,eAAe,CAAC"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
|
+
import { Sentiment } from '../common';
|
|
1
2
|
export type FieldProps = {
|
|
2
3
|
/** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
|
|
3
4
|
id?: string | null;
|
|
4
5
|
label: React.ReactNode;
|
|
6
|
+
/** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
|
|
5
7
|
hint?: React.ReactNode;
|
|
8
|
+
message?: React.ReactNode;
|
|
9
|
+
/** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
|
|
6
10
|
error?: React.ReactNode;
|
|
11
|
+
type?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
|
|
7
12
|
className?: string;
|
|
8
13
|
children?: React.ReactNode;
|
|
9
14
|
};
|
|
10
|
-
export declare const Field: ({ id, label,
|
|
15
|
+
export declare const Field: ({ id, label, message: propMessage, type: propType, className, children, ...props }: FieldProps) => import("react").JSX.Element;
|
|
11
16
|
//# sourceMappingURL=Field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,uFAQf,UAAU,gCA4CZ,CAAC"}
|
package/build/types/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export type { AccordionItem, AccordionProps } from './accordion';
|
|
5
5
|
export type { ActionOptionProps } from './actionOption';
|
|
6
|
-
export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
|
|
7
6
|
export type { AlertAction, AlertProps, AlertType } from './alert';
|
|
8
7
|
export type { AvatarProps } from './avatar';
|
|
9
8
|
export type { BadgeProps } from './badge';
|
|
@@ -66,7 +65,6 @@ export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/ty
|
|
|
66
65
|
export { default as Accordion } from './accordion';
|
|
67
66
|
export { default as ActionButton } from './actionButton';
|
|
68
67
|
export { default as ActionOption } from './actionOption';
|
|
69
|
-
export { default as SelectOption } from './selectOption';
|
|
70
68
|
export { default as Alert } from './alert';
|
|
71
69
|
export { default as Avatar } from './avatar';
|
|
72
70
|
export { default as AvatarWrapper } from './avatarWrapper';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { Sentiment } from '../common';
|
|
3
3
|
export interface InlineAlertProps {
|
|
4
4
|
id?: string;
|
|
@@ -6,5 +6,5 @@ export interface InlineAlertProps {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
children: ReactNode;
|
|
8
8
|
}
|
|
9
|
-
export default function InlineAlert({ id, type, className, children, }: InlineAlertProps):
|
|
9
|
+
export default function InlineAlert({ id, type, className, children, }: InlineAlertProps): React.JSX.Element;
|
|
10
10
|
//# sourceMappingURL=InlineAlert.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,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,qBAmDlB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-7d2a377",
|
|
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": "
|
|
96
|
+
"@transferwise/neptune-css": "0.0.0-experimental-7d2a377",
|
|
97
97
|
"@wise/components-theming": "1.3.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.7.0",
|
|
101
|
-
"@transferwise/neptune-css": "
|
|
101
|
+
"@transferwise/neptune-css": "0.0.0-experimental-7d2a377",
|
|
102
102
|
"@wise/art": "^2.7.0",
|
|
103
103
|
"@wise/components-theming": "^1.0.0",
|
|
104
104
|
"react": ">=18",
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
"dev": "npm-run-all --parallel dev:* dev:*:* storybook:dev",
|
|
135
135
|
"dev:less:watch": "gulp watchLess --dest=src",
|
|
136
136
|
"dev:translations": "pnpm build:crowdin-source-file",
|
|
137
|
-
"storybook:dev": "storybook dev -p
|
|
137
|
+
"storybook:dev": "storybook dev -p 3001",
|
|
138
138
|
"storybook:build": "storybook build --stats-json",
|
|
139
139
|
"build:css": "gulp compileLess --dest=src",
|
|
140
140
|
"build": "npm-run-all build:*",
|
|
@@ -14,8 +14,7 @@ import { usePopper } from 'react-popper';
|
|
|
14
14
|
import { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';
|
|
15
15
|
import Dimmer from '../../dimmer';
|
|
16
16
|
|
|
17
|
-
const POPOVER_OFFSET = [0,
|
|
18
|
-
const POPOVER_WITH_ARROW_OFFSET = [0, 16];
|
|
17
|
+
const POPOVER_OFFSET = [0, 16];
|
|
19
18
|
|
|
20
19
|
// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
|
|
21
20
|
// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
|
|
@@ -57,14 +56,13 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
|
|
|
57
56
|
const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
|
|
58
57
|
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
|
|
59
58
|
|
|
60
|
-
const modifiers = [
|
|
59
|
+
const modifiers = [];
|
|
61
60
|
|
|
62
61
|
if (altAxis) {
|
|
63
62
|
modifiers.push({
|
|
64
63
|
// https://popper.js.org/docs/v2/modifiers/prevent-overflow
|
|
65
64
|
name: 'preventOverflow',
|
|
66
65
|
options: {
|
|
67
|
-
// @ts-expect-error - Popper has altAxis prop for preventOverflow config
|
|
68
66
|
altAxis: true,
|
|
69
67
|
tether: false,
|
|
70
68
|
},
|
|
@@ -75,7 +73,6 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
|
|
|
75
73
|
modifiers.push({
|
|
76
74
|
name: 'arrow',
|
|
77
75
|
options: {
|
|
78
|
-
// @ts-expect-error - Popper has element prop for arrow config
|
|
79
76
|
element: arrowElement,
|
|
80
77
|
options: {
|
|
81
78
|
padding: 8, // 8px from the edges of the popper
|
|
@@ -83,13 +80,12 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
|
|
|
83
80
|
},
|
|
84
81
|
});
|
|
85
82
|
// This lets you displace a popper element from its reference element.
|
|
86
|
-
modifiers.push({ name: 'offset', options: { offset:
|
|
83
|
+
modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });
|
|
87
84
|
}
|
|
88
85
|
if (flip && fallbackPlacements[position]) {
|
|
89
86
|
modifiers.push({
|
|
90
87
|
name: 'flip',
|
|
91
88
|
options: {
|
|
92
|
-
// @ts-expect-error - Popper has padding for flip config
|
|
93
89
|
fallbackPlacements: fallbackPlacements[position],
|
|
94
90
|
},
|
|
95
91
|
});
|
|
@@ -16,7 +16,6 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
|
|
|
16
16
|
onClose,
|
|
17
17
|
open = false,
|
|
18
18
|
position = Position.BOTTOM,
|
|
19
|
-
anchorWidth = false,
|
|
20
19
|
}: PanelProps,
|
|
21
20
|
reference,
|
|
22
21
|
) {
|
|
@@ -36,7 +35,6 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
|
|
|
36
35
|
arrow={arrow}
|
|
37
36
|
open={open}
|
|
38
37
|
position={position}
|
|
39
|
-
anchorWidth={anchorWidth}
|
|
40
38
|
anchorRef={anchorRef}
|
|
41
39
|
className={className}
|
|
42
40
|
onClose={onClose}
|
|
@@ -2,10 +2,12 @@ import { useState } from 'react';
|
|
|
2
2
|
|
|
3
3
|
import { Input } from '../inputs/Input';
|
|
4
4
|
import { Field } from './Field';
|
|
5
|
+
import { Sentiment } from '../common';
|
|
5
6
|
|
|
6
7
|
export default {
|
|
7
8
|
component: Field,
|
|
8
9
|
title: 'Field',
|
|
10
|
+
tags: ['autodocs'],
|
|
9
11
|
};
|
|
10
12
|
|
|
11
13
|
export const Basic = () => {
|
|
@@ -17,19 +19,27 @@ export const Basic = () => {
|
|
|
17
19
|
);
|
|
18
20
|
};
|
|
19
21
|
|
|
20
|
-
export const
|
|
22
|
+
export const WithStatusMessages = () => {
|
|
21
23
|
const [value, setValue] = useState<string | undefined>('This is some text');
|
|
22
24
|
return (
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
|
|
25
|
+
<div>
|
|
26
|
+
<Field label="Phone number" type={Sentiment.POSITIVE} message="Positive message">
|
|
27
|
+
<Input value={value} onChange={({ target }) => setValue(target.value)} />
|
|
28
|
+
</Field>
|
|
29
|
+
<Field label="Phone number" type={Sentiment.WARNING} message="Warning message">
|
|
30
|
+
<Input value={value} onChange={({ target }) => setValue(target.value)} />
|
|
31
|
+
</Field>
|
|
32
|
+
<Field label="Phone number" type={Sentiment.NEGATIVE} message="This is a required field">
|
|
33
|
+
<Input value={value} onChange={({ target }) => setValue(target.value)} />
|
|
34
|
+
</Field>
|
|
35
|
+
</div>
|
|
26
36
|
);
|
|
27
37
|
};
|
|
28
38
|
|
|
29
39
|
export const WithHelp = () => {
|
|
30
40
|
const [value, setValue] = useState<string | undefined>('This is some text');
|
|
31
41
|
return (
|
|
32
|
-
<Field label="Phone number"
|
|
42
|
+
<Field label="Phone number" message="This is a helpful message">
|
|
33
43
|
<Input value={value} onChange={({ target }) => setValue(target.value)} />
|
|
34
44
|
</Field>
|
|
35
45
|
);
|
|
@@ -39,7 +49,11 @@ export const WithHelpAndErrorOnBlur = () => {
|
|
|
39
49
|
const [value, setValue] = useState<string | undefined>('This is some text');
|
|
40
50
|
const [error, setError] = useState<string | undefined>(undefined);
|
|
41
51
|
return (
|
|
42
|
-
<Field
|
|
52
|
+
<Field
|
|
53
|
+
label="Phone number"
|
|
54
|
+
type={error ? Sentiment.NEGATIVE : Sentiment.NEUTRAL}
|
|
55
|
+
message={error || 'Please include country code'}
|
|
56
|
+
>
|
|
43
57
|
<Input
|
|
44
58
|
value={value}
|
|
45
59
|
onChange={({ target }) => {
|
package/src/field/Field.tsx
CHANGED
|
@@ -15,15 +15,28 @@ export type FieldProps = {
|
|
|
15
15
|
/** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
|
|
16
16
|
id?: string | null;
|
|
17
17
|
label: React.ReactNode;
|
|
18
|
+
/** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
|
|
18
19
|
hint?: React.ReactNode;
|
|
20
|
+
message?: React.ReactNode;
|
|
21
|
+
/** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
|
|
19
22
|
error?: React.ReactNode;
|
|
23
|
+
type?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
|
|
20
24
|
className?: string;
|
|
21
25
|
children?: React.ReactNode;
|
|
22
26
|
};
|
|
23
27
|
|
|
24
|
-
export const Field = ({
|
|
25
|
-
|
|
26
|
-
|
|
28
|
+
export const Field = ({
|
|
29
|
+
id,
|
|
30
|
+
label,
|
|
31
|
+
message: propMessage,
|
|
32
|
+
type: propType,
|
|
33
|
+
className,
|
|
34
|
+
children,
|
|
35
|
+
...props
|
|
36
|
+
}: FieldProps) => {
|
|
37
|
+
const type = props.error ? Sentiment.NEGATIVE : propType;
|
|
38
|
+
const message = props.error || props.hint || propMessage;
|
|
39
|
+
const hasError = type === Sentiment.NEGATIVE;
|
|
27
40
|
|
|
28
41
|
const labelId = useId();
|
|
29
42
|
|
|
@@ -35,14 +48,16 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
|
|
|
35
48
|
return (
|
|
36
49
|
<FieldLabelIdContextProvider value={labelId}>
|
|
37
50
|
<InputIdContextProvider value={inputId}>
|
|
38
|
-
<InputDescribedByProvider value={
|
|
51
|
+
<InputDescribedByProvider value={message ? descriptionId : undefined}>
|
|
39
52
|
<InputInvalidProvider value={hasError}>
|
|
40
53
|
<div
|
|
41
54
|
className={classNames(
|
|
42
55
|
'form-group d-block',
|
|
43
56
|
{
|
|
57
|
+
'has-success': type === Sentiment.POSITIVE,
|
|
58
|
+
'has-warning': type === Sentiment.WARNING,
|
|
44
59
|
'has-error': hasError,
|
|
45
|
-
'has-info':
|
|
60
|
+
'has-info': type === Sentiment.NEUTRAL,
|
|
46
61
|
},
|
|
47
62
|
className,
|
|
48
63
|
)}
|
|
@@ -51,14 +66,9 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
|
|
|
51
66
|
{label}
|
|
52
67
|
{children}
|
|
53
68
|
</Label>
|
|
54
|
-
{
|
|
55
|
-
<InlineAlert type={
|
|
56
|
-
{
|
|
57
|
-
</InlineAlert>
|
|
58
|
-
)}
|
|
59
|
-
{hasError && (
|
|
60
|
-
<InlineAlert type={Sentiment.NEGATIVE} id={descriptionId}>
|
|
61
|
-
{error}
|
|
69
|
+
{message && (
|
|
70
|
+
<InlineAlert type={type} id={descriptionId}>
|
|
71
|
+
{message}
|
|
62
72
|
</InlineAlert>
|
|
63
73
|
)}
|
|
64
74
|
</div>
|
package/src/i18n/en.json
CHANGED
|
@@ -23,7 +23,6 @@
|
|
|
23
23
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
|
|
24
24
|
"neptune.Select.searchPlaceholder": "Search...",
|
|
25
25
|
"neptune.SelectInput.noResultsFound": "No results found",
|
|
26
|
-
"neptune.SelectOption.action.label": "Choose",
|
|
27
26
|
"neptune.Summary.statusDone": "Item done",
|
|
28
27
|
"neptune.Summary.statusNotDone": "Item to do",
|
|
29
28
|
"neptune.Summary.statusPending": "Item pending",
|
package/src/index.ts
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export type { AccordionItem, AccordionProps } from './accordion';
|
|
5
5
|
export type { ActionOptionProps } from './actionOption';
|
|
6
|
-
export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
|
|
7
6
|
export type { AlertAction, AlertProps, AlertType } from './alert';
|
|
8
7
|
export type { AvatarProps } from './avatar';
|
|
9
8
|
export type { BadgeProps } from './badge';
|
|
@@ -87,7 +86,6 @@ export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/ty
|
|
|
87
86
|
export { default as Accordion } from './accordion';
|
|
88
87
|
export { default as ActionButton } from './actionButton';
|
|
89
88
|
export { default as ActionOption } from './actionOption';
|
|
90
|
-
export { default as SelectOption } from './selectOption';
|
|
91
89
|
export { default as Alert } from './alert';
|
|
92
90
|
export { default as Avatar } from './avatar';
|
|
93
91
|
export { default as AvatarWrapper } from './avatarWrapper';
|
|
@@ -51,7 +51,7 @@ export const Basic = () => {
|
|
|
51
51
|
|
|
52
52
|
return (
|
|
53
53
|
<>
|
|
54
|
-
{/*eslint-disable-next-line react/no-adjacent-inline-elements */}
|
|
54
|
+
{/* eslint-disable-next-line react/no-adjacent-inline-elements */}
|
|
55
55
|
<p>
|
|
56
56
|
The styling for the input (the coloured border) and the visibility of the inline alert is
|
|
57
57
|
controlled through the use of <code>has-***</code> classes which are applied to the{' '}
|
|
@@ -60,7 +60,11 @@ export const Basic = () => {
|
|
|
60
60
|
element. The available classes are <code>has-error</code>, <code>has-info</code>,{' '}
|
|
61
61
|
<code>has-warning</code> and <code>has-success</code>.
|
|
62
62
|
</p>
|
|
63
|
-
<p>
|
|
63
|
+
<p>
|
|
64
|
+
Where possible consumers should use{' '}
|
|
65
|
+
<a href="https://storybook.wise.design/?path=/story/field--basic">Field</a> instead of doing
|
|
66
|
+
this manually.
|
|
67
|
+
</p>
|
|
64
68
|
<div className={`form-group ${typeClass}`}>
|
|
65
69
|
<label className="control-label" htmlFor="id0">
|
|
66
70
|
Toggleable
|
|
@@ -73,14 +77,18 @@ export const Basic = () => {
|
|
|
73
77
|
Negative
|
|
74
78
|
</label>
|
|
75
79
|
<Input id="id1" value="Neptune is cool" />
|
|
76
|
-
<InlineAlert type="
|
|
80
|
+
<InlineAlert type="negative">{message}</InlineAlert>
|
|
77
81
|
</div>
|
|
78
|
-
<div className="form-group has-
|
|
82
|
+
<div className="form-group has-success">
|
|
79
83
|
<label className="control-label" htmlFor="id2">
|
|
80
84
|
Positive
|
|
81
85
|
</label>
|
|
82
86
|
<Input id="id2" value="Neptune is cool" />
|
|
83
|
-
<InlineAlert type="positive">
|
|
87
|
+
<InlineAlert type="positive">
|
|
88
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
|
|
89
|
+
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
|
90
|
+
ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
91
|
+
</InlineAlert>
|
|
84
92
|
</div>
|
|
85
93
|
<div className="form-group has-neutral">
|
|
86
94
|
<label className="control-label" htmlFor="id3">
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AlertCircleFill, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import { ReactNode } from 'react';
|
|
3
|
+
import React, { ReactNode } from 'react';
|
|
4
4
|
|
|
5
5
|
import { Sentiment } from '../common';
|
|
6
6
|
|
|
@@ -17,15 +17,54 @@ export default function InlineAlert({
|
|
|
17
17
|
className,
|
|
18
18
|
children,
|
|
19
19
|
}: InlineAlertProps) {
|
|
20
|
-
const
|
|
20
|
+
const getStatusIcon = (sentiment: Sentiment) => {
|
|
21
|
+
switch (sentiment) {
|
|
22
|
+
case Sentiment.POSITIVE:
|
|
23
|
+
case Sentiment.SUCCESS:
|
|
24
|
+
return <CheckCircleFill />;
|
|
25
|
+
case Sentiment.WARNING:
|
|
26
|
+
return <AlertCircleFill />;
|
|
27
|
+
case Sentiment.NEGATIVE:
|
|
28
|
+
case Sentiment.ERROR:
|
|
29
|
+
return <CrossCircleFill />;
|
|
30
|
+
default:
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const hasTextChildren = (content: ReactNode) => {
|
|
36
|
+
let label = '';
|
|
37
|
+
|
|
38
|
+
const fillLabel = (childrenNodes: ReactNode) => {
|
|
39
|
+
React.Children.map(childrenNodes, (child: ReactNode) => {
|
|
40
|
+
if (typeof child === 'string') {
|
|
41
|
+
label += child;
|
|
42
|
+
}
|
|
43
|
+
if (typeof child === 'object' && React.isValidElement(child)) {
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
45
|
+
fillLabel(child?.props?.children as ReactNode);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
fillLabel(content);
|
|
51
|
+
|
|
52
|
+
return !!label.length;
|
|
53
|
+
};
|
|
54
|
+
|
|
21
55
|
return (
|
|
22
56
|
<div
|
|
23
57
|
role="alert"
|
|
24
58
|
id={id}
|
|
25
|
-
className={classNames(
|
|
59
|
+
className={classNames(
|
|
60
|
+
'alert alert-detach',
|
|
61
|
+
`alert-${[Sentiment.NEGATIVE, Sentiment.ERROR].includes(type as Sentiment) ? 'danger' : type}`,
|
|
62
|
+
className,
|
|
63
|
+
)}
|
|
26
64
|
>
|
|
27
|
-
{
|
|
28
|
-
|
|
65
|
+
{/* We should show the status icon only if we have some text to show */}
|
|
66
|
+
{hasTextChildren(children) && getStatusIcon(type as Sentiment)}
|
|
67
|
+
<div className="np-text-body-default">{children}</div>
|
|
29
68
|
</div>
|
|
30
69
|
);
|
|
31
70
|
}
|
package/src/label/Label.tsx
CHANGED
|
@@ -12,7 +12,7 @@ export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
|
|
|
12
12
|
<label
|
|
13
13
|
id={id}
|
|
14
14
|
htmlFor={htmlFor}
|
|
15
|
-
className={classNames('control-label d-flex flex-column gap-y-
|
|
15
|
+
className={classNames('control-label d-flex flex-column gap-y-xs m-b-0', className)}
|
|
16
16
|
>
|
|
17
17
|
{children}
|
|
18
18
|
</label>
|
package/src/main.css
CHANGED
|
@@ -1484,39 +1484,6 @@ button.np-option {
|
|
|
1484
1484
|
border-radius: var(--radius-small);
|
|
1485
1485
|
}
|
|
1486
1486
|
}
|
|
1487
|
-
.np-select-option {
|
|
1488
|
-
border-radius: 10px;
|
|
1489
|
-
border-radius: var(--radius-small);
|
|
1490
|
-
background-color: rgba(134,167,189,0.10196);
|
|
1491
|
-
background-color: var(--color-background-neutral);
|
|
1492
|
-
}
|
|
1493
|
-
.np-select-option-selected {
|
|
1494
|
-
background-color: #ffffff;
|
|
1495
|
-
background-color: var(--color-background-screen);
|
|
1496
|
-
border: 1px solid #c9cbce;
|
|
1497
|
-
border: 1px solid var(--color-interactive-secondary);
|
|
1498
|
-
}
|
|
1499
|
-
.np-select-option-list {
|
|
1500
|
-
max-height: 350px;
|
|
1501
|
-
overflow-y: auto;
|
|
1502
|
-
}
|
|
1503
|
-
.np-select-option-section {
|
|
1504
|
-
margin-top: 0 !important;
|
|
1505
|
-
}
|
|
1506
|
-
.has-error * .np-select-option {
|
|
1507
|
-
--ring-outline-color: var(--color-sentiment-negative);
|
|
1508
|
-
--ring-outline-offset: 0;
|
|
1509
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1510
|
-
outline-offset: 0;
|
|
1511
|
-
outline-offset: var(--ring-outline-offset);
|
|
1512
|
-
}
|
|
1513
|
-
.has-error * .np-select-option:focus {
|
|
1514
|
-
outline: none;
|
|
1515
|
-
}
|
|
1516
|
-
.has-error * .np-select-option:focus-visible {
|
|
1517
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1518
|
-
outline-offset: var(--ring-outline-offset);
|
|
1519
|
-
}
|
|
1520
1487
|
.np-panel__content {
|
|
1521
1488
|
opacity: 0;
|
|
1522
1489
|
visibility: hidden;
|
package/src/main.less
CHANGED
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
@import "./common/card/Card.less";
|
|
14
14
|
@import "./common/closeButton/CloseButton.less";
|
|
15
15
|
@import "./common/Option/Option.less";
|
|
16
|
-
@import "./selectOption/SelectOption.less";
|
|
17
16
|
@import "./common/panel/Panel.less";
|
|
18
17
|
@import "./common/RadioButton/RadioButton.less";
|
|
19
18
|
@import "./dateInput/DateInput.less";
|
package/src/ssr.spec.js
CHANGED
|
@@ -226,7 +226,6 @@ describe('Server side rendering', () => {
|
|
|
226
226
|
DateLookup: { value: new Date() },
|
|
227
227
|
Link: { size: 16 },
|
|
228
228
|
Tooltip: { children: <>yo</> },
|
|
229
|
-
SelectOption: { placeholder: { media: <img alt="img" /> } },
|
|
230
229
|
};
|
|
231
230
|
|
|
232
231
|
const { Provider } = exposedLibraryItems;
|