@dxc-technology/halstack-react 0.0.0-59568e7 → 0.0.0-5aa300b
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/HalstackContext.js +7 -11
- package/accordion/Accordion.js +117 -104
- package/accordion/Accordion.stories.tsx +54 -15
- package/accordion/Accordion.test.js +9 -10
- package/accordion/types.d.ts +5 -4
- package/accordion-group/AccordionGroup.js +2 -21
- package/accordion-group/AccordionGroup.stories.tsx +27 -1
- package/accordion-group/AccordionGroup.test.js +20 -45
- package/accordion-group/types.d.ts +10 -3
- package/alert/Alert.js +1 -1
- package/badge/Badge.d.ts +1 -1
- package/badge/Badge.js +5 -3
- package/badge/types.d.ts +1 -0
- package/bleed/Bleed.js +1 -34
- package/bleed/Bleed.stories.tsx +94 -95
- package/bleed/types.d.ts +1 -1
- package/box/Box.js +23 -33
- package/box/types.d.ts +1 -0
- package/bulleted-list/BulletedList.d.ts +7 -0
- package/bulleted-list/BulletedList.js +123 -0
- package/bulleted-list/BulletedList.stories.tsx +200 -0
- package/bulleted-list/types.d.ts +11 -0
- package/{list → bulleted-list}/types.js +0 -0
- package/button/Button.js +50 -70
- package/button/Button.stories.tsx +61 -1
- package/button/types.d.ts +7 -7
- package/card/Card.js +34 -36
- package/card/types.d.ts +1 -0
- package/checkbox/Checkbox.d.ts +2 -2
- package/checkbox/Checkbox.js +92 -99
- package/checkbox/Checkbox.stories.tsx +79 -59
- package/checkbox/Checkbox.test.js +93 -16
- package/checkbox/types.d.ts +6 -2
- package/chip/Chip.js +11 -23
- package/chip/Chip.stories.tsx +41 -9
- package/chip/types.d.ts +1 -1
- package/common/variables.js +186 -158
- package/date-input/Calendar.d.ts +4 -0
- package/date-input/Calendar.js +258 -0
- package/date-input/DateInput.js +77 -222
- package/date-input/DateInput.stories.tsx +30 -17
- package/date-input/DateInput.test.js +411 -138
- package/date-input/DatePicker.d.ts +4 -0
- package/date-input/DatePicker.js +160 -0
- package/date-input/YearPicker.d.ts +4 -0
- package/date-input/YearPicker.js +115 -0
- package/date-input/types.d.ts +53 -0
- package/dialog/Dialog.js +52 -28
- package/dialog/Dialog.stories.tsx +57 -2
- package/dialog/Dialog.test.js +34 -4
- package/dialog/types.d.ts +3 -2
- package/dropdown/Dropdown.d.ts +1 -1
- package/dropdown/Dropdown.js +247 -249
- package/dropdown/Dropdown.stories.tsx +135 -64
- package/dropdown/Dropdown.test.js +504 -108
- package/dropdown/DropdownMenu.d.ts +4 -0
- package/dropdown/DropdownMenu.js +80 -0
- package/dropdown/DropdownMenuItem.d.ts +4 -0
- package/dropdown/DropdownMenuItem.js +92 -0
- package/dropdown/types.d.ts +25 -5
- package/file-input/FileInput.d.ts +2 -2
- package/file-input/FileInput.js +177 -219
- package/file-input/FileInput.stories.tsx +38 -10
- package/file-input/FileInput.test.js +53 -12
- package/file-input/FileItem.d.ts +4 -14
- package/file-input/FileItem.js +38 -63
- package/file-input/types.d.ts +17 -0
- package/flex/Flex.d.ts +4 -0
- package/flex/Flex.js +69 -0
- package/flex/Flex.stories.tsx +103 -0
- package/flex/types.d.ts +32 -0
- package/{radio → flex}/types.js +0 -0
- package/footer/Footer.stories.tsx +8 -1
- package/footer/Icons.js +1 -1
- package/footer/types.d.ts +2 -1
- package/header/Header.js +74 -72
- package/header/Header.stories.tsx +4 -4
- package/header/Icons.js +2 -2
- package/header/types.d.ts +3 -2
- package/inset/Inset.js +1 -34
- package/inset/Inset.stories.tsx +36 -36
- package/inset/types.d.ts +1 -1
- package/layout/ApplicationLayout.d.ts +16 -6
- package/layout/ApplicationLayout.js +70 -117
- package/layout/ApplicationLayout.stories.tsx +84 -93
- package/layout/Icons.d.ts +5 -0
- package/layout/Icons.js +13 -2
- package/layout/SidenavContext.d.ts +5 -0
- package/layout/SidenavContext.js +19 -0
- package/layout/types.d.ts +18 -33
- package/link/Link.d.ts +2 -2
- package/link/Link.js +24 -50
- package/link/Link.stories.tsx +13 -6
- package/link/types.d.ts +3 -4
- package/main.d.ts +6 -9
- package/main.js +32 -56
- package/number-input/NumberInput.test.js +43 -7
- package/package.json +16 -20
- package/paginator/Icons.d.ts +5 -0
- package/paginator/Icons.js +16 -28
- package/paginator/Paginator.js +6 -12
- package/paginator/Paginator.test.js +43 -1
- package/paragraph/Paragraph.d.ts +6 -0
- package/paragraph/Paragraph.js +38 -0
- package/paragraph/Paragraph.stories.tsx +44 -0
- package/password-input/PasswordInput.test.js +13 -12
- package/progress-bar/ProgressBar.d.ts +2 -2
- package/progress-bar/ProgressBar.js +56 -50
- package/progress-bar/ProgressBar.stories.jsx +3 -1
- package/progress-bar/ProgressBar.test.js +67 -22
- package/progress-bar/types.d.ts +3 -4
- package/quick-nav/QuickNav.js +25 -20
- package/quick-nav/QuickNav.stories.tsx +131 -26
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +43 -28
- package/radio-group/RadioGroup.js +23 -22
- package/radio-group/RadioGroup.stories.tsx +1 -0
- package/radio-group/RadioGroup.test.js +123 -96
- package/radio-group/types.d.ts +2 -2
- package/resultsetTable/Icons.d.ts +7 -0
- package/resultsetTable/Icons.js +51 -0
- package/resultsetTable/ResultsetTable.js +48 -107
- package/resultsetTable/ResultsetTable.stories.tsx +50 -25
- package/resultsetTable/ResultsetTable.test.js +65 -41
- package/resultsetTable/types.d.ts +2 -2
- package/select/Listbox.d.ts +1 -1
- package/select/Listbox.js +53 -7
- package/select/Option.js +8 -10
- package/select/Select.js +43 -43
- package/select/Select.stories.tsx +225 -136
- package/select/Select.test.js +363 -250
- package/select/types.d.ts +2 -5
- package/sidenav/Sidenav.d.ts +6 -5
- package/sidenav/Sidenav.js +182 -52
- package/sidenav/Sidenav.stories.tsx +163 -156
- package/sidenav/Sidenav.test.js +25 -37
- package/sidenav/types.d.ts +50 -27
- package/slider/Slider.d.ts +2 -2
- package/slider/Slider.js +120 -95
- package/slider/Slider.stories.tsx +7 -1
- package/slider/Slider.test.js +121 -21
- package/slider/types.d.ts +6 -2
- package/spinner/Spinner.js +2 -2
- package/switch/Switch.d.ts +2 -2
- package/switch/Switch.js +135 -68
- package/switch/Switch.stories.tsx +8 -30
- package/switch/Switch.test.js +144 -17
- package/switch/types.d.ts +6 -2
- package/table/Table.js +1 -1
- package/table/Table.test.js +1 -1
- package/tabs/Tab.d.ts +4 -0
- package/tabs/Tab.js +133 -0
- package/tabs/Tabs.js +360 -104
- package/tabs/Tabs.stories.tsx +81 -5
- package/tabs/Tabs.test.js +217 -6
- package/tabs/types.d.ts +15 -5
- package/tabs-nav/NavTabs.d.ts +8 -0
- package/tabs-nav/NavTabs.js +125 -0
- package/tabs-nav/NavTabs.stories.tsx +172 -0
- package/tabs-nav/NavTabs.test.js +82 -0
- package/tabs-nav/Tab.d.ts +4 -0
- package/tabs-nav/Tab.js +128 -0
- package/tabs-nav/types.d.ts +53 -0
- package/{row → tabs-nav}/types.js +0 -0
- package/tag/Tag.js +1 -1
- package/tag/types.d.ts +1 -1
- package/text-input/Icons.d.ts +8 -0
- package/text-input/Icons.js +60 -0
- package/text-input/Suggestion.js +38 -9
- package/text-input/Suggestions.d.ts +4 -0
- package/text-input/Suggestions.js +134 -0
- package/text-input/TextInput.js +195 -292
- package/text-input/TextInput.stories.tsx +211 -185
- package/text-input/TextInput.test.js +737 -725
- package/text-input/types.d.ts +22 -3
- package/toggle-group/types.d.ts +1 -1
- package/typography/Typography.d.ts +4 -0
- package/typography/Typography.js +131 -0
- package/typography/Typography.stories.tsx +198 -0
- package/typography/types.d.ts +18 -0
- package/{stack → typography}/types.js +0 -0
- package/wizard/Wizard.js +9 -16
- package/wizard/Wizard.stories.tsx +20 -1
- package/wizard/types.d.ts +5 -4
- package/common/RequiredComponent.js +0 -32
- package/list/List.d.ts +0 -4
- package/list/List.js +0 -47
- package/list/List.stories.tsx +0 -95
- package/list/types.d.ts +0 -7
- package/radio/Radio.d.ts +0 -4
- package/radio/Radio.js +0 -173
- package/radio/Radio.stories.tsx +0 -192
- package/radio/Radio.test.js +0 -71
- package/radio/types.d.ts +0 -54
- package/row/Row.d.ts +0 -3
- package/row/Row.js +0 -127
- package/row/Row.stories.tsx +0 -237
- package/row/types.d.ts +0 -28
- package/stack/Stack.d.ts +0 -3
- package/stack/Stack.js +0 -97
- package/stack/Stack.stories.tsx +0 -164
- package/stack/types.d.ts +0 -24
- package/text/Text.d.ts +0 -7
- package/text/Text.js +0 -30
- package/text/Text.stories.tsx +0 -19
package/tabs/Tabs.stories.tsx
CHANGED
|
@@ -9,9 +9,8 @@ export default {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
const iconSVG = (
|
|
12
|
-
<svg viewBox="0 0
|
|
13
|
-
<path d="
|
|
14
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
|
12
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20" fill="currentColor">
|
|
13
|
+
<path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Zm0-2.021q1.938-1.729 3.188-2.948 1.25-1.219 1.989-2.125.74-.906 1.031-1.614.292-.709.292-1.396 0-1.229-.833-2.063Q14.833 4 13.604 4q-.729 0-1.364.302-.636.302-1.094.844L10.417 6h-.834l-.729-.854q-.458-.542-1.114-.844Q7.083 4 6.396 4q-1.229 0-2.063.833-.833.834-.833 2.063 0 .687.271 1.364.271.678.989 1.573.719.896 1.98 2.125Q8 13.188 10 14.979Zm0-5.5Z" />
|
|
15
14
|
</svg>
|
|
16
15
|
);
|
|
17
16
|
|
|
@@ -29,6 +28,44 @@ const tabs: any = [
|
|
|
29
28
|
{
|
|
30
29
|
label: "Tab 4",
|
|
31
30
|
},
|
|
31
|
+
{
|
|
32
|
+
label: "Tab 5",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "Tab 6",
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: "Tab 7",
|
|
39
|
+
},
|
|
40
|
+
];
|
|
41
|
+
|
|
42
|
+
const disabledTabs: any = [
|
|
43
|
+
{
|
|
44
|
+
label: "Tab 1",
|
|
45
|
+
isDisabled: true,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: "Tab 2",
|
|
49
|
+
isDisabled: true,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label: "Tab 3",
|
|
53
|
+
isDisabled: true,
|
|
54
|
+
},
|
|
55
|
+
];
|
|
56
|
+
|
|
57
|
+
const firstDisabledTabs: any = [
|
|
58
|
+
{
|
|
59
|
+
label: "Tab 1",
|
|
60
|
+
isDisabled: true,
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
label: "Tab 2",
|
|
64
|
+
isDisabled: true,
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
label: "Tab 3",
|
|
68
|
+
},
|
|
32
69
|
];
|
|
33
70
|
|
|
34
71
|
const tabsNotification = tabs.map((tab, index) => ({
|
|
@@ -36,7 +73,11 @@ const tabsNotification = tabs.map((tab, index) => ({
|
|
|
36
73
|
notificationNumber: (index === 0 && true) || (index === 1 && 5) || (index === 2 && 200),
|
|
37
74
|
}));
|
|
38
75
|
|
|
39
|
-
const tabsIcon = tabs.map((tab) =>
|
|
76
|
+
const tabsIcon = tabs.map((tab, index) =>
|
|
77
|
+
index <= tabs.length / 2
|
|
78
|
+
? { ...tab, icon: "https://cdn-icons-png.flaticon.com/512/5039/5039041.png" }
|
|
79
|
+
: { ...tab, icon: iconSVG }
|
|
80
|
+
);
|
|
40
81
|
|
|
41
82
|
const tabsNotificationIcon = tabsNotification.map((tab) => ({ ...tab, icon: iconSVG }));
|
|
42
83
|
|
|
@@ -46,6 +87,14 @@ export const Chromatic = () => (
|
|
|
46
87
|
<Title title="Only label" theme="light" level={4} />
|
|
47
88
|
<DxcTabs tabs={tabs} />
|
|
48
89
|
</ExampleContainer>
|
|
90
|
+
<ExampleContainer>
|
|
91
|
+
<Title title="Disabled tabs" theme="light" level={4} />
|
|
92
|
+
<DxcTabs activeTabIndex={0} tabs={disabledTabs} />
|
|
93
|
+
</ExampleContainer>
|
|
94
|
+
<ExampleContainer>
|
|
95
|
+
<Title title="First two tabs disabled" theme="light" level={4} />
|
|
96
|
+
<DxcTabs tabs={firstDisabledTabs} />
|
|
97
|
+
</ExampleContainer>
|
|
49
98
|
<ExampleContainer pseudoState="pseudo-hover">
|
|
50
99
|
<Title title="Hovered tabs" theme="light" level={4} />
|
|
51
100
|
<DxcTabs tabs={tabs} />
|
|
@@ -106,7 +155,34 @@ export const Chromatic = () => (
|
|
|
106
155
|
<ExampleContainer>
|
|
107
156
|
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
108
157
|
<DxcTabs tabs={tabs} margin="xxlarge" />
|
|
109
|
-
<hr />
|
|
110
158
|
</ExampleContainer>
|
|
111
159
|
</>
|
|
112
160
|
);
|
|
161
|
+
|
|
162
|
+
export const ScrollableTabs = () => (
|
|
163
|
+
<>
|
|
164
|
+
<ExampleContainer>
|
|
165
|
+
<Title title="Only label" theme="light" level={4} />
|
|
166
|
+
<DxcTabs tabs={tabs} />
|
|
167
|
+
</ExampleContainer>
|
|
168
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
169
|
+
<Title title="Hovered tabs" theme="light" level={4} />
|
|
170
|
+
<DxcTabs tabs={tabs} />
|
|
171
|
+
</ExampleContainer>
|
|
172
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
173
|
+
<Title title="Focused tabs" theme="light" level={4} />
|
|
174
|
+
<DxcTabs tabs={tabs} />
|
|
175
|
+
</ExampleContainer>
|
|
176
|
+
<ExampleContainer pseudoState="pseudo-active">
|
|
177
|
+
<Title title="Actived tabs" theme="light" level={4} />
|
|
178
|
+
<DxcTabs tabs={tabs} />
|
|
179
|
+
</ExampleContainer>
|
|
180
|
+
</>
|
|
181
|
+
);
|
|
182
|
+
|
|
183
|
+
ScrollableTabs.parameters = {
|
|
184
|
+
viewport: {
|
|
185
|
+
defaultViewport: "iphonex",
|
|
186
|
+
},
|
|
187
|
+
chromatic: { viewports: [375], delay: 5000 },
|
|
188
|
+
};
|
package/tabs/Tabs.test.js
CHANGED
|
@@ -25,6 +25,23 @@ var sampleTabsWithBadge = [{
|
|
|
25
25
|
label: "Tab-3",
|
|
26
26
|
notificationNumber: "101"
|
|
27
27
|
}];
|
|
28
|
+
var sampleTabsMiddleDisabled = [{
|
|
29
|
+
label: "Tab-1"
|
|
30
|
+
}, {
|
|
31
|
+
label: "Tab-2",
|
|
32
|
+
isDisabled: true
|
|
33
|
+
}, {
|
|
34
|
+
label: "Tab-3"
|
|
35
|
+
}];
|
|
36
|
+
var sampleTabsLastTabNonDisabled = [{
|
|
37
|
+
label: "Tab-1",
|
|
38
|
+
isDisabled: true
|
|
39
|
+
}, {
|
|
40
|
+
label: "Tab-2",
|
|
41
|
+
isDisabled: true
|
|
42
|
+
}, {
|
|
43
|
+
label: "Tab-3"
|
|
44
|
+
}];
|
|
28
45
|
describe("Tabs component tests", function () {
|
|
29
46
|
test("Tabs render with correct labels", function () {
|
|
30
47
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
|
|
@@ -103,18 +120,26 @@ describe("Tabs component tests", function () {
|
|
|
103
120
|
tabs: sampleTabs,
|
|
104
121
|
onTabClick: onTabClick
|
|
105
122
|
})),
|
|
106
|
-
getByText = _render6.getByText
|
|
123
|
+
getByText = _render6.getByText,
|
|
124
|
+
getAllByRole = _render6.getAllByRole;
|
|
107
125
|
|
|
126
|
+
var tabs = getAllByRole("tab");
|
|
108
127
|
var tab1 = getByText("Tab-1");
|
|
109
128
|
var tab2 = getByText("Tab-2");
|
|
110
129
|
|
|
111
130
|
_react2.fireEvent.click(tab2);
|
|
112
131
|
|
|
113
132
|
expect(onTabClick).toHaveBeenCalledWith(1);
|
|
133
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("false");
|
|
134
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("true");
|
|
135
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
114
136
|
|
|
115
137
|
_react2.fireEvent.click(tab1);
|
|
116
138
|
|
|
117
139
|
expect(onTabClick).toHaveBeenCalledWith(0);
|
|
140
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("true");
|
|
141
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
142
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
118
143
|
});
|
|
119
144
|
test("Controlled tabs", function () {
|
|
120
145
|
var onTabClick = jest.fn();
|
|
@@ -124,17 +149,203 @@ describe("Tabs component tests", function () {
|
|
|
124
149
|
onTabClick: onTabClick,
|
|
125
150
|
activeTabIndex: 0
|
|
126
151
|
})),
|
|
127
|
-
getByText = _render7.getByText
|
|
152
|
+
getByText = _render7.getByText,
|
|
153
|
+
getAllByRole = _render7.getAllByRole;
|
|
128
154
|
|
|
129
|
-
var
|
|
130
|
-
var tab3 = getByText("Tab-3");
|
|
155
|
+
var tabs = getAllByRole("tab");
|
|
131
156
|
|
|
132
|
-
_react2.fireEvent.click(
|
|
157
|
+
_react2.fireEvent.click(tabs[1]);
|
|
158
|
+
|
|
159
|
+
expect(onTabClick).toHaveBeenCalledWith(1);
|
|
160
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("true");
|
|
161
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
162
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
163
|
+
|
|
164
|
+
_react2.fireEvent.click(tabs[2]);
|
|
165
|
+
|
|
166
|
+
expect(onTabClick).toHaveBeenCalledWith(2);
|
|
167
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("true");
|
|
168
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
169
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
170
|
+
});
|
|
171
|
+
test("Uncontrolled tabs should have focus in the first non-disabled tab", function () {
|
|
172
|
+
var onTabClick = jest.fn();
|
|
173
|
+
|
|
174
|
+
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
|
|
175
|
+
tabs: sampleTabsLastTabNonDisabled,
|
|
176
|
+
onTabClick: onTabClick
|
|
177
|
+
})),
|
|
178
|
+
getAllByRole = _render8.getAllByRole;
|
|
179
|
+
|
|
180
|
+
var tabs = getAllByRole("tab");
|
|
181
|
+
expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
|
|
182
|
+
expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
|
|
183
|
+
expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
|
|
184
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("false");
|
|
185
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
186
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("true");
|
|
187
|
+
});
|
|
188
|
+
test("Controlled tabs with active index in disabled tab should not change focus to the first available tab", function () {
|
|
189
|
+
var onTabClick = jest.fn();
|
|
190
|
+
|
|
191
|
+
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
|
|
192
|
+
tabs: sampleTabsLastTabNonDisabled,
|
|
193
|
+
onTabClick: onTabClick,
|
|
194
|
+
activeTabIndex: 0
|
|
195
|
+
})),
|
|
196
|
+
getAllByRole = _render9.getAllByRole;
|
|
197
|
+
|
|
198
|
+
var tabs = getAllByRole("tab");
|
|
199
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("true");
|
|
200
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
201
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
202
|
+
expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
|
|
203
|
+
expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
|
|
204
|
+
expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
|
|
205
|
+
|
|
206
|
+
_react2.fireEvent.click(tabs[2]);
|
|
207
|
+
|
|
208
|
+
expect(onTabClick).toHaveBeenCalledWith(2);
|
|
209
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("true");
|
|
210
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
211
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
212
|
+
expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
|
|
213
|
+
expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
|
|
214
|
+
expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
|
|
215
|
+
});
|
|
216
|
+
test("Select tabs with keyboard event arrows", function () {
|
|
217
|
+
var onTabClick = jest.fn();
|
|
218
|
+
|
|
219
|
+
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
|
|
220
|
+
tabs: sampleTabs,
|
|
221
|
+
onTabClick: onTabClick
|
|
222
|
+
})),
|
|
223
|
+
getByText = _render10.getByText,
|
|
224
|
+
getByRole = _render10.getByRole,
|
|
225
|
+
getAllByRole = _render10.getAllByRole;
|
|
226
|
+
|
|
227
|
+
var tabList = getByRole("tablist");
|
|
228
|
+
var tab1 = getByText("Tab-1");
|
|
229
|
+
var tabs = getAllByRole("tab");
|
|
230
|
+
|
|
231
|
+
_react2.fireEvent.click(tab1);
|
|
232
|
+
|
|
233
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("true");
|
|
234
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
235
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
236
|
+
expect(onTabClick).toHaveBeenCalledWith(0);
|
|
133
237
|
|
|
238
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
239
|
+
key: "ArrowRight"
|
|
240
|
+
});
|
|
241
|
+
|
|
242
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
243
|
+
key: "Enter"
|
|
244
|
+
});
|
|
245
|
+
|
|
246
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("false");
|
|
247
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("true");
|
|
248
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
134
249
|
expect(onTabClick).toHaveBeenCalledWith(1);
|
|
135
250
|
|
|
136
|
-
_react2.fireEvent.
|
|
251
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
252
|
+
key: "ArrowRight"
|
|
253
|
+
});
|
|
254
|
+
|
|
255
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
256
|
+
key: "Enter"
|
|
257
|
+
});
|
|
258
|
+
|
|
259
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("false");
|
|
260
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
261
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("true");
|
|
262
|
+
expect(onTabClick).toHaveBeenCalledWith(2);
|
|
263
|
+
|
|
264
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
265
|
+
key: "ArrowLeft"
|
|
266
|
+
});
|
|
267
|
+
|
|
268
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
269
|
+
key: "Enter"
|
|
270
|
+
});
|
|
271
|
+
|
|
272
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("false");
|
|
273
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("true");
|
|
274
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
275
|
+
expect(onTabClick).toHaveBeenCalledWith(1);
|
|
276
|
+
|
|
277
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
278
|
+
key: "ArrowLeft"
|
|
279
|
+
});
|
|
280
|
+
|
|
281
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
282
|
+
key: "Enter"
|
|
283
|
+
});
|
|
284
|
+
|
|
285
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("true");
|
|
286
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
287
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
288
|
+
expect(onTabClick).toHaveBeenCalledWith(0);
|
|
289
|
+
|
|
290
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
291
|
+
key: "ArrowLeft"
|
|
292
|
+
});
|
|
137
293
|
|
|
294
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
295
|
+
key: "Enter"
|
|
296
|
+
});
|
|
297
|
+
|
|
298
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("false");
|
|
299
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
300
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("true");
|
|
301
|
+
expect(onTabClick).toHaveBeenCalledWith(2);
|
|
302
|
+
|
|
303
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
304
|
+
key: "ArrowRight"
|
|
305
|
+
});
|
|
306
|
+
|
|
307
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
308
|
+
key: "Enter"
|
|
309
|
+
});
|
|
310
|
+
|
|
311
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("true");
|
|
312
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
313
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
314
|
+
expect(onTabClick).toHaveBeenCalledWith(0);
|
|
315
|
+
});
|
|
316
|
+
test("Skip disabled tab with keyboard event arrows", function () {
|
|
317
|
+
var onTabClick = jest.fn();
|
|
318
|
+
|
|
319
|
+
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
|
|
320
|
+
tabs: sampleTabsMiddleDisabled,
|
|
321
|
+
onTabClick: onTabClick
|
|
322
|
+
})),
|
|
323
|
+
getByText = _render11.getByText,
|
|
324
|
+
getByRole = _render11.getByRole,
|
|
325
|
+
getAllByRole = _render11.getAllByRole;
|
|
326
|
+
|
|
327
|
+
var tabList = getByRole("tablist");
|
|
328
|
+
var tab1 = getByText("Tab-1");
|
|
329
|
+
var tabs = getAllByRole("tab");
|
|
330
|
+
|
|
331
|
+
_react2.fireEvent.click(tab1);
|
|
332
|
+
|
|
333
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("true");
|
|
334
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
335
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("false");
|
|
336
|
+
expect(onTabClick).toHaveBeenCalledWith(0);
|
|
337
|
+
|
|
338
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
339
|
+
key: "ArrowRight"
|
|
340
|
+
});
|
|
341
|
+
|
|
342
|
+
_react2.fireEvent.keyDown(tabList, {
|
|
343
|
+
key: " "
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
expect(tabs[0].getAttribute("aria-selected")).toBe("false");
|
|
347
|
+
expect(tabs[1].getAttribute("aria-selected")).toBe("false");
|
|
348
|
+
expect(tabs[2].getAttribute("aria-selected")).toBe("true");
|
|
138
349
|
expect(onTabClick).toHaveBeenCalledWith(2);
|
|
139
350
|
});
|
|
140
351
|
});
|
package/tabs/types.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
-
declare type Margin = {
|
|
2
|
+
export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
export declare type Margin = {
|
|
4
4
|
top?: Space;
|
|
5
5
|
bottom?: Space;
|
|
6
6
|
left?: Space;
|
|
7
7
|
right?: Space;
|
|
8
8
|
};
|
|
9
|
-
declare type SVG = React.SVGProps<SVGSVGElement>;
|
|
9
|
+
declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
10
10
|
declare type TabCommonProps = {
|
|
11
11
|
/**
|
|
12
12
|
* Whether the tab is disabled or not.
|
|
@@ -21,7 +21,7 @@ declare type TabCommonProps = {
|
|
|
21
21
|
*/
|
|
22
22
|
notificationNumber?: boolean | number;
|
|
23
23
|
};
|
|
24
|
-
declare type TabLabelProps = TabCommonProps & {
|
|
24
|
+
export declare type TabLabelProps = TabCommonProps & {
|
|
25
25
|
/**
|
|
26
26
|
* Tab label.
|
|
27
27
|
*/
|
|
@@ -31,7 +31,7 @@ declare type TabLabelProps = TabCommonProps & {
|
|
|
31
31
|
*/
|
|
32
32
|
icon?: string | SVG;
|
|
33
33
|
};
|
|
34
|
-
declare type TabIconProps = TabCommonProps & {
|
|
34
|
+
export declare type TabIconProps = TabCommonProps & {
|
|
35
35
|
/**
|
|
36
36
|
* Tab label.
|
|
37
37
|
*/
|
|
@@ -41,6 +41,16 @@ declare type TabIconProps = TabCommonProps & {
|
|
|
41
41
|
*/
|
|
42
42
|
icon: string | SVG;
|
|
43
43
|
};
|
|
44
|
+
export declare type TabProps = {
|
|
45
|
+
tab: TabLabelProps | TabIconProps;
|
|
46
|
+
active: boolean;
|
|
47
|
+
tabIndex: number;
|
|
48
|
+
hasLabelAndIcon: boolean;
|
|
49
|
+
iconPosition: "top" | "left";
|
|
50
|
+
onClick: () => void;
|
|
51
|
+
onMouseEnter: () => void;
|
|
52
|
+
onMouseLeave: () => void;
|
|
53
|
+
};
|
|
44
54
|
declare type Props = {
|
|
45
55
|
/**
|
|
46
56
|
* An array of objects representing the tabs.
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { NavTabsContextProps, NavTabsProps } from "./types";
|
|
3
|
+
export declare const NavTabsContext: React.Context<NavTabsContextProps>;
|
|
4
|
+
declare const DxcNavTabs: {
|
|
5
|
+
({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
|
|
6
|
+
Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
7
|
+
};
|
|
8
|
+
export default DxcNavTabs;
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports["default"] = exports.NavTabsContext = void 0;
|
|
11
|
+
|
|
12
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
19
|
+
|
|
20
|
+
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
21
|
+
|
|
22
|
+
var _Tab = _interopRequireDefault(require("./Tab"));
|
|
23
|
+
|
|
24
|
+
var _templateObject;
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
|
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
+
|
|
30
|
+
var NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
31
|
+
exports.NavTabsContext = NavTabsContext;
|
|
32
|
+
|
|
33
|
+
var getPropInChild = function getPropInChild(child, propName) {
|
|
34
|
+
return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
var getLabelFromTab = function getLabelFromTab(child) {
|
|
38
|
+
if (typeof child === "string") {
|
|
39
|
+
return child.toString();
|
|
40
|
+
} else if (child.props.children) {
|
|
41
|
+
return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
|
|
46
|
+
var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
|
|
47
|
+
|
|
48
|
+
while (getPropInChild(array[index], "disabled")) {
|
|
49
|
+
index = index === 0 ? array.length - 1 : index - 1;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return index;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
|
|
56
|
+
var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
|
|
57
|
+
|
|
58
|
+
while (getPropInChild(array[index], "disabled")) {
|
|
59
|
+
index = index === array.length - 1 ? 0 : index + 1;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return index;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
var DxcNavTabs = function DxcNavTabs(_ref) {
|
|
66
|
+
var _ref$iconPosition = _ref.iconPosition,
|
|
67
|
+
iconPosition = _ref$iconPosition === void 0 ? "top" : _ref$iconPosition,
|
|
68
|
+
_ref$tabIndex = _ref.tabIndex,
|
|
69
|
+
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
|
|
70
|
+
children = _ref.children;
|
|
71
|
+
var colorsTheme = (0, _useTheme["default"])();
|
|
72
|
+
|
|
73
|
+
var _useState = (0, _react.useState)(null),
|
|
74
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
75
|
+
innerFocus = _useState2[0],
|
|
76
|
+
setInnerFocus = _useState2[1];
|
|
77
|
+
|
|
78
|
+
var contextValue = (0, _react.useMemo)(function () {
|
|
79
|
+
return {
|
|
80
|
+
iconPosition: iconPosition,
|
|
81
|
+
tabIndex: tabIndex,
|
|
82
|
+
hasIcons: _react["default"].Children.toArray(children).some(function (child) {
|
|
83
|
+
return getPropInChild(child, "icon");
|
|
84
|
+
}),
|
|
85
|
+
focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
|
|
86
|
+
};
|
|
87
|
+
}, [iconPosition, tabIndex, innerFocus]);
|
|
88
|
+
|
|
89
|
+
var handleOnKeyDown = function handleOnKeyDown(event) {
|
|
90
|
+
var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
|
|
91
|
+
return getPropInChild(child, "active");
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
switch (event.key) {
|
|
95
|
+
case "Left":
|
|
96
|
+
case "ArrowLeft":
|
|
97
|
+
event.preventDefault();
|
|
98
|
+
setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
|
|
99
|
+
break;
|
|
100
|
+
|
|
101
|
+
case "Right":
|
|
102
|
+
case "ArrowRight":
|
|
103
|
+
event.preventDefault();
|
|
104
|
+
setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
|
|
105
|
+
break;
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
110
|
+
theme: colorsTheme.tabs
|
|
111
|
+
}, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
|
|
112
|
+
onKeyDown: handleOnKeyDown,
|
|
113
|
+
role: "tablist",
|
|
114
|
+
"aria-label": "Navigation tabs"
|
|
115
|
+
}, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
|
|
116
|
+
value: contextValue
|
|
117
|
+
}, children)));
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
DxcNavTabs.Tab = _Tab["default"];
|
|
121
|
+
|
|
122
|
+
var NavTabsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"])));
|
|
123
|
+
|
|
124
|
+
var _default = DxcNavTabs;
|
|
125
|
+
exports["default"] = _default;
|