@dxc-technology/halstack-react 0.0.0-d1e7610 → 0.0.0-d201da1

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 (282) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +295 -0
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +15 -47
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +72 -0
  9. package/accordion/types.d.ts +8 -8
  10. package/accordion-group/AccordionGroup.d.ts +1 -1
  11. package/accordion-group/AccordionGroup.js +16 -17
  12. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  13. package/accordion-group/AccordionGroup.test.js +151 -0
  14. package/accordion-group/types.d.ts +8 -8
  15. package/alert/Alert.js +6 -3
  16. package/alert/Alert.test.js +92 -0
  17. package/alert/types.d.ts +1 -1
  18. package/badge/Badge.d.ts +4 -0
  19. package/badge/Badge.js +6 -4
  20. package/badge/types.d.ts +5 -0
  21. package/{radio → badge}/types.js +0 -0
  22. package/bleed/Bleed.d.ts +3 -0
  23. package/bleed/Bleed.js +51 -0
  24. package/bleed/Bleed.stories.tsx +341 -0
  25. package/bleed/types.d.ts +37 -0
  26. package/bleed/types.js +5 -0
  27. package/box/Box.d.ts +1 -1
  28. package/box/Box.js +26 -39
  29. package/box/Box.test.js +18 -0
  30. package/box/types.d.ts +0 -4
  31. package/button/Button.d.ts +1 -1
  32. package/button/Button.js +24 -27
  33. package/button/Button.stories.tsx +6 -8
  34. package/button/Button.test.js +35 -0
  35. package/button/types.d.ts +5 -9
  36. package/card/Card.js +26 -30
  37. package/card/Card.stories.tsx +201 -0
  38. package/card/Card.test.js +50 -0
  39. package/card/ice-cream.jpg +0 -0
  40. package/card/types.d.ts +4 -6
  41. package/checkbox/Checkbox.d.ts +1 -1
  42. package/checkbox/Checkbox.js +45 -41
  43. package/checkbox/Checkbox.stories.tsx +124 -128
  44. package/checkbox/Checkbox.test.js +78 -0
  45. package/checkbox/types.d.ts +9 -5
  46. package/chip/Chip.d.ts +4 -0
  47. package/chip/Chip.js +16 -76
  48. package/chip/Chip.stories.tsx +6 -8
  49. package/chip/Chip.test.js +56 -0
  50. package/chip/types.d.ts +45 -0
  51. package/chip/types.js +5 -0
  52. package/common/variables.js +234 -341
  53. package/date-input/DateInput.js +63 -52
  54. package/date-input/DateInput.stories.tsx +7 -7
  55. package/date-input/DateInput.test.js +479 -0
  56. package/date-input/types.d.ts +16 -9
  57. package/dialog/Dialog.js +8 -35
  58. package/dialog/Dialog.test.js +40 -0
  59. package/dropdown/Dropdown.d.ts +1 -1
  60. package/dropdown/Dropdown.js +22 -48
  61. package/dropdown/Dropdown.stories.tsx +249 -0
  62. package/dropdown/Dropdown.test.js +189 -0
  63. package/dropdown/types.d.ts +6 -15
  64. package/file-input/FileInput.d.ts +4 -0
  65. package/file-input/FileInput.js +172 -111
  66. package/file-input/FileInput.stories.tsx +507 -0
  67. package/file-input/FileInput.test.js +457 -0
  68. package/file-input/FileItem.d.ts +14 -0
  69. package/file-input/FileItem.js +16 -23
  70. package/file-input/types.d.ts +112 -0
  71. package/file-input/types.js +5 -0
  72. package/footer/Footer.d.ts +1 -1
  73. package/footer/Footer.js +32 -113
  74. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +1 -22
  75. package/footer/Footer.test.js +109 -0
  76. package/footer/Icons.d.ts +2 -0
  77. package/footer/Icons.js +4 -4
  78. package/footer/types.d.ts +21 -17
  79. package/header/Header.js +29 -50
  80. package/header/Header.stories.tsx +172 -0
  81. package/header/Header.test.js +79 -0
  82. package/header/Icons.d.ts +2 -0
  83. package/header/types.d.ts +4 -2
  84. package/heading/Heading.js +1 -1
  85. package/heading/Heading.stories.tsx +54 -0
  86. package/heading/Heading.test.js +186 -0
  87. package/inline/Inline.d.ts +4 -0
  88. package/inline/Inline.js +60 -0
  89. package/inline/Inline.stories.tsx +319 -0
  90. package/inline/types.d.ts +36 -0
  91. package/inline/types.js +5 -0
  92. package/inset/Inset.d.ts +3 -0
  93. package/inset/Inset.js +51 -0
  94. package/inset/Inset.stories.tsx +229 -0
  95. package/inset/types.d.ts +37 -0
  96. package/inset/types.js +5 -0
  97. package/layout/ApplicationLayout.d.ts +11 -0
  98. package/layout/ApplicationLayout.js +84 -120
  99. package/layout/ApplicationLayout.stories.tsx +126 -0
  100. package/layout/Icons.d.ts +5 -0
  101. package/layout/Icons.js +13 -2
  102. package/layout/SidenavContext.d.ts +5 -0
  103. package/layout/SidenavContext.js +19 -0
  104. package/layout/types.d.ts +52 -0
  105. package/layout/types.js +5 -0
  106. package/link/Link.d.ts +3 -2
  107. package/link/Link.js +61 -86
  108. package/link/Link.stories.tsx +131 -15
  109. package/link/Link.test.js +83 -0
  110. package/link/types.d.ts +9 -29
  111. package/list/List.d.ts +4 -0
  112. package/list/List.js +47 -0
  113. package/list/List.stories.tsx +89 -0
  114. package/list/types.d.ts +7 -0
  115. package/list/types.js +5 -0
  116. package/main.d.ts +13 -9
  117. package/main.js +80 -42
  118. package/number-input/NumberInput.js +14 -24
  119. package/number-input/NumberInput.stories.tsx +5 -5
  120. package/number-input/NumberInput.test.js +506 -0
  121. package/number-input/NumberInputContext.d.ts +4 -0
  122. package/number-input/NumberInputContext.js +5 -2
  123. package/number-input/numberInputContextTypes.d.ts +19 -0
  124. package/number-input/numberInputContextTypes.js +5 -0
  125. package/number-input/types.d.ts +17 -10
  126. package/package.json +10 -6
  127. package/paginator/Paginator.js +19 -46
  128. package/paginator/Paginator.test.js +308 -0
  129. package/password-input/PasswordInput.js +23 -19
  130. package/password-input/PasswordInput.stories.tsx +3 -3
  131. package/password-input/PasswordInput.test.js +180 -0
  132. package/password-input/types.d.ts +29 -19
  133. package/progress-bar/ProgressBar.js +5 -5
  134. package/progress-bar/ProgressBar.stories.jsx +11 -11
  135. package/progress-bar/ProgressBar.test.js +65 -0
  136. package/quick-nav/QuickNav.d.ts +4 -0
  137. package/quick-nav/QuickNav.js +116 -0
  138. package/quick-nav/QuickNav.stories.tsx +237 -0
  139. package/quick-nav/types.d.ts +21 -0
  140. package/quick-nav/types.js +5 -0
  141. package/radio-group/Radio.d.ts +4 -0
  142. package/radio-group/Radio.js +141 -0
  143. package/radio-group/RadioGroup.d.ts +4 -0
  144. package/radio-group/RadioGroup.js +282 -0
  145. package/radio-group/RadioGroup.stories.tsx +100 -0
  146. package/radio-group/RadioGroup.test.js +695 -0
  147. package/radio-group/types.d.ts +114 -0
  148. package/radio-group/types.js +5 -0
  149. package/resultsetTable/ResultsetTable.d.ts +4 -0
  150. package/resultsetTable/ResultsetTable.js +9 -29
  151. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  152. package/resultsetTable/ResultsetTable.test.js +348 -0
  153. package/resultsetTable/types.d.ts +67 -0
  154. package/resultsetTable/types.js +5 -0
  155. package/row/Row.d.ts +3 -0
  156. package/row/Row.js +127 -0
  157. package/row/Row.stories.tsx +237 -0
  158. package/row/types.d.ts +28 -0
  159. package/row/types.js +5 -0
  160. package/select/Icons.d.ts +10 -0
  161. package/select/Icons.js +93 -0
  162. package/select/Listbox.d.ts +4 -0
  163. package/select/Listbox.js +175 -0
  164. package/select/Option.d.ts +4 -0
  165. package/select/Option.js +110 -0
  166. package/select/Select.d.ts +4 -0
  167. package/select/Select.js +161 -366
  168. package/select/Select.stories.tsx +230 -176
  169. package/select/Select.test.js +2162 -0
  170. package/select/types.d.ts +212 -0
  171. package/select/types.js +5 -0
  172. package/sidenav/Sidenav.d.ts +1 -1
  173. package/sidenav/Sidenav.js +22 -11
  174. package/sidenav/Sidenav.stories.tsx +182 -0
  175. package/sidenav/Sidenav.test.js +56 -0
  176. package/slider/Slider.d.ts +1 -1
  177. package/slider/Slider.js +6 -5
  178. package/slider/Slider.stories.tsx +8 -8
  179. package/slider/Slider.test.js +150 -0
  180. package/slider/types.d.ts +4 -0
  181. package/spinner/Spinner.js +3 -3
  182. package/spinner/Spinner.stories.jsx +1 -0
  183. package/spinner/Spinner.test.js +64 -0
  184. package/stack/Stack.d.ts +4 -0
  185. package/stack/Stack.js +56 -0
  186. package/stack/Stack.stories.tsx +263 -0
  187. package/stack/types.d.ts +32 -0
  188. package/stack/types.js +5 -0
  189. package/switch/Switch.d.ts +1 -1
  190. package/switch/Switch.js +37 -21
  191. package/switch/Switch.stories.tsx +15 -15
  192. package/switch/Switch.test.js +98 -0
  193. package/switch/types.d.ts +6 -2
  194. package/table/Table.js +3 -3
  195. package/table/Table.stories.jsx +2 -1
  196. package/table/Table.test.js +26 -0
  197. package/tabs/Tabs.d.ts +1 -1
  198. package/tabs/Tabs.js +20 -20
  199. package/tabs/Tabs.stories.tsx +112 -0
  200. package/tabs/Tabs.test.js +140 -0
  201. package/tabs/types.d.ts +29 -18
  202. package/tabs-nav/NavTabs.d.ts +8 -0
  203. package/tabs-nav/NavTabs.js +125 -0
  204. package/tabs-nav/NavTabs.stories.tsx +170 -0
  205. package/tabs-nav/NavTabs.test.js +82 -0
  206. package/tabs-nav/Tab.d.ts +4 -0
  207. package/tabs-nav/Tab.js +132 -0
  208. package/tabs-nav/types.d.ts +53 -0
  209. package/tabs-nav/types.js +5 -0
  210. package/tag/Tag.d.ts +1 -1
  211. package/tag/Tag.js +18 -28
  212. package/tag/Tag.stories.tsx +26 -29
  213. package/tag/Tag.test.js +60 -0
  214. package/tag/types.d.ts +23 -14
  215. package/text/Text.d.ts +7 -0
  216. package/text/Text.js +30 -0
  217. package/text/Text.stories.tsx +19 -0
  218. package/text-input/Suggestion.d.ts +4 -0
  219. package/text-input/Suggestion.js +55 -0
  220. package/text-input/TextInput.d.ts +4 -0
  221. package/text-input/TextInput.js +91 -146
  222. package/text-input/TextInput.stories.tsx +474 -0
  223. package/text-input/TextInput.test.js +1712 -0
  224. package/text-input/types.d.ts +178 -0
  225. package/text-input/types.js +5 -0
  226. package/textarea/Textarea.d.ts +4 -0
  227. package/textarea/Textarea.js +39 -79
  228. package/textarea/Textarea.stories.jsx +37 -15
  229. package/textarea/Textarea.test.js +437 -0
  230. package/textarea/types.d.ts +137 -0
  231. package/textarea/types.js +5 -0
  232. package/toggle-group/ToggleGroup.d.ts +4 -0
  233. package/toggle-group/ToggleGroup.js +18 -46
  234. package/toggle-group/ToggleGroup.stories.tsx +27 -32
  235. package/toggle-group/ToggleGroup.test.js +156 -0
  236. package/toggle-group/types.d.ts +105 -0
  237. package/toggle-group/types.js +5 -0
  238. package/useTheme.d.ts +2 -0
  239. package/useTheme.js +2 -2
  240. package/useTranslatedLabels.d.ts +2 -0
  241. package/useTranslatedLabels.js +20 -0
  242. package/wizard/Wizard.d.ts +1 -1
  243. package/wizard/Wizard.js +107 -46
  244. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +13 -23
  245. package/wizard/Wizard.test.js +141 -0
  246. package/wizard/types.d.ts +9 -9
  247. package/ThemeContext.js +0 -246
  248. package/V3Select/V3Select.js +0 -455
  249. package/V3Select/index.d.ts +0 -27
  250. package/V3Textarea/V3Textarea.js +0 -260
  251. package/V3Textarea/index.d.ts +0 -27
  252. package/chip/index.d.ts +0 -22
  253. package/date/Date.js +0 -373
  254. package/date/index.d.ts +0 -27
  255. package/file-input/index.d.ts +0 -81
  256. package/input-text/Icons.js +0 -22
  257. package/input-text/InputText.js +0 -611
  258. package/input-text/index.d.ts +0 -36
  259. package/radio/Radio.d.ts +0 -4
  260. package/radio/Radio.js +0 -174
  261. package/radio/Radio.stories.tsx +0 -192
  262. package/radio/types.d.ts +0 -54
  263. package/resultsetTable/index.d.ts +0 -19
  264. package/select/index.d.ts +0 -131
  265. package/text-input/index.d.ts +0 -135
  266. package/textarea/index.d.ts +0 -117
  267. package/toggle/Toggle.js +0 -186
  268. package/toggle/index.d.ts +0 -21
  269. package/toggle-group/index.d.ts +0 -21
  270. package/upload/Upload.js +0 -201
  271. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  272. package/upload/buttons-upload/Icons.js +0 -40
  273. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  274. package/upload/dragAndDropArea/Icons.js +0 -39
  275. package/upload/file-upload/FileToUpload.js +0 -115
  276. package/upload/file-upload/Icons.js +0 -66
  277. package/upload/files-upload/FilesToUpload.js +0 -109
  278. package/upload/index.d.ts +0 -15
  279. package/upload/transaction/Icons.js +0 -160
  280. package/upload/transaction/Transaction.js +0 -104
  281. package/upload/transactions/Transactions.js +0 -94
  282. package/wizard/Icons.js +0 -65
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _react = _interopRequireDefault(require("react"));
6
+
7
+ var _react2 = require("@testing-library/react");
8
+
9
+ var _Link = _interopRequireDefault(require("./Link"));
10
+
11
+ describe("Link component tests", function () {
12
+ test("Link renders with correct text", function () {
13
+ var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link")),
14
+ getByText = _render.getByText;
15
+
16
+ expect(getByText("Link")).toBeTruthy();
17
+ });
18
+ test("Link renders with correct href", function () {
19
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
20
+ href: "/testPage"
21
+ }, "Link")),
22
+ getByRole = _render2.getByRole;
23
+
24
+ expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
25
+ });
26
+ test("Link renders with correct disabled state", function () {
27
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
28
+ href: "/testPage",
29
+ disabled: true
30
+ }, "Link")),
31
+ getByText = _render3.getByText;
32
+
33
+ expect(getByText("Link").hasAttribute("href")).toBeFalsy();
34
+
35
+ var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
36
+ onClick: function onClick() {
37
+ return console.log("Andorra");
38
+ },
39
+ disabled: true
40
+ }, "LinkButton")),
41
+ getByTextLinkButton = _render4.getByText;
42
+
43
+ expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
44
+ });
45
+ test("Link open new tab", function () {
46
+ var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
47
+ href: "/testPage",
48
+ newWindow: true
49
+ }, "Link")),
50
+ getByRole = _render5.getByRole;
51
+
52
+ expect(getByRole("link").getAttribute("target")).toEqual("_blank");
53
+ });
54
+ test("Link onClick called", function () {
55
+ var onClick = jest.fn();
56
+
57
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
58
+ onClick: onClick
59
+ }, "Link")),
60
+ getByText = _render6.getByText;
61
+
62
+ var link = getByText("Link");
63
+
64
+ _react2.fireEvent.click(link);
65
+
66
+ expect(onClick).toHaveBeenCalled();
67
+ });
68
+ test("Disabled link onClick not called", function () {
69
+ var onClick = jest.fn();
70
+
71
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
72
+ onClick: onClick,
73
+ disabled: true
74
+ }, "Link")),
75
+ getByText = _render7.getByText;
76
+
77
+ var link = getByText("Link");
78
+
79
+ _react2.fireEvent.click(link);
80
+
81
+ expect(onClick).toHaveBeenCalledTimes(0);
82
+ });
83
+ });
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 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 LinkCommonProps = {
9
+ declare type SVG = React.SVGProps<SVGSVGElement>;
10
+ export declare 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/list/List.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import ListPropsType from "./types";
3
+ declare function List({ children, type, gutter }: ListPropsType): JSX.Element;
4
+ export default List;
package/list/List.js ADDED
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
15
+
16
+ var _Stack = _interopRequireDefault(require("../stack/Stack"));
17
+
18
+ var _Text = _interopRequireDefault(require("../text/Text"));
19
+
20
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
21
+
22
+ function List(_ref) {
23
+ var children = _ref.children,
24
+ _ref$type = _ref.type,
25
+ type = _ref$type === void 0 ? "disc" : _ref$type,
26
+ _ref$gutter = _ref.gutter,
27
+ gutter = _ref$gutter === void 0 ? "0.25rem" : _ref$gutter;
28
+ return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
29
+ as: type === "number" ? "ol" : "ul",
30
+ gutter: gutter
31
+ }, _react["default"].Children.map(children, function (child, index) {
32
+ return /*#__PURE__*/_react["default"].createElement(ListItem, null, type === "number" ? /*#__PURE__*/_react["default"].createElement(Number, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, index + 1, ".")) : type === "square" ? /*#__PURE__*/_react["default"].createElement(Square, null) : type === "circle" ? /*#__PURE__*/_react["default"].createElement(Circle, null) : /*#__PURE__*/_react["default"].createElement(Disc, null), child);
33
+ }));
34
+ }
35
+
36
+ var Number = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n user-select: none;\n margin-right: 10px;\n flex-shrink: 0;\n"])));
37
+
38
+ var Square = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: black;\n width: 5px;\n height: 5px;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n"])));
39
+
40
+ var Circle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: 5px;\n height: 5px;\n border-radius: 50%;\n border: 1px solid black;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n box-sizing: border-box;\n"])));
41
+
42
+ var Disc = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: black;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n"])));
43
+
44
+ var ListItem = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px;\n padding: 0px;\n list-style: none;\n display: flex;\n"])));
45
+
46
+ var _default = List;
47
+ exports["default"] = _default;
@@ -0,0 +1,89 @@
1
+ import React from "react";
2
+ import styled from "styled-components";
3
+ import Title from "../../.storybook/components/Title";
4
+ import DxcList from "./List";
5
+ import DxcText from "../text/Text";
6
+
7
+ export default {
8
+ title: "List",
9
+ component: DxcList,
10
+ };
11
+
12
+ export const Chromatic = () => (
13
+ <>
14
+ <Title title="Default list" theme="light" level={4} />
15
+ <DxcList>
16
+ <DxcText>Text 1.</DxcText>
17
+ <DxcText>Text 2.</DxcText>
18
+ </DxcList>
19
+ <Title title="Number" theme="light" level={4} />
20
+ <DxcList type="number">
21
+ <DxcText>Text 1.</DxcText>
22
+ <DxcText>Text 2.</DxcText>
23
+ </DxcList>
24
+ <Title title="Square" theme="light" level={4} />
25
+ <DxcList type="square">
26
+ <DxcText>Text 1.</DxcText>
27
+ <DxcText>Text 2.</DxcText>
28
+ </DxcList>
29
+ <Title title="Circle" theme="light" level={4} />
30
+ <DxcList type="circle">
31
+ <DxcText>Text 1.</DxcText>
32
+ <DxcText>Text 2.</DxcText>
33
+ </DxcList>
34
+ <Title title="Multiple lines" theme="light" level={4} />
35
+ <Container>
36
+ <DxcList>
37
+ <DxcText>
38
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
39
+ magna aliqua.
40
+ </DxcText>
41
+ <DxcText>Text 2.</DxcText>
42
+ </DxcList>
43
+ </Container>
44
+ <Title title="gutter = 0rem" theme="light" level={4} />
45
+ <DxcList gutter="0rem">
46
+ <DxcText>Text 1.</DxcText>
47
+ <DxcText>Text 2.</DxcText>
48
+ </DxcList>
49
+ <Title title="gutter = 0.125rem" theme="light" level={4} />
50
+ <DxcList gutter="0.125rem">
51
+ <DxcText>Text 1.</DxcText>
52
+ <DxcText>Text 2.</DxcText>
53
+ </DxcList>
54
+ <Title title="gutter = 0.25rem" theme="light" level={4} />
55
+ <DxcList gutter="0.25rem">
56
+ <DxcText>Text 1.</DxcText>
57
+ <DxcText>Text 2.</DxcText>
58
+ </DxcList>
59
+ <Title title="gutter = 0.5rem" theme="light" level={4} />
60
+ <DxcList gutter="0.5rem">
61
+ <DxcText>Text 1.</DxcText>
62
+ <DxcText>Text 2.</DxcText>
63
+ </DxcList>
64
+ <Title title="gutter = 0.75rem" theme="light" level={4} />
65
+ <DxcList gutter="0.75rem">
66
+ <DxcText>Text 1.</DxcText>
67
+ <DxcText>Text 2.</DxcText>
68
+ </DxcList>
69
+ <Title title="gutter = 1rem" theme="light" level={4} />
70
+ <DxcList gutter="1rem">
71
+ <DxcText>Text 1.</DxcText>
72
+ <DxcText>Text 2.</DxcText>
73
+ </DxcList>
74
+ <Title title="gutter = 1.5rem" theme="light" level={4} />
75
+ <DxcList gutter="1.5rem">
76
+ <DxcText>Text 1.</DxcText>
77
+ <DxcText>Text 2.</DxcText>
78
+ </DxcList>
79
+ <Title title="gutter = 2rem" theme="light" level={4} />
80
+ <DxcList gutter="2rem">
81
+ <DxcText>Text 1.</DxcText>
82
+ <DxcText>Text 2.</DxcText>
83
+ </DxcList>
84
+ </>
85
+ );
86
+
87
+ const Container = styled.div`
88
+ width: 400px;
89
+ `;
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ declare type Props = {
3
+ children: React.ReactNode;
4
+ gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem";
5
+ type?: "disc" | "circle" | "square" | "number";
6
+ };
7
+ export default Props;
package/list/types.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/main.d.ts CHANGED
@@ -3,20 +3,15 @@ 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
8
  import DxcFooter from "./footer/Footer";
10
9
  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
10
  import DxcSlider from "./slider/Slider";
15
11
  import DxcSwitch from "./switch/Switch";
16
12
  import DxcTabs from "./tabs/Tabs";
17
13
  import DxcProgressBar from "./progress-bar/ProgressBar";
18
14
  import DxcSpinner from "./spinner/Spinner";
19
- import DxcUpload from "./upload/Upload";
20
15
  import DxcTable from "./table/Table";
21
16
  import DxcBox from "./box/Box";
22
17
  import DxcTag from "./tag/Tag";
@@ -25,7 +20,6 @@ import DxcSidenav from "./sidenav/Sidenav";
25
20
  import DxcWizard from "./wizard/Wizard";
26
21
  import DxcLink from "./link/Link";
27
22
  import DxcHeading from "./heading/Heading";
28
- import V3DxcTextarea from "./V3Textarea/V3Textarea";
29
23
  import DxcResultsetTable from "./resultsetTable/ResultsetTable";
30
24
  import DxcChip from "./chip/Chip";
31
25
  import DxcApplicationLayout from "./layout/ApplicationLayout";
@@ -39,6 +33,16 @@ import DxcNumberInput from "./number-input/NumberInput";
39
33
  import DxcTextarea from "./textarea/Textarea";
40
34
  import DxcSelect from "./select/Select";
41
35
  import DxcFileInput from "./file-input/FileInput";
42
- import ThemeContext, { ThemeProvider } from "./ThemeContext.js";
43
- import { BackgroundColorProvider } from "./BackgroundColorContext.js";
44
- 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, };
36
+ import DxcStack from "./stack/Stack";
37
+ import DxcRow from "./row/Row";
38
+ import DxcText from "./text/Text";
39
+ import DxcList from "./list/List";
40
+ import DxcRadioGroup from "./radio-group/RadioGroup";
41
+ import DxcBleed from "./bleed/Bleed";
42
+ import DxcInset from "./inset/Inset";
43
+ import DxcQuickNav from "./quick-nav/QuickNav";
44
+ import DxcNavTabs from "./tabs-nav/NavTabs";
45
+ import DxcInline from "./inline/Inline";
46
+ import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
47
+ import { BackgroundColorProvider } from "./BackgroundColorContext";
48
+ export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcInline, };
package/main.js CHANGED
@@ -43,6 +43,12 @@ Object.defineProperty(exports, "DxcBadge", {
43
43
  return _Badge["default"];
44
44
  }
45
45
  });
46
+ Object.defineProperty(exports, "DxcBleed", {
47
+ enumerable: true,
48
+ get: function get() {
49
+ return _Bleed["default"];
50
+ }
51
+ });
46
52
  Object.defineProperty(exports, "DxcBox", {
47
53
  enumerable: true,
48
54
  get: function get() {
@@ -73,12 +79,6 @@ Object.defineProperty(exports, "DxcChip", {
73
79
  return _Chip["default"];
74
80
  }
75
81
  });
76
- Object.defineProperty(exports, "DxcDate", {
77
- enumerable: true,
78
- get: function get() {
79
- return _Date["default"];
80
- }
81
- });
82
82
  Object.defineProperty(exports, "DxcDateInput", {
83
83
  enumerable: true,
84
84
  get: function get() {
@@ -121,10 +121,16 @@ Object.defineProperty(exports, "DxcHeading", {
121
121
  return _Heading["default"];
122
122
  }
123
123
  });
124
- Object.defineProperty(exports, "DxcInput", {
124
+ Object.defineProperty(exports, "DxcInline", {
125
125
  enumerable: true,
126
126
  get: function get() {
127
- return _InputText["default"];
127
+ return _Inline["default"];
128
+ }
129
+ });
130
+ Object.defineProperty(exports, "DxcInset", {
131
+ enumerable: true,
132
+ get: function get() {
133
+ return _Inset["default"];
128
134
  }
129
135
  });
130
136
  Object.defineProperty(exports, "DxcLink", {
@@ -133,6 +139,18 @@ Object.defineProperty(exports, "DxcLink", {
133
139
  return _Link["default"];
134
140
  }
135
141
  });
142
+ Object.defineProperty(exports, "DxcList", {
143
+ enumerable: true,
144
+ get: function get() {
145
+ return _List["default"];
146
+ }
147
+ });
148
+ Object.defineProperty(exports, "DxcNavTabs", {
149
+ enumerable: true,
150
+ get: function get() {
151
+ return _NavTabs["default"];
152
+ }
153
+ });
136
154
  Object.defineProperty(exports, "DxcNumberInput", {
137
155
  enumerable: true,
138
156
  get: function get() {
@@ -157,10 +175,16 @@ Object.defineProperty(exports, "DxcProgressBar", {
157
175
  return _ProgressBar["default"];
158
176
  }
159
177
  });
160
- Object.defineProperty(exports, "DxcRadio", {
178
+ Object.defineProperty(exports, "DxcQuickNav", {
161
179
  enumerable: true,
162
180
  get: function get() {
163
- return _Radio["default"];
181
+ return _QuickNav["default"];
182
+ }
183
+ });
184
+ Object.defineProperty(exports, "DxcRadioGroup", {
185
+ enumerable: true,
186
+ get: function get() {
187
+ return _RadioGroup["default"];
164
188
  }
165
189
  });
166
190
  Object.defineProperty(exports, "DxcResultsetTable", {
@@ -169,6 +193,12 @@ Object.defineProperty(exports, "DxcResultsetTable", {
169
193
  return _ResultsetTable["default"];
170
194
  }
171
195
  });
196
+ Object.defineProperty(exports, "DxcRow", {
197
+ enumerable: true,
198
+ get: function get() {
199
+ return _Row["default"];
200
+ }
201
+ });
172
202
  Object.defineProperty(exports, "DxcSelect", {
173
203
  enumerable: true,
174
204
  get: function get() {
@@ -193,6 +223,12 @@ Object.defineProperty(exports, "DxcSpinner", {
193
223
  return _Spinner["default"];
194
224
  }
195
225
  });
226
+ Object.defineProperty(exports, "DxcStack", {
227
+ enumerable: true,
228
+ get: function get() {
229
+ return _Stack["default"];
230
+ }
231
+ });
196
232
  Object.defineProperty(exports, "DxcSwitch", {
197
233
  enumerable: true,
198
234
  get: function get() {
@@ -217,6 +253,12 @@ Object.defineProperty(exports, "DxcTag", {
217
253
  return _Tag["default"];
218
254
  }
219
255
  });
256
+ Object.defineProperty(exports, "DxcText", {
257
+ enumerable: true,
258
+ get: function get() {
259
+ return _Text["default"];
260
+ }
261
+ });
220
262
  Object.defineProperty(exports, "DxcTextInput", {
221
263
  enumerable: true,
222
264
  get: function get() {
@@ -235,40 +277,28 @@ Object.defineProperty(exports, "DxcToggleGroup", {
235
277
  return _ToggleGroup["default"];
236
278
  }
237
279
  });
238
- Object.defineProperty(exports, "DxcUpload", {
239
- enumerable: true,
240
- get: function get() {
241
- return _Upload["default"];
242
- }
243
- });
244
280
  Object.defineProperty(exports, "DxcWizard", {
245
281
  enumerable: true,
246
282
  get: function get() {
247
283
  return _Wizard["default"];
248
284
  }
249
285
  });
250
- Object.defineProperty(exports, "ThemeContext", {
286
+ Object.defineProperty(exports, "HalstackContext", {
251
287
  enumerable: true,
252
288
  get: function get() {
253
- return _ThemeContext["default"];
289
+ return _HalstackContext["default"];
254
290
  }
255
291
  });
256
- Object.defineProperty(exports, "ThemeProvider", {
292
+ Object.defineProperty(exports, "HalstackLanguageContext", {
257
293
  enumerable: true,
258
294
  get: function get() {
259
- return _ThemeContext.ThemeProvider;
295
+ return _HalstackContext.HalstackLanguageContext;
260
296
  }
261
297
  });
262
- Object.defineProperty(exports, "V3DxcSelect", {
298
+ Object.defineProperty(exports, "HalstackProvider", {
263
299
  enumerable: true,
264
300
  get: function get() {
265
- return _V3Select["default"];
266
- }
267
- });
268
- Object.defineProperty(exports, "V3DxcTextarea", {
269
- enumerable: true,
270
- get: function get() {
271
- return _V3Textarea["default"];
301
+ return _HalstackContext.HalstackProvider;
272
302
  }
273
303
  });
274
304
 
@@ -282,8 +312,6 @@ var _Card = _interopRequireDefault(require("./card/Card"));
282
312
 
283
313
  var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
284
314
 
285
- var _Date = _interopRequireDefault(require("./date/Date"));
286
-
287
315
  var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
288
316
 
289
317
  var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
@@ -292,12 +320,6 @@ var _Footer = _interopRequireDefault(require("./footer/Footer"));
292
320
 
293
321
  var _Header = _interopRequireDefault(require("./header/Header"));
294
322
 
295
- var _InputText = _interopRequireDefault(require("./input-text/InputText"));
296
-
297
- var _Radio = _interopRequireDefault(require("./radio/Radio"));
298
-
299
- var _V3Select = _interopRequireDefault(require("./V3Select/V3Select"));
300
-
301
323
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
302
324
 
303
325
  var _Switch = _interopRequireDefault(require("./switch/Switch"));
@@ -308,8 +330,6 @@ var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"))
308
330
 
309
331
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
310
332
 
311
- var _Upload = _interopRequireDefault(require("./upload/Upload"));
312
-
313
333
  var _Table = _interopRequireDefault(require("./table/Table"));
314
334
 
315
335
  var _Box = _interopRequireDefault(require("./box/Box"));
@@ -326,8 +346,6 @@ var _Link = _interopRequireDefault(require("./link/Link"));
326
346
 
327
347
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
328
348
 
329
- var _V3Textarea = _interopRequireDefault(require("./V3Textarea/V3Textarea"));
330
-
331
349
  var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
332
350
 
333
351
  var _Chip = _interopRequireDefault(require("./chip/Chip"));
@@ -354,9 +372,29 @@ var _Select = _interopRequireDefault(require("./select/Select"));
354
372
 
355
373
  var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
356
374
 
357
- var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
375
+ var _Stack = _interopRequireDefault(require("./stack/Stack"));
376
+
377
+ var _Row = _interopRequireDefault(require("./row/Row"));
378
+
379
+ var _Text = _interopRequireDefault(require("./text/Text"));
380
+
381
+ var _List = _interopRequireDefault(require("./list/List"));
382
+
383
+ var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
384
+
385
+ var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
386
+
387
+ var _Inset = _interopRequireDefault(require("./inset/Inset"));
388
+
389
+ var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
390
+
391
+ var _NavTabs = _interopRequireDefault(require("./tabs-nav/NavTabs"));
392
+
393
+ var _Inline = _interopRequireDefault(require("./inline/Inline"));
394
+
395
+ var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
358
396
 
359
- var _BackgroundColorContext = require("./BackgroundColorContext.js");
397
+ var _BackgroundColorContext = require("./BackgroundColorContext");
360
398
 
361
399
  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); }
362
400
 
@@ -20,38 +20,27 @@ var _NumberInputContext = _interopRequireDefault(require("./NumberInputContext")
20
20
  var _templateObject;
21
21
 
22
22
  var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
23
- var _ref$label = _ref.label,
24
- label = _ref$label === void 0 ? "" : _ref$label,
25
- _ref$name = _ref.name,
26
- name = _ref$name === void 0 ? "" : _ref$name,
23
+ var label = _ref.label,
24
+ name = _ref.name,
25
+ defaultValue = _ref.defaultValue,
27
26
  value = _ref.value,
28
- _ref$helperText = _ref.helperText,
29
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
30
- _ref$placeholder = _ref.placeholder,
31
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
32
- _ref$disabled = _ref.disabled,
33
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
34
- _ref$optional = _ref.optional,
35
- optional = _ref$optional === void 0 ? false : _ref$optional,
36
- _ref$prefix = _ref.prefix,
37
- prefix = _ref$prefix === void 0 ? "" : _ref$prefix,
38
- _ref$suffix = _ref.suffix,
39
- suffix = _ref$suffix === void 0 ? "" : _ref$suffix,
27
+ helperText = _ref.helperText,
28
+ placeholder = _ref.placeholder,
29
+ disabled = _ref.disabled,
30
+ optional = _ref.optional,
31
+ prefix = _ref.prefix,
32
+ suffix = _ref.suffix,
40
33
  min = _ref.min,
41
34
  max = _ref.max,
42
35
  _ref$step = _ref.step,
43
36
  step = _ref$step === void 0 ? 1 : _ref$step,
44
37
  onChange = _ref.onChange,
45
38
  onBlur = _ref.onBlur,
46
- _ref$error = _ref.error,
47
- error = _ref$error === void 0 ? "" : _ref$error,
48
- _ref$autocomplete = _ref.autocomplete,
49
- autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
39
+ error = _ref.error,
40
+ autocomplete = _ref.autocomplete,
50
41
  margin = _ref.margin,
51
- _ref$size = _ref.size,
52
- size = _ref$size === void 0 ? "medium" : _ref$size,
53
- _ref$tabIndex = _ref.tabIndex,
54
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
42
+ size = _ref.size,
43
+ tabIndex = _ref.tabIndex;
55
44
  return /*#__PURE__*/_react["default"].createElement(_NumberInputContext["default"].Provider, {
56
45
  value: {
57
46
  typeNumber: "number",
@@ -62,6 +51,7 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
62
51
  }, /*#__PURE__*/_react["default"].createElement(NumberInputContainer, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
63
52
  label: label,
64
53
  name: name,
54
+ defaultValue: defaultValue,
65
55
  value: value,
66
56
  helperText: helperText,
67
57
  placeholder: placeholder,