@dxc-technology/halstack-react 0.0.0-31c6b1f → 0.0.0-335f028

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 (18) hide show
  1. package/HalstackContext.d.ts +10 -0
  2. package/{ThemeContext.js → HalstackContext.js} +6 -6
  3. package/accordion/Accordion.stories.tsx +3 -3
  4. package/button/Button.js +3 -1
  5. package/common/variables.js +1 -1
  6. package/date-input/DateInput.js +13 -13
  7. package/link/Link.d.ts +3 -2
  8. package/link/Link.js +64 -51
  9. package/link/Link.stories.tsx +87 -52
  10. package/link/Link.test.js +7 -15
  11. package/link/types.d.ts +8 -23
  12. package/main.d.ts +2 -2
  13. package/main.js +5 -5
  14. package/package.json +4 -4
  15. package/quick-nav/types.d.ts +3 -3
  16. package/tabs/Tabs.stories.tsx +0 -6
  17. package/useTheme.js +2 -2
  18. package/ThemeContext.d.ts +0 -10
package/HalstackContext.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ declare const HalstackContext: React.Context<object>;
3
+ declare type HalstackProviderPropsType = {
4
+ theme?: object;
5
+ advancedTheme?: object;
6
+ children: React.ReactNode;
7
+ };
8
+ declare const HalstackProvider: ({ theme, advancedTheme, children }: HalstackProviderPropsType) => JSX.Element;
9
+ export default HalstackContext;
10
+ export { HalstackProvider };
package/{ThemeContext.js → HalstackContext.js} RENAMED
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
- exports["default"] = exports.ThemeProvider = void 0;
10
+ exports["default"] = exports.HalstackProvider = void 0;
11
11
 
12
12
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
13
 
@@ -27,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
27
27
 
28
28
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
29
 
30
- var ThemeContext = /*#__PURE__*/_react["default"].createContext(null);
30
+ var HalstackContext = /*#__PURE__*/_react["default"].createContext(null);
31
31
 
32
32
  var addLightness = function addLightness(hexColor, newLightness) {
33
33
  try {
@@ -223,21 +223,21 @@ var parseTheme = function parseTheme(theme) {
223
223
  return componentTokensCopy;
224
224
  };
225
225
 
226
- var ThemeProvider = function ThemeProvider(_ref) {
226
+ var HalstackProvider = function HalstackProvider(_ref) {
227
227
  var theme = _ref.theme,
228
228
  advancedTheme = _ref.advancedTheme,
229
229
  children = _ref.children;
230
230
  var parsedTheme = (0, _react.useMemo)(function () {
231
231
  return theme && parseTheme(theme) || advancedTheme && parseAdvancedTheme(advancedTheme);
232
232
  }, [theme, advancedTheme]);
233
- return /*#__PURE__*/_react["default"].createElement(Halstack, null, /*#__PURE__*/_react["default"].createElement(ThemeContext.Provider, {
233
+ return /*#__PURE__*/_react["default"].createElement(Halstack, null, /*#__PURE__*/_react["default"].createElement(HalstackContext.Provider, {
234
234
  value: parsedTheme
235
235
  }, children));
236
236
  };
237
237
 
238
- exports.ThemeProvider = ThemeProvider;
238
+ exports.HalstackProvider = HalstackProvider;
239
239
 
240
240
  var Halstack = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"])));
241
241
 
242
- var _default = ThemeContext;
242
+ var _default = HalstackContext;
243
243
  exports["default"] = _default;
package/accordion/Accordion.stories.tsx CHANGED
@@ -5,7 +5,7 @@ import DxcTextInput from "../text-input/TextInput";
5
5
  import DxcButton from "../button/Button";
6
6
  import Title from "../../.storybook/components/Title";
7
7
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
8
- import { ThemeProvider } from "../ThemeContext";
8
+ import { HalstackProvider } from "../HalstackContext";
9
9
 
10
10
  export default {
11
11
  title: "Accordion",
@@ -125,7 +125,7 @@ export const Chromatic = () => (
125
125
  </ExampleContainer>
126
126
  <ExampleContainer>
127
127
  <Title title="Background color provider over accordion content" theme="light" level={4} />
128
- <ThemeProvider advancedTheme={advancedTheme}>
128
+ <HalstackProvider advancedTheme={advancedTheme}>
129
129
  <DxcAccordion
130
130
  label="Dark Accordion"
131
131
  defaultIsExpanded
@@ -144,7 +144,7 @@ export const Chromatic = () => (
144
144
  <DxcButton label="Submit" size="medium" />
145
145
  </div>
146
146
  </DxcAccordion>
147
- </ThemeProvider>
147
+ </HalstackProvider>
148
148
  </ExampleContainer>
149
149
  <Title title="Paddings" theme="light" level={2} />
150
150
  <ExampleContainer>
package/button/Button.js CHANGED
@@ -45,12 +45,14 @@ var DxcButton = function DxcButton(_ref) {
45
45
  _ref$type = _ref.type,
46
46
  type = _ref$type === void 0 ? "button" : _ref$type,
47
47
  icon = _ref.icon,
48
- _onClick = _ref.onClick,
48
+ _ref$onClick = _ref.onClick,
49
+ _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
49
50
  margin = _ref.margin,
50
51
  _ref$size = _ref.size,
51
52
  size = _ref$size === void 0 ? "fitContent" : _ref$size,
52
53
  _ref$tabIndex = _ref.tabIndex,
53
54
  tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
55
+
54
56
  var colorsTheme = (0, _useTheme["default"])();
55
57
  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
56
58
 
package/common/variables.js CHANGED
@@ -712,7 +712,7 @@ var componentTokens = {
712
712
  link: {
713
713
  fontColor: globalTokens.hal_blue_s_35,
714
714
  fontFamily: globalTokens.inherit,
715
- fontSize: globalTokens.type_scale_root,
715
+ fontSize: globalTokens.inherit,
716
716
  fontStyle: globalTokens.type_normal,
717
717
  fontWeight: globalTokens.type_regular,
718
718
  iconSize: "16px",
package/date-input/DateInput.js CHANGED
@@ -25,9 +25,9 @@ var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/Click
25
25
 
26
26
  var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
27
27
 
28
- var _moment = _interopRequireDefault(require("moment"));
28
+ var _dayjs = _interopRequireDefault(require("dayjs"));
29
29
 
30
- var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
30
+ var _dayjs2 = _interopRequireDefault(require("@date-io/dayjs"));
31
31
 
32
32
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
33
33
 
@@ -46,7 +46,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
46
46
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
47
47
 
48
48
  var getValueForPicker = function getValueForPicker(value, format) {
49
- return (0, _moment["default"])(value, format.toUpperCase(), true).format();
49
+ return (0, _dayjs["default"])(value, format.toUpperCase(), true).format();
50
50
  };
51
51
 
52
52
  var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
@@ -100,7 +100,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
100
100
  };
101
101
 
102
102
  var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
103
- var newValue = (0, _moment["default"])(newDate).format(format.toUpperCase());
103
+ var newValue = (0, _dayjs["default"])(newDate).format(format.toUpperCase());
104
104
  value !== null && value !== void 0 ? value : setInnerValue(newValue);
105
105
  newDate !== null && newDate !== void 0 && newDate.toJSON() ? onChange === null || onChange === void 0 ? void 0 : onChange({
106
106
  value: newValue,
@@ -114,32 +114,32 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
114
114
  var newValue = _ref2.value,
115
115
  inputError = _ref2.error;
116
116
  value !== null && value !== void 0 ? value : setInnerValue(newValue);
117
- var momentDate = (0, _moment["default"])(newValue, format.toUpperCase(), true);
118
- var invalidDateMessage = newValue !== "" && !momentDate.isValid() && "Invalid date.";
117
+ var dayjsDate = (0, _dayjs["default"])(newValue, format.toUpperCase(), true);
118
+ var invalidDateMessage = newValue !== "" && !dayjsDate.isValid() && "Invalid date.";
119
119
  var callbackParams = inputError || invalidDateMessage ? {
120
120
  value: newValue,
121
121
  error: inputError || invalidDateMessage
122
122
  } : {
123
123
  value: newValue
124
124
  };
125
- momentDate.isValid() ? onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, callbackParams), {}, {
126
- date: momentDate.toDate()
125
+ dayjsDate.isValid() ? onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, callbackParams), {}, {
126
+ date: dayjsDate.toDate()
127
127
  })) : onChange === null || onChange === void 0 ? void 0 : onChange(callbackParams);
128
128
  };
129
129
 
130
130
  var handleIOnBlur = function handleIOnBlur(_ref3) {
131
131
  var value = _ref3.value,
132
132
  inputError = _ref3.error;
133
- var momentDate = (0, _moment["default"])(value, format.toUpperCase(), true);
134
- var invalidDateMessage = value !== "" && !momentDate.isValid() && "Invalid date.";
133
+ var dayjsDate = (0, _dayjs["default"])(value, format.toUpperCase(), true);
134
+ var invalidDateMessage = value !== "" && !dayjsDate.isValid() && "Invalid date.";
135
135
  var callbackParams = inputError || invalidDateMessage ? {
136
136
  value: value,
137
137
  error: inputError || invalidDateMessage
138
138
  } : {
139
139
  value: value
140
140
  };
141
- momentDate.isValid() ? onBlur === null || onBlur === void 0 ? void 0 : onBlur(_objectSpread(_objectSpread({}, callbackParams), {}, {
142
- date: momentDate.toDate()
141
+ dayjsDate.isValid() ? onBlur === null || onBlur === void 0 ? void 0 : onBlur(_objectSpread(_objectSpread({}, callbackParams), {}, {
142
+ date: dayjsDate.toDate()
143
143
  })) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParams);
144
144
  };
145
145
 
@@ -310,7 +310,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
310
310
  }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
311
311
  theme: dateTheme
312
312
  }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
313
- utils: _dateFns["default"]
313
+ utils: _dayjs2["default"]
314
314
  }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
315
315
  label: label,
316
316
  name: name,
package/link/Link.d.ts CHANGED
@@ -1,3 +1,4 @@
1
- import Overload from "./types";
2
- declare const DxcLink: Overload;
1
+ /// <reference types="react" />
2
+ import { LinkProps } from "./types";
3
+ declare const DxcLink: ({ inheritColor, disabled, icon, iconPosition, href, newWindow, onClick, margin, tabIndex, children, }: LinkProps) => JSX.Element;
3
4
  export default DxcLink;
package/link/Link.js CHANGED
@@ -27,55 +27,62 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
27
27
 
28
28
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
29
 
30
- var DxcLink = function DxcLink(_ref) {
31
- var _ref$inheritColor = _ref.inheritColor,
32
- inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
33
- _ref$disabled = _ref.disabled,
34
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
30
+ var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
31
+ var iconPosition = _ref.iconPosition,
35
32
  icon = _ref.icon,
36
- _ref$iconPosition = _ref.iconPosition,
37
- iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
38
- _ref$href = _ref.href,
39
- href = _ref$href === void 0 ? "" : _ref$href,
40
- _ref$newWindow = _ref.newWindow,
41
- newWindow = _ref$newWindow === void 0 ? false : _ref$newWindow,
42
- onClick = _ref.onClick,
43
- _ref$text = _ref.text,
44
- text = _ref$text === void 0 ? "" : _ref$text,
45
- margin = _ref.margin,
46
- _ref$tabIndex = _ref.tabIndex,
47
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
48
- var colorsTheme = (0, _useTheme["default"])();
49
-
50
- var linkContent = /*#__PURE__*/_react["default"].createElement(LinkText, {
51
- iconPosition: iconPosition
52
- }, iconPosition === "after" && text, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
33
+ children = _ref.children;
34
+ return /*#__PURE__*/_react["default"].createElement(LinkText, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
53
35
  iconPosition: iconPosition
54
36
  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
55
37
  src: icon
56
- }) : icon), iconPosition === "before" && text);
38
+ }) : icon), iconPosition === "before" && children);
39
+ });
57
40
 
41
+ var DxcLink = function DxcLink(_ref2) {
42
+ var _ref2$inheritColor = _ref2.inheritColor,
43
+ inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
44
+ _ref2$disabled = _ref2.disabled,
45
+ disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
46
+ icon = _ref2.icon,
47
+ _ref2$iconPosition = _ref2.iconPosition,
48
+ iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
49
+ _ref2$href = _ref2.href,
50
+ href = _ref2$href === void 0 ? "" : _ref2$href,
51
+ _ref2$newWindow = _ref2.newWindow,
52
+ newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
53
+ onClick = _ref2.onClick,
54
+ margin = _ref2.margin,
55
+ _ref2$tabIndex = _ref2.tabIndex,
56
+ tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
57
+ children = _ref2.children;
58
+ var colorsTheme = (0, _useTheme["default"])();
58
59
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
59
60
  theme: colorsTheme.link
60
- }, /*#__PURE__*/_react["default"].createElement(DxcLinkContainer, {
61
+ }, /*#__PURE__*/_react["default"].createElement(LinkContainer, {
61
62
  margin: margin
62
- }, onClick ? /*#__PURE__*/_react["default"].createElement(StyledButton, {
63
- type: "button",
63
+ }, typeof children === "string" && (href || onClick) ? /*#__PURE__*/_react["default"].createElement(StyledLink, {
64
+ as: href ? "a" : "button",
65
+ tabIndex: tabIndex,
64
66
  onClick: !disabled && onClick,
65
- margin: margin,
67
+ href: !disabled && href ? href : undefined,
68
+ target: href ? newWindow ? "_blank" : "_self" : undefined,
66
69
  disabled: disabled,
67
70
  inheritColor: inheritColor
68
- }, linkContent) : /*#__PURE__*/_react["default"].createElement(StyledLink, {
69
- tabIndex: tabIndex,
70
- href: !disabled && href,
71
- target: newWindow ? "_blank" : "_self",
72
- margin: margin,
71
+ }, /*#__PURE__*/_react["default"].createElement(LinkContent, {
72
+ iconPosition: iconPosition,
73
+ icon: icon,
74
+ children: children
75
+ })) : /*#__PURE__*/_react["default"].createElement(CustomLinkContainer, {
73
76
  disabled: disabled,
74
77
  inheritColor: inheritColor
75
- }, linkContent)));
78
+ }, /*#__PURE__*/_react["default"].createElement(LinkContent, {
79
+ iconPosition: iconPosition,
80
+ icon: icon,
81
+ children: children
82
+ }))));
76
83
  };
77
84
 
78
- var DxcLinkContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
85
+ var LinkContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n * {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n text-decoration-color: transparent;\n }\n"])), function (props) {
79
86
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
80
87
  }, function (props) {
81
88
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -85,16 +92,26 @@ var DxcLinkContainer = _styledComponents["default"].div(_templateObject || (_tem
85
92
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
86
93
  }, function (props) {
87
94
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
95
+ }, function (props) {
96
+ return props.theme.fontSize;
97
+ }, function (props) {
98
+ return props.theme.fontWeight;
99
+ }, function (props) {
100
+ return props.theme.fontStyle;
101
+ }, function (props) {
102
+ return props.theme.fontFamily;
88
103
  });
89
104
 
90
- var StyledLink = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n\n text-decoration-color: transparent;\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
105
+ var StyledLink = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n ", "\n color: ", ";\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
106
+ return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
107
+ }, function (props) {
108
+ return props.disabled && "cursor: default;";
109
+ }, function (props) {
91
110
  return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
92
111
  }, function (props) {
93
112
  return props.disabled ? "pointer-events: none;" : "";
94
113
  }, function (props) {
95
- return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
96
- }, function (props) {
97
- return !props.inheritColor ? props.theme.visitedFontColor : "";
114
+ return !props.inheritColor && !props.disabled ? props.theme.visitedFontColor : "";
98
115
  }, function (props) {
99
116
  return "color: ".concat(props.theme.visitedFontColor, ";\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
100
117
  }, function (props) {
@@ -107,34 +124,30 @@ var StyledLink = _styledComponents["default"].a(_templateObject2 || (_templateOb
107
124
  return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
108
125
  });
109
126
 
110
- var StyledButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n text-decoration-color: transparent;\n\n ", "\n ", "\n color: ", ";\n ", "\n\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
127
+ var CustomLinkContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n ", "\n ", "\n\n * {\n color: ", ";\n }\n\n &:hover {\n * {\n color: ", ";\n }\n ", "\n }\n &:focus-within {\n * {\n outline: none;\n }\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n * {\n color: ", " !important;\n }\n ", "\n }\n"])), function (props) {
111
128
  return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
112
129
  }, function (props) {
113
130
  return props.disabled && "cursor: default;";
131
+ }, function (props) {
132
+ return props.disabled ? "pointer-events: none;" : "";
114
133
  }, function (props) {
115
134
  return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
116
135
  }, function (props) {
117
- return props.disabled ? "pointer-events: none;" : "";
136
+ return props.theme.hoverFontColor;
118
137
  }, function (props) {
119
- return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
138
+ return "border-bottom-color: ".concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
120
139
  }, function (props) {
121
140
  return props.theme.focusColor;
122
141
  }, function (props) {
123
142
  return props.disabled && "outline: none";
124
143
  }, function (props) {
125
- return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
126
- });
127
-
128
- var LinkText = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n display: flex;\n align-items: baseline;\n max-width: 100%;\n"])), function (props) {
129
- return props.theme.fontSize;
130
- }, function (props) {
131
- return props.theme.fontWeight;
144
+ return props.theme.activeFontColor;
132
145
  }, function (props) {
133
- return props.theme.fontStyle;
134
- }, function (props) {
135
- return props.theme.fontFamily;
146
+ return "border-bottom-color: ".concat(props.theme.activeUnderlineColor, " !important;");
136
147
  });
137
148
 
149
+ var LinkText = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: baseline;\n max-width: 100%;\n"])));
150
+
138
151
  var LinkIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])([""])));
139
152
 
140
153
  var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n align-self: center;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
package/link/Link.stories.tsx CHANGED
@@ -24,128 +24,163 @@ export const Chromatic = () => (
24
24
  <Title title="With anchor" theme="light" level={2} />
25
25
  <ExampleContainer>
26
26
  <Title title="Disabled" theme="light" level={4} />
27
- <DxcLink text="Test" disabled></DxcLink>
27
+ <DxcLink disabled>Test</DxcLink>
28
28
  <Title title="Icon before" theme="light" level={4} />
29
- <DxcLink text="Test" href="https://www.google.com" icon={icon} iconPosition="before"></DxcLink>
29
+ <DxcLink href="https://www.google.com" icon={icon} iconPosition="before">
30
+ Test
31
+ </DxcLink>
30
32
  <Title title="Icon after" theme="light" level={4} />
31
33
  <DxcLink
32
- text="Test"
33
34
  href="https://www.youtube.com/"
34
35
  icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
35
36
  iconPosition="after"
36
- ></DxcLink>
37
+ >
38
+ Test
39
+ </DxcLink>
37
40
  </ExampleContainer>
38
41
  <ExampleContainer pseudoState="pseudo-hover">
39
42
  <Title title="With link hovered" theme="light" level={4} />
40
- <DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
43
+ <DxcLink href="https://www.dxc.com">Test</DxcLink>
41
44
  </ExampleContainer>
42
45
  <ExampleContainer pseudoState="pseudo-focus">
43
46
  <Title title="With link focused" theme="light" level={4} />
44
- <DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
47
+ <DxcLink href="https://www.dxc.com">Test</DxcLink>
45
48
  </ExampleContainer>
46
49
  <ExampleContainer pseudoState="pseudo-active">
47
50
  <Title title="With link active" theme="light" level={4} />
48
- <DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
51
+ <DxcLink href="https://www.dxc.com">Test</DxcLink>
49
52
  </ExampleContainer>
50
53
  <ExampleContainer pseudoState="pseudo-visited">
51
54
  <Title title="With link visited" theme="light" level={4} />
52
- <DxcLink text="Test" href="https://www.amazon.com"></DxcLink>
55
+ <DxcLink href="https://www.amazon.com">Test</DxcLink>
53
56
  </ExampleContainer>
54
57
  <ExampleContainer>
55
58
  <Title title="Inherit color" theme="light" level={4} />
56
- This is a <DxcLink text="Test" inheritColor={true}></DxcLink>.
59
+ This is a <DxcLink inheritColor>Test</DxcLink>.
57
60
  </ExampleContainer>
58
61
  <ExampleContainer pseudoState="pseudo-focus">
59
62
  <Title title="With brackets and focus" theme="light" level={4} />
60
- This is a (<DxcLink text="Test" inheritColor={true}></DxcLink>).
63
+ This is a (
64
+ <DxcLink inheritColor href="https://www.google.com">
65
+ Test
66
+ </DxcLink>
67
+ ).
61
68
  </ExampleContainer>
62
69
  <ExampleContainer pseudoState="pseudo-hover">
63
70
  <Title title="Long text with hover" theme="light" level={4} />
64
- Lorem <DxcLink text="Test" href="https://www.google.com"></DxcLink> ipsum dolor sit amet, consectetur adipiscing
65
- elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
66
- exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
67
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
68
- in culpa qui officia deserunt mollit anim id est laborum.
71
+ Lorem <DxcLink href="https://www.google.com">Test</DxcLink> ipsum dolor sit amet, consectetur adipiscing elit, sed
72
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
73
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
74
+ esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
75
+ officia deserunt mollit anim id est laborum.
69
76
  </ExampleContainer>
70
77
  <ExampleContainer pseudoState="pseudo-focus">
71
78
  <Title title="Long text with focus" theme="light" level={4} />
72
- Lorem <DxcLink text="Test" href="https://www.google.com"></DxcLink> ipsum dolor sit amet, consectetur adipiscing
73
- elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
74
- exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
75
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
76
- in culpa qui officia deserunt mollit anim id est laborum.
79
+ Lorem <DxcLink href="https://www.google.com">Test</DxcLink> ipsum dolor sit amet, consectetur adipiscing elit, sed
80
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
81
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
82
+ esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
83
+ officia deserunt mollit anim id est laborum.
77
84
  </ExampleContainer>
78
85
  <Title title="With button" theme="light" level={2} />
79
86
  <ExampleContainer>
80
87
  <Title title="Disabled" theme="light" level={4} />
81
- <DxcLink text="Test" onClick={() => {}} disabled></DxcLink>
88
+ <DxcLink onClick={() => {}} disabled>
89
+ Test
90
+ </DxcLink>
82
91
  <Title title="Icon before" theme="light" level={4} />
83
- <DxcLink text="Test" onClick={() => {}} href="https://www.google.com" icon={icon} iconPosition="before"></DxcLink>
92
+ <DxcLink onClick={() => {}} icon={icon} iconPosition="before">
93
+ Test
94
+ </DxcLink>
84
95
  <Title title="Icon after" theme="light" level={4} />
85
- <DxcLink
86
- text="Test"
87
- onClick={() => {}}
88
- href="https://www.youtube.com/"
89
- icon={icon}
90
- iconPosition="after"
91
- ></DxcLink>
96
+ <DxcLink onClick={() => {}} icon={icon} iconPosition="after">
97
+ Test
98
+ </DxcLink>
92
99
  </ExampleContainer>
93
100
  <ExampleContainer pseudoState="pseudo-hover">
94
101
  <Title title="With link hovered" theme="light" level={4} />
95
- <DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
102
+ <DxcLink onClick={() => {}}>Test</DxcLink>
96
103
  </ExampleContainer>
97
104
  <ExampleContainer pseudoState="pseudo-focus">
98
105
  <Title title="With link focused" theme="light" level={4} />
99
- <DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
106
+ <DxcLink onClick={() => {}}>Test</DxcLink>
100
107
  </ExampleContainer>
101
108
  <ExampleContainer pseudoState="pseudo-active">
102
109
  <Title title="With link active" theme="light" level={4} />
103
- <DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
110
+ <DxcLink onClick={() => {}}>Test</DxcLink>
104
111
  </ExampleContainer>
105
112
  <ExampleContainer pseudoState="pseudo-visited">
106
113
  <Title title="With link visited" theme="light" level={4} />
107
- <DxcLink text="Test" onClick={() => {}} href="https://www.amazon.com"></DxcLink>
114
+ <DxcLink onClick={() => {}}>Test</DxcLink>
108
115
  </ExampleContainer>
109
116
  <ExampleContainer>
110
117
  <Title title="Inherit color" theme="light" level={4} />
111
- This is a <DxcLink text="Test" onClick={() => {}} inheritColor={true}></DxcLink>.
118
+ This is a{" "}
119
+ <DxcLink onClick={() => {}} inheritColor>
120
+ Test
121
+ </DxcLink>
122
+ .
112
123
  </ExampleContainer>
113
124
  <ExampleContainer pseudoState="pseudo-focus">
114
125
  <Title title="With brackets and focus" theme="light" level={4} />
115
- This is a (<DxcLink text="Test" onClick={() => {}} inheritColor={true}></DxcLink>).
126
+ This is a (
127
+ <DxcLink onClick={() => {}} inheritColor>
128
+ Test
129
+ </DxcLink>
130
+ ).
116
131
  </ExampleContainer>
117
132
  <ExampleContainer pseudoState="pseudo-hover">
118
133
  <Title title="Long text with hover" theme="light" level={4} />
119
- Lorem <DxcLink text="Test" onClick={() => {}} href="https://www.google.com"></DxcLink> ipsum dolor sit amet,
120
- consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
121
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
122
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
123
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
134
+ Lorem{" "}
135
+ <DxcLink onClick={() => {}} href="https://www.google.com">
136
+ Test
137
+ </DxcLink>{" "}
138
+ ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
139
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
140
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
141
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
124
142
  </ExampleContainer>
125
143
  <ExampleContainer pseudoState="pseudo-focus">
126
144
  <Title title="Long text with focus" theme="light" level={4} />
127
- Lorem <DxcLink text="Test" onClick={() => {}} href="https://www.google.com"></DxcLink> ipsum dolor sit amet,
128
- consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
129
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
130
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
131
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
145
+ Lorem{" "}
146
+ <DxcLink onClick={() => {}} href="https://www.google.com">
147
+ Test
148
+ </DxcLink>{" "}
149
+ ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
150
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
151
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
152
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
132
153
  </ExampleContainer>
133
154
  <Title title="Margins" theme="light" level={2} />
134
155
  <ExampleContainer>
135
156
  <Title title="Xxsmall margin" theme="light" level={4} />
136
- <DxcLink text="Test" margin="xxsmall" href="https://www.facebook.com/"></DxcLink>
157
+ <DxcLink margin="xxsmall" href="https://www.facebook.com/">
158
+ Test
159
+ </DxcLink>
137
160
  <Title title="Xsmall margin" theme="light" level={4} />
138
- <DxcLink text="Test" margin="xsmall" href="https://www.linkedin.com/"></DxcLink>
161
+ <DxcLink margin="xsmall" href="https://www.linkedin.com/">
162
+ Test
163
+ </DxcLink>
139
164
  <Title title="Small margin" theme="light" level={4} />
140
- <DxcLink text="Test" margin="small" href="https://www.linkedin.com/"></DxcLink>
165
+ <DxcLink margin="small" href="https://www.linkedin.com/">
166
+ Test
167
+ </DxcLink>
141
168
  <Title title="Medium margin" theme="light" level={4} />
142
- <DxcLink text="Test" margin="medium" href="https://www.linkedin.com/"></DxcLink>
169
+ <DxcLink margin="medium" href="https://www.linkedin.com/">
170
+ Test
171
+ </DxcLink>
143
172
  <Title title="Large margin" theme="light" level={4} />
144
- <DxcLink text="Test" margin="large" href="https://www.linkedin.com/"></DxcLink>
173
+ <DxcLink margin="large" href="https://www.linkedin.com/">
174
+ Test
175
+ </DxcLink>
145
176
  <Title title="Xlarge margin" theme="light" level={4} />
146
- <DxcLink text="Test" margin="xlarge" href="https://www.linkedin.com/"></DxcLink>
177
+ <DxcLink margin="xlarge" href="https://www.linkedin.com/">
178
+ Test
179
+ </DxcLink>
147
180
  <Title title="Xxlarge margin" theme="light" level={4} />
148
- <DxcLink text="Test" margin="xxlarge" href="https://www.linkedin.com/"></DxcLink>
181
+ <DxcLink margin="xxlarge" href="https://www.linkedin.com/">
182
+ Test
183
+ </DxcLink>
149
184
  </ExampleContainer>
150
185
  </>
151
186
  );
package/link/Link.test.js CHANGED
@@ -10,49 +10,43 @@ var _Link = _interopRequireDefault(require("./Link"));
10
10
 
11
11
  describe("Link component tests", function () {
12
12
  test("Link renders with correct text", function () {
13
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
14
- text: "Link"
15
- })),
13
+ var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link")),
16
14
  getByText = _render.getByText;
17
15
 
18
16
  expect(getByText("Link")).toBeTruthy();
19
17
  });
20
18
  test("Link renders with correct href", function () {
21
19
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
22
- text: "Link",
23
20
  href: "/testPage"
24
- })),
21
+ }, "Link")),
25
22
  getByRole = _render2.getByRole;
26
23
 
27
24
  expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
28
25
  });
29
26
  test("Link renders with correct disabled state", function () {
30
27
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
31
- text: "Link",
32
28
  href: "/testPage",
33
29
  disabled: true
34
- })),
30
+ }, "Link")),
35
31
  getByText = _render3.getByText;
36
32
 
37
33
  expect(getByText("Link").hasAttribute("href")).toBeFalsy();
38
34
 
39
35
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
40
- text: "LinkButton",
41
36
  onClick: function onClick() {
42
37
  return console.log("Andorra");
43
38
  },
44
39
  disabled: true
45
- })),
40
+ }, "LinkButton")),
46
41
  getByTextLinkButton = _render4.getByText;
47
42
 
48
43
  expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
49
44
  });
50
45
  test("Link open new tab", function () {
51
46
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
52
- text: "Link",
53
47
  href: "/testPage",
54
48
  newWindow: true
55
- })),
49
+ }, "Link")),
56
50
  getByRole = _render5.getByRole;
57
51
 
58
52
  expect(getByRole("link").getAttribute("target")).toEqual("_blank");
@@ -61,9 +55,8 @@ describe("Link component tests", function () {
61
55
  var onClick = jest.fn();
62
56
 
63
57
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
64
- text: "Link",
65
58
  onClick: onClick
66
- })),
59
+ }, "Link")),
67
60
  getByText = _render6.getByText;
68
61
 
69
62
  var link = getByText("Link");
@@ -76,10 +69,9 @@ describe("Link component tests", function () {
76
69
  var onClick = jest.fn();
77
70
 
78
71
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
79
- text: "Link",
80
72
  onClick: onClick,
81
73
  disabled: true
82
- })),
74
+ }, "Link")),
83
75
  getByText = _render7.getByText;
84
76
 
85
77
  var link = getByText("Link");
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
  */
@@ -41,30 +42,14 @@ declare type LinkCommonProps = {
41
42
  * Value of the tabindex.
42
43
  */
43
44
  tabIndex?: number;
44
- };
45
- export declare type LinkTextProps = LinkCommonProps & {
46
45
  /**
47
- * Link text.
46
+ * Content of the link. To use the component with other libraries (such as React Router or Next.js Link) pass the custom link as a child.
47
+ * The component will apply the styles to the custom link.
48
48
  */
49
- text: string;
49
+ children?: React.ReactNode;
50
50
  /**
51
51
  * Element or path used as the icon that will be placed next to the link text.
52
52
  */
53
53
  icon?: string | SVG;
54
54
  };
55
- export declare type LinkIconProps = LinkCommonProps & {
56
- /**
57
- * Link text.
58
- */
59
- text?: string;
60
- /**
61
- * Element or path used as the icon that will be placed next to the link text.
62
- */
63
- icon: string | SVG;
64
- };
65
- declare type Overload = {
66
- (props: LinkTextProps): JSX.Element;
67
- (props: LinkIconProps): JSX.Element;
68
- };
69
- declare type SVG = React.SVGProps<SVGSVGElement>;
70
- export default Overload;
55
+ export {};
package/main.d.ts CHANGED
@@ -42,6 +42,6 @@ import DxcRadioGroup from "./radio-group/RadioGroup";
42
42
  import DxcBleed from "./bleed/Bleed";
43
43
  import DxcInset from "./inset/Inset";
44
44
  import DxcQuickNav from "./quick-nav/QuickNav";
45
- import ThemeContext, { ThemeProvider } from "./ThemeContext";
45
+ import HalstackContext, { HalstackProvider } from "./HalstackContext";
46
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, };
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, HalstackContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, };
package/main.js CHANGED
@@ -277,16 +277,16 @@ Object.defineProperty(exports, "DxcWizard", {
277
277
  return _Wizard["default"];
278
278
  }
279
279
  });
280
- Object.defineProperty(exports, "ThemeContext", {
280
+ Object.defineProperty(exports, "HalstackContext", {
281
281
  enumerable: true,
282
282
  get: function get() {
283
- return _ThemeContext["default"];
283
+ return _HalstackContext["default"];
284
284
  }
285
285
  });
286
- Object.defineProperty(exports, "ThemeProvider", {
286
+ Object.defineProperty(exports, "HalstackProvider", {
287
287
  enumerable: true,
288
288
  get: function get() {
289
- return _ThemeContext.ThemeProvider;
289
+ return _HalstackContext.HalstackProvider;
290
290
  }
291
291
  });
292
292
 
@@ -378,7 +378,7 @@ var _Inset = _interopRequireDefault(require("./inset/Inset"));
378
378
 
379
379
  var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
380
380
 
381
- var _ThemeContext = _interopRequireWildcard(require("./ThemeContext"));
381
+ var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
382
382
 
383
383
  var _BackgroundColorContext = require("./BackgroundColorContext");
384
384
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxc-technology/halstack-react",
3
- "version": "0.0.0-31c6b1f",
3
+ "version": "0.0.0-335f028",
4
4
  "description": "DXC Halstack React components library",
5
5
  "repository": "dxc-technology/halstack-react",
6
6
  "homepage": "http://developer.dxc.com/tools/react",
@@ -18,7 +18,7 @@
18
18
  "styled-components": "^5.0.1"
19
19
  },
20
20
  "dependencies": {
21
- "@date-io/date-fns": "^1.3.9",
21
+ "@date-io/dayjs": "^1.3.9",
22
22
  "@material-ui/core": "4.11.1",
23
23
  "@material-ui/icons": "4.4.3",
24
24
  "@material-ui/lab": "4.0.0-alpha.17",
@@ -27,8 +27,7 @@
27
27
  "@types/styled-components": "^5.1.24",
28
28
  "@types/uuid": "^8.3.4",
29
29
  "color": "^3.1.3",
30
- "date-fns": "^2.0.0-beta.4",
31
- "moment": "2.24.0",
30
+ "dayjs": "^1.11.1",
32
31
  "prop-types": "^15.7.2",
33
32
  "rgb-hex": "^3.0.0",
34
33
  "slugify": "^1.6.5",
@@ -58,6 +57,7 @@
58
57
  "@storybook/testing-library": "0.0.7",
59
58
  "@testing-library/react": "^11.2.5",
60
59
  "@testing-library/user-event": "^12.6.3",
60
+ "@types/react": "16.9.5",
61
61
  "babel-jest": "^24.8.0",
62
62
  "babel-loader": "^8.0.6",
63
63
  "chromatic": "^6.3.3",
package/quick-nav/types.d.ts CHANGED
@@ -6,9 +6,9 @@ declare type Props = {
6
6
  /**
7
7
  * Links to be shown inside the quick nav component.
8
8
  */
9
- links: Link[];
9
+ links: LinkType[];
10
10
  };
11
- declare type Link = {
11
+ declare type LinkType = {
12
12
  /**
13
13
  * Label to be shown in the link.
14
14
  */
@@ -16,6 +16,6 @@ declare type Link = {
16
16
  /**
17
17
  * Sublinks of the link.
18
18
  */
19
- links?: Link[];
19
+ links?: LinkType[];
20
20
  };
21
21
  export default Props;
package/tabs/Tabs.stories.tsx CHANGED
@@ -78,12 +78,6 @@ export const Chromatic = () => (
78
78
  <Title title="With icon on the left and notification number" theme="light" level={4} />
79
79
  <DxcTabs tabs={tabsNotificationIcon} iconPosition="left" />
80
80
  </ExampleContainer>
81
- <ExampleContainer>
82
- <Title title="Scrollable" theme="light" level={4} />
83
- <div style={{ width: "400px" }}>
84
- <DxcTabs tabs={tabsNotificationIcon} iconPosition="left" defaultActiveTabIndex={1} />
85
- </div>
86
- </ExampleContainer>
87
81
  <Title title="Margins" theme="light" level={2} />
88
82
  <ExampleContainer>
89
83
  <Title title="Xxsmall margin" theme="light" level={4} />
package/useTheme.js CHANGED
@@ -11,10 +11,10 @@ var _react = require("react");
11
11
 
12
12
  var _variables = require("./common/variables.js");
13
13
 
14
- var _ThemeContext = _interopRequireDefault(require("./ThemeContext"));
14
+ var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
15
15
 
16
16
  var useTheme = function useTheme() {
17
- var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]);
17
+ var colorsTheme = (0, _react.useContext)(_HalstackContext["default"]);
18
18
  return colorsTheme || _variables.componentTokens;
19
19
  };
20
20
 
package/ThemeContext.d.ts DELETED
@@ -1,10 +0,0 @@
1
- import React from "react";
2
- declare const ThemeContext: React.Context<object>;
3
- declare type ThemeProviderPropsType = {
4
- theme?: object;
5
- advancedTheme?: object;
6
- children: React.ReactNode;
7
- };
8
- declare const ThemeProvider: ({ theme, advancedTheme, children }: ThemeProviderPropsType) => JSX.Element;
9
- export default ThemeContext;
10
- export { ThemeProvider };