@dxc-technology/halstack-react 0.0.0-9b45027 → 0.0.0-9bd9511

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.
Files changed (294) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +1 -11
  3. package/HalstackContext.d.ts +13 -0
  4. package/HalstackContext.js +318 -0
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +124 -179
  7. package/accordion/Accordion.stories.tsx +115 -27
  8. package/accordion/Accordion.test.js +56 -0
  9. package/accordion/types.d.ts +12 -11
  10. package/accordion-group/AccordionGroup.d.ts +1 -1
  11. package/accordion-group/AccordionGroup.js +28 -77
  12. package/accordion-group/AccordionGroup.stories.tsx +28 -2
  13. package/accordion-group/AccordionGroup.test.js +108 -0
  14. package/accordion-group/types.d.ts +19 -12
  15. package/alert/Alert.js +18 -46
  16. package/alert/Alert.stories.tsx +28 -0
  17. package/alert/Alert.test.js +75 -0
  18. package/alert/types.d.ts +3 -3
  19. package/badge/Badge.d.ts +4 -0
  20. package/badge/Badge.js +6 -16
  21. package/badge/types.d.ts +5 -0
  22. package/bleed/Bleed.d.ts +2 -2
  23. package/bleed/Bleed.js +14 -55
  24. package/bleed/Bleed.stories.tsx +94 -95
  25. package/bleed/types.d.ts +26 -2
  26. package/box/Box.js +34 -63
  27. package/box/Box.stories.tsx +15 -0
  28. package/box/Box.test.js +13 -0
  29. package/box/types.d.ts +5 -4
  30. package/bulleted-list/BulletedList.d.ts +7 -0
  31. package/bulleted-list/BulletedList.js +98 -0
  32. package/bulleted-list/BulletedList.stories.tsx +200 -0
  33. package/bulleted-list/types.d.ts +11 -0
  34. package/bulleted-list/types.js +5 -0
  35. package/button/Button.js +61 -100
  36. package/button/Button.stories.tsx +159 -8
  37. package/button/Button.test.js +26 -0
  38. package/button/types.d.ts +8 -8
  39. package/card/Card.js +44 -70
  40. package/card/Card.test.js +39 -0
  41. package/card/types.d.ts +4 -3
  42. package/checkbox/Checkbox.d.ts +2 -2
  43. package/checkbox/Checkbox.js +115 -162
  44. package/checkbox/Checkbox.stories.tsx +198 -130
  45. package/checkbox/Checkbox.test.js +128 -0
  46. package/checkbox/types.d.ts +14 -6
  47. package/chip/Chip.d.ts +1 -1
  48. package/chip/Chip.js +29 -91
  49. package/chip/Chip.stories.tsx +98 -13
  50. package/chip/Chip.test.js +42 -0
  51. package/chip/types.d.ts +8 -16
  52. package/common/utils.js +1 -6
  53. package/common/variables.d.ts +1431 -0
  54. package/common/variables.js +480 -554
  55. package/date-input/Calendar.d.ts +4 -0
  56. package/date-input/Calendar.js +215 -0
  57. package/date-input/DateInput.js +164 -300
  58. package/date-input/DateInput.stories.tsx +199 -33
  59. package/date-input/DateInput.test.js +648 -0
  60. package/date-input/DatePicker.d.ts +4 -0
  61. package/date-input/DatePicker.js +116 -0
  62. package/date-input/Icons.d.ts +6 -0
  63. package/date-input/Icons.js +63 -0
  64. package/date-input/YearPicker.d.ts +4 -0
  65. package/date-input/YearPicker.js +101 -0
  66. package/date-input/types.d.ts +71 -13
  67. package/dialog/Dialog.js +52 -84
  68. package/dialog/Dialog.stories.tsx +99 -22
  69. package/dialog/Dialog.test.js +56 -0
  70. package/dialog/types.d.ts +4 -3
  71. package/dropdown/Dropdown.d.ts +1 -1
  72. package/dropdown/Dropdown.js +240 -323
  73. package/dropdown/Dropdown.stories.tsx +255 -64
  74. package/dropdown/Dropdown.test.js +479 -0
  75. package/dropdown/DropdownMenu.d.ts +4 -0
  76. package/dropdown/DropdownMenu.js +60 -0
  77. package/dropdown/DropdownMenuItem.d.ts +4 -0
  78. package/dropdown/DropdownMenuItem.js +70 -0
  79. package/dropdown/types.d.ts +30 -19
  80. package/file-input/FileInput.d.ts +2 -2
  81. package/file-input/FileInput.js +224 -351
  82. package/file-input/FileInput.stories.tsx +122 -11
  83. package/file-input/FileInput.test.js +445 -0
  84. package/file-input/FileItem.d.ts +4 -14
  85. package/file-input/FileItem.js +48 -97
  86. package/file-input/types.d.ts +24 -7
  87. package/flex/Flex.d.ts +4 -0
  88. package/flex/Flex.js +57 -0
  89. package/flex/Flex.stories.tsx +103 -0
  90. package/flex/types.d.ts +32 -0
  91. package/flex/types.js +5 -0
  92. package/footer/Footer.js +36 -143
  93. package/footer/Footer.stories.tsx +99 -1
  94. package/footer/Footer.test.js +92 -0
  95. package/footer/Icons.js +1 -5
  96. package/footer/types.d.ts +7 -6
  97. package/header/Header.js +112 -177
  98. package/header/Header.stories.tsx +189 -36
  99. package/header/Header.test.js +66 -0
  100. package/header/Icons.js +2 -6
  101. package/header/types.d.ts +4 -3
  102. package/heading/Heading.js +8 -29
  103. package/heading/Heading.test.js +169 -0
  104. package/heading/types.d.ts +3 -3
  105. package/inset/Inset.js +14 -55
  106. package/inset/Inset.stories.tsx +36 -36
  107. package/inset/types.d.ts +26 -2
  108. package/layout/ApplicationLayout.d.ts +16 -6
  109. package/layout/ApplicationLayout.js +71 -164
  110. package/layout/ApplicationLayout.stories.tsx +84 -93
  111. package/layout/Icons.d.ts +5 -0
  112. package/layout/Icons.js +11 -10
  113. package/layout/SidenavContext.d.ts +5 -0
  114. package/layout/SidenavContext.js +15 -0
  115. package/layout/types.d.ts +18 -33
  116. package/link/Link.d.ts +3 -2
  117. package/link/Link.js +61 -106
  118. package/link/Link.stories.tsx +159 -52
  119. package/link/Link.test.js +65 -0
  120. package/link/types.d.ts +9 -29
  121. package/main.d.ts +11 -15
  122. package/main.js +48 -121
  123. package/nav-tabs/NavTabs.d.ts +8 -0
  124. package/nav-tabs/NavTabs.js +95 -0
  125. package/nav-tabs/NavTabs.stories.tsx +260 -0
  126. package/nav-tabs/NavTabs.test.js +75 -0
  127. package/nav-tabs/Tab.d.ts +4 -0
  128. package/nav-tabs/Tab.js +120 -0
  129. package/nav-tabs/types.d.ts +53 -0
  130. package/nav-tabs/types.js +5 -0
  131. package/number-input/NumberInput.js +21 -38
  132. package/number-input/NumberInput.stories.tsx +5 -5
  133. package/number-input/NumberInput.test.js +406 -0
  134. package/number-input/NumberInputContext.js +0 -5
  135. package/number-input/numberInputContextTypes.d.ts +1 -1
  136. package/number-input/types.d.ts +21 -14
  137. package/package.json +22 -25
  138. package/paginator/Icons.d.ts +5 -0
  139. package/paginator/Icons.js +16 -38
  140. package/paginator/Paginator.js +31 -82
  141. package/paginator/Paginator.stories.tsx +24 -0
  142. package/paginator/Paginator.test.js +266 -0
  143. package/paginator/types.d.ts +1 -1
  144. package/paragraph/Paragraph.d.ts +6 -0
  145. package/paragraph/Paragraph.js +28 -0
  146. package/paragraph/Paragraph.stories.tsx +44 -0
  147. package/password-input/PasswordInput.js +28 -54
  148. package/password-input/PasswordInput.test.js +138 -0
  149. package/password-input/types.d.ts +18 -15
  150. package/progress-bar/ProgressBar.d.ts +2 -2
  151. package/progress-bar/ProgressBar.js +65 -84
  152. package/progress-bar/ProgressBar.stories.jsx +47 -12
  153. package/progress-bar/ProgressBar.test.js +93 -0
  154. package/progress-bar/types.d.ts +3 -4
  155. package/quick-nav/QuickNav.d.ts +4 -0
  156. package/quick-nav/QuickNav.js +95 -0
  157. package/quick-nav/QuickNav.stories.tsx +356 -0
  158. package/quick-nav/types.d.ts +21 -0
  159. package/quick-nav/types.js +5 -0
  160. package/radio-group/Radio.d.ts +1 -1
  161. package/radio-group/Radio.js +61 -66
  162. package/radio-group/RadioGroup.js +99 -129
  163. package/radio-group/RadioGroup.stories.tsx +171 -36
  164. package/radio-group/RadioGroup.test.js +620 -0
  165. package/radio-group/types.d.ts +85 -7
  166. package/resultsetTable/Icons.d.ts +7 -0
  167. package/resultsetTable/Icons.js +48 -0
  168. package/resultsetTable/ResultsetTable.js +66 -157
  169. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  170. package/resultsetTable/ResultsetTable.test.js +292 -0
  171. package/resultsetTable/types.d.ts +5 -5
  172. package/select/Icons.d.ts +10 -0
  173. package/select/Icons.js +90 -0
  174. package/select/Listbox.d.ts +4 -0
  175. package/select/Listbox.js +144 -0
  176. package/select/Option.d.ts +4 -0
  177. package/select/Option.js +81 -0
  178. package/select/Select.js +201 -485
  179. package/select/Select.stories.tsx +600 -201
  180. package/select/Select.test.js +1845 -0
  181. package/select/types.d.ts +62 -22
  182. package/sidenav/Sidenav.d.ts +6 -5
  183. package/sidenav/Sidenav.js +164 -74
  184. package/sidenav/Sidenav.stories.tsx +249 -149
  185. package/sidenav/Sidenav.test.js +37 -0
  186. package/sidenav/types.d.ts +50 -27
  187. package/slider/Slider.d.ts +2 -2
  188. package/slider/Slider.js +143 -164
  189. package/slider/Slider.stories.tsx +72 -9
  190. package/slider/Slider.test.js +222 -0
  191. package/slider/types.d.ts +11 -3
  192. package/spinner/Spinner.js +12 -41
  193. package/spinner/Spinner.stories.jsx +27 -1
  194. package/spinner/Spinner.test.js +55 -0
  195. package/spinner/types.d.ts +3 -3
  196. package/switch/Switch.d.ts +2 -2
  197. package/switch/Switch.js +148 -107
  198. package/switch/Switch.stories.tsx +53 -42
  199. package/switch/Switch.test.js +180 -0
  200. package/switch/types.d.ts +13 -5
  201. package/table/Table.js +5 -23
  202. package/table/Table.stories.jsx +80 -1
  203. package/table/Table.test.js +21 -0
  204. package/table/types.d.ts +3 -3
  205. package/tabs/Tab.d.ts +4 -0
  206. package/tabs/Tab.js +115 -0
  207. package/tabs/Tabs.d.ts +1 -1
  208. package/tabs/Tabs.js +318 -139
  209. package/tabs/Tabs.stories.tsx +119 -13
  210. package/tabs/Tabs.test.js +295 -0
  211. package/tabs/types.d.ts +21 -7
  212. package/tag/Tag.d.ts +1 -1
  213. package/tag/Tag.js +36 -75
  214. package/tag/Tag.stories.tsx +37 -27
  215. package/tag/Tag.test.js +49 -0
  216. package/tag/types.d.ts +25 -16
  217. package/text-input/Icons.d.ts +8 -0
  218. package/text-input/Icons.js +57 -0
  219. package/text-input/Suggestion.d.ts +4 -0
  220. package/text-input/Suggestion.js +68 -0
  221. package/text-input/Suggestions.d.ts +4 -0
  222. package/text-input/Suggestions.js +109 -0
  223. package/text-input/TextInput.js +232 -438
  224. package/text-input/TextInput.stories.tsx +310 -197
  225. package/text-input/TextInput.test.js +1404 -0
  226. package/text-input/types.d.ts +55 -17
  227. package/textarea/Textarea.js +53 -96
  228. package/textarea/Textarea.stories.jsx +93 -13
  229. package/textarea/Textarea.test.js +360 -0
  230. package/textarea/types.d.ts +22 -15
  231. package/toggle-group/ToggleGroup.d.ts +1 -1
  232. package/toggle-group/ToggleGroup.js +23 -57
  233. package/toggle-group/ToggleGroup.stories.tsx +46 -4
  234. package/toggle-group/ToggleGroup.test.js +124 -0
  235. package/toggle-group/types.d.ts +19 -11
  236. package/translatedLabelsType.d.ts +82 -0
  237. package/translatedLabelsType.js +5 -0
  238. package/typography/Typography.d.ts +4 -0
  239. package/typography/Typography.js +119 -0
  240. package/typography/Typography.stories.tsx +198 -0
  241. package/typography/types.d.ts +18 -0
  242. package/typography/types.js +5 -0
  243. package/useTheme.d.ts +1 -1
  244. package/useTheme.js +3 -9
  245. package/useTranslatedLabels.d.ts +3 -0
  246. package/useTranslatedLabels.js +15 -0
  247. package/wizard/Wizard.d.ts +1 -1
  248. package/wizard/Wizard.js +68 -98
  249. package/wizard/Wizard.stories.tsx +48 -19
  250. package/wizard/Wizard.test.js +114 -0
  251. package/wizard/types.d.ts +12 -7
  252. package/ThemeContext.d.ts +0 -15
  253. package/ThemeContext.js +0 -243
  254. package/V3Select/V3Select.js +0 -455
  255. package/V3Select/index.d.ts +0 -27
  256. package/V3Textarea/V3Textarea.js +0 -260
  257. package/V3Textarea/index.d.ts +0 -27
  258. package/common/RequiredComponent.js +0 -32
  259. package/date/Date.js +0 -373
  260. package/date/index.d.ts +0 -27
  261. package/input-text/Icons.js +0 -22
  262. package/input-text/InputText.js +0 -611
  263. package/input-text/index.d.ts +0 -36
  264. package/list/List.d.ts +0 -8
  265. package/list/List.js +0 -47
  266. package/list/List.stories.tsx +0 -95
  267. package/radio/Radio.d.ts +0 -4
  268. package/radio/Radio.js +0 -174
  269. package/radio/Radio.stories.tsx +0 -192
  270. package/radio/types.d.ts +0 -54
  271. package/row/Row.d.ts +0 -11
  272. package/row/Row.js +0 -127
  273. package/row/Row.stories.tsx +0 -239
  274. package/stack/Stack.d.ts +0 -10
  275. package/stack/Stack.js +0 -97
  276. package/stack/Stack.stories.tsx +0 -166
  277. package/text/Text.d.ts +0 -7
  278. package/text/Text.js +0 -30
  279. package/text/Text.stories.tsx +0 -19
  280. package/toggle/Toggle.js +0 -186
  281. package/toggle/index.d.ts +0 -21
  282. package/upload/Upload.js +0 -201
  283. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  284. package/upload/buttons-upload/Icons.js +0 -40
  285. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  286. package/upload/dragAndDropArea/Icons.js +0 -39
  287. package/upload/file-upload/FileToUpload.js +0 -115
  288. package/upload/file-upload/Icons.js +0 -66
  289. package/upload/files-upload/FilesToUpload.js +0 -109
  290. package/upload/index.d.ts +0 -15
  291. package/upload/transaction/Icons.js +0 -160
  292. package/upload/transaction/Transaction.js +0 -104
  293. package/upload/transactions/Transactions.js +0 -94
  294. /package/{radio → badge}/types.js +0 -0
@@ -0,0 +1,65 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _react = _interopRequireDefault(require("react"));
5
+ var _react2 = require("@testing-library/react");
6
+ var _Link = _interopRequireDefault(require("./Link"));
7
+ describe("Link component tests", function () {
8
+ test("Link renders with correct text", function () {
9
+ var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link")),
10
+ getByText = _render.getByText;
11
+ expect(getByText("Link")).toBeTruthy();
12
+ });
13
+ test("Link renders with correct href", function () {
14
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
15
+ href: "/testPage"
16
+ }, "Link")),
17
+ getByRole = _render2.getByRole;
18
+ expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
19
+ });
20
+ test("Link renders with correct disabled state", function () {
21
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
22
+ href: "/testPage",
23
+ disabled: true
24
+ }, "Link")),
25
+ getByText = _render3.getByText;
26
+ expect(getByText("Link").hasAttribute("href")).toBeFalsy();
27
+ var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
28
+ onClick: function onClick() {
29
+ return console.log("Andorra");
30
+ },
31
+ disabled: true
32
+ }, "LinkButton")),
33
+ getByTextLinkButton = _render4.getByText;
34
+ expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
35
+ });
36
+ test("Link open new tab", function () {
37
+ var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
38
+ href: "/testPage",
39
+ newWindow: true
40
+ }, "Link")),
41
+ getByRole = _render5.getByRole;
42
+ expect(getByRole("link").getAttribute("target")).toEqual("_blank");
43
+ });
44
+ test("Link onClick called", function () {
45
+ var onClick = jest.fn();
46
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
47
+ onClick: onClick
48
+ }, "Link")),
49
+ getByText = _render6.getByText;
50
+ var link = getByText("Link");
51
+ _react2.fireEvent.click(link);
52
+ expect(onClick).toHaveBeenCalled();
53
+ });
54
+ test("Disabled link onClick not called", function () {
55
+ var onClick = jest.fn();
56
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
57
+ onClick: onClick,
58
+ disabled: true
59
+ }, "Link")),
60
+ getByText = _render7.getByText;
61
+ var link = getByText("Link");
62
+ _react2.fireEvent.click(link);
63
+ expect(onClick).toHaveBeenCalledTimes(0);
64
+ });
65
+ });
package/link/types.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
2
+ export type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ export type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type LinkCommonProps = {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ export type LinkProps = {
10
11
  /**
11
12
  * If true, the color is inherited from parent.
12
13
  */
@@ -15,10 +16,6 @@ declare type LinkCommonProps = {
15
16
  * If true, the link is disabled.
16
17
  */
17
18
  disabled?: boolean;
18
- /**
19
- * @Deprecated Source of the icon.
20
- */
21
- iconSrc?: string;
22
19
  /**
23
20
  * Indicates the position of the icon in the component.
24
21
  */
@@ -45,30 +42,13 @@ declare type LinkCommonProps = {
45
42
  * Value of the tabindex.
46
43
  */
47
44
  tabIndex?: number;
48
- };
49
- export declare type LinkTextProps = LinkCommonProps & {
50
45
  /**
51
- * Link text.
46
+ * Content of the link.
52
47
  */
53
- text: string;
48
+ children: string;
54
49
  /**
55
- * Element used as the icon that will be placed next to the link text.
50
+ * Element or path used as the icon that will be placed next to the link text.
56
51
  */
57
- icon?: SVG;
58
- };
59
- export declare type LinkIconProps = LinkCommonProps & {
60
- /**
61
- * Link text.
62
- */
63
- text?: string;
64
- /**
65
- * Element used as the icon that will be placed next to the link text.
66
- */
67
- icon: SVG;
68
- };
69
- declare type Overload = {
70
- (props: LinkTextProps): JSX.Element;
71
- (props: LinkIconProps): JSX.Element;
52
+ icon?: string | SVG;
72
53
  };
73
- declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
74
- export default Overload;
54
+ export {};
package/main.d.ts CHANGED
@@ -3,29 +3,20 @@ import DxcAccordion from "./accordion/Accordion";
3
3
  import DxcButton from "./button/Button";
4
4
  import DxcCard from "./card/Card";
5
5
  import DxcCheckbox from "./checkbox/Checkbox";
6
- import DxcDate from "./date/Date";
7
6
  import DxcDialog from "./dialog/Dialog";
8
7
  import DxcDropdown from "./dropdown/Dropdown";
9
- import DxcFooter from "./footer/Footer";
10
- import DxcHeader from "./header/Header";
11
- import DxcInput from "./input-text/InputText";
12
- import DxcRadio from "./radio/Radio";
13
- import V3DxcSelect from "./V3Select/V3Select";
14
8
  import DxcSlider from "./slider/Slider";
15
9
  import DxcSwitch from "./switch/Switch";
16
10
  import DxcTabs from "./tabs/Tabs";
17
11
  import DxcProgressBar from "./progress-bar/ProgressBar";
18
12
  import DxcSpinner from "./spinner/Spinner";
19
- import DxcUpload from "./upload/Upload";
20
13
  import DxcTable from "./table/Table";
21
14
  import DxcBox from "./box/Box";
22
15
  import DxcTag from "./tag/Tag";
23
16
  import DxcPaginator from "./paginator/Paginator";
24
- import DxcSidenav from "./sidenav/Sidenav";
25
17
  import DxcWizard from "./wizard/Wizard";
26
18
  import DxcLink from "./link/Link";
27
19
  import DxcHeading from "./heading/Heading";
28
- import V3DxcTextarea from "./V3Textarea/V3Textarea";
29
20
  import DxcResultsetTable from "./resultsetTable/ResultsetTable";
30
21
  import DxcChip from "./chip/Chip";
31
22
  import DxcApplicationLayout from "./layout/ApplicationLayout";
@@ -39,10 +30,15 @@ import DxcNumberInput from "./number-input/NumberInput";
39
30
  import DxcTextarea from "./textarea/Textarea";
40
31
  import DxcSelect from "./select/Select";
41
32
  import DxcFileInput from "./file-input/FileInput";
42
- import DxcStack from "./stack/Stack";
43
- import DxcRow from "./row/Row";
44
- import DxcText from "./text/Text";
45
- import DxcList from "./list/List";
46
- import ThemeContext, { ThemeProvider } from "./ThemeContext";
33
+ import DxcRadioGroup from "./radio-group/RadioGroup";
34
+ import DxcBleed from "./bleed/Bleed";
35
+ import DxcInset from "./inset/Inset";
36
+ import DxcQuickNav from "./quick-nav/QuickNav";
37
+ import DxcNavTabs from "./nav-tabs/NavTabs";
38
+ import DxcFlex from "./flex/Flex";
39
+ import DxcTypography from "./typography/Typography";
40
+ import DxcParagraph from "./paragraph/Paragraph";
41
+ import DxcBulletedList from "./bulleted-list/BulletedList";
42
+ import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
47
43
  import { BackgroundColorProvider } from "./BackgroundColorContext";
48
- export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, V3DxcSelect, DxcInput, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, DxcDate, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcUpload, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, V3DxcTextarea, DxcResultsetTable, DxcChip, DxcApplicationLayout, ThemeContext, ThemeProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, };
44
+ 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, };
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
  });
@@ -43,12 +41,24 @@ Object.defineProperty(exports, "DxcBadge", {
43
41
  return _Badge["default"];
44
42
  }
45
43
  });
44
+ Object.defineProperty(exports, "DxcBleed", {
45
+ enumerable: true,
46
+ get: function get() {
47
+ return _Bleed["default"];
48
+ }
49
+ });
46
50
  Object.defineProperty(exports, "DxcBox", {
47
51
  enumerable: true,
48
52
  get: function get() {
49
53
  return _Box["default"];
50
54
  }
51
55
  });
56
+ Object.defineProperty(exports, "DxcBulletedList", {
57
+ enumerable: true,
58
+ get: function get() {
59
+ return _BulletedList["default"];
60
+ }
61
+ });
52
62
  Object.defineProperty(exports, "DxcButton", {
53
63
  enumerable: true,
54
64
  get: function get() {
@@ -73,12 +83,6 @@ Object.defineProperty(exports, "DxcChip", {
73
83
  return _Chip["default"];
74
84
  }
75
85
  });
76
- Object.defineProperty(exports, "DxcDate", {
77
- enumerable: true,
78
- get: function get() {
79
- return _Date["default"];
80
- }
81
- });
82
86
  Object.defineProperty(exports, "DxcDateInput", {
83
87
  enumerable: true,
84
88
  get: function get() {
@@ -103,16 +107,10 @@ Object.defineProperty(exports, "DxcFileInput", {
103
107
  return _FileInput["default"];
104
108
  }
105
109
  });
106
- Object.defineProperty(exports, "DxcFooter", {
107
- enumerable: true,
108
- get: function get() {
109
- return _Footer["default"];
110
- }
111
- });
112
- Object.defineProperty(exports, "DxcHeader", {
110
+ Object.defineProperty(exports, "DxcFlex", {
113
111
  enumerable: true,
114
112
  get: function get() {
115
- return _Header["default"];
113
+ return _Flex["default"];
116
114
  }
117
115
  });
118
116
  Object.defineProperty(exports, "DxcHeading", {
@@ -121,10 +119,10 @@ Object.defineProperty(exports, "DxcHeading", {
121
119
  return _Heading["default"];
122
120
  }
123
121
  });
124
- Object.defineProperty(exports, "DxcInput", {
122
+ Object.defineProperty(exports, "DxcInset", {
125
123
  enumerable: true,
126
124
  get: function get() {
127
- return _InputText["default"];
125
+ return _Inset["default"];
128
126
  }
129
127
  });
130
128
  Object.defineProperty(exports, "DxcLink", {
@@ -133,10 +131,10 @@ Object.defineProperty(exports, "DxcLink", {
133
131
  return _Link["default"];
134
132
  }
135
133
  });
136
- Object.defineProperty(exports, "DxcList", {
134
+ Object.defineProperty(exports, "DxcNavTabs", {
137
135
  enumerable: true,
138
136
  get: function get() {
139
- return _List["default"];
137
+ return _NavTabs["default"];
140
138
  }
141
139
  });
142
140
  Object.defineProperty(exports, "DxcNumberInput", {
@@ -151,6 +149,12 @@ Object.defineProperty(exports, "DxcPaginator", {
151
149
  return _Paginator["default"];
152
150
  }
153
151
  });
152
+ Object.defineProperty(exports, "DxcParagraph", {
153
+ enumerable: true,
154
+ get: function get() {
155
+ return _Paragraph["default"];
156
+ }
157
+ });
154
158
  Object.defineProperty(exports, "DxcPasswordInput", {
155
159
  enumerable: true,
156
160
  get: function get() {
@@ -163,22 +167,22 @@ Object.defineProperty(exports, "DxcProgressBar", {
163
167
  return _ProgressBar["default"];
164
168
  }
165
169
  });
166
- Object.defineProperty(exports, "DxcRadio", {
170
+ Object.defineProperty(exports, "DxcQuickNav", {
167
171
  enumerable: true,
168
172
  get: function get() {
169
- return _Radio["default"];
173
+ return _QuickNav["default"];
170
174
  }
171
175
  });
172
- Object.defineProperty(exports, "DxcResultsetTable", {
176
+ Object.defineProperty(exports, "DxcRadioGroup", {
173
177
  enumerable: true,
174
178
  get: function get() {
175
- return _ResultsetTable["default"];
179
+ return _RadioGroup["default"];
176
180
  }
177
181
  });
178
- Object.defineProperty(exports, "DxcRow", {
182
+ Object.defineProperty(exports, "DxcResultsetTable", {
179
183
  enumerable: true,
180
184
  get: function get() {
181
- return _Row["default"];
185
+ return _ResultsetTable["default"];
182
186
  }
183
187
  });
184
188
  Object.defineProperty(exports, "DxcSelect", {
@@ -187,12 +191,6 @@ Object.defineProperty(exports, "DxcSelect", {
187
191
  return _Select["default"];
188
192
  }
189
193
  });
190
- Object.defineProperty(exports, "DxcSidenav", {
191
- enumerable: true,
192
- get: function get() {
193
- return _Sidenav["default"];
194
- }
195
- });
196
194
  Object.defineProperty(exports, "DxcSlider", {
197
195
  enumerable: true,
198
196
  get: function get() {
@@ -205,12 +203,6 @@ Object.defineProperty(exports, "DxcSpinner", {
205
203
  return _Spinner["default"];
206
204
  }
207
205
  });
208
- Object.defineProperty(exports, "DxcStack", {
209
- enumerable: true,
210
- get: function get() {
211
- return _Stack["default"];
212
- }
213
- });
214
206
  Object.defineProperty(exports, "DxcSwitch", {
215
207
  enumerable: true,
216
208
  get: function get() {
@@ -235,12 +227,6 @@ Object.defineProperty(exports, "DxcTag", {
235
227
  return _Tag["default"];
236
228
  }
237
229
  });
238
- Object.defineProperty(exports, "DxcText", {
239
- enumerable: true,
240
- get: function get() {
241
- return _Text["default"];
242
- }
243
- });
244
230
  Object.defineProperty(exports, "DxcTextInput", {
245
231
  enumerable: true,
246
232
  get: function get() {
@@ -259,10 +245,10 @@ Object.defineProperty(exports, "DxcToggleGroup", {
259
245
  return _ToggleGroup["default"];
260
246
  }
261
247
  });
262
- Object.defineProperty(exports, "DxcUpload", {
248
+ Object.defineProperty(exports, "DxcTypography", {
263
249
  enumerable: true,
264
250
  get: function get() {
265
- return _Upload["default"];
251
+ return _Typography["default"];
266
252
  }
267
253
  });
268
254
  Object.defineProperty(exports, "DxcWizard", {
@@ -271,125 +257,66 @@ Object.defineProperty(exports, "DxcWizard", {
271
257
  return _Wizard["default"];
272
258
  }
273
259
  });
274
- Object.defineProperty(exports, "ThemeContext", {
260
+ Object.defineProperty(exports, "HalstackContext", {
275
261
  enumerable: true,
276
262
  get: function get() {
277
- return _ThemeContext["default"];
263
+ return _HalstackContext["default"];
278
264
  }
279
265
  });
280
- Object.defineProperty(exports, "ThemeProvider", {
266
+ Object.defineProperty(exports, "HalstackLanguageContext", {
281
267
  enumerable: true,
282
268
  get: function get() {
283
- return _ThemeContext.ThemeProvider;
269
+ return _HalstackContext.HalstackLanguageContext;
284
270
  }
285
271
  });
286
- Object.defineProperty(exports, "V3DxcSelect", {
272
+ Object.defineProperty(exports, "HalstackProvider", {
287
273
  enumerable: true,
288
274
  get: function get() {
289
- return _V3Select["default"];
275
+ return _HalstackContext.HalstackProvider;
290
276
  }
291
277
  });
292
- Object.defineProperty(exports, "V3DxcTextarea", {
293
- enumerable: true,
294
- get: function get() {
295
- return _V3Textarea["default"];
296
- }
297
- });
298
-
299
278
  var _Alert = _interopRequireDefault(require("./alert/Alert"));
300
-
301
279
  var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
302
-
303
280
  var _Button = _interopRequireDefault(require("./button/Button"));
304
-
305
281
  var _Card = _interopRequireDefault(require("./card/Card"));
306
-
307
282
  var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
308
-
309
- var _Date = _interopRequireDefault(require("./date/Date"));
310
-
311
283
  var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
312
-
313
284
  var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
314
-
315
- var _Footer = _interopRequireDefault(require("./footer/Footer"));
316
-
317
- var _Header = _interopRequireDefault(require("./header/Header"));
318
-
319
- var _InputText = _interopRequireDefault(require("./input-text/InputText"));
320
-
321
- var _Radio = _interopRequireDefault(require("./radio/Radio"));
322
-
323
- var _V3Select = _interopRequireDefault(require("./V3Select/V3Select"));
324
-
325
285
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
326
-
327
286
  var _Switch = _interopRequireDefault(require("./switch/Switch"));
328
-
329
287
  var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
330
-
331
288
  var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
332
-
333
289
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
334
-
335
- var _Upload = _interopRequireDefault(require("./upload/Upload"));
336
-
337
290
  var _Table = _interopRequireDefault(require("./table/Table"));
338
-
339
291
  var _Box = _interopRequireDefault(require("./box/Box"));
340
-
341
292
  var _Tag = _interopRequireDefault(require("./tag/Tag"));
342
-
343
293
  var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
344
-
345
- var _Sidenav = _interopRequireDefault(require("./sidenav/Sidenav"));
346
-
347
294
  var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
348
-
349
295
  var _Link = _interopRequireDefault(require("./link/Link"));
350
-
351
296
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
352
-
353
- var _V3Textarea = _interopRequireDefault(require("./V3Textarea/V3Textarea"));
354
-
355
297
  var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
356
-
357
298
  var _Chip = _interopRequireDefault(require("./chip/Chip"));
358
-
359
299
  var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
360
-
361
300
  var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
362
-
363
301
  var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
364
-
365
302
  var _Badge = _interopRequireDefault(require("./badge/Badge"));
366
-
367
303
  var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
368
-
369
304
  var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
370
-
371
305
  var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
372
-
373
306
  var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
374
-
375
307
  var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
376
-
377
308
  var _Select = _interopRequireDefault(require("./select/Select"));
378
-
379
309
  var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
380
-
381
- var _Stack = _interopRequireDefault(require("./stack/Stack"));
382
-
383
- var _Row = _interopRequireDefault(require("./row/Row"));
384
-
385
- var _Text = _interopRequireDefault(require("./text/Text"));
386
-
387
- var _List = _interopRequireDefault(require("./list/List"));
388
-
389
- var _ThemeContext = _interopRequireWildcard(require("./ThemeContext"));
390
-
310
+ var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
311
+ var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
312
+ var _Inset = _interopRequireDefault(require("./inset/Inset"));
313
+ var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
314
+ var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
315
+ var _Flex = _interopRequireDefault(require("./flex/Flex"));
316
+ var _Typography = _interopRequireDefault(require("./typography/Typography"));
317
+ var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
318
+ var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
319
+ var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
391
320
  var _BackgroundColorContext = require("./BackgroundColorContext");
392
-
393
321
  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); }
394
-
395
322
  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; }
@@ -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,95 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = exports.NavTabsContext = void 0;
9
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
+ var _useTheme = _interopRequireDefault(require("../useTheme"));
14
+ var _Tab = _interopRequireDefault(require("./Tab"));
15
+ var _templateObject;
16
+ 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); }
17
+ 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; }
18
+ var NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
19
+ exports.NavTabsContext = NavTabsContext;
20
+ var getPropInChild = function getPropInChild(child, propName) {
21
+ return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
22
+ };
23
+ var getLabelFromTab = function getLabelFromTab(child) {
24
+ if (typeof child === "string") {
25
+ return child.toString();
26
+ } else if (child.props.children) {
27
+ return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
28
+ }
29
+ };
30
+ var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
31
+ var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
32
+ while (getPropInChild(array[index], "disabled")) {
33
+ index = index === 0 ? array.length - 1 : index - 1;
34
+ }
35
+ return index;
36
+ };
37
+ var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
38
+ var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
39
+ while (getPropInChild(array[index], "disabled")) {
40
+ index = index === array.length - 1 ? 0 : index + 1;
41
+ }
42
+ return index;
43
+ };
44
+ var DxcNavTabs = function DxcNavTabs(_ref) {
45
+ var _ref$iconPosition = _ref.iconPosition,
46
+ iconPosition = _ref$iconPosition === void 0 ? "top" : _ref$iconPosition,
47
+ _ref$tabIndex = _ref.tabIndex,
48
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
49
+ children = _ref.children;
50
+ var colorsTheme = (0, _useTheme["default"])();
51
+ var _useState = (0, _react.useState)(null),
52
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
53
+ innerFocus = _useState2[0],
54
+ setInnerFocus = _useState2[1];
55
+ var contextValue = (0, _react.useMemo)(function () {
56
+ return {
57
+ iconPosition: iconPosition,
58
+ tabIndex: tabIndex,
59
+ hasIcons: _react["default"].Children.toArray(children).some(function (child) {
60
+ return getPropInChild(child, "icon");
61
+ }),
62
+ focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
63
+ };
64
+ }, [iconPosition, tabIndex, innerFocus]);
65
+ var handleOnKeyDown = function handleOnKeyDown(event) {
66
+ var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
67
+ return getPropInChild(child, "active");
68
+ });
69
+ switch (event.key) {
70
+ case "Left":
71
+ case "ArrowLeft":
72
+ event.preventDefault();
73
+ setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
74
+ break;
75
+ case "Right":
76
+ case "ArrowRight":
77
+ event.preventDefault();
78
+ setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
79
+ break;
80
+ }
81
+ };
82
+ return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
83
+ theme: colorsTheme["navTabs"]
84
+ }, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
85
+ onKeyDown: handleOnKeyDown,
86
+ role: "tablist",
87
+ "aria-label": "Navigation tabs"
88
+ }, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
89
+ value: contextValue
90
+ }, children)));
91
+ };
92
+ DxcNavTabs.Tab = _Tab["default"];
93
+ var NavTabsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"])));
94
+ var _default = DxcNavTabs;
95
+ exports["default"] = _default;