@dxc-technology/halstack-react 0.0.0-bd47c58 → 0.0.0-bd89f9e
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/BackgroundColorContext.d.ts +2 -2
- package/BackgroundColorContext.js +5 -17
- package/HalstackContext.d.ts +14 -5
- package/HalstackContext.js +9 -34
- package/accordion/Accordion.js +21 -58
- package/accordion/Accordion.stories.tsx +1 -15
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +5 -5
- package/accordion-group/AccordionGroup.js +15 -42
- package/accordion-group/AccordionGroup.stories.tsx +1 -1
- package/accordion-group/AccordionGroup.test.js +42 -60
- package/accordion-group/AccordionGroupAccordion.js +9 -21
- package/accordion-group/types.d.ts +6 -6
- package/alert/Alert.js +14 -46
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.js +4 -17
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +13 -21
- package/bleed/types.d.ts +2 -2
- package/box/Box.js +10 -29
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/bulleted-list/BulletedList.js +7 -33
- package/bulleted-list/BulletedList.stories.tsx +1 -91
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.js +23 -46
- package/button/Button.stories.tsx +5 -86
- package/button/Button.test.js +11 -21
- package/button/types.d.ts +4 -4
- package/card/Card.js +21 -44
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.js +81 -111
- package/checkbox/Checkbox.stories.tsx +16 -54
- package/checkbox/Checkbox.test.js +107 -63
- package/checkbox/types.d.ts +8 -4
- package/chip/Chip.js +12 -31
- package/chip/Chip.stories.tsx +1 -1
- package/chip/Chip.test.js +15 -28
- package/chip/types.d.ts +4 -4
- package/common/coreTokens.d.ts +105 -14
- package/common/coreTokens.js +40 -23
- package/common/utils.js +2 -8
- package/common/variables.d.ts +15 -6
- package/common/variables.js +17 -15
- package/container/Container.d.ts +4 -0
- package/container/Container.js +198 -0
- package/container/Container.stories.tsx +229 -0
- package/container/types.d.ts +74 -0
- package/date-input/Calendar.js +13 -57
- package/date-input/DateInput.js +50 -96
- package/date-input/DateInput.stories.tsx +11 -30
- package/date-input/DateInput.test.js +674 -701
- package/date-input/DatePicker.js +11 -42
- package/date-input/Icons.d.ts +6 -6
- package/date-input/Icons.js +6 -23
- package/date-input/YearPicker.js +8 -34
- package/date-input/types.d.ts +27 -21
- package/dialog/Dialog.js +11 -35
- package/dialog/Dialog.test.js +125 -187
- package/dialog/types.d.ts +18 -13
- package/dropdown/Dropdown.js +39 -93
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +8 -19
- package/dropdown/DropdownMenuItem.js +5 -17
- package/dropdown/types.d.ts +17 -19
- package/file-input/FileInput.js +180 -248
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +356 -354
- package/file-input/FileItem.js +12 -39
- package/file-input/types.d.ts +9 -9
- package/flex/Flex.js +25 -39
- package/flex/types.d.ts +6 -6
- package/footer/Footer.js +9 -39
- package/footer/Footer.stories.tsx +8 -7
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +2 -2
- package/footer/Icons.js +2 -7
- package/footer/types.d.ts +13 -13
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.d.ts +1 -1
- package/header/Header.js +19 -64
- package/header/Header.test.js +12 -25
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +2 -7
- package/header/types.d.ts +5 -7
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/image/Image.d.ts +2 -2
- package/image/Image.js +17 -32
- package/image/types.d.ts +2 -2
- package/inset/Inset.js +13 -21
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +1 -1
- package/layout/ApplicationLayout.js +25 -65
- package/layout/ApplicationLayout.stories.tsx +1 -1
- package/layout/Icons.d.ts +8 -5
- package/layout/Icons.js +51 -59
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +3 -9
- package/layout/types.d.ts +3 -3
- package/link/Link.js +21 -42
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +3 -2
- package/main.js +10 -52
- package/nav-tabs/NavTabs.js +11 -43
- package/nav-tabs/NavTabs.stories.tsx +1 -1
- package/nav-tabs/NavTabs.test.js +36 -43
- package/nav-tabs/Tab.js +16 -45
- package/nav-tabs/types.d.ts +9 -9
- package/number-input/NumberInput.d.ts +1 -1
- package/number-input/NumberInput.js +24 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +682 -577
- package/number-input/types.d.ts +11 -5
- package/package.json +29 -27
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.js +14 -39
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.js +3 -14
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +3 -3
- package/password-input/Icons.js +1 -5
- package/password-input/PasswordInput.js +26 -48
- package/password-input/PasswordInput.stories.tsx +1 -33
- package/password-input/PasswordInput.test.js +153 -129
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.js +16 -42
- package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
- package/progress-bar/ProgressBar.test.js +35 -52
- package/progress-bar/types.d.ts +3 -3
- package/quick-nav/QuickNav.js +4 -27
- package/quick-nav/QuickNav.stories.tsx +1 -1
- package/quick-nav/types.d.ts +10 -10
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +22 -54
- package/radio-group/RadioGroup.js +37 -83
- package/radio-group/RadioGroup.stories.tsx +10 -10
- package/radio-group/RadioGroup.test.js +504 -470
- package/radio-group/types.d.ts +8 -8
- package/resultset-table/Icons.d.ts +7 -0
- package/{resultsetTable → resultset-table}/Icons.js +1 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.js +23 -59
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
- package/{resultsetTable → resultset-table}/types.d.ts +7 -7
- package/resultset-table/types.js +5 -0
- package/select/Icons.d.ts +7 -7
- package/select/Icons.js +1 -5
- package/select/Listbox.js +13 -39
- package/select/Option.js +9 -26
- package/select/Select.js +54 -138
- package/select/Select.stories.tsx +3 -3
- package/select/Select.test.js +1906 -1800
- package/select/types.d.ts +14 -15
- package/sidenav/Icons.d.ts +4 -4
- package/sidenav/Icons.js +1 -5
- package/sidenav/Sidenav.js +24 -63
- package/sidenav/Sidenav.test.js +3 -10
- package/sidenav/types.d.ts +18 -18
- package/slider/Slider.js +38 -86
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +10 -40
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +26 -69
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/Table.js +4 -23
- package/table/Table.test.js +1 -6
- package/table/types.d.ts +8 -8
- package/tabs/Tab.js +10 -29
- package/tabs/Tabs.js +48 -124
- package/tabs/Tabs.test.js +62 -118
- package/tabs/types.d.ts +19 -19
- package/tag/Tag.js +21 -51
- package/tag/Tag.test.js +19 -30
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.d.ts +5 -5
- package/text-input/Icons.js +1 -5
- package/text-input/Suggestion.js +9 -26
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +12 -57
- package/text-input/TextInput.js +128 -193
- package/text-input/TextInput.stories.tsx +48 -152
- package/text-input/TextInput.test.js +1210 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.js +60 -96
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.js +20 -57
- package/toggle-group/ToggleGroup.stories.tsx +4 -4
- package/toggle-group/ToggleGroup.test.js +48 -81
- package/toggle-group/types.d.ts +10 -10
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +12 -3
- package/useTheme.js +1 -8
- package/useTranslatedLabels.js +1 -7
- package/utils/BaseTypography.d.ts +2 -2
- package/utils/BaseTypography.js +16 -30
- package/utils/FocusLock.js +12 -36
- package/wizard/Wizard.js +14 -49
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +6 -6
- package/resultsetTable/Icons.d.ts +0 -7
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → container}/types.js +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
- /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
package/link/types.d.ts
CHANGED
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
type Margin = {
|
|
4
4
|
top?: Space;
|
|
5
5
|
bottom?: Space;
|
|
6
6
|
left?: Space;
|
|
7
7
|
right?: Space;
|
|
8
8
|
};
|
|
9
|
-
|
|
10
|
-
export
|
|
9
|
+
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
10
|
+
export type LinkProps = {
|
|
11
|
+
/**
|
|
12
|
+
* If true, the link is disabled.
|
|
13
|
+
*/
|
|
14
|
+
disabled?: boolean;
|
|
11
15
|
/**
|
|
12
16
|
* If true, the color is inherited from parent.
|
|
13
17
|
*/
|
|
14
18
|
inheritColor?: boolean;
|
|
15
19
|
/**
|
|
16
|
-
*
|
|
20
|
+
* Element or path used as the icon that will be placed next to the link text.
|
|
17
21
|
*/
|
|
18
|
-
|
|
22
|
+
icon?: string | SVG;
|
|
19
23
|
/**
|
|
20
24
|
* Indicates the position of the icon in the component.
|
|
21
25
|
*/
|
|
@@ -33,6 +37,10 @@ export declare type LinkProps = {
|
|
|
33
37
|
* function will be called when the user clicks the link.
|
|
34
38
|
*/
|
|
35
39
|
onClick?: () => void;
|
|
40
|
+
/**
|
|
41
|
+
* Text of the link.
|
|
42
|
+
*/
|
|
43
|
+
children: string;
|
|
36
44
|
/**
|
|
37
45
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
38
46
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
@@ -42,13 +50,5 @@ export declare type LinkProps = {
|
|
|
42
50
|
* Value of the tabindex.
|
|
43
51
|
*/
|
|
44
52
|
tabIndex?: number;
|
|
45
|
-
/**
|
|
46
|
-
* Content of the link.
|
|
47
|
-
*/
|
|
48
|
-
children: string;
|
|
49
|
-
/**
|
|
50
|
-
* Element or path used as the icon that will be placed next to the link text.
|
|
51
|
-
*/
|
|
52
|
-
icon?: string | SVG;
|
|
53
53
|
};
|
|
54
54
|
export {};
|
package/main.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ import DxcPaginator from "./paginator/Paginator";
|
|
|
17
17
|
import DxcWizard from "./wizard/Wizard";
|
|
18
18
|
import DxcLink from "./link/Link";
|
|
19
19
|
import DxcHeading from "./heading/Heading";
|
|
20
|
-
import DxcResultsetTable from "./
|
|
20
|
+
import DxcResultsetTable from "./resultset-table/ResultsetTable";
|
|
21
21
|
import DxcChip from "./chip/Chip";
|
|
22
22
|
import DxcApplicationLayout from "./layout/ApplicationLayout";
|
|
23
23
|
import DxcToggleGroup from "./toggle-group/ToggleGroup";
|
|
@@ -41,6 +41,7 @@ import DxcParagraph from "./paragraph/Paragraph";
|
|
|
41
41
|
import DxcBulletedList from "./bulleted-list/BulletedList";
|
|
42
42
|
import DxcGrid from "./grid/Grid";
|
|
43
43
|
import DxcImage from "./image/Image";
|
|
44
|
+
import DxcContainer from "./container/Container";
|
|
44
45
|
import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
|
|
45
46
|
import { BackgroundColorProvider } from "./BackgroundColorContext";
|
|
46
|
-
export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, };
|
|
47
|
+
export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, };
|
package/main.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
@@ -85,6 +83,12 @@ Object.defineProperty(exports, "DxcChip", {
|
|
|
85
83
|
return _Chip["default"];
|
|
86
84
|
}
|
|
87
85
|
});
|
|
86
|
+
Object.defineProperty(exports, "DxcContainer", {
|
|
87
|
+
enumerable: true,
|
|
88
|
+
get: function get() {
|
|
89
|
+
return _Container["default"];
|
|
90
|
+
}
|
|
91
|
+
});
|
|
88
92
|
Object.defineProperty(exports, "DxcDateInput", {
|
|
89
93
|
enumerable: true,
|
|
90
94
|
get: function get() {
|
|
@@ -289,97 +293,51 @@ Object.defineProperty(exports, "HalstackProvider", {
|
|
|
289
293
|
return _HalstackContext.HalstackProvider;
|
|
290
294
|
}
|
|
291
295
|
});
|
|
292
|
-
|
|
293
296
|
var _Alert = _interopRequireDefault(require("./alert/Alert"));
|
|
294
|
-
|
|
295
297
|
var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
|
|
296
|
-
|
|
297
298
|
var _Button = _interopRequireDefault(require("./button/Button"));
|
|
298
|
-
|
|
299
299
|
var _Card = _interopRequireDefault(require("./card/Card"));
|
|
300
|
-
|
|
301
300
|
var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
|
|
302
|
-
|
|
303
301
|
var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
|
|
304
|
-
|
|
305
302
|
var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
|
|
306
|
-
|
|
307
303
|
var _Slider = _interopRequireDefault(require("./slider/Slider"));
|
|
308
|
-
|
|
309
304
|
var _Switch = _interopRequireDefault(require("./switch/Switch"));
|
|
310
|
-
|
|
311
305
|
var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
|
|
312
|
-
|
|
313
306
|
var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
|
|
314
|
-
|
|
315
307
|
var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
|
|
316
|
-
|
|
317
308
|
var _Table = _interopRequireDefault(require("./table/Table"));
|
|
318
|
-
|
|
319
309
|
var _Box = _interopRequireDefault(require("./box/Box"));
|
|
320
|
-
|
|
321
310
|
var _Tag = _interopRequireDefault(require("./tag/Tag"));
|
|
322
|
-
|
|
323
311
|
var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
|
|
324
|
-
|
|
325
312
|
var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
|
|
326
|
-
|
|
327
313
|
var _Link = _interopRequireDefault(require("./link/Link"));
|
|
328
|
-
|
|
329
314
|
var _Heading = _interopRequireDefault(require("./heading/Heading"));
|
|
330
|
-
|
|
331
|
-
var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
|
|
332
|
-
|
|
315
|
+
var _ResultsetTable = _interopRequireDefault(require("./resultset-table/ResultsetTable"));
|
|
333
316
|
var _Chip = _interopRequireDefault(require("./chip/Chip"));
|
|
334
|
-
|
|
335
317
|
var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
|
|
336
|
-
|
|
337
318
|
var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
|
|
338
|
-
|
|
339
319
|
var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
|
|
340
|
-
|
|
341
320
|
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
342
|
-
|
|
343
321
|
var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
|
|
344
|
-
|
|
345
322
|
var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
|
|
346
|
-
|
|
347
323
|
var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
|
|
348
|
-
|
|
349
324
|
var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
|
|
350
|
-
|
|
351
325
|
var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
|
|
352
|
-
|
|
353
326
|
var _Select = _interopRequireDefault(require("./select/Select"));
|
|
354
|
-
|
|
355
327
|
var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
|
|
356
|
-
|
|
357
328
|
var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
|
|
358
|
-
|
|
359
329
|
var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
|
|
360
|
-
|
|
361
330
|
var _Inset = _interopRequireDefault(require("./inset/Inset"));
|
|
362
|
-
|
|
363
331
|
var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
|
|
364
|
-
|
|
365
332
|
var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
|
|
366
|
-
|
|
367
333
|
var _Flex = _interopRequireDefault(require("./flex/Flex"));
|
|
368
|
-
|
|
369
334
|
var _Typography = _interopRequireDefault(require("./typography/Typography"));
|
|
370
|
-
|
|
371
335
|
var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
|
|
372
|
-
|
|
373
336
|
var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
|
|
374
|
-
|
|
375
337
|
var _Grid = _interopRequireDefault(require("./grid/Grid"));
|
|
376
|
-
|
|
377
338
|
var _Image = _interopRequireDefault(require("./image/Image"));
|
|
378
|
-
|
|
339
|
+
var _Container = _interopRequireDefault(require("./container/Container"));
|
|
379
340
|
var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
|
|
380
|
-
|
|
381
341
|
var _BackgroundColorContext = require("./BackgroundColorContext");
|
|
382
|
-
|
|
383
|
-
function
|
|
384
|
-
|
|
385
|
-
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; }
|
|
342
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
343
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
package/nav-tabs/NavTabs.js
CHANGED
|
@@ -1,39 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports["default"] = exports.NavTabsContext = void 0;
|
|
11
|
-
|
|
12
9
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
12
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
19
|
-
|
|
20
13
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
21
|
-
|
|
22
14
|
var _Tab = _interopRequireDefault(require("./Tab"));
|
|
23
|
-
|
|
24
15
|
var _templateObject;
|
|
25
|
-
|
|
26
|
-
function
|
|
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
|
-
|
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
18
|
+
var NavTabsContext = exports.NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
33
19
|
var getPropInChild = function getPropInChild(child, propName) {
|
|
34
20
|
return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
|
|
35
21
|
};
|
|
36
|
-
|
|
37
22
|
var getLabelFromTab = function getLabelFromTab(child) {
|
|
38
23
|
if (typeof child === "string") {
|
|
39
24
|
return child.toString();
|
|
@@ -41,39 +26,30 @@ var getLabelFromTab = function getLabelFromTab(child) {
|
|
|
41
26
|
return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
|
|
42
27
|
}
|
|
43
28
|
};
|
|
44
|
-
|
|
45
29
|
var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
|
|
46
30
|
var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
|
|
47
|
-
|
|
48
31
|
while (getPropInChild(array[index], "disabled")) {
|
|
49
32
|
index = index === 0 ? array.length - 1 : index - 1;
|
|
50
33
|
}
|
|
51
|
-
|
|
52
34
|
return index;
|
|
53
35
|
};
|
|
54
|
-
|
|
55
36
|
var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
|
|
56
37
|
var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
|
|
57
|
-
|
|
58
38
|
while (getPropInChild(array[index], "disabled")) {
|
|
59
39
|
index = index === array.length - 1 ? 0 : index + 1;
|
|
60
40
|
}
|
|
61
|
-
|
|
62
41
|
return index;
|
|
63
42
|
};
|
|
64
|
-
|
|
65
43
|
var DxcNavTabs = function DxcNavTabs(_ref) {
|
|
66
44
|
var _ref$iconPosition = _ref.iconPosition,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
45
|
+
iconPosition = _ref$iconPosition === void 0 ? "top" : _ref$iconPosition,
|
|
46
|
+
_ref$tabIndex = _ref.tabIndex,
|
|
47
|
+
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
|
|
48
|
+
children = _ref.children;
|
|
72
49
|
var _useState = (0, _react.useState)(null),
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
50
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
51
|
+
innerFocusIndex = _useState2[0],
|
|
52
|
+
setInnerFocusIndex = _useState2[1];
|
|
77
53
|
var colorsTheme = (0, _useTheme["default"])();
|
|
78
54
|
var contextValue = (0, _react.useMemo)(function () {
|
|
79
55
|
return {
|
|
@@ -82,19 +58,16 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
|
|
|
82
58
|
focusedLabel: innerFocusIndex === null ? undefined : getLabelFromTab(children[innerFocusIndex])
|
|
83
59
|
};
|
|
84
60
|
}, [iconPosition, tabIndex, innerFocusIndex]);
|
|
85
|
-
|
|
86
61
|
var handleOnKeyDown = function handleOnKeyDown(event) {
|
|
87
62
|
var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
|
|
88
63
|
return getPropInChild(child, "active");
|
|
89
64
|
});
|
|
90
|
-
|
|
91
65
|
switch (event.key) {
|
|
92
66
|
case "Left":
|
|
93
67
|
case "ArrowLeft":
|
|
94
68
|
event.preventDefault();
|
|
95
69
|
setInnerFocusIndex(getPreviousTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
|
|
96
70
|
break;
|
|
97
|
-
|
|
98
71
|
case "Right":
|
|
99
72
|
case "ArrowRight":
|
|
100
73
|
event.preventDefault();
|
|
@@ -102,7 +75,6 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
|
|
|
102
75
|
break;
|
|
103
76
|
}
|
|
104
77
|
};
|
|
105
|
-
|
|
106
78
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
107
79
|
theme: colorsTheme.navTabs
|
|
108
80
|
}, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
|
|
@@ -113,10 +85,6 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
|
|
|
113
85
|
value: contextValue
|
|
114
86
|
}, children)));
|
|
115
87
|
};
|
|
116
|
-
|
|
117
88
|
DxcNavTabs.Tab = _Tab["default"];
|
|
118
|
-
|
|
119
89
|
var NavTabsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"])));
|
|
120
|
-
|
|
121
|
-
var _default = DxcNavTabs;
|
|
122
|
-
exports["default"] = _default;
|
|
90
|
+
var _default = exports["default"] = DxcNavTabs;
|
package/nav-tabs/NavTabs.test.js
CHANGED
|
@@ -1,28 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _react = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
5
|
var _react2 = require("@testing-library/react");
|
|
8
|
-
|
|
9
6
|
var _NavTabs = _interopRequireDefault(require("./NavTabs.tsx"));
|
|
10
|
-
|
|
11
7
|
describe("Tabs component tests", function () {
|
|
12
8
|
test("Tabs render with correct labels and attributes", function () {
|
|
13
9
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], null, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
10
|
+
href: "/test1",
|
|
11
|
+
active: true
|
|
12
|
+
}, "Tab 1"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
13
|
+
href: "/test2",
|
|
14
|
+
disabled: true
|
|
15
|
+
}, "Tab 2"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
16
|
+
href: "/test3"
|
|
17
|
+
}, "Tab 3"))),
|
|
18
|
+
getByText = _render.getByText,
|
|
19
|
+
getAllByRole = _render.getAllByRole,
|
|
20
|
+
getByRole = _render.getByRole;
|
|
26
21
|
expect(getByRole("tablist")).toBeTruthy();
|
|
27
22
|
expect(getByRole("tablist").getAttribute("aria-label")).toBe("Navigation tabs");
|
|
28
23
|
expect(getByText("Tab 1")).toBeTruthy();
|
|
@@ -41,21 +36,20 @@ describe("Tabs component tests", function () {
|
|
|
41
36
|
});
|
|
42
37
|
test("Tabs render with correct labels, badges and icons", function () {
|
|
43
38
|
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], null, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
39
|
+
href: "/test1",
|
|
40
|
+
active: true,
|
|
41
|
+
notificationNumber: 10
|
|
42
|
+
}, "Tab 1"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
43
|
+
href: "/test2",
|
|
44
|
+
disabled: true,
|
|
45
|
+
notificationNumber: 20
|
|
46
|
+
}, "Tab 2"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
47
|
+
href: "/test3",
|
|
48
|
+
notificationNumber: 1000,
|
|
49
|
+
icon: "/testIcon.png"
|
|
50
|
+
}, "Tab 3"))),
|
|
51
|
+
getByText = _render2.getByText,
|
|
52
|
+
getByRole = _render2.getByRole;
|
|
59
53
|
expect(getByText("10")).toBeTruthy();
|
|
60
54
|
expect(getByText("20")).toBeTruthy();
|
|
61
55
|
expect(getByText("+99")).toBeTruthy();
|
|
@@ -63,18 +57,17 @@ describe("Tabs component tests", function () {
|
|
|
63
57
|
});
|
|
64
58
|
test("Tabs render with correct tab index", function () {
|
|
65
59
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
60
|
+
tabIndex: 3
|
|
61
|
+
}, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
62
|
+
href: "/test1"
|
|
63
|
+
}, "Tab 1"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
64
|
+
href: "/test2",
|
|
65
|
+
disabled: true
|
|
66
|
+
}, "Tab 2"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
67
|
+
href: "/test3",
|
|
68
|
+
active: true
|
|
69
|
+
}, "Tab 3"))),
|
|
70
|
+
getAllByRole = _render3.getAllByRole;
|
|
78
71
|
var tabs = getAllByRole("link");
|
|
79
72
|
expect(tabs[0].getAttribute("tabindex")).toBe("-1");
|
|
80
73
|
expect(tabs[1].getAttribute("tabindex")).toBe("3");
|
package/nav-tabs/Tab.js
CHANGED
|
@@ -1,70 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports["default"] = void 0;
|
|
11
|
-
|
|
12
9
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
15
|
-
|
|
16
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
|
-
|
|
18
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
13
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
21
|
-
|
|
22
14
|
var _Badge = _interopRequireDefault(require("../badge/Badge"));
|
|
23
|
-
|
|
24
15
|
var _Flex = _interopRequireDefault(require("../flex/Flex"));
|
|
25
|
-
|
|
26
16
|
var _NavTabs = require("./NavTabs");
|
|
27
|
-
|
|
28
17
|
var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
|
|
29
|
-
|
|
30
18
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
31
|
-
|
|
32
19
|
var _templateObject, _templateObject2, _templateObject3;
|
|
33
|
-
|
|
34
20
|
var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
|
|
35
|
-
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
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; }
|
|
39
|
-
|
|
21
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
40
23
|
var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
|
|
41
24
|
var href = _ref.href,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
25
|
+
_ref$active = _ref.active,
|
|
26
|
+
active = _ref$active === void 0 ? false : _ref$active,
|
|
27
|
+
icon = _ref.icon,
|
|
28
|
+
_ref$disabled = _ref.disabled,
|
|
29
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
30
|
+
_ref$notificationNumb = _ref.notificationNumber,
|
|
31
|
+
notificationNumber = _ref$notificationNumb === void 0 ? false : _ref$notificationNumb,
|
|
32
|
+
children = _ref.children,
|
|
33
|
+
otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
51
34
|
var tabRef = (0, _react.useRef)();
|
|
52
35
|
var colorsTheme = (0, _useTheme["default"])();
|
|
53
|
-
|
|
54
36
|
var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
37
|
+
iconPosition = _useContext.iconPosition,
|
|
38
|
+
tabIndex = _useContext.tabIndex,
|
|
39
|
+
focusedLabel = _useContext.focusedLabel;
|
|
59
40
|
(0, _react.useEffect)(function () {
|
|
60
41
|
var _tabRef$current;
|
|
61
|
-
|
|
62
42
|
focusedLabel === children.toString() && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
|
|
63
43
|
}, [focusedLabel]);
|
|
64
|
-
|
|
65
44
|
var handleOnKeyDown = function handleOnKeyDown(event) {
|
|
66
45
|
var _tabRef$current2;
|
|
67
|
-
|
|
68
46
|
switch (event.key) {
|
|
69
47
|
case " ":
|
|
70
48
|
case "Enter":
|
|
@@ -73,7 +51,6 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
|
|
|
73
51
|
break;
|
|
74
52
|
}
|
|
75
53
|
};
|
|
76
|
-
|
|
77
54
|
return /*#__PURE__*/_react["default"].createElement(TabContainer, {
|
|
78
55
|
active: active,
|
|
79
56
|
role: "tab",
|
|
@@ -87,7 +64,6 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
|
|
|
87
64
|
hasIcon: icon != null ? true : false,
|
|
88
65
|
ref: function ref(anchorRef) {
|
|
89
66
|
tabRef.current = anchorRef;
|
|
90
|
-
|
|
91
67
|
if (_ref2) {
|
|
92
68
|
if (typeof _ref2 === "function") _ref2(anchorRef);else _ref2.current = anchorRef;
|
|
93
69
|
}
|
|
@@ -115,7 +91,6 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
|
|
|
115
91
|
disabled: disabled
|
|
116
92
|
}))));
|
|
117
93
|
});
|
|
118
|
-
|
|
119
94
|
var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n align-items: stretch;\n border-bottom: 2px solid ", ";\n padding: 0.5rem;\n\n svg {\n color: ", ";\n }\n &[aria-selected=\"true\"] {\n svg {\n color: ", ";\n }\n }\n &[aria-disabled=\"true\"] {\n svg {\n color: ", ";\n }\n }\n"])), function (props) {
|
|
120
95
|
return props.active ? props.theme.selectedUnderlineColor : props.theme.dividerColor;
|
|
121
96
|
}, function (props) {
|
|
@@ -125,8 +100,7 @@ var TabContainer = _styledComponents["default"].div(_templateObject || (_templat
|
|
|
125
100
|
}, function (props) {
|
|
126
101
|
return props.theme.disabledIconColor;
|
|
127
102
|
});
|
|
128
|
-
|
|
129
|
-
var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n flex-direction: ", ";\n justify-content: center;\n align-items: center;\n gap: ", ";\n height: ", ";\n min-width: 176px;\n min-height: 44px;\n padding: 0.375rem;\n border-radius: 4px;\n background: ", ";\n text-decoration-color: transparent;\n cursor: ", ";\n\n ", "\n"])), function (props) {
|
|
103
|
+
var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n flex-direction: ", ";\n justify-content: center;\n align-items: center;\n gap: ", ";\n height: ", ";\n min-width: 176px;\n min-height: 44px;\n padding: 0.375rem;\n border-radius: 4px;\n background: ", ";\n text-decoration-color: transparent;\n text-decoration-line: none;\n cursor: ", ";\n\n ", "\n"])), function (props) {
|
|
130
104
|
return props.hasIcon && props.iconPosition === "top" ? "column" : "row";
|
|
131
105
|
}, function (props) {
|
|
132
106
|
return props.hasIcon && props.iconPosition === "top" ? "0.375rem" : "0.625rem";
|
|
@@ -139,8 +113,5 @@ var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 =
|
|
|
139
113
|
}, function (props) {
|
|
140
114
|
return !props.disabled && "\n :hover {\n background: ".concat(props.theme.hoverBackgroundColor, ";\n }\n :focus {\n outline: 2px solid ").concat(props.theme.focusOutline, ";\n }\n :active {\n background: ").concat(props.theme.pressedBackgroundColor, ";\n outline: 2px solid #33aaff};\n }\n ");
|
|
141
115
|
});
|
|
142
|
-
|
|
143
116
|
var TabIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n\n img,\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
|
|
144
|
-
|
|
145
|
-
var _default = DxcTab;
|
|
146
|
-
exports["default"] = _default;
|
|
117
|
+
var _default = exports["default"] = DxcTab;
|
package/nav-tabs/types.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3
|
+
export type NavTabsContextProps = {
|
|
4
4
|
iconPosition: "top" | "left";
|
|
5
5
|
tabIndex: number;
|
|
6
6
|
focusedLabel: string;
|
|
7
7
|
};
|
|
8
|
-
export
|
|
8
|
+
export type TabProps = {
|
|
9
9
|
/**
|
|
10
10
|
* Whether the tab is active or not.
|
|
11
11
|
*/
|
|
@@ -31,22 +31,22 @@ export declare type TabProps = {
|
|
|
31
31
|
*/
|
|
32
32
|
notificationNumber?: boolean | number;
|
|
33
33
|
/**
|
|
34
|
-
*
|
|
34
|
+
* Tab text label.
|
|
35
35
|
*/
|
|
36
36
|
children: string;
|
|
37
37
|
};
|
|
38
|
-
|
|
38
|
+
type Props = {
|
|
39
39
|
/**
|
|
40
40
|
* Whether the icon should appear above or to the left of the label.
|
|
41
41
|
*/
|
|
42
42
|
iconPosition?: "top" | "left";
|
|
43
43
|
/**
|
|
44
|
-
*
|
|
44
|
+
* Contains one or more DxcNavTabs.Tab.
|
|
45
45
|
*/
|
|
46
|
-
|
|
46
|
+
children: React.ReactNode;
|
|
47
47
|
/**
|
|
48
|
-
*
|
|
48
|
+
* Value of the tabindex attribute applied to each tab.
|
|
49
49
|
*/
|
|
50
|
-
|
|
50
|
+
tabIndex?: number;
|
|
51
51
|
};
|
|
52
52
|
export default Props;
|