@dxc-technology/halstack-react 9.0.1 → 9.1.0

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 (29) hide show
  1. package/HalstackContext.d.ts +4 -1
  2. package/HalstackContext.js +1 -1
  3. package/accordion/Accordion.stories.tsx +1 -1
  4. package/bleed/Bleed.stories.tsx +1 -0
  5. package/button/Button.js +0 -1
  6. package/button/Button.stories.tsx +1 -1
  7. package/flex/Flex.stories.tsx +19 -24
  8. package/grid/Grid.d.ts +7 -0
  9. package/grid/Grid.js +91 -0
  10. package/grid/Grid.stories.tsx +219 -0
  11. package/grid/types.d.ts +115 -0
  12. package/grid/types.js +5 -0
  13. package/inset/Inset.stories.tsx +1 -0
  14. package/layout/ApplicationLayout.d.ts +2 -2
  15. package/layout/types.d.ts +2 -3
  16. package/main.d.ts +2 -1
  17. package/main.js +8 -0
  18. package/package.json +1 -1
  19. package/sidenav/Icons.d.ts +7 -0
  20. package/sidenav/Icons.js +51 -0
  21. package/sidenav/Sidenav.d.ts +2 -2
  22. package/sidenav/Sidenav.js +49 -75
  23. package/sidenav/Sidenav.stories.tsx +60 -60
  24. package/sidenav/types.d.ts +21 -18
  25. package/tabs/Tab.js +1 -2
  26. package/tabs/Tabs.js +10 -14
  27. package/textarea/Textarea.js +0 -1
  28. package/textarea/Textarea.test.js +1 -3
  29. package/utils/FocusLock.js +1 -1
package/main.js CHANGED
@@ -115,6 +115,12 @@ Object.defineProperty(exports, "DxcFlex", {
115
115
  return _Flex["default"];
116
116
  }
117
117
  });
118
+ Object.defineProperty(exports, "DxcGrid", {
119
+ enumerable: true,
120
+ get: function get() {
121
+ return _Grid["default"];
122
+ }
123
+ });
118
124
  Object.defineProperty(exports, "DxcHeading", {
119
125
  enumerable: true,
120
126
  get: function get() {
@@ -360,6 +366,8 @@ var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
360
366
 
361
367
  var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
362
368
 
369
+ var _Grid = _interopRequireDefault(require("./grid/Grid"));
370
+
363
371
  var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
364
372
 
365
373
  var _BackgroundColorContext = require("./BackgroundColorContext");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxc-technology/halstack-react",
3
- "version": "9.0.1",
3
+ "version": "9.1.0",
4
4
  "description": "DXC Halstack React components library",
5
5
  "repository": "dxc-technology/halstack-react",
6
6
  "homepage": "https://developer.dxc.com/halstack",
package/sidenav/Icons.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ declare const icons: {
3
+ collapsedIcon: JSX.Element;
4
+ collapsableIcon: JSX.Element;
5
+ externalLinkIcon: JSX.Element;
6
+ };
7
+ export default icons;
package/sidenav/Icons.js ADDED
@@ -0,0 +1,51 @@
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 _react = _interopRequireDefault(require("react"));
11
+
12
+ var icons = {
13
+ collapsedIcon: /*#__PURE__*/_react["default"].createElement("svg", {
14
+ xmlns: "http://www.w3.org/2000/svg",
15
+ height: "24px",
16
+ viewBox: "0 0 24 24",
17
+ width: "24px",
18
+ fill: "currentColor"
19
+ }, /*#__PURE__*/_react["default"].createElement("path", {
20
+ d: "M0 0h24v24H0z",
21
+ fill: "none"
22
+ }), /*#__PURE__*/_react["default"].createElement("path", {
23
+ d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
24
+ })),
25
+ collapsableIcon: /*#__PURE__*/_react["default"].createElement("svg", {
26
+ xmlns: "http://www.w3.org/2000/svg",
27
+ height: "24px",
28
+ viewBox: "0 0 24 24",
29
+ width: "24px",
30
+ fill: "currentColor"
31
+ }, /*#__PURE__*/_react["default"].createElement("path", {
32
+ d: "M0 0h24v24H0z",
33
+ fill: "none"
34
+ }), /*#__PURE__*/_react["default"].createElement("path", {
35
+ d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
36
+ })),
37
+ externalLinkIcon: /*#__PURE__*/_react["default"].createElement("svg", {
38
+ xmlns: "http://www.w3.org/2000/svg",
39
+ height: "24",
40
+ viewBox: "0 0 24 24",
41
+ width: "24",
42
+ fill: "currentColor"
43
+ }, /*#__PURE__*/_react["default"].createElement("path", {
44
+ d: "M0 0h24v24H0z",
45
+ fill: "none"
46
+ }), /*#__PURE__*/_react["default"].createElement("path", {
47
+ d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
48
+ }))
49
+ };
50
+ var _default = icons;
51
+ exports["default"] = _default;
package/sidenav/Sidenav.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from "react";
2
2
  import SidenavPropsType, { SidenavGroupPropsType, SidenavLinkPropsType, SidenavSectionPropsType, SidenavTitlePropsType } from "./types.js";
3
3
  declare const DxcSidenav: {
4
- ({ children, title }: SidenavPropsType): JSX.Element;
4
+ ({ title, children }: SidenavPropsType): JSX.Element;
5
5
  Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
6
- Group: ({ children, title, collapsable, icon }: SidenavGroupPropsType) => JSX.Element;
6
+ Group: ({ title, collapsable, icon, children }: SidenavGroupPropsType) => JSX.Element;
7
7
  Link: React.ForwardRefExoticComponent<SidenavLinkPropsType & React.RefAttributes<HTMLAnchorElement>>;
8
8
  Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
9
9
  };
package/sidenav/Sidenav.js CHANGED
@@ -33,56 +33,19 @@ var _Flex = _interopRequireDefault(require("../flex/Flex"));
33
33
 
34
34
  var _Bleed = _interopRequireDefault(require("../bleed/Bleed"));
35
35
 
36
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
36
+ var _Icons = _interopRequireDefault(require("./Icons"));
37
37
 
38
- var _excluded = ["href", "children", "newWindow", "selected", "icon", "tabIndex", "onClick"];
38
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
39
+
40
+ var _excluded = ["href", "newWindow", "selected", "icon", "onClick", "tabIndex", "children"];
39
41
 
40
42
  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); }
41
43
 
42
44
  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; }
43
45
 
44
- var collapsedIcon = /*#__PURE__*/_react["default"].createElement("svg", {
45
- xmlns: "http://www.w3.org/2000/svg",
46
- height: "24px",
47
- viewBox: "0 0 24 24",
48
- width: "24px",
49
- fill: "currentColor"
50
- }, /*#__PURE__*/_react["default"].createElement("path", {
51
- d: "M0 0h24v24H0z",
52
- fill: "none"
53
- }), /*#__PURE__*/_react["default"].createElement("path", {
54
- d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
55
- }));
56
-
57
- var collapsableIcon = /*#__PURE__*/_react["default"].createElement("svg", {
58
- xmlns: "http://www.w3.org/2000/svg",
59
- height: "24px",
60
- viewBox: "0 0 24 24",
61
- width: "24px",
62
- fill: "currentColor"
63
- }, /*#__PURE__*/_react["default"].createElement("path", {
64
- d: "M0 0h24v24H0z",
65
- fill: "none"
66
- }), /*#__PURE__*/_react["default"].createElement("path", {
67
- d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
68
- }));
69
-
70
- var externalLinkIcon = /*#__PURE__*/_react["default"].createElement("svg", {
71
- xmlns: "http://www.w3.org/2000/svg",
72
- height: "24",
73
- viewBox: "0 0 24 24",
74
- width: "24",
75
- fill: "currentColor"
76
- }, /*#__PURE__*/_react["default"].createElement("path", {
77
- d: "M0 0h24v24H0z",
78
- fill: "none"
79
- }), /*#__PURE__*/_react["default"].createElement("path", {
80
- d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
81
- }));
82
-
83
46
  var DxcSidenav = function DxcSidenav(_ref) {
84
- var children = _ref.children,
85
- title = _ref.title;
47
+ var title = _ref.title,
48
+ children = _ref.children;
86
49
  var colorsTheme = (0, _useTheme["default"])();
87
50
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
88
51
  theme: colorsTheme.sidenav
@@ -112,51 +75,56 @@ var Section = function Section(_ref3) {
112
75
  }, children));
113
76
  };
114
77
 
78
+ var GroupContext = /*#__PURE__*/_react["default"].createContext(null);
79
+
115
80
  var Group = function Group(_ref4) {
116
- var children = _ref4.children,
117
- title = _ref4.title,
81
+ var title = _ref4.title,
118
82
  _ref4$collapsable = _ref4.collapsable,
119
83
  collapsable = _ref4$collapsable === void 0 ? false : _ref4$collapsable,
120
- icon = _ref4.icon;
84
+ icon = _ref4.icon,
85
+ children = _ref4.children;
121
86
 
122
87
  var _useState = (0, _react.useState)(false),
123
88
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
124
89
  collapsed = _useState2[0],
125
90
  setCollapsed = _useState2[1];
126
91
 
127
- var selectedGroup = (0, _react.useMemo)(function () {
128
- return collapsed ? _react["default"].Children.toArray(children).some(function (child) {
129
- var _child$props;
92
+ var _useState3 = (0, _react.useState)(false),
93
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
94
+ isSelected = _useState4[0],
95
+ changeIsSelected = _useState4[1];
130
96
 
131
- return (_child$props = child["props"]) === null || _child$props === void 0 ? void 0 : _child$props.selected;
132
- }) : false;
133
- }, [collapsed, children]);
134
- return /*#__PURE__*/_react["default"].createElement(SidenavGroup, null, collapsable && title ? /*#__PURE__*/_react["default"].createElement(SidenavGroupTitleButton, {
135
- role: "button",
97
+ return /*#__PURE__*/_react["default"].createElement(GroupContext.Provider, {
98
+ value: changeIsSelected
99
+ }, /*#__PURE__*/_react["default"].createElement(SidenavGroup, null, collapsable && title ? /*#__PURE__*/_react["default"].createElement(SidenavGroupTitleButton, {
136
100
  "aria-expanded": !collapsed,
137
101
  onClick: function onClick() {
138
102
  return setCollapsed(!collapsed);
139
103
  },
140
- selectedGroup: selectedGroup
141
- }, /*#__PURE__*/_react["default"].createElement(SidenavContent, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
104
+ selectedGroup: collapsed && isSelected
105
+ }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
106
+ alignItems: "center",
107
+ gap: "0.5rem"
108
+ }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
142
109
  src: icon
143
- }) : icon, title), collapsed ? collapsedIcon : collapsableIcon) : title && /*#__PURE__*/_react["default"].createElement(SidenavGroupTitle, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
110
+ }) : icon, title), collapsed ? _Icons["default"].collapsedIcon : _Icons["default"].collapsableIcon) : title && /*#__PURE__*/_react["default"].createElement(SidenavGroupTitle, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
144
111
  src: icon
145
- }) : icon, title), !collapsed && children);
112
+ }) : icon, title), !collapsed && children));
146
113
  };
147
114
 
148
115
  var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
149
116
  var href = _ref5.href,
150
- children = _ref5.children,
151
117
  _ref5$newWindow = _ref5.newWindow,
152
118
  newWindow = _ref5$newWindow === void 0 ? false : _ref5$newWindow,
153
119
  _ref5$selected = _ref5.selected,
154
120
  selected = _ref5$selected === void 0 ? false : _ref5$selected,
155
121
  icon = _ref5.icon,
122
+ onClick = _ref5.onClick,
156
123
  _ref5$tabIndex = _ref5.tabIndex,
157
124
  tabIndex = _ref5$tabIndex === void 0 ? 0 : _ref5$tabIndex,
158
- onClick = _ref5.onClick,
125
+ children = _ref5.children,
159
126
  otherProps = (0, _objectWithoutProperties2["default"])(_ref5, _excluded);
127
+ var changeIsGroupSelected = (0, _react.useContext)(GroupContext);
160
128
  var setIsSidenavVisibleResponsive = (0, _SidenavContext.useResponsiveSidenavVisibility)();
161
129
 
162
130
  var handleClick = function handleClick($event) {
@@ -164,6 +132,11 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
164
132
  setIsSidenavVisibleResponsive === null || setIsSidenavVisibleResponsive === void 0 ? void 0 : setIsSidenavVisibleResponsive(false);
165
133
  };
166
134
 
135
+ (0, _react.useEffect)(function () {
136
+ changeIsGroupSelected === null || changeIsGroupSelected === void 0 ? void 0 : changeIsGroupSelected(function (isGroupSelected) {
137
+ return !isGroupSelected ? selected : isGroupSelected;
138
+ });
139
+ }, [selected, changeIsGroupSelected]);
167
140
  return /*#__PURE__*/_react["default"].createElement(SidenavLink, (0, _extends2["default"])({
168
141
  selected: selected,
169
142
  href: href ? href : undefined,
@@ -171,12 +144,15 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
171
144
  ref: ref,
172
145
  tabIndex: tabIndex,
173
146
  onClick: handleClick
174
- }, otherProps), /*#__PURE__*/_react["default"].createElement(SidenavContent, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
147
+ }, otherProps), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
148
+ alignItems: "center",
149
+ gap: "0.5rem"
150
+ }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
175
151
  src: icon
176
- }) : icon, children), newWindow && externalLinkIcon);
152
+ }) : icon, children), newWindow && _Icons["default"].externalLinkIcon);
177
153
  });
178
154
 
179
- var SidenavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n background-color: ", ";\n box-sizing: border-box;\n width: 280px;\n @media (max-width: ", "rem) {\n width: 100vw;\n }\n\n height: 100%;\n padding: 2rem 1rem;\n\n overflow-y: auto;\n overflow-x: hidden;\n ::-webkit-scrollbar {\n width: 2px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n"])), function (props) {
155
+ var SidenavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n background-color: ", ";\n width: 280px;\n @media (max-width: ", "rem) {\n width: 100vw;\n }\n height: 100%;\n padding: 2rem 1rem;\n\n overflow-y: auto;\n overflow-x: hidden;\n ::-webkit-scrollbar {\n width: 2px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n"])), function (props) {
180
156
  return props.theme.backgroundColor;
181
157
  }, _variables.responsiveSizes.medium, function (props) {
182
158
  return props.theme.scrollBarTrackColor;
@@ -184,7 +160,7 @@ var SidenavContainer = _styledComponents["default"].div(_templateObject || (_tem
184
160
  return props.theme.scrollBarThumbColor;
185
161
  });
186
162
 
187
- var SidenavTitle = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n font-size: ", ";\n line-height: 27px;\n display: flex;\n align-items: center;\n color: ", ";\n text-transform: ", ";\n letter-spacing: ", ";\n padding: 0.5rem 1.2rem;\n\n svg {\n margin-right: 0.5rem;\n }\n"])), function (props) {
163
+ var SidenavTitle = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.2rem;\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n font-size: ", ";\n color: ", ";\n text-transform: ", ";\n letter-spacing: ", ";\n"])), function (props) {
188
164
  return props.theme.titleFontFamily;
189
165
  }, function (props) {
190
166
  return props.theme.titleFontStyle;
@@ -204,7 +180,7 @@ var Divider = _styledComponents["default"].div(_templateObject3 || (_templateObj
204
180
 
205
181
  var SidenavGroup = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n a {\n padding: 0.5rem 1.2rem 0.5rem 2.25rem;\n }\n"])));
206
182
 
207
- var SidenavGroupTitle = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n width: 100%;\n padding: 0.5rem 1.2rem;\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n font-size: ", ";\n line-height: 18px;\n\n img,\n svg {\n height: 16px;\n width: 16px;\n }\n"])), function (props) {
183
+ var SidenavGroupTitle = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1.2rem;\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n font-size: ", ";\n\n img,\n svg {\n height: 16px;\n width: 16px;\n }\n"])), function (props) {
208
184
  return props.theme.groupTitleFontFamily;
209
185
  }, function (props) {
210
186
  return props.theme.groupTitleFontStyle;
@@ -214,7 +190,7 @@ var SidenavGroupTitle = _styledComponents["default"].span(_templateObject5 || (_
214
190
  return props.theme.groupTitleFontSize;
215
191
  });
216
192
 
217
- var SidenavGroupTitleButton = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n all: unset;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 0.5rem 1.2rem;\n\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n font-size: ", ";\n line-height: 19px;\n\n cursor: pointer;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: -2px;\n }\n &:hover {\n ", "\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n ", "\n\n svg {\n height: 16px;\n width: 16px;\n }\n"])), function (props) {
193
+ var SidenavGroupTitleButton = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n all: unset;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 0.5rem 1.2rem;\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n font-size: ", ";\n cursor: pointer;\n\n ", "\n\n &:focus, &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: -2px;\n }\n &:hover {\n ", "\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n img,\n svg {\n height: 16px;\n width: 16px;\n }\n"])), function (props) {
218
194
  return props.theme.groupTitleFontFamily;
219
195
  }, function (props) {
220
196
  return props.theme.groupTitleFontStyle;
@@ -222,19 +198,19 @@ var SidenavGroupTitleButton = _styledComponents["default"].button(_templateObjec
222
198
  return props.theme.groupTitleFontWeight;
223
199
  }, function (props) {
224
200
  return props.theme.groupTitleFontSize;
201
+ }, function (props) {
202
+ return props.selectedGroup ? "color: ".concat(props.theme.groupTitleSelectedFontColor, "; background-color: ").concat(props.theme.groupTitleSelectedBackgroundColor, ";") : "color: ".concat(props.theme.groupTitleFontColor, "; background-color: transparent;");
225
203
  }, function (props) {
226
204
  return props.theme.linkFocusColor;
227
205
  }, function (props) {
228
- return props.selectedGroup ? "color: ".concat(props.theme.groupTitleSelectedHoverFontColor, "; background: ").concat(props.theme.groupTitleSelectedHoverBackgroundColor, ";") : "color: ".concat(props.theme.groupTitleFontColor, "; background: ").concat(props.theme.groupTitleHoverBackgroundColor, ";");
206
+ return props.selectedGroup ? "color: ".concat(props.theme.groupTitleSelectedHoverFontColor, "; background-color: ").concat(props.theme.groupTitleSelectedHoverBackgroundColor, ";") : "color: ".concat(props.theme.groupTitleFontColor, "; background-color: ").concat(props.theme.groupTitleHoverBackgroundColor, ";");
229
207
  }, function (props) {
230
208
  return props.theme.groupTitleActiveBackgroundColor;
231
209
  }, function (props) {
232
210
  return props.theme.groupTitleFontColor;
233
- }, function (props) {
234
- return props.selectedGroup ? "color: ".concat(props.theme.groupTitleSelectedFontColor, "; background: ").concat(props.theme.groupTitleSelectedBackgroundColor, ";") : "color: ".concat(props.theme.groupTitleFontColor, "; background: transparent;");
235
211
  });
236
212
 
237
- var SidenavLink = _styledComponents["default"].a(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.5rem 1.2rem;\n box-shadow: 0 0 0 2px transparent;\n letter-spacing: ", ";\n text-transform: ", ";\n text-decoration: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n font-size: ", ";\n line-height: 19px;\n\n ", "\n\n cursor: pointer;\n\n &:hover {\n ", "\n }\n &:focus {\n outline: 2px solid ", ";\n outline-offset: -2px;\n }\n &:active {\n color: #ffffff;\n background: #4d4d4d;\n outline: 2px solid #0095ff;\n outline-offset: -2px;\n }\n\n svg {\n height: 16px;\n width: 16px;\n }\n"])), function (props) {
213
+ var SidenavLink = _styledComponents["default"].a(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.5rem 1.2rem;\n box-shadow: 0 0 0 2px transparent;\n letter-spacing: ", ";\n text-transform: ", ";\n text-decoration: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n font-size: ", ";\n cursor: pointer;\n\n ", "\n\n &:focus, &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: -2px;\n }\n &:hover {\n ", "\n }\n &:active {\n color: #ffffff;\n background-color: #4d4d4d;\n outline: 2px solid #0095ff;\n outline-offset: -2px;\n }\n\n img,\n svg {\n height: 16px;\n width: 16px;\n }\n"])), function (props) {
238
214
  return props.theme.linkFontLetterSpacing;
239
215
  }, function (props) {
240
216
  return props.theme.linkFontTextTransform;
@@ -249,15 +225,13 @@ var SidenavLink = _styledComponents["default"].a(_templateObject7 || (_templateO
249
225
  }, function (props) {
250
226
  return props.theme.linkFontSize;
251
227
  }, function (props) {
252
- return props.selected ? "color: ".concat(props.theme.linkSelectedFontColor, "; background: ").concat(props.theme.linkSelectedBackgroundColor, ";") : "color: ".concat(props.theme.linkFontColor, "; background: transparent;");
253
- }, function (props) {
254
- return props.selected ? "color: ".concat(props.theme.linkSelectedHoverFontColor, "; background: ").concat(props.theme.linkSelectedHoverBackgroundColor, ";") : "color: ".concat(props.theme.linkFontColor, "; background: ").concat(props.theme.linkHoverBackgroundColor, ";");
228
+ return props.selected ? "color: ".concat(props.theme.linkSelectedFontColor, "; background-color: ").concat(props.theme.linkSelectedBackgroundColor, ";") : "color: ".concat(props.theme.linkFontColor, "; background-color: transparent;");
255
229
  }, function (props) {
256
230
  return props.theme.linkFocusColor;
231
+ }, function (props) {
232
+ return props.selected ? "color: ".concat(props.theme.linkSelectedHoverFontColor, "; background-color: ").concat(props.theme.linkSelectedHoverBackgroundColor, ";") : "color: ".concat(props.theme.linkFontColor, "; background-color: ").concat(props.theme.linkHoverBackgroundColor, ";");
257
233
  });
258
234
 
259
- var SidenavContent = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n img,\n svg {\n height: 16px;\n width: 16px;\n }\n"])));
260
-
261
235
  DxcSidenav.Section = Section;
262
236
  DxcSidenav.Group = Group;
263
237
  DxcSidenav.Link = Link;
package/sidenav/Sidenav.stories.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import React from "react";
2
2
  import DxcSidenav from "./Sidenav";
3
+ import DxcSelect from "../select/Select";
4
+ import DxcInset from "../inset/Inset";
3
5
  import Title from "../../.storybook/components/Title";
4
6
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
7
  import { userEvent, within } from "@storybook/testing-library";
@@ -150,13 +152,13 @@ export const Chromatic = () => (
150
152
  </>
151
153
  );
152
154
 
153
- const CollapsedGroup = () => (
155
+ const CollapsedGroupSidenav = () => (
154
156
  <>
155
157
  <ExampleContainer>
156
- <Title title="Default sidenav" theme="light" level={4} />
158
+ <Title title="Collapsed group with a selected link" theme="light" level={4} />
157
159
  <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
158
160
  <DxcSidenav.Section>
159
- <DxcSidenav.Group collapsable={true} title="Collapsable Group" icon={iconSVG}>
161
+ <DxcSidenav.Group collapsable={true} title="Collapsed Group" icon={iconSVG}>
160
162
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
161
163
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
162
164
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -164,11 +166,11 @@ const CollapsedGroup = () => (
164
166
  </DxcSidenav.Group>
165
167
  </DxcSidenav.Section>
166
168
  <DxcSidenav.Section>
167
- <DxcSidenav.Group collapsable={true} title="Collapsable Group">
168
- <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
169
+ <DxcSidenav.Group collapsable={true} title="Collapsed Group">
169
170
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
171
+ <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
170
172
  </DxcSidenav.Group>
171
- <DxcSidenav.Group collapsable={false} title="Section Group">
173
+ <DxcSidenav.Group collapsable={true} title="Section Group">
172
174
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
173
175
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
174
176
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -179,14 +181,14 @@ const CollapsedGroup = () => (
179
181
  </>
180
182
  );
181
183
 
182
- const HoverSidenav = () => (
184
+ const HoveredGroupSidenav = () => (
183
185
  <ExampleContainer pseudoState="pseudo-hover">
184
- <Title title="Default sidenav" theme="light" level={4} />
186
+ <Title title="Hover state for groups (selected and not)" theme="light" level={4} />
185
187
  <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
186
188
  <DxcSidenav.Section>
187
189
  <DxcSidenav.Link>Single Link</DxcSidenav.Link>
188
190
  <DxcSidenav.Link>Single Link</DxcSidenav.Link>
189
- <DxcSidenav.Group collapsable={true} title="Collapsable Group">
191
+ <DxcSidenav.Group collapsable={true} title="Collapsed Group">
190
192
  <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
191
193
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
192
194
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -200,13 +202,12 @@ const HoverSidenav = () => (
200
202
  </DxcSidenav.Group>
201
203
  <DxcSidenav.Link>Single Link</DxcSidenav.Link>
202
204
  <DxcSidenav.Link>Single Link</DxcSidenav.Link>
203
- <DxcSidenav.Group collapsable={true} title="Collapsable Group">
205
+ <DxcSidenav.Group collapsable={true} title="Collapsed Group">
204
206
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
205
207
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
206
208
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
207
209
  </DxcSidenav.Group>
208
-
209
- <DxcSidenav.Group collapsable={true} title="Collapsable Group">
210
+ <DxcSidenav.Group collapsable={true} title="Collapsed Group">
210
211
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
211
212
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
212
213
  <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -216,67 +217,66 @@ const HoverSidenav = () => (
216
217
  </ExampleContainer>
217
218
  );
218
219
 
219
- const HoverSidenavOpinionated = () => (
220
- <ExampleContainer pseudoState="pseudo-hover">
221
- <Title title="Default sidenav" theme="light" level={4} />
222
- <HalstackProvider theme={opinionatedTheme}>
223
- <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
224
- <DxcSidenav.Section>
225
- <DxcSidenav.Link>Single Link</DxcSidenav.Link>
226
- <DxcSidenav.Link>Single Link</DxcSidenav.Link>
227
- <DxcSidenav.Group collapsable={true} title="Collapsable Group">
228
- <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
229
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
230
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
231
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
232
- </DxcSidenav.Group>
233
- </DxcSidenav.Section>
234
- <DxcSidenav.Section>
235
- <DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
236
- <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
237
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
238
- </DxcSidenav.Group>
239
- <DxcSidenav.Link>Single Link</DxcSidenav.Link>
240
- <DxcSidenav.Link>Single Link</DxcSidenav.Link>
241
- <DxcSidenav.Group collapsable={true} title="Collapsable Group">
242
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
243
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
244
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
245
- </DxcSidenav.Group>
246
- <DxcSidenav.Group collapsable={true} title="Collapsable Group">
247
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
248
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
249
- <DxcSidenav.Link>Group Link</DxcSidenav.Link>
250
- </DxcSidenav.Group>
251
- </DxcSidenav.Section>
252
- </DxcSidenav>
253
- </HalstackProvider>
220
+ const ActiveGroupSidenav = () => (
221
+ <ExampleContainer pseudoState="pseudo-active">
222
+ <Title title="Active state for groups (selected and not)" theme="light" level={4} />
223
+ <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
224
+ <DxcSidenav.Section>
225
+ <DxcInset space="1rem">
226
+ <DxcSelect
227
+ defaultValue="1"
228
+ options={[
229
+ { label: "v1.0.0", value: "1" },
230
+ { label: "v2.0.0", value: "2" },
231
+ { label: "v3.0.0", value: "3" },
232
+ { label: "v4.0.0", value: "4" },
233
+ ]}
234
+ size="fillParent"
235
+ />
236
+ </DxcInset>
237
+ </DxcSidenav.Section>
238
+ <DxcSidenav.Section>
239
+ <DxcSidenav.Group collapsable={true} title="Collapsed Group">
240
+ <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
241
+ <DxcSidenav.Link>Group Link</DxcSidenav.Link>
242
+ <DxcSidenav.Link>Group Link</DxcSidenav.Link>
243
+ <DxcSidenav.Link>Group Link</DxcSidenav.Link>
244
+ </DxcSidenav.Group>
245
+ </DxcSidenav.Section>
246
+ <DxcSidenav.Section>
247
+ <DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
248
+ <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
249
+ <DxcSidenav.Link>Group Link</DxcSidenav.Link>
250
+ </DxcSidenav.Group>
251
+ <DxcSidenav.Link>Single Link</DxcSidenav.Link>
252
+ <DxcSidenav.Link>Single Link</DxcSidenav.Link>
253
+ </DxcSidenav.Section>
254
+ </DxcSidenav>
254
255
  </ExampleContainer>
255
256
  );
256
257
 
257
- export const CollapseGroup = CollapsedGroup.bind({});
258
- CollapseGroup.play = async ({ canvasElement }) => {
258
+ export const CollapsableGroup = CollapsedGroupSidenav.bind({});
259
+ CollapsableGroup.play = async ({ canvasElement }) => {
259
260
  const canvas = within(canvasElement);
260
- const collapsableGroups = canvas.getAllByText("Collapsable Group");
261
+ const collapsableGroups = canvas.getAllByText("Collapsed Group");
261
262
  collapsableGroups.forEach((group) => {
262
263
  userEvent.click(group);
263
264
  });
264
265
  };
265
266
 
266
- export const CollapseHoverGroup = HoverSidenav.bind({});
267
- CollapseHoverGroup.play = async ({ canvasElement }) => {
267
+ export const CollapsedHoverGroup = HoveredGroupSidenav.bind({});
268
+ CollapsedHoverGroup.play = async ({ canvasElement }) => {
268
269
  const canvas = within(canvasElement);
269
- const collapsableGroups = canvas.getAllByText("Collapsable Group");
270
+ const collapsableGroups = canvas.getAllByText("Collapsed Group");
270
271
  collapsableGroups.forEach((group) => {
271
272
  userEvent.click(group);
272
273
  });
274
+ await new Promise((resolve) => setTimeout(resolve, 1000));
273
275
  };
274
276
 
275
- export const CollapseHoverGroupOpinionated = HoverSidenavOpinionated.bind({});
276
- CollapseHoverGroupOpinionated.play = async ({ canvasElement }) => {
277
+ export const CollapsedActiveGroup = ActiveGroupSidenav.bind({});
278
+ CollapsedActiveGroup.play = async ({ canvasElement }) => {
277
279
  const canvas = within(canvasElement);
278
- const collapsableGroups = canvas.getAllByText("Collapsable Group");
279
- collapsableGroups.forEach((group) => {
280
- userEvent.click(group);
281
- });
282
- };
280
+ const collapsableGroups = canvas.getAllByText("Collapsed Group");
281
+ userEvent.click(collapsableGroups[0]);
282
+ };
package/sidenav/types.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  /// <reference types="react" />
2
2
  declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
3
3
  declare type SidenavPropsType = {
4
- /**
5
- * The area inside the sidenav. This area can be used to render the content inside the sidenav.
6
- */
7
- children: React.ReactNode;
8
4
  /**
9
5
  * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
10
6
  */
11
7
  title?: React.ReactNode;
8
+ /**
9
+ * The area inside the sidenav. This area can be used to render the content inside the sidenav.
10
+ */
11
+ children: React.ReactNode;
12
12
  };
13
13
  export declare type SidenavTitlePropsType = {
14
14
  /**
@@ -23,28 +23,25 @@ export declare type SidenavSectionPropsType = {
23
23
  children: React.ReactNode;
24
24
  };
25
25
  export declare type SidenavGroupPropsType = {
26
- /**
27
- * The area inside the sidenav group. This area can be used to render sidenav links.
28
- */
29
- children: React.ReactNode;
30
26
  /**
31
27
  * The title of the sidenav group.
32
28
  */
33
29
  title?: string;
34
30
  /**
35
- * If true the sidenav group title will be considered a button and the group will be collapsable.
31
+ * If true, the sidenav group will be a button that will allow you to collapse the links contained within it.
32
+ * In addition, if it's collapsed and contains the currently selected link, the group title will also be marked as selected.
36
33
  */
37
34
  collapsable?: boolean;
38
35
  /**
39
36
  * The icon to be displayed next to the title of the group.
40
37
  */
41
38
  icon?: string | SVG;
42
- };
43
- export declare type SidenavLinkPropsType = {
44
39
  /**
45
- * Value of the tabindex.
40
+ * The area inside the sidenav group. This area can be used to render sidenav links.
46
41
  */
47
- tabIndex?: number;
42
+ children: React.ReactNode;
43
+ };
44
+ export declare type SidenavLinkPropsType = {
48
45
  /**
49
46
  * Page to be opened when the user clicks on the link.
50
47
  */
@@ -58,16 +55,22 @@ export declare type SidenavLinkPropsType = {
58
55
  */
59
56
  icon?: string | SVG;
60
57
  /**
61
- * If true, the link will be marked as selected. This can also affect the group if it is closed to indicate that one of its links is selected.
58
+ * If true, the link will be marked as selected. Moreover, in that same case,
59
+ * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
60
+ * the group title will appear as selected too.
62
61
  */
63
62
  selected?: boolean;
64
63
  /**
65
- * The area inside the sidenav link.
64
+ * This function will be called when the user clicks the link and the event will be passed to this function.
66
65
  */
67
- children: string;
66
+ onClick?: ($event: React.MouseEvent<HTMLAnchorElement>) => void;
68
67
  /**
69
- * This function will be called when the user clicks the link.
68
+ * Value of the tabindex.
69
+ */
70
+ tabIndex?: number;
71
+ /**
72
+ * The area inside the sidenav link.
70
73
  */
71
- onClick?: ($event: any) => void;
74
+ children: React.ReactNode;
72
75
  };
73
76
  export default SidenavPropsType;