@transferwise/components 0.0.0-experimental-9462b09 → 0.0.0-experimental-2645631
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 +2340 -2433
- package/build/index.js.map +1 -1
- package/build/index.mjs +2343 -2435
- package/build/index.mjs.map +1 -1
- package/build/main.css +4 -49
- package/build/styles/main.css +4 -49
- package/build/styles/segmentedControl/SegmentedControl.css +4 -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/inputs/contexts.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 +9 -5
- package/src/i18n/en.json +0 -2
- package/src/index.ts +0 -2
- package/src/inputs/contexts.tsx +2 -1
- package/src/main.css +4 -49
- package/src/main.less +0 -1
- package/src/segmentedControl/SegmentedControl.css +4 -2
- package/src/segmentedControl/SegmentedControl.less +4 -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,6 @@ 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);
|
|
4793
4744
|
min-width: 0;
|
|
4794
4745
|
line-height: inherit;
|
|
4795
4746
|
align-items: center;
|
|
@@ -4802,6 +4753,10 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4802
4753
|
transition: background 300ms;
|
|
4803
4754
|
color: var(--color-interactive-primary);
|
|
4804
4755
|
}
|
|
4756
|
+
.np-theme-personal .form-group label.segmented-control__segment {
|
|
4757
|
+
margin: 0 0 0 4px;
|
|
4758
|
+
margin: 0 0 0 var(--size-4);
|
|
4759
|
+
}
|
|
4805
4760
|
.segmented-control__segment:first-child {
|
|
4806
4761
|
margin-left: 0;
|
|
4807
4762
|
}
|
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,6 @@ 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);
|
|
4793
4744
|
min-width: 0;
|
|
4794
4745
|
line-height: inherit;
|
|
4795
4746
|
align-items: center;
|
|
@@ -4802,6 +4753,10 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4802
4753
|
transition: background 300ms;
|
|
4803
4754
|
color: var(--color-interactive-primary);
|
|
4804
4755
|
}
|
|
4756
|
+
.np-theme-personal .form-group label.segmented-control__segment {
|
|
4757
|
+
margin: 0 0 0 4px;
|
|
4758
|
+
margin: 0 0 0 var(--size-4);
|
|
4759
|
+
}
|
|
4805
4760
|
.segmented-control__segment:first-child {
|
|
4806
4761
|
margin-left: 0;
|
|
4807
4762
|
}
|
|
@@ -46,8 +46,6 @@
|
|
|
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);
|
|
51
49
|
min-width: 0;
|
|
52
50
|
line-height: inherit;
|
|
53
51
|
align-items: center;
|
|
@@ -60,6 +58,10 @@
|
|
|
60
58
|
transition: background 300ms;
|
|
61
59
|
color: var(--color-interactive-primary);
|
|
62
60
|
}
|
|
61
|
+
.np-theme-personal .form-group label.segmented-control__segment {
|
|
62
|
+
margin: 0 0 0 4px;
|
|
63
|
+
margin: 0 0 0 var(--size-4);
|
|
64
|
+
}
|
|
63
65
|
.segmented-control__segment:first-child {
|
|
64
66
|
margin-left: 0;
|
|
65
67
|
}
|
|
@@ -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,gCA+CZ,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":"AAAA;;GAEG;AACH,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EACV,SAAS,EACT,YAAY,EACZ,eAAe,EACf,SAAS,EACT,UAAU,EACV,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAC5E,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,6BAA6B,EAC7B,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACjF,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AACxF,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC/F,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACrE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC;AAClF,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAErF;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,WAAW,EACX,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;GAEG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,UAAU,EACV,OAAO,EACP,KAAK,GACN,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;GAEG;AACH,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,sBAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,YAAY,GACb,MAAM,UAAU,CAAC;AAElB;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,2BAA2B,8CAA+B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;
|
|
1
|
+
{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,2BAA2B,8CAA+B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAS/E;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,IAAI,CAAC,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}
|
|
@@ -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,13 @@ export const Field = ({
|
|
|
62
63
|
className,
|
|
63
64
|
)}
|
|
64
65
|
>
|
|
65
|
-
|
|
66
|
-
{label
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
{label ? (
|
|
67
|
+
<label id={labelId} htmlFor={inputId} className="control-label">
|
|
68
|
+
{label}
|
|
69
|
+
</label>
|
|
70
|
+
) : null}
|
|
71
|
+
{children}
|
|
72
|
+
|
|
69
73
|
{message && (
|
|
70
74
|
<InlineAlert type={sentiment} id={descriptionId}>
|
|
71
75
|
{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/inputs/contexts.tsx
CHANGED
|
@@ -18,9 +18,10 @@ interface UseInputAttributesArgs {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {
|
|
21
|
+
const id = useContext(InputIdContext);
|
|
21
22
|
const labelId = useContext(FieldLabelIdContext);
|
|
22
23
|
return {
|
|
23
|
-
id:
|
|
24
|
+
id: !nonLabelable ? id : undefined,
|
|
24
25
|
'aria-labelledby': nonLabelable ? labelId : undefined,
|
|
25
26
|
'aria-describedby': useContext(InputDescribedByContext),
|
|
26
27
|
'aria-invalid': useContext(InputInvalidContext),
|
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,6 @@ 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);
|
|
4793
4744
|
min-width: 0;
|
|
4794
4745
|
line-height: inherit;
|
|
4795
4746
|
align-items: center;
|
|
@@ -4802,6 +4753,10 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4802
4753
|
transition: background 300ms;
|
|
4803
4754
|
color: var(--color-interactive-primary);
|
|
4804
4755
|
}
|
|
4756
|
+
.np-theme-personal .form-group label.segmented-control__segment {
|
|
4757
|
+
margin: 0 0 0 4px;
|
|
4758
|
+
margin: 0 0 0 var(--size-4);
|
|
4759
|
+
}
|
|
4805
4760
|
.segmented-control__segment:first-child {
|
|
4806
4761
|
margin-left: 0;
|
|
4807
4762
|
}
|
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,6 @@
|
|
|
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);
|
|
51
49
|
min-width: 0;
|
|
52
50
|
line-height: inherit;
|
|
53
51
|
align-items: center;
|
|
@@ -60,6 +58,10 @@
|
|
|
60
58
|
transition: background 300ms;
|
|
61
59
|
color: var(--color-interactive-primary);
|
|
62
60
|
}
|
|
61
|
+
.np-theme-personal .form-group label.segmented-control__segment {
|
|
62
|
+
margin: 0 0 0 4px;
|
|
63
|
+
margin: 0 0 0 var(--size-4);
|
|
64
|
+
}
|
|
63
65
|
.segmented-control__segment:first-child {
|
|
64
66
|
margin-left: 0;
|
|
65
67
|
}
|
|
@@ -43,7 +43,6 @@
|
|
|
43
43
|
flex: 1 1 100%;
|
|
44
44
|
flex-flow: column;
|
|
45
45
|
padding: var(--size-8) var(--size-16);
|
|
46
|
-
margin: 0 0 0 var(--size-4);
|
|
47
46
|
min-width: 0;
|
|
48
47
|
line-height: inherit;
|
|
49
48
|
align-items: center;
|
|
@@ -54,6 +53,10 @@
|
|
|
54
53
|
cursor: pointer;
|
|
55
54
|
transition: background 300ms;
|
|
56
55
|
color: var(--color-interactive-primary);
|
|
56
|
+
|
|
57
|
+
.np-theme-personal .form-group label& {
|
|
58
|
+
margin: 0 0 0 var(--size-4);
|
|
59
|
+
}
|
|
57
60
|
}
|
|
58
61
|
|
|
59
62
|
.segmented-control__segment:first-child {
|
|
@@ -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
|
});
|