@transferwise/components 0.0.0-experimental-9462b09 → 0.0.0-experimental-343827b
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 -2
- package/build/index.js +2358 -2453
- package/build/index.js.map +1 -1
- package/build/index.mjs +2361 -2455
- package/build/index.mjs.map +1 -1
- package/build/main.css +2 -49
- package/build/styles/main.css +2 -49
- package/build/styles/segmentedControl/SegmentedControl.css +2 -2
- package/build/types/checkboxButton/CheckboxButton.d.ts.map +1 -1
- package/build/types/common/responsivePanel/ResponsivePanel.d.ts.map +1 -1
- package/build/types/field/Field.d.ts +2 -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/segmentedControl/SegmentedControl.d.ts.map +1 -1
- package/build/types/tabs/TabList.d.ts +3 -8
- package/build/types/tabs/TabList.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/checkbox/Checkbox.spec.tsx +13 -0
- package/src/checkbox/Checkbox.story.tsx +13 -0
- package/src/checkboxButton/CheckboxButton.tsx +12 -4
- package/src/common/responsivePanel/ResponsivePanel.tsx +0 -2
- package/src/field/Field.tsx +11 -5
- package/src/i18n/en.json +0 -2
- package/src/index.ts +0 -2
- package/src/main.css +2 -49
- package/src/main.less +0 -1
- package/src/segmentedControl/SegmentedControl.css +2 -2
- package/src/segmentedControl/SegmentedControl.less +1 -1
- package/src/segmentedControl/SegmentedControl.spec.tsx +10 -0
- package/src/segmentedControl/SegmentedControl.story.tsx +42 -4
- package/src/segmentedControl/SegmentedControl.tsx +5 -1
- package/src/ssr.spec.js +0 -1
- package/src/tabs/TabList.tsx +15 -0
- package/src/tabs/Tabs.rtl.spec.tsx +40 -0
- package/src/tabs/Tabs.story.tsx +88 -0
- package/build/styles/selectOption/SelectOption.css +0 -47
- 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 -12
- 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 -47
- package/src/selectOption/SelectOption.less +0 -45
- package/src/selectOption/SelectOption.messages.ts +0 -12
- package/src/selectOption/SelectOption.spec.tsx +0 -89
- package/src/selectOption/SelectOption.story.tsx +0 -269
- package/src/selectOption/SelectOption.tsx +0 -151
- package/src/selectOption/index.ts +0 -2
- package/src/tabs/TabList.js +0 -15
- package/src/tabs/Tabs.story.js +0 -135
package/build/main.css
CHANGED
|
@@ -1491,53 +1491,6 @@ button.np-option {
|
|
|
1491
1491
|
border-radius: var(--radius-small);
|
|
1492
1492
|
}
|
|
1493
1493
|
}
|
|
1494
|
-
.np-select-option {
|
|
1495
|
-
border-radius: 10px;
|
|
1496
|
-
border-radius: var(--radius-small);
|
|
1497
|
-
padding: 16px;
|
|
1498
|
-
padding: var(--size-16);
|
|
1499
|
-
}
|
|
1500
|
-
.np-select-option-placeholder {
|
|
1501
|
-
background-color: rgba(134,167,189,0.10196);
|
|
1502
|
-
background-color: var(--color-background-neutral);
|
|
1503
|
-
}
|
|
1504
|
-
.np-select-option-placeholder:not(.disabled):hover {
|
|
1505
|
-
background-color: var(--color-background-neutral-hover);
|
|
1506
|
-
}
|
|
1507
|
-
.np-select-option-placeholder:not(.disabled):focus,
|
|
1508
|
-
.np-select-option-placeholder:not(.disabled):active {
|
|
1509
|
-
background-color: var(--color-background-neutral-active);
|
|
1510
|
-
}
|
|
1511
|
-
.np-select-option-selected {
|
|
1512
|
-
border: 1px solid #c9cbce;
|
|
1513
|
-
border: 1px solid var(--color-interactive-secondary);
|
|
1514
|
-
}
|
|
1515
|
-
.np-select-option-list {
|
|
1516
|
-
max-height: 350px;
|
|
1517
|
-
overflow-y: auto;
|
|
1518
|
-
}
|
|
1519
|
-
.np-select-option-list > .np-section {
|
|
1520
|
-
margin-top: 0;
|
|
1521
|
-
}
|
|
1522
|
-
.form-group label > .np-select-option {
|
|
1523
|
-
margin-bottom: 0;
|
|
1524
|
-
}
|
|
1525
|
-
.has-error * .np-select-option {
|
|
1526
|
-
--ring-outline-color: var(--color-sentiment-negative);
|
|
1527
|
-
--ring-outline-width: 3px;
|
|
1528
|
-
--ring-outline-offset: calc(-1 * var(--ring-outline-width));
|
|
1529
|
-
outline: var(--ring-outline-color) solid 3px;
|
|
1530
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1531
|
-
outline-offset: calc(-1 * 3px);
|
|
1532
|
-
outline-offset: var(--ring-outline-offset);
|
|
1533
|
-
}
|
|
1534
|
-
.has-error * .np-select-option:focus {
|
|
1535
|
-
outline: none;
|
|
1536
|
-
}
|
|
1537
|
-
.has-error * .np-select-option:focus-visible {
|
|
1538
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1539
|
-
outline-offset: var(--ring-outline-offset);
|
|
1540
|
-
}
|
|
1541
1494
|
.np-panel__content {
|
|
1542
1495
|
opacity: 0;
|
|
1543
1496
|
visibility: hidden;
|
|
@@ -4788,8 +4741,8 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4788
4741
|
flex-flow: column;
|
|
4789
4742
|
padding: 8px 16px;
|
|
4790
4743
|
padding: var(--size-8) var(--size-16);
|
|
4791
|
-
margin: 0 0 0 4px;
|
|
4792
|
-
margin: 0 0 0 var(--size-4);
|
|
4744
|
+
margin: 0 0 0 4px !important;
|
|
4745
|
+
margin: 0 0 0 var(--size-4) !important;
|
|
4793
4746
|
min-width: 0;
|
|
4794
4747
|
line-height: inherit;
|
|
4795
4748
|
align-items: center;
|
package/build/styles/main.css
CHANGED
|
@@ -1491,53 +1491,6 @@ button.np-option {
|
|
|
1491
1491
|
border-radius: var(--radius-small);
|
|
1492
1492
|
}
|
|
1493
1493
|
}
|
|
1494
|
-
.np-select-option {
|
|
1495
|
-
border-radius: 10px;
|
|
1496
|
-
border-radius: var(--radius-small);
|
|
1497
|
-
padding: 16px;
|
|
1498
|
-
padding: var(--size-16);
|
|
1499
|
-
}
|
|
1500
|
-
.np-select-option-placeholder {
|
|
1501
|
-
background-color: rgba(134,167,189,0.10196);
|
|
1502
|
-
background-color: var(--color-background-neutral);
|
|
1503
|
-
}
|
|
1504
|
-
.np-select-option-placeholder:not(.disabled):hover {
|
|
1505
|
-
background-color: var(--color-background-neutral-hover);
|
|
1506
|
-
}
|
|
1507
|
-
.np-select-option-placeholder:not(.disabled):focus,
|
|
1508
|
-
.np-select-option-placeholder:not(.disabled):active {
|
|
1509
|
-
background-color: var(--color-background-neutral-active);
|
|
1510
|
-
}
|
|
1511
|
-
.np-select-option-selected {
|
|
1512
|
-
border: 1px solid #c9cbce;
|
|
1513
|
-
border: 1px solid var(--color-interactive-secondary);
|
|
1514
|
-
}
|
|
1515
|
-
.np-select-option-list {
|
|
1516
|
-
max-height: 350px;
|
|
1517
|
-
overflow-y: auto;
|
|
1518
|
-
}
|
|
1519
|
-
.np-select-option-list > .np-section {
|
|
1520
|
-
margin-top: 0;
|
|
1521
|
-
}
|
|
1522
|
-
.form-group label > .np-select-option {
|
|
1523
|
-
margin-bottom: 0;
|
|
1524
|
-
}
|
|
1525
|
-
.has-error * .np-select-option {
|
|
1526
|
-
--ring-outline-color: var(--color-sentiment-negative);
|
|
1527
|
-
--ring-outline-width: 3px;
|
|
1528
|
-
--ring-outline-offset: calc(-1 * var(--ring-outline-width));
|
|
1529
|
-
outline: var(--ring-outline-color) solid 3px;
|
|
1530
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1531
|
-
outline-offset: calc(-1 * 3px);
|
|
1532
|
-
outline-offset: var(--ring-outline-offset);
|
|
1533
|
-
}
|
|
1534
|
-
.has-error * .np-select-option:focus {
|
|
1535
|
-
outline: none;
|
|
1536
|
-
}
|
|
1537
|
-
.has-error * .np-select-option:focus-visible {
|
|
1538
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1539
|
-
outline-offset: var(--ring-outline-offset);
|
|
1540
|
-
}
|
|
1541
1494
|
.np-panel__content {
|
|
1542
1495
|
opacity: 0;
|
|
1543
1496
|
visibility: hidden;
|
|
@@ -4788,8 +4741,8 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4788
4741
|
flex-flow: column;
|
|
4789
4742
|
padding: 8px 16px;
|
|
4790
4743
|
padding: var(--size-8) var(--size-16);
|
|
4791
|
-
margin: 0 0 0 4px;
|
|
4792
|
-
margin: 0 0 0 var(--size-4);
|
|
4744
|
+
margin: 0 0 0 4px !important;
|
|
4745
|
+
margin: 0 0 0 var(--size-4) !important;
|
|
4793
4746
|
min-width: 0;
|
|
4794
4747
|
line-height: inherit;
|
|
4795
4748
|
align-items: center;
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
flex-flow: column;
|
|
47
47
|
padding: 8px 16px;
|
|
48
48
|
padding: var(--size-8) var(--size-16);
|
|
49
|
-
margin: 0 0 0 4px;
|
|
50
|
-
margin: 0 0 0 var(--size-4);
|
|
49
|
+
margin: 0 0 0 4px !important;
|
|
50
|
+
margin: 0 0 0 var(--size-4) !important;
|
|
51
51
|
min-width: 0;
|
|
52
52
|
line-height: inherit;
|
|
53
53
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../src/checkboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../src/checkboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAExE,QAAA,MAAM,cAAc,kHAsBlB,CAAC;AAEH,eAAe,cAAc,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"}
|
|
@@ -2,7 +2,8 @@ import { Sentiment } from '../common';
|
|
|
2
2
|
export type FieldProps = {
|
|
3
3
|
/** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
|
|
4
4
|
id?: string | null;
|
|
5
|
-
|
|
5
|
+
/** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
|
|
6
|
+
label?: React.ReactNode;
|
|
6
7
|
/** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
|
|
7
8
|
hint?: React.ReactNode;
|
|
8
9
|
message?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,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,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCAiDZ,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAOA,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,gCA6HvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
children: any;
|
|
4
|
-
}): import("react").JSX.Element;
|
|
5
|
-
declare namespace TabList {
|
|
6
|
-
namespace propTypes {
|
|
7
|
-
let children: any;
|
|
8
|
-
}
|
|
1
|
+
export interface TabListProps {
|
|
2
|
+
children?: React.ReactNode;
|
|
9
3
|
}
|
|
4
|
+
export default function TabList({ children }: TabListProps): import("react").JSX.Element;
|
|
10
5
|
//# sourceMappingURL=TabList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabList.
|
|
1
|
+
{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabList.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAQzD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { render, fireEvent, screen } from '@testing-library/react';
|
|
2
2
|
|
|
3
3
|
import Checkbox, { CheckboxProps } from '.';
|
|
4
|
+
import { Field } from '../field/Field';
|
|
4
5
|
|
|
5
6
|
describe('Checkbox', () => {
|
|
6
7
|
let props: CheckboxProps;
|
|
@@ -115,6 +116,18 @@ describe('Checkbox', () => {
|
|
|
115
116
|
expect(getCheckboxContainer(container)).toHaveClass('checkbox-lg');
|
|
116
117
|
});
|
|
117
118
|
|
|
119
|
+
it('supports `Field` for error messages', () => {
|
|
120
|
+
render(
|
|
121
|
+
<Field message="Something went wrong" sentiment="negative">
|
|
122
|
+
<Checkbox {...props} checked />
|
|
123
|
+
</Field>,
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
const checkbox = screen.getByRole('checkbox');
|
|
127
|
+
expect(checkbox).toBeInvalid();
|
|
128
|
+
expect(checkbox).toHaveAccessibleDescription('Something went wrong');
|
|
129
|
+
});
|
|
130
|
+
|
|
118
131
|
const getCheckboxContainer = (container: HTMLElement) => container.querySelector('.np-checkbox');
|
|
119
132
|
const getLabel = () => screen.getByText('hello').parentElement!;
|
|
120
133
|
const getCheckbox = () => screen.getByRole('checkbox');
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { fn } from '@storybook/test';
|
|
2
3
|
|
|
4
|
+
import { Field } from '../field/Field';
|
|
3
5
|
import { lorem10, storyConfig } from '../test-utils';
|
|
4
6
|
|
|
5
7
|
import Checkbox from './Checkbox';
|
|
@@ -9,6 +11,7 @@ export default {
|
|
|
9
11
|
title: 'Forms/Checkbox',
|
|
10
12
|
args: {
|
|
11
13
|
label: 'This is the label',
|
|
14
|
+
onChange: fn(),
|
|
12
15
|
},
|
|
13
16
|
tags: ['autodocs'],
|
|
14
17
|
} satisfies Meta<typeof Checkbox>;
|
|
@@ -37,3 +40,13 @@ export const Multiple: Story = storyConfig(
|
|
|
37
40
|
export const MultipleMobile: Story = storyConfig(Multiple, {
|
|
38
41
|
variants: ['default', 'dark', 'rtl', 'mobile'],
|
|
39
42
|
});
|
|
43
|
+
|
|
44
|
+
export const WithinField = {
|
|
45
|
+
decorators: [
|
|
46
|
+
(Story) => (
|
|
47
|
+
<Field message="Something went wrong" sentiment="negative">
|
|
48
|
+
<Story />
|
|
49
|
+
</Field>
|
|
50
|
+
),
|
|
51
|
+
],
|
|
52
|
+
} satisfies Story;
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
2
|
import { InputHTMLAttributes, forwardRef } from 'react';
|
|
3
3
|
|
|
4
|
+
import { useInputAttributes } from '../inputs/contexts';
|
|
5
|
+
|
|
4
6
|
export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;
|
|
5
7
|
|
|
6
|
-
const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(
|
|
7
|
-
|
|
8
|
+
const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(
|
|
9
|
+
{ checked, className, disabled, onChange, ...rest },
|
|
10
|
+
reference,
|
|
11
|
+
) {
|
|
12
|
+
const inputAttributes = useInputAttributes();
|
|
13
|
+
|
|
14
|
+
return (
|
|
8
15
|
<span className={classNames('np-checkbox-button', className, disabled && 'disabled')}>
|
|
9
16
|
<input
|
|
17
|
+
{...inputAttributes}
|
|
10
18
|
{...rest}
|
|
11
19
|
ref={reference}
|
|
12
20
|
type="checkbox"
|
|
@@ -18,7 +26,7 @@ const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(
|
|
|
18
26
|
<span className="tw-checkbox-check" />
|
|
19
27
|
</span>
|
|
20
28
|
</span>
|
|
21
|
-
)
|
|
22
|
-
);
|
|
29
|
+
);
|
|
30
|
+
});
|
|
23
31
|
|
|
24
32
|
export default CheckboxButton;
|
|
@@ -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}
|
package/src/field/Field.tsx
CHANGED
|
@@ -14,7 +14,8 @@ import { Label } from '../label/Label';
|
|
|
14
14
|
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
|
+
/** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
|
|
18
|
+
label?: React.ReactNode;
|
|
18
19
|
/** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
|
|
19
20
|
hint?: React.ReactNode;
|
|
20
21
|
message?: React.ReactNode;
|
|
@@ -62,10 +63,15 @@ export const Field = ({
|
|
|
62
63
|
className,
|
|
63
64
|
)}
|
|
64
65
|
>
|
|
65
|
-
|
|
66
|
-
{
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
{label != null ? (
|
|
67
|
+
<Label id={labelId} htmlFor={inputId}>
|
|
68
|
+
{label}
|
|
69
|
+
{children}
|
|
70
|
+
</Label>
|
|
71
|
+
) : (
|
|
72
|
+
children
|
|
73
|
+
)}
|
|
74
|
+
|
|
69
75
|
{message && (
|
|
70
76
|
<InlineAlert type={sentiment} id={descriptionId}>
|
|
71
77
|
{message}
|
package/src/i18n/en.json
CHANGED
|
@@ -23,8 +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
|
-
"neptune.SelectOption.selected.action.label": "Change chosen option",
|
|
28
26
|
"neptune.Summary.statusDone": "Item done",
|
|
29
27
|
"neptune.Summary.statusNotDone": "Item to do",
|
|
30
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';
|
package/src/main.css
CHANGED
|
@@ -1491,53 +1491,6 @@ button.np-option {
|
|
|
1491
1491
|
border-radius: var(--radius-small);
|
|
1492
1492
|
}
|
|
1493
1493
|
}
|
|
1494
|
-
.np-select-option {
|
|
1495
|
-
border-radius: 10px;
|
|
1496
|
-
border-radius: var(--radius-small);
|
|
1497
|
-
padding: 16px;
|
|
1498
|
-
padding: var(--size-16);
|
|
1499
|
-
}
|
|
1500
|
-
.np-select-option-placeholder {
|
|
1501
|
-
background-color: rgba(134,167,189,0.10196);
|
|
1502
|
-
background-color: var(--color-background-neutral);
|
|
1503
|
-
}
|
|
1504
|
-
.np-select-option-placeholder:not(.disabled):hover {
|
|
1505
|
-
background-color: var(--color-background-neutral-hover);
|
|
1506
|
-
}
|
|
1507
|
-
.np-select-option-placeholder:not(.disabled):focus,
|
|
1508
|
-
.np-select-option-placeholder:not(.disabled):active {
|
|
1509
|
-
background-color: var(--color-background-neutral-active);
|
|
1510
|
-
}
|
|
1511
|
-
.np-select-option-selected {
|
|
1512
|
-
border: 1px solid #c9cbce;
|
|
1513
|
-
border: 1px solid var(--color-interactive-secondary);
|
|
1514
|
-
}
|
|
1515
|
-
.np-select-option-list {
|
|
1516
|
-
max-height: 350px;
|
|
1517
|
-
overflow-y: auto;
|
|
1518
|
-
}
|
|
1519
|
-
.np-select-option-list > .np-section {
|
|
1520
|
-
margin-top: 0;
|
|
1521
|
-
}
|
|
1522
|
-
.form-group label > .np-select-option {
|
|
1523
|
-
margin-bottom: 0;
|
|
1524
|
-
}
|
|
1525
|
-
.has-error * .np-select-option {
|
|
1526
|
-
--ring-outline-color: var(--color-sentiment-negative);
|
|
1527
|
-
--ring-outline-width: 3px;
|
|
1528
|
-
--ring-outline-offset: calc(-1 * var(--ring-outline-width));
|
|
1529
|
-
outline: var(--ring-outline-color) solid 3px;
|
|
1530
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1531
|
-
outline-offset: calc(-1 * 3px);
|
|
1532
|
-
outline-offset: var(--ring-outline-offset);
|
|
1533
|
-
}
|
|
1534
|
-
.has-error * .np-select-option:focus {
|
|
1535
|
-
outline: none;
|
|
1536
|
-
}
|
|
1537
|
-
.has-error * .np-select-option:focus-visible {
|
|
1538
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
1539
|
-
outline-offset: var(--ring-outline-offset);
|
|
1540
|
-
}
|
|
1541
1494
|
.np-panel__content {
|
|
1542
1495
|
opacity: 0;
|
|
1543
1496
|
visibility: hidden;
|
|
@@ -4788,8 +4741,8 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4788
4741
|
flex-flow: column;
|
|
4789
4742
|
padding: 8px 16px;
|
|
4790
4743
|
padding: var(--size-8) var(--size-16);
|
|
4791
|
-
margin: 0 0 0 4px;
|
|
4792
|
-
margin: 0 0 0 var(--size-4);
|
|
4744
|
+
margin: 0 0 0 4px !important;
|
|
4745
|
+
margin: 0 0 0 var(--size-4) !important;
|
|
4793
4746
|
min-width: 0;
|
|
4794
4747
|
line-height: inherit;
|
|
4795
4748
|
align-items: center;
|
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";
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
flex-flow: column;
|
|
47
47
|
padding: 8px 16px;
|
|
48
48
|
padding: var(--size-8) var(--size-16);
|
|
49
|
-
margin: 0 0 0 4px;
|
|
50
|
-
margin: 0 0 0 var(--size-4);
|
|
49
|
+
margin: 0 0 0 4px !important;
|
|
50
|
+
margin: 0 0 0 var(--size-4) !important;
|
|
51
51
|
min-width: 0;
|
|
52
52
|
line-height: inherit;
|
|
53
53
|
align-items: center;
|
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { render, screen, userEvent, waitFor } from '../test-utils';
|
|
4
4
|
|
|
5
5
|
import SegmentedControl, { SegmentedControlProps } from './SegmentedControl';
|
|
6
|
+
import { Field } from '../field/Field';
|
|
6
7
|
|
|
7
8
|
const defaultSegments = [
|
|
8
9
|
{
|
|
@@ -188,4 +189,13 @@ describe('SegmentedControl', () => {
|
|
|
188
189
|
'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
|
|
189
190
|
);
|
|
190
191
|
});
|
|
192
|
+
|
|
193
|
+
it('supports `Field` for labeling', () => {
|
|
194
|
+
render(
|
|
195
|
+
<Field label="Label">
|
|
196
|
+
<SegmentedControl {...defaultProps} />
|
|
197
|
+
</Field>,
|
|
198
|
+
);
|
|
199
|
+
expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Label/);
|
|
200
|
+
});
|
|
191
201
|
});
|
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
import { StoryFn } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
1
|
+
import { Meta, StoryFn, StoryObj } from '@storybook/react';
|
|
2
|
+
import React, { useState } from 'react';
|
|
3
3
|
|
|
4
4
|
import Button from '../button';
|
|
5
5
|
|
|
6
6
|
import SegmentedControl from './SegmentedControl';
|
|
7
|
+
import { Field } from '../field/Field';
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
const meta = {
|
|
9
10
|
component: SegmentedControl,
|
|
10
11
|
title: 'Forms/SegmentedControl',
|
|
11
|
-
}
|
|
12
|
+
} satisfies Meta<typeof SegmentedControl>;
|
|
13
|
+
|
|
14
|
+
export default meta;
|
|
15
|
+
type Story = StoryObj<typeof meta>;
|
|
12
16
|
|
|
13
17
|
const Template: StoryFn = (args) => {
|
|
14
18
|
const [segments, setSegments] = React.useState([
|
|
@@ -91,3 +95,37 @@ export const SegmentedControlView = {
|
|
|
91
95
|
mode: 'view',
|
|
92
96
|
},
|
|
93
97
|
};
|
|
98
|
+
|
|
99
|
+
export const WithinField = {
|
|
100
|
+
args: {
|
|
101
|
+
name: 'aSegmentedControl',
|
|
102
|
+
mode: 'input',
|
|
103
|
+
value: 'cupcakes',
|
|
104
|
+
segments: [
|
|
105
|
+
{ id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
|
|
106
|
+
{ id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
|
|
107
|
+
{ id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
|
|
108
|
+
],
|
|
109
|
+
onChange: () => {},
|
|
110
|
+
},
|
|
111
|
+
render: function Render({ value: initialValue, onChange, ...args }) {
|
|
112
|
+
const [value, setValue] = useState(initialValue);
|
|
113
|
+
return (
|
|
114
|
+
<SegmentedControl
|
|
115
|
+
value={value}
|
|
116
|
+
onChange={(nextValue) => {
|
|
117
|
+
setValue(nextValue);
|
|
118
|
+
onChange?.(nextValue);
|
|
119
|
+
}}
|
|
120
|
+
{...args}
|
|
121
|
+
/>
|
|
122
|
+
);
|
|
123
|
+
},
|
|
124
|
+
decorators: [
|
|
125
|
+
(Story) => (
|
|
126
|
+
<Field label="Label">
|
|
127
|
+
<Story />
|
|
128
|
+
</Field>
|
|
129
|
+
),
|
|
130
|
+
],
|
|
131
|
+
} satisfies Story;
|
|
@@ -3,6 +3,7 @@ import { createRef, useEffect, useRef, useState } from 'react';
|
|
|
3
3
|
|
|
4
4
|
import Body from '../body';
|
|
5
5
|
import { Typography } from '../common';
|
|
6
|
+
import { useInputAttributes } from '../inputs/contexts';
|
|
6
7
|
|
|
7
8
|
type SegmentBase = { id: string; label: string; value: string };
|
|
8
9
|
|
|
@@ -38,6 +39,8 @@ const SegmentedControl = ({
|
|
|
38
39
|
segments,
|
|
39
40
|
onChange,
|
|
40
41
|
}: SegmentedControlProps) => {
|
|
42
|
+
const inputAttributes = useInputAttributes({ nonLabelable: true });
|
|
43
|
+
|
|
41
44
|
const [animate, setAnimate] = useState(false);
|
|
42
45
|
|
|
43
46
|
const segmentsRef = useRef<HTMLDivElement>(null);
|
|
@@ -95,7 +98,8 @@ const SegmentedControl = ({
|
|
|
95
98
|
className={classNames('segmented-control__segments', {
|
|
96
99
|
'segmented-control__segments--no-animate': !animate,
|
|
97
100
|
})}
|
|
98
|
-
role={mode !== 'input' ? 'tablist' :
|
|
101
|
+
role={mode !== 'input' ? 'tablist' : 'group'}
|
|
102
|
+
{...inputAttributes}
|
|
99
103
|
>
|
|
100
104
|
{segmentsWithRefs.map((segment) => {
|
|
101
105
|
const onSelect = () => {
|
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;
|