@transferwise/components 0.0.0-experimental-d391f4a → 0.0.0-experimental-dbf97a7
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/index.js +25 -32
- package/build/index.js.map +1 -1
- package/build/index.mjs +25 -32
- package/build/index.mjs.map +1 -1
- package/build/main.css +2 -4
- package/build/styles/main.css +2 -4
- package/build/styles/segmentedControl/SegmentedControl.css +2 -4
- package/build/types/definitionList/DefinitionList.d.ts +2 -2
- package/build/types/definitionList/DefinitionList.d.ts.map +1 -1
- package/build/types/definitionList/index.d.ts +1 -1
- package/build/types/definitionList/index.d.ts.map +1 -1
- package/build/types/field/Field.d.ts.map +1 -1
- package/build/types/index.d.ts +1 -1
- 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 +8 -3
- package/build/types/tabs/TabList.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/definitionList/DefinitionList.tsx +6 -3
- package/src/definitionList/index.ts +1 -1
- package/src/field/Field.tsx +7 -5
- package/src/index.ts +1 -1
- package/src/inputs/contexts.tsx +1 -2
- package/src/main.css +2 -4
- package/src/segmentedControl/SegmentedControl.css +2 -4
- package/src/segmentedControl/SegmentedControl.less +1 -4
- package/src/segmentedControl/SegmentedControl.spec.tsx +0 -10
- package/src/segmentedControl/SegmentedControl.story.tsx +4 -42
- package/src/segmentedControl/SegmentedControl.tsx +1 -5
- package/src/tabs/TabList.js +15 -0
- package/src/tabs/Tabs.story.js +135 -0
- package/src/tabs/TabList.tsx +0 -15
- package/src/tabs/Tabs.rtl.spec.tsx +0 -40
- package/src/tabs/Tabs.story.tsx +0 -88
package/build/main.css
CHANGED
|
@@ -4741,6 +4741,8 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4741
4741
|
flex-flow: column;
|
|
4742
4742
|
padding: 8px 16px;
|
|
4743
4743
|
padding: var(--size-8) var(--size-16);
|
|
4744
|
+
margin: 0 0 0 4px;
|
|
4745
|
+
margin: 0 0 0 var(--size-4);
|
|
4744
4746
|
min-width: 0;
|
|
4745
4747
|
line-height: inherit;
|
|
4746
4748
|
align-items: center;
|
|
@@ -4753,10 +4755,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4753
4755
|
transition: background 300ms;
|
|
4754
4756
|
color: var(--color-interactive-primary);
|
|
4755
4757
|
}
|
|
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
|
-
}
|
|
4760
4758
|
.segmented-control__segment:first-child {
|
|
4761
4759
|
margin-left: 0;
|
|
4762
4760
|
}
|
package/build/styles/main.css
CHANGED
|
@@ -4741,6 +4741,8 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4741
4741
|
flex-flow: column;
|
|
4742
4742
|
padding: 8px 16px;
|
|
4743
4743
|
padding: var(--size-8) var(--size-16);
|
|
4744
|
+
margin: 0 0 0 4px;
|
|
4745
|
+
margin: 0 0 0 var(--size-4);
|
|
4744
4746
|
min-width: 0;
|
|
4745
4747
|
line-height: inherit;
|
|
4746
4748
|
align-items: center;
|
|
@@ -4753,10 +4755,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4753
4755
|
transition: background 300ms;
|
|
4754
4756
|
color: var(--color-interactive-primary);
|
|
4755
4757
|
}
|
|
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
|
-
}
|
|
4760
4758
|
.segmented-control__segment:first-child {
|
|
4761
4759
|
margin-left: 0;
|
|
4762
4760
|
}
|
|
@@ -46,6 +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
51
|
min-width: 0;
|
|
50
52
|
line-height: inherit;
|
|
51
53
|
align-items: center;
|
|
@@ -58,10 +60,6 @@
|
|
|
58
60
|
transition: background 300ms;
|
|
59
61
|
color: var(--color-interactive-primary);
|
|
60
62
|
}
|
|
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
|
-
}
|
|
65
63
|
.segmented-control__segment:first-child {
|
|
66
64
|
margin-left: 0;
|
|
67
65
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Layout } from '../common';
|
|
2
|
-
interface
|
|
2
|
+
export interface DefinitionListDefinition {
|
|
3
3
|
action?: {
|
|
4
4
|
label: string;
|
|
5
5
|
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
@@ -10,7 +10,7 @@ interface Definition {
|
|
|
10
10
|
}
|
|
11
11
|
type DefinitionListLayout = `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
|
|
12
12
|
export interface DefinitionListProps {
|
|
13
|
-
definitions?:
|
|
13
|
+
definitions?: DefinitionListDefinition[];
|
|
14
14
|
layout?: DefinitionListLayout;
|
|
15
15
|
muted?: boolean;
|
|
16
16
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefinitionList.d.ts","sourceRoot":"","sources":["../../../src/definitionList/DefinitionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,
|
|
1
|
+
{"version":3,"file":"DefinitionList.d.ts","sourceRoot":"","sources":["../../../src/definitionList/DefinitionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,KAAK,oBAAoB,GACvB,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,oBAAoB,GAAG,MAAM,CAAC,uBAAuB,GAAG,MAAM,CAAC,wBAAwB,EAAE,CAAC;AAEhK,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAoCD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAgC,EAChC,MAA8B,EAC9B,KAAK,GACN,EAAE,mBAAmB,+BAmCrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/definitionList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/definitionList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -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,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,
|
|
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
|
@@ -15,7 +15,7 @@ export type { BottomSheetProps } from './common/bottomSheet';
|
|
|
15
15
|
export type { DateInputProps } from './dateInput';
|
|
16
16
|
export type { DateLookupProps } from './dateLookup';
|
|
17
17
|
export type { DecisionProps } from './decision/Decision';
|
|
18
|
-
export type { DefinitionListProps } from './definitionList';
|
|
18
|
+
export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
|
|
19
19
|
export type { DimmerProps } from './dimmer';
|
|
20
20
|
export type { DrawerProps } from './drawer';
|
|
21
21
|
export type { EmphasisProps } from './emphasis';
|
|
@@ -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,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;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -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;;;;;EAQ/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":"AAMA,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,gCA0HvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
1
|
+
export default TabList;
|
|
2
|
+
declare function TabList({ children }: {
|
|
3
|
+
children: any;
|
|
4
|
+
}): import("react").JSX.Element;
|
|
5
|
+
declare namespace TabList {
|
|
6
|
+
namespace propTypes {
|
|
7
|
+
let children: any;
|
|
8
|
+
}
|
|
3
9
|
}
|
|
4
|
-
export default function TabList({ children }: TabListProps): import("react").JSX.Element;
|
|
5
10
|
//# 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.js"],"names":[],"mappings":";AAEA;;gCAMC"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ import classNames from 'classnames';
|
|
|
3
3
|
import ActionButton from '../actionButton';
|
|
4
4
|
import { Layout } from '../common';
|
|
5
5
|
|
|
6
|
-
interface
|
|
6
|
+
export interface DefinitionListDefinition {
|
|
7
7
|
action?: {
|
|
8
8
|
label: string;
|
|
9
9
|
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
@@ -17,7 +17,7 @@ type DefinitionListLayout =
|
|
|
17
17
|
`${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
|
|
18
18
|
|
|
19
19
|
export interface DefinitionListProps {
|
|
20
|
-
definitions?:
|
|
20
|
+
definitions?: DefinitionListDefinition[];
|
|
21
21
|
layout?: DefinitionListLayout;
|
|
22
22
|
muted?: boolean;
|
|
23
23
|
}
|
|
@@ -27,7 +27,10 @@ const isLayoutHorizontal = (layout: DefinitionListLayout) =>
|
|
|
27
27
|
layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||
|
|
28
28
|
layout === Layout.HORIZONTAL_JUSTIFIED;
|
|
29
29
|
|
|
30
|
-
const getAlignmentClasses = (
|
|
30
|
+
const getAlignmentClasses = (
|
|
31
|
+
layout: DefinitionListLayout,
|
|
32
|
+
action: DefinitionListDefinition['action'],
|
|
33
|
+
) => {
|
|
31
34
|
const classes = ['d-flex'];
|
|
32
35
|
|
|
33
36
|
if (action) {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from './DefinitionList';
|
|
2
|
-
export type { DefinitionListProps } from './DefinitionList';
|
|
2
|
+
export type { DefinitionListProps, DefinitionListDefinition } from './DefinitionList';
|
package/src/field/Field.tsx
CHANGED
|
@@ -63,12 +63,14 @@ export const Field = ({
|
|
|
63
63
|
className,
|
|
64
64
|
)}
|
|
65
65
|
>
|
|
66
|
-
{label ? (
|
|
67
|
-
<
|
|
66
|
+
{label != null ? (
|
|
67
|
+
<Label id={labelId} htmlFor={inputId}>
|
|
68
68
|
{label}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
{children}
|
|
70
|
+
</Label>
|
|
71
|
+
) : (
|
|
72
|
+
children
|
|
73
|
+
)}
|
|
72
74
|
|
|
73
75
|
{message && (
|
|
74
76
|
<InlineAlert type={sentiment} id={descriptionId}>
|
package/src/index.ts
CHANGED
|
@@ -22,7 +22,7 @@ export type { BottomSheetProps } from './common/bottomSheet';
|
|
|
22
22
|
export type { DateInputProps } from './dateInput';
|
|
23
23
|
export type { DateLookupProps } from './dateLookup';
|
|
24
24
|
export type { DecisionProps } from './decision/Decision';
|
|
25
|
-
export type { DefinitionListProps } from './definitionList';
|
|
25
|
+
export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
|
|
26
26
|
export type { DimmerProps } from './dimmer';
|
|
27
27
|
export type { DrawerProps } from './drawer';
|
|
28
28
|
export type { EmphasisProps } from './emphasis';
|
package/src/inputs/contexts.tsx
CHANGED
|
@@ -18,10 +18,9 @@ interface UseInputAttributesArgs {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {
|
|
21
|
-
const id = useContext(InputIdContext);
|
|
22
21
|
const labelId = useContext(FieldLabelIdContext);
|
|
23
22
|
return {
|
|
24
|
-
id:
|
|
23
|
+
id: useContext(InputIdContext),
|
|
25
24
|
'aria-labelledby': nonLabelable ? labelId : undefined,
|
|
26
25
|
'aria-describedby': useContext(InputDescribedByContext),
|
|
27
26
|
'aria-invalid': useContext(InputInvalidContext),
|
package/src/main.css
CHANGED
|
@@ -4741,6 +4741,8 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4741
4741
|
flex-flow: column;
|
|
4742
4742
|
padding: 8px 16px;
|
|
4743
4743
|
padding: var(--size-8) var(--size-16);
|
|
4744
|
+
margin: 0 0 0 4px;
|
|
4745
|
+
margin: 0 0 0 var(--size-4);
|
|
4744
4746
|
min-width: 0;
|
|
4745
4747
|
line-height: inherit;
|
|
4746
4748
|
align-items: center;
|
|
@@ -4753,10 +4755,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4753
4755
|
transition: background 300ms;
|
|
4754
4756
|
color: var(--color-interactive-primary);
|
|
4755
4757
|
}
|
|
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
|
-
}
|
|
4760
4758
|
.segmented-control__segment:first-child {
|
|
4761
4759
|
margin-left: 0;
|
|
4762
4760
|
}
|
|
@@ -46,6 +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
51
|
min-width: 0;
|
|
50
52
|
line-height: inherit;
|
|
51
53
|
align-items: center;
|
|
@@ -58,10 +60,6 @@
|
|
|
58
60
|
transition: background 300ms;
|
|
59
61
|
color: var(--color-interactive-primary);
|
|
60
62
|
}
|
|
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
|
-
}
|
|
65
63
|
.segmented-control__segment:first-child {
|
|
66
64
|
margin-left: 0;
|
|
67
65
|
}
|
|
@@ -43,6 +43,7 @@
|
|
|
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);
|
|
46
47
|
min-width: 0;
|
|
47
48
|
line-height: inherit;
|
|
48
49
|
align-items: center;
|
|
@@ -53,10 +54,6 @@
|
|
|
53
54
|
cursor: pointer;
|
|
54
55
|
transition: background 300ms;
|
|
55
56
|
color: var(--color-interactive-primary);
|
|
56
|
-
|
|
57
|
-
.np-theme-personal .form-group label& {
|
|
58
|
-
margin: 0 0 0 var(--size-4);
|
|
59
|
-
}
|
|
60
57
|
}
|
|
61
58
|
|
|
62
59
|
.segmented-control__segment:first-child {
|
|
@@ -3,7 +3,6 @@ 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';
|
|
7
6
|
|
|
8
7
|
const defaultSegments = [
|
|
9
8
|
{
|
|
@@ -189,13 +188,4 @@ describe('SegmentedControl', () => {
|
|
|
189
188
|
'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
|
|
190
189
|
);
|
|
191
190
|
});
|
|
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
|
-
});
|
|
201
191
|
});
|
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import React
|
|
1
|
+
import { StoryFn } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
|
|
4
4
|
import Button from '../button';
|
|
5
5
|
|
|
6
6
|
import SegmentedControl from './SegmentedControl';
|
|
7
|
-
import { Field } from '../field/Field';
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
export default {
|
|
10
9
|
component: SegmentedControl,
|
|
11
10
|
title: 'Forms/SegmentedControl',
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export default meta;
|
|
15
|
-
type Story = StoryObj<typeof meta>;
|
|
11
|
+
};
|
|
16
12
|
|
|
17
13
|
const Template: StoryFn = (args) => {
|
|
18
14
|
const [segments, setSegments] = React.useState([
|
|
@@ -95,37 +91,3 @@ export const SegmentedControlView = {
|
|
|
95
91
|
mode: 'view',
|
|
96
92
|
},
|
|
97
93
|
};
|
|
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,7 +3,6 @@ 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';
|
|
7
6
|
|
|
8
7
|
type SegmentBase = { id: string; label: string; value: string };
|
|
9
8
|
|
|
@@ -39,8 +38,6 @@ const SegmentedControl = ({
|
|
|
39
38
|
segments,
|
|
40
39
|
onChange,
|
|
41
40
|
}: SegmentedControlProps) => {
|
|
42
|
-
const inputAttributes = useInputAttributes({ nonLabelable: true });
|
|
43
|
-
|
|
44
41
|
const [animate, setAnimate] = useState(false);
|
|
45
42
|
|
|
46
43
|
const segmentsRef = useRef<HTMLDivElement>(null);
|
|
@@ -98,8 +95,7 @@ const SegmentedControl = ({
|
|
|
98
95
|
className={classNames('segmented-control__segments', {
|
|
99
96
|
'segmented-control__segments--no-animate': !animate,
|
|
100
97
|
})}
|
|
101
|
-
role={mode !== 'input' ? 'tablist' :
|
|
102
|
-
{...inputAttributes}
|
|
98
|
+
role={mode !== 'input' ? 'tablist' : undefined}
|
|
103
99
|
>
|
|
104
100
|
{segmentsWithRefs.map((segment) => {
|
|
105
101
|
const onSelect = () => {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
|
|
3
|
+
const TabList = ({ children }) => {
|
|
4
|
+
return (
|
|
5
|
+
<ul className="tabs__tab-list" role="tablist">
|
|
6
|
+
{children}
|
|
7
|
+
</ul>
|
|
8
|
+
);
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
TabList.propTypes = {
|
|
12
|
+
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default TabList;
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
|
|
3
|
+
import { Size, Width } from '../common';
|
|
4
|
+
|
|
5
|
+
import Tabs from './Tabs';
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
component: Tabs,
|
|
9
|
+
title: 'Navigation/Tabs',
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const Basic = () => {
|
|
13
|
+
const [selected, setSelected] = useState(0);
|
|
14
|
+
return (
|
|
15
|
+
<Tabs
|
|
16
|
+
className="tabs-custom-class"
|
|
17
|
+
name="tabs-docs"
|
|
18
|
+
transitionSpacing={Size.MEDIUM}
|
|
19
|
+
tabs={[
|
|
20
|
+
{
|
|
21
|
+
title: 'Title 1',
|
|
22
|
+
disabled: false,
|
|
23
|
+
content: (
|
|
24
|
+
<div className="p-a-2">
|
|
25
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
|
|
26
|
+
</div>
|
|
27
|
+
),
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
title: 'Title 2',
|
|
31
|
+
disabled: false,
|
|
32
|
+
content: (
|
|
33
|
+
<div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
|
|
34
|
+
),
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
title: 'Title 3',
|
|
38
|
+
disabled: true,
|
|
39
|
+
content: (
|
|
40
|
+
<div className="p-a-2">
|
|
41
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
|
|
42
|
+
</div>
|
|
43
|
+
),
|
|
44
|
+
},
|
|
45
|
+
]}
|
|
46
|
+
selected={selected}
|
|
47
|
+
animatePanelsOnClick
|
|
48
|
+
onTabSelect={(index) => setSelected(index)}
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export const AutoTabHeaderWidth = () => {
|
|
54
|
+
const [selected, setSelected] = useState(0);
|
|
55
|
+
return (
|
|
56
|
+
<Tabs
|
|
57
|
+
className="tabs-custom-class"
|
|
58
|
+
name="tabs-docs"
|
|
59
|
+
transitionSpacing={Size.MEDIUM}
|
|
60
|
+
headerWidth={Width.AUTO}
|
|
61
|
+
tabs={[
|
|
62
|
+
{
|
|
63
|
+
title: 'Title 1',
|
|
64
|
+
disabled: false,
|
|
65
|
+
content: (
|
|
66
|
+
<div className="p-a-2">
|
|
67
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
|
|
68
|
+
</div>
|
|
69
|
+
),
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
title: 'Title 2',
|
|
73
|
+
disabled: false,
|
|
74
|
+
content: (
|
|
75
|
+
<div className="p-a-2">
|
|
76
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
|
|
77
|
+
</div>
|
|
78
|
+
),
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
title: 'Title 3',
|
|
82
|
+
disabled: true,
|
|
83
|
+
content: (
|
|
84
|
+
<div className="p-a-2">
|
|
85
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
|
|
86
|
+
</div>
|
|
87
|
+
),
|
|
88
|
+
},
|
|
89
|
+
]}
|
|
90
|
+
selected={selected}
|
|
91
|
+
onTabSelect={(index) => setSelected(index)}
|
|
92
|
+
/>
|
|
93
|
+
);
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
export const NoPanelAnimation = () => {
|
|
97
|
+
const [selected, setSelected] = useState(0);
|
|
98
|
+
return (
|
|
99
|
+
<Tabs
|
|
100
|
+
animatePanels={false}
|
|
101
|
+
className="tabs-custom-class"
|
|
102
|
+
name="tabs-docs"
|
|
103
|
+
transitionSpacing={Size.MEDIUM}
|
|
104
|
+
tabs={[
|
|
105
|
+
{
|
|
106
|
+
title: 'Title 1',
|
|
107
|
+
disabled: false,
|
|
108
|
+
content: (
|
|
109
|
+
<div className="p-a-2">
|
|
110
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
|
|
111
|
+
</div>
|
|
112
|
+
),
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
title: 'Title 2',
|
|
116
|
+
disabled: false,
|
|
117
|
+
content: (
|
|
118
|
+
<div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
|
|
119
|
+
),
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
title: 'Title 3',
|
|
123
|
+
disabled: true,
|
|
124
|
+
content: (
|
|
125
|
+
<div className="p-a-2">
|
|
126
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
|
|
127
|
+
</div>
|
|
128
|
+
),
|
|
129
|
+
},
|
|
130
|
+
]}
|
|
131
|
+
selected={selected}
|
|
132
|
+
onTabSelect={(index) => setSelected(index)}
|
|
133
|
+
/>
|
|
134
|
+
);
|
|
135
|
+
};
|
package/src/tabs/TabList.tsx
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { useInputAttributes } from '../inputs/contexts';
|
|
2
|
-
|
|
3
|
-
export interface TabListProps {
|
|
4
|
-
children?: React.ReactNode;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
export default function TabList({ children }: TabListProps) {
|
|
8
|
-
const inputAttributes = useInputAttributes({ nonLabelable: true });
|
|
9
|
-
|
|
10
|
-
return (
|
|
11
|
-
<ul className="tabs__tab-list" role="tablist" {...inputAttributes}>
|
|
12
|
-
{children}
|
|
13
|
-
</ul>
|
|
14
|
-
);
|
|
15
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { Field } from '../field/Field';
|
|
2
|
-
import { render, screen } from '../test-utils';
|
|
3
|
-
|
|
4
|
-
import Tabs from '.';
|
|
5
|
-
|
|
6
|
-
describe('Tabs', () => {
|
|
7
|
-
it('supports `Field` for labeling', () => {
|
|
8
|
-
render(
|
|
9
|
-
<Field label="Label">
|
|
10
|
-
<Tabs
|
|
11
|
-
tabs={[
|
|
12
|
-
{
|
|
13
|
-
title: 'Title 1',
|
|
14
|
-
disabled: false,
|
|
15
|
-
content: (
|
|
16
|
-
<div className="p-a-2">
|
|
17
|
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis
|
|
18
|
-
similique
|
|
19
|
-
</div>
|
|
20
|
-
),
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
title: 'Title 2',
|
|
24
|
-
disabled: false,
|
|
25
|
-
content: (
|
|
26
|
-
<div className="p-a-2">
|
|
27
|
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
|
28
|
-
</div>
|
|
29
|
-
),
|
|
30
|
-
},
|
|
31
|
-
]}
|
|
32
|
-
name="tabs-test"
|
|
33
|
-
selected={0}
|
|
34
|
-
onTabSelect={() => {}}
|
|
35
|
-
/>
|
|
36
|
-
</Field>,
|
|
37
|
-
);
|
|
38
|
-
expect(screen.getByRole('tablist')).toHaveAccessibleName(/^Label/);
|
|
39
|
-
});
|
|
40
|
-
});
|