@dxc-technology/halstack-react 0.0.0-dfcca07 → 0.0.0-dfd09f9

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 (234) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/ThemeContext.d.ts +10 -0
  4. package/ThemeContext.js +26 -29
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +13 -45
  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 +14 -16
  12. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  13. package/accordion-group/AccordionGroup.test.js +151 -0
  14. package/accordion-group/types.d.ts +8 -8
  15. package/alert/Alert.js +2 -2
  16. package/alert/Alert.test.js +92 -0
  17. package/badge/Badge.d.ts +4 -0
  18. package/badge/Badge.js +1 -1
  19. package/badge/types.d.ts +4 -0
  20. package/badge/types.js +5 -0
  21. package/bleed/Bleed.d.ts +3 -0
  22. package/bleed/Bleed.js +84 -0
  23. package/bleed/Bleed.stories.tsx +342 -0
  24. package/bleed/types.d.ts +37 -0
  25. package/bleed/types.js +5 -0
  26. package/box/Box.js +2 -2
  27. package/box/Box.test.js +18 -0
  28. package/button/Button.d.ts +1 -1
  29. package/button/Button.js +11 -19
  30. package/button/Button.stories.tsx +6 -8
  31. package/button/Button.test.js +35 -0
  32. package/button/types.d.ts +3 -7
  33. package/card/Card.js +1 -1
  34. package/card/Card.stories.tsx +1 -1
  35. package/card/Card.test.js +50 -0
  36. package/checkbox/Checkbox.d.ts +1 -1
  37. package/checkbox/Checkbox.js +33 -32
  38. package/checkbox/Checkbox.stories.tsx +124 -128
  39. package/checkbox/Checkbox.test.js +78 -0
  40. package/checkbox/types.d.ts +10 -4
  41. package/chip/Chip.d.ts +4 -0
  42. package/chip/Chip.js +16 -76
  43. package/chip/Chip.stories.tsx +6 -8
  44. package/chip/Chip.test.js +56 -0
  45. package/chip/types.d.ts +45 -0
  46. package/chip/types.js +5 -0
  47. package/common/variables.js +59 -265
  48. package/date-input/DateInput.js +54 -46
  49. package/date-input/DateInput.stories.tsx +7 -7
  50. package/date-input/DateInput.test.js +479 -0
  51. package/date-input/types.d.ts +16 -9
  52. package/dialog/Dialog.js +8 -35
  53. package/dialog/Dialog.test.js +40 -0
  54. package/dropdown/Dropdown.d.ts +1 -1
  55. package/dropdown/Dropdown.js +13 -35
  56. package/dropdown/Dropdown.stories.tsx +249 -0
  57. package/dropdown/Dropdown.test.js +189 -0
  58. package/dropdown/types.d.ts +5 -14
  59. package/file-input/FileInput.d.ts +1 -1
  60. package/file-input/FileInput.js +148 -69
  61. package/file-input/FileInput.stories.tsx +507 -0
  62. package/file-input/FileInput.test.js +457 -0
  63. package/file-input/FileItem.js +3 -3
  64. package/file-input/types.d.ts +32 -7
  65. package/footer/Footer.d.ts +1 -1
  66. package/footer/Footer.js +28 -111
  67. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +1 -22
  68. package/footer/Footer.test.js +109 -0
  69. package/footer/Icons.d.ts +2 -0
  70. package/footer/Icons.js +3 -3
  71. package/footer/types.d.ts +5 -9
  72. package/header/Header.js +22 -46
  73. package/header/Header.stories.tsx +46 -36
  74. package/header/Header.test.js +79 -0
  75. package/header/Icons.d.ts +2 -0
  76. package/heading/Heading.js +1 -1
  77. package/heading/Heading.stories.tsx +3 -2
  78. package/heading/Heading.test.js +186 -0
  79. package/inset/Inset.d.ts +3 -0
  80. package/inset/Inset.js +84 -0
  81. package/inset/Inset.stories.tsx +229 -0
  82. package/inset/types.d.ts +37 -0
  83. package/inset/types.js +5 -0
  84. package/layout/ApplicationLayout.d.ts +10 -0
  85. package/layout/ApplicationLayout.js +14 -31
  86. package/layout/ApplicationLayout.stories.tsx +171 -0
  87. package/layout/types.d.ts +57 -0
  88. package/layout/types.js +5 -0
  89. package/link/Link.js +8 -16
  90. package/link/Link.stories.tsx +6 -1
  91. package/link/Link.test.js +91 -0
  92. package/link/types.d.ts +5 -9
  93. package/list/List.d.ts +4 -0
  94. package/list/List.js +47 -0
  95. package/list/List.stories.tsx +95 -0
  96. package/list/types.d.ts +7 -0
  97. package/list/types.js +5 -0
  98. package/main.d.ts +11 -8
  99. package/main.js +62 -38
  100. package/number-input/NumberInput.js +14 -24
  101. package/number-input/NumberInput.stories.tsx +5 -5
  102. package/number-input/NumberInput.test.js +506 -0
  103. package/number-input/types.d.ts +16 -9
  104. package/package.json +6 -3
  105. package/paginator/Paginator.js +2 -8
  106. package/paginator/Paginator.test.js +266 -0
  107. package/password-input/PasswordInput.js +15 -16
  108. package/password-input/PasswordInput.stories.tsx +3 -3
  109. package/password-input/PasswordInput.test.js +181 -0
  110. package/password-input/types.d.ts +13 -10
  111. package/progress-bar/ProgressBar.js +4 -4
  112. package/progress-bar/ProgressBar.test.js +65 -0
  113. package/quick-nav/QuickNav.d.ts +4 -0
  114. package/quick-nav/QuickNav.js +64 -0
  115. package/quick-nav/QuickNav.stories.tsx +237 -0
  116. package/quick-nav/types.d.ts +21 -0
  117. package/quick-nav/types.js +5 -0
  118. package/radio/Radio.js +2 -2
  119. package/radio/Radio.test.js +71 -0
  120. package/radio-group/Radio.d.ts +4 -0
  121. package/radio-group/Radio.js +141 -0
  122. package/radio-group/RadioGroup.d.ts +4 -0
  123. package/radio-group/RadioGroup.js +280 -0
  124. package/radio-group/RadioGroup.stories.tsx +100 -0
  125. package/radio-group/RadioGroup.test.js +695 -0
  126. package/radio-group/types.d.ts +114 -0
  127. package/radio-group/types.js +5 -0
  128. package/resultsetTable/ResultsetTable.js +6 -3
  129. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  130. package/resultsetTable/ResultsetTable.test.js +306 -0
  131. package/resultsetTable/types.d.ts +1 -1
  132. package/row/Row.d.ts +3 -0
  133. package/row/Row.js +127 -0
  134. package/row/Row.stories.tsx +237 -0
  135. package/row/types.d.ts +28 -0
  136. package/row/types.js +5 -0
  137. package/select/Icons.d.ts +10 -0
  138. package/select/Icons.js +93 -0
  139. package/select/Listbox.d.ts +4 -0
  140. package/select/Listbox.js +148 -0
  141. package/select/Option.d.ts +4 -0
  142. package/select/Option.js +110 -0
  143. package/select/Select.d.ts +4 -0
  144. package/select/Select.js +107 -317
  145. package/select/Select.stories.tsx +91 -81
  146. package/select/Select.test.js +2057 -0
  147. package/select/types.d.ts +213 -0
  148. package/select/types.js +5 -0
  149. package/sidenav/Sidenav.js +2 -2
  150. package/sidenav/Sidenav.stories.tsx +18 -1
  151. package/sidenav/Sidenav.test.js +56 -0
  152. package/slider/Slider.d.ts +1 -1
  153. package/slider/Slider.js +4 -3
  154. package/slider/Slider.stories.tsx +8 -8
  155. package/slider/Slider.test.js +150 -0
  156. package/slider/types.d.ts +4 -0
  157. package/spinner/Spinner.js +2 -2
  158. package/spinner/Spinner.stories.jsx +1 -0
  159. package/spinner/Spinner.test.js +64 -0
  160. package/stack/Stack.d.ts +3 -0
  161. package/stack/Stack.js +97 -0
  162. package/stack/Stack.stories.tsx +164 -0
  163. package/stack/types.d.ts +24 -0
  164. package/stack/types.js +5 -0
  165. package/switch/Switch.d.ts +1 -1
  166. package/switch/Switch.js +21 -8
  167. package/switch/Switch.stories.tsx +7 -7
  168. package/switch/Switch.test.js +98 -0
  169. package/switch/types.d.ts +4 -0
  170. package/table/Table.js +2 -2
  171. package/table/Table.stories.jsx +2 -1
  172. package/table/Table.test.js +26 -0
  173. package/tabs/Tabs.d.ts +1 -1
  174. package/tabs/Tabs.js +17 -19
  175. package/tabs/Tabs.stories.tsx +8 -11
  176. package/tabs/Tabs.test.js +140 -0
  177. package/tabs/types.d.ts +27 -15
  178. package/tag/Tag.d.ts +1 -1
  179. package/tag/Tag.js +16 -23
  180. package/tag/Tag.stories.tsx +26 -29
  181. package/tag/Tag.test.js +60 -0
  182. package/tag/types.d.ts +23 -14
  183. package/text/Text.d.ts +7 -0
  184. package/text/Text.js +30 -0
  185. package/text/Text.stories.tsx +19 -0
  186. package/text-input/TextInput.js +46 -36
  187. package/text-input/TextInput.stories.tsx +34 -16
  188. package/text-input/TextInput.test.js +1712 -0
  189. package/text-input/types.d.ts +18 -11
  190. package/textarea/Textarea.d.ts +4 -0
  191. package/textarea/Textarea.js +26 -56
  192. package/textarea/Textarea.stories.jsx +37 -15
  193. package/textarea/Textarea.test.js +437 -0
  194. package/textarea/types.d.ts +137 -0
  195. package/textarea/types.js +5 -0
  196. package/toggle-group/ToggleGroup.d.ts +1 -1
  197. package/toggle-group/ToggleGroup.js +15 -17
  198. package/toggle-group/ToggleGroup.stories.tsx +27 -32
  199. package/toggle-group/ToggleGroup.test.js +156 -0
  200. package/toggle-group/types.d.ts +46 -25
  201. package/useTheme.d.ts +2 -0
  202. package/useTheme.js +1 -1
  203. package/wizard/Wizard.d.ts +1 -1
  204. package/wizard/Wizard.js +81 -22
  205. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +13 -23
  206. package/wizard/Wizard.test.js +141 -0
  207. package/wizard/types.d.ts +8 -8
  208. package/V3Select/V3Select.js +0 -455
  209. package/V3Select/index.d.ts +0 -27
  210. package/V3Textarea/V3Textarea.js +0 -260
  211. package/V3Textarea/index.d.ts +0 -27
  212. package/chip/index.d.ts +0 -22
  213. package/date/Date.js +0 -373
  214. package/date/index.d.ts +0 -27
  215. package/input-text/Icons.js +0 -22
  216. package/input-text/InputText.js +0 -611
  217. package/input-text/index.d.ts +0 -36
  218. package/select/index.d.ts +0 -131
  219. package/textarea/index.d.ts +0 -127
  220. package/toggle/Toggle.js +0 -186
  221. package/toggle/index.d.ts +0 -21
  222. package/upload/Upload.js +0 -201
  223. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  224. package/upload/buttons-upload/Icons.js +0 -40
  225. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  226. package/upload/dragAndDropArea/Icons.js +0 -39
  227. package/upload/file-upload/FileToUpload.js +0 -115
  228. package/upload/file-upload/Icons.js +0 -66
  229. package/upload/files-upload/FilesToUpload.js +0 -109
  230. package/upload/index.d.ts +0 -15
  231. package/upload/transaction/Icons.js +0 -160
  232. package/upload/transaction/Transaction.js +0 -104
  233. package/upload/transactions/Transactions.js +0 -94
  234. package/wizard/Icons.js +0 -65
package/link/Link.js CHANGED
@@ -9,17 +9,17 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports["default"] = void 0;
11
11
 
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
12
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
13
 
14
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
+
16
16
  var _react = _interopRequireDefault(require("react"));
17
17
 
18
18
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
19
 
20
20
  var _variables = require("../common/variables.js");
21
21
 
22
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
22
+ var _useTheme = _interopRequireDefault(require("../useTheme"));
23
23
 
24
24
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
25
25
 
@@ -32,7 +32,6 @@ var DxcLink = function DxcLink(_ref) {
32
32
  inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
33
33
  _ref$disabled = _ref.disabled,
34
34
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
35
- iconSrc = _ref.iconSrc,
36
35
  icon = _ref.icon,
37
36
  _ref$iconPosition = _ref.iconPosition,
38
37
  iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
@@ -50,12 +49,11 @@ var DxcLink = function DxcLink(_ref) {
50
49
 
51
50
  var linkContent = /*#__PURE__*/_react["default"].createElement(LinkText, {
52
51
  iconPosition: iconPosition
53
- }, text, icon ? /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
54
- iconPosition: iconPosition
55
- }, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : iconSrc && /*#__PURE__*/_react["default"].createElement(LinkIcon, {
56
- src: iconSrc,
52
+ }, text, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
57
53
  iconPosition: iconPosition
58
- }));
54
+ }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
55
+ src: icon
56
+ }) : icon));
59
57
 
60
58
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
61
59
  theme: colorsTheme.link
@@ -141,13 +139,7 @@ var LinkText = _styledComponents["default"].div(_templateObject4 || (_templateOb
141
139
  return props.iconPosition === "after" ? "flex-start" : "flex-end";
142
140
  });
143
141
 
144
- var LinkIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n"])), function (props) {
145
- return props.theme.iconSize;
146
- }, function (props) {
147
- return props.theme.iconSize;
148
- }, function (props) {
149
- return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
150
- });
142
+ var LinkIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])([""])));
151
143
 
152
144
  var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
153
145
  return props.theme.iconSize;
@@ -28,7 +28,12 @@ export const Chromatic = () => (
28
28
  <Title title="Icon before" theme="light" level={4} />
29
29
  <DxcLink text="Test" href="https://www.google.com" icon={icon} iconPosition="before"></DxcLink>
30
30
  <Title title="Icon after" theme="light" level={4} />
31
- <DxcLink text="Test" href="https://www.youtube.com/" icon={icon} iconPosition="after"></DxcLink>
31
+ <DxcLink
32
+ text="Test"
33
+ href="https://www.youtube.com/"
34
+ icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
35
+ iconPosition="after"
36
+ ></DxcLink>
32
37
  </ExampleContainer>
33
38
  <ExampleContainer pseudoState="pseudo-hover">
34
39
  <Title title="With link hovered" theme="light" level={4} />
@@ -0,0 +1,91 @@
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"], {
14
+ text: "Link"
15
+ })),
16
+ getByText = _render.getByText;
17
+
18
+ expect(getByText("Link")).toBeTruthy();
19
+ });
20
+ test("Link renders with correct href", function () {
21
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
22
+ text: "Link",
23
+ href: "/testPage"
24
+ })),
25
+ getByRole = _render2.getByRole;
26
+
27
+ expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
28
+ });
29
+ test("Link renders with correct disabled state", function () {
30
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
31
+ text: "Link",
32
+ href: "/testPage",
33
+ disabled: true
34
+ })),
35
+ getByText = _render3.getByText;
36
+
37
+ expect(getByText("Link").hasAttribute("href")).toBeFalsy();
38
+
39
+ var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
40
+ text: "LinkButton",
41
+ onClick: function onClick() {
42
+ return console.log("Andorra");
43
+ },
44
+ disabled: true
45
+ })),
46
+ getByTextLinkButton = _render4.getByText;
47
+
48
+ expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
49
+ });
50
+ test("Link open new tab", function () {
51
+ var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
52
+ text: "Link",
53
+ href: "/testPage",
54
+ newWindow: true
55
+ })),
56
+ getByRole = _render5.getByRole;
57
+
58
+ expect(getByRole("link").getAttribute("target")).toEqual("_blank");
59
+ });
60
+ test("Link onClick called", function () {
61
+ var onClick = jest.fn();
62
+
63
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
64
+ text: "Link",
65
+ onClick: onClick
66
+ })),
67
+ getByText = _render6.getByText;
68
+
69
+ var link = getByText("Link");
70
+
71
+ _react2.fireEvent.click(link);
72
+
73
+ expect(onClick).toHaveBeenCalled();
74
+ });
75
+ test("Disabled link onClick not called", function () {
76
+ var onClick = jest.fn();
77
+
78
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
79
+ text: "Link",
80
+ onClick: onClick,
81
+ disabled: true
82
+ })),
83
+ getByText = _render7.getByText;
84
+
85
+ var link = getByText("Link");
86
+
87
+ _react2.fireEvent.click(link);
88
+
89
+ expect(onClick).toHaveBeenCalledTimes(0);
90
+ });
91
+ });
package/link/types.d.ts CHANGED
@@ -15,10 +15,6 @@ declare type LinkCommonProps = {
15
15
  * If true, the link is disabled.
16
16
  */
17
17
  disabled?: boolean;
18
- /**
19
- * @Deprecated Source of the icon.
20
- */
21
- iconSrc?: string;
22
18
  /**
23
19
  * Indicates the position of the icon in the component.
24
20
  */
@@ -52,9 +48,9 @@ export declare type LinkTextProps = LinkCommonProps & {
52
48
  */
53
49
  text: string;
54
50
  /**
55
- * Element used as the icon that will be placed next to the link text.
51
+ * Element or path used as the icon that will be placed next to the link text.
56
52
  */
57
- icon?: SVG;
53
+ icon?: string | SVG;
58
54
  };
59
55
  export declare type LinkIconProps = LinkCommonProps & {
60
56
  /**
@@ -62,13 +58,13 @@ export declare type LinkIconProps = LinkCommonProps & {
62
58
  */
63
59
  text?: string;
64
60
  /**
65
- * Element used as the icon that will be placed next to the link text.
61
+ * Element or path used as the icon that will be placed next to the link text.
66
62
  */
67
- icon: SVG;
63
+ icon: string | SVG;
68
64
  };
69
65
  declare type Overload = {
70
66
  (props: LinkTextProps): JSX.Element;
71
67
  (props: LinkIconProps): JSX.Element;
72
68
  };
73
- declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
69
+ declare type SVG = React.SVGProps<SVGSVGElement>;
74
70
  export default Overload;
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 ? "xxsmall" : _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,95 @@
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 = xxxsmall" theme="light" level={4} />
45
+ <DxcList gutter="xxsmall">
46
+ <DxcText>Text 1.</DxcText>
47
+ <DxcText>Text 2.</DxcText>
48
+ </DxcList>
49
+ <Title title="gutter = xxsmall" theme="light" level={4} />
50
+ <DxcList gutter="xxsmall">
51
+ <DxcText>Text 1.</DxcText>
52
+ <DxcText>Text 2.</DxcText>
53
+ </DxcList>
54
+ <Title title="gutter = xsmall" theme="light" level={4} />
55
+ <DxcList gutter="xsmall">
56
+ <DxcText>Text 1.</DxcText>
57
+ <DxcText>Text 2.</DxcText>
58
+ </DxcList>
59
+ <Title title="gutter = small" theme="light" level={4} />
60
+ <DxcList gutter="small">
61
+ <DxcText>Text 1.</DxcText>
62
+ <DxcText>Text 2.</DxcText>
63
+ </DxcList>
64
+ <Title title="gutter = medium" theme="light" level={4} />
65
+ <DxcList gutter="medium">
66
+ <DxcText>Text 1.</DxcText>
67
+ <DxcText>Text 2.</DxcText>
68
+ </DxcList>
69
+ <Title title="gutter = large" theme="light" level={4} />
70
+ <DxcList gutter="large">
71
+ <DxcText>Text 1.</DxcText>
72
+ <DxcText>Text 2.</DxcText>
73
+ </DxcList>
74
+ <Title title="gutter = xlarge" theme="light" level={4} />
75
+ <DxcList gutter="xlarge">
76
+ <DxcText>Text 1.</DxcText>
77
+ <DxcText>Text 2.</DxcText>
78
+ </DxcList>
79
+ <Title title="gutter = xxlarge" theme="light" level={4} />
80
+ <DxcList gutter="xxlarge">
81
+ <DxcText>Text 1.</DxcText>
82
+ <DxcText>Text 2.</DxcText>
83
+ </DxcList>
84
+ <Title title="gutter = xxxlarge" theme="light" level={4} />
85
+ <DxcList gutter="xxxlarge">
86
+ <DxcText>Text 1.</DxcText>
87
+ <DxcText>Text 2.</DxcText>
88
+ </DxcList>
89
+
90
+ </>
91
+ );
92
+
93
+ const Container = styled.div`
94
+ width: 400px;
95
+ `;
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ declare type Props = {
3
+ children: React.ReactNode;
4
+ gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
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,16 @@ 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
10
  import DxcRadio from "./radio/Radio";
13
- import V3DxcSelect from "./V3Select/V3Select";
14
11
  import DxcSlider from "./slider/Slider";
15
12
  import DxcSwitch from "./switch/Switch";
16
13
  import DxcTabs from "./tabs/Tabs";
17
14
  import DxcProgressBar from "./progress-bar/ProgressBar";
18
15
  import DxcSpinner from "./spinner/Spinner";
19
- import DxcUpload from "./upload/Upload";
20
16
  import DxcTable from "./table/Table";
21
17
  import DxcBox from "./box/Box";
22
18
  import DxcTag from "./tag/Tag";
@@ -25,7 +21,6 @@ import DxcSidenav from "./sidenav/Sidenav";
25
21
  import DxcWizard from "./wizard/Wizard";
26
22
  import DxcLink from "./link/Link";
27
23
  import DxcHeading from "./heading/Heading";
28
- import V3DxcTextarea from "./V3Textarea/V3Textarea";
29
24
  import DxcResultsetTable from "./resultsetTable/ResultsetTable";
30
25
  import DxcChip from "./chip/Chip";
31
26
  import DxcApplicationLayout from "./layout/ApplicationLayout";
@@ -39,6 +34,14 @@ import DxcNumberInput from "./number-input/NumberInput";
39
34
  import DxcTextarea from "./textarea/Textarea";
40
35
  import DxcSelect from "./select/Select";
41
36
  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, };
37
+ import DxcStack from "./stack/Stack";
38
+ import DxcRow from "./row/Row";
39
+ import DxcText from "./text/Text";
40
+ import DxcList from "./list/List";
41
+ import DxcRadioGroup from "./radio-group/RadioGroup";
42
+ import DxcBleed from "./bleed/Bleed";
43
+ import DxcInset from "./inset/Inset";
44
+ import DxcQuickNav from "./quick-nav/QuickNav";
45
+ import ThemeContext, { ThemeProvider } from "./ThemeContext";
46
+ import { BackgroundColorProvider } from "./BackgroundColorContext";
47
+ export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, ThemeContext, ThemeProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, };
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,10 @@ Object.defineProperty(exports, "DxcHeading", {
121
121
  return _Heading["default"];
122
122
  }
123
123
  });
124
- Object.defineProperty(exports, "DxcInput", {
124
+ Object.defineProperty(exports, "DxcInset", {
125
125
  enumerable: true,
126
126
  get: function get() {
127
- return _InputText["default"];
127
+ return _Inset["default"];
128
128
  }
129
129
  });
130
130
  Object.defineProperty(exports, "DxcLink", {
@@ -133,6 +133,12 @@ Object.defineProperty(exports, "DxcLink", {
133
133
  return _Link["default"];
134
134
  }
135
135
  });
136
+ Object.defineProperty(exports, "DxcList", {
137
+ enumerable: true,
138
+ get: function get() {
139
+ return _List["default"];
140
+ }
141
+ });
136
142
  Object.defineProperty(exports, "DxcNumberInput", {
137
143
  enumerable: true,
138
144
  get: function get() {
@@ -157,18 +163,36 @@ Object.defineProperty(exports, "DxcProgressBar", {
157
163
  return _ProgressBar["default"];
158
164
  }
159
165
  });
166
+ Object.defineProperty(exports, "DxcQuickNav", {
167
+ enumerable: true,
168
+ get: function get() {
169
+ return _QuickNav["default"];
170
+ }
171
+ });
160
172
  Object.defineProperty(exports, "DxcRadio", {
161
173
  enumerable: true,
162
174
  get: function get() {
163
175
  return _Radio["default"];
164
176
  }
165
177
  });
178
+ Object.defineProperty(exports, "DxcRadioGroup", {
179
+ enumerable: true,
180
+ get: function get() {
181
+ return _RadioGroup["default"];
182
+ }
183
+ });
166
184
  Object.defineProperty(exports, "DxcResultsetTable", {
167
185
  enumerable: true,
168
186
  get: function get() {
169
187
  return _ResultsetTable["default"];
170
188
  }
171
189
  });
190
+ Object.defineProperty(exports, "DxcRow", {
191
+ enumerable: true,
192
+ get: function get() {
193
+ return _Row["default"];
194
+ }
195
+ });
172
196
  Object.defineProperty(exports, "DxcSelect", {
173
197
  enumerable: true,
174
198
  get: function get() {
@@ -193,6 +217,12 @@ Object.defineProperty(exports, "DxcSpinner", {
193
217
  return _Spinner["default"];
194
218
  }
195
219
  });
220
+ Object.defineProperty(exports, "DxcStack", {
221
+ enumerable: true,
222
+ get: function get() {
223
+ return _Stack["default"];
224
+ }
225
+ });
196
226
  Object.defineProperty(exports, "DxcSwitch", {
197
227
  enumerable: true,
198
228
  get: function get() {
@@ -217,6 +247,12 @@ Object.defineProperty(exports, "DxcTag", {
217
247
  return _Tag["default"];
218
248
  }
219
249
  });
250
+ Object.defineProperty(exports, "DxcText", {
251
+ enumerable: true,
252
+ get: function get() {
253
+ return _Text["default"];
254
+ }
255
+ });
220
256
  Object.defineProperty(exports, "DxcTextInput", {
221
257
  enumerable: true,
222
258
  get: function get() {
@@ -235,12 +271,6 @@ Object.defineProperty(exports, "DxcToggleGroup", {
235
271
  return _ToggleGroup["default"];
236
272
  }
237
273
  });
238
- Object.defineProperty(exports, "DxcUpload", {
239
- enumerable: true,
240
- get: function get() {
241
- return _Upload["default"];
242
- }
243
- });
244
274
  Object.defineProperty(exports, "DxcWizard", {
245
275
  enumerable: true,
246
276
  get: function get() {
@@ -259,18 +289,6 @@ Object.defineProperty(exports, "ThemeProvider", {
259
289
  return _ThemeContext.ThemeProvider;
260
290
  }
261
291
  });
262
- Object.defineProperty(exports, "V3DxcSelect", {
263
- enumerable: true,
264
- 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"];
272
- }
273
- });
274
292
 
275
293
  var _Alert = _interopRequireDefault(require("./alert/Alert"));
276
294
 
@@ -282,8 +300,6 @@ var _Card = _interopRequireDefault(require("./card/Card"));
282
300
 
283
301
  var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
284
302
 
285
- var _Date = _interopRequireDefault(require("./date/Date"));
286
-
287
303
  var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
288
304
 
289
305
  var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
@@ -292,12 +308,8 @@ var _Footer = _interopRequireDefault(require("./footer/Footer"));
292
308
 
293
309
  var _Header = _interopRequireDefault(require("./header/Header"));
294
310
 
295
- var _InputText = _interopRequireDefault(require("./input-text/InputText"));
296
-
297
311
  var _Radio = _interopRequireDefault(require("./radio/Radio"));
298
312
 
299
- var _V3Select = _interopRequireDefault(require("./V3Select/V3Select"));
300
-
301
313
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
302
314
 
303
315
  var _Switch = _interopRequireDefault(require("./switch/Switch"));
@@ -308,8 +320,6 @@ var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"))
308
320
 
309
321
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
310
322
 
311
- var _Upload = _interopRequireDefault(require("./upload/Upload"));
312
-
313
323
  var _Table = _interopRequireDefault(require("./table/Table"));
314
324
 
315
325
  var _Box = _interopRequireDefault(require("./box/Box"));
@@ -326,8 +336,6 @@ var _Link = _interopRequireDefault(require("./link/Link"));
326
336
 
327
337
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
328
338
 
329
- var _V3Textarea = _interopRequireDefault(require("./V3Textarea/V3Textarea"));
330
-
331
339
  var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
332
340
 
333
341
  var _Chip = _interopRequireDefault(require("./chip/Chip"));
@@ -354,9 +362,25 @@ var _Select = _interopRequireDefault(require("./select/Select"));
354
362
 
355
363
  var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
356
364
 
357
- var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
365
+ var _Stack = _interopRequireDefault(require("./stack/Stack"));
366
+
367
+ var _Row = _interopRequireDefault(require("./row/Row"));
368
+
369
+ var _Text = _interopRequireDefault(require("./text/Text"));
370
+
371
+ var _List = _interopRequireDefault(require("./list/List"));
372
+
373
+ var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
374
+
375
+ var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
376
+
377
+ var _Inset = _interopRequireDefault(require("./inset/Inset"));
378
+
379
+ var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
380
+
381
+ var _ThemeContext = _interopRequireWildcard(require("./ThemeContext"));
358
382
 
359
- var _BackgroundColorContext = require("./BackgroundColorContext.js");
383
+ var _BackgroundColorContext = require("./BackgroundColorContext");
360
384
 
361
385
  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
386