@dxc-technology/halstack-react 0.0.0-509f1eb → 0.0.0-51152f3

package/badge/types.d.ts

@@ -1,5 +1,54 @@
-type Props = {
-    notificationText: boolean | number | string;
-    disabled?: boolean;
+/// <reference types="react" />
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type ContextualProps = {
+    /**
+     * Text to be placed in the badge.
+     */
+    label: string;
+    /**
+     * The available badge modes.
+     */
+    mode?: "contextual";
+    /**
+     * In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
+     */
+    notificationLimit?: never;
+    /**
+     * Affects the visual style of the badge. It can be used following semantic purposes or not.
+     */
+    color?: "grey" | "blue" | "green" | "orange" | "red" | "yellow" | "purple";
 };
+type NotificationProps = {
+    /**
+     * Text to be placed in the badge.
+     */
+    label?: number;
+    /**
+     * The available badge modes.
+     */
+    mode: "notification";
+    /**
+     * In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
+     */
+    notificationLimit?: number;
+    /**
+     * Affects the visual style of the badge. It can be used following semantic purposes or not.
+     */
+    color?: never;
+};
+type CommonProps = {
+    /**
+     * Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
+     */
+    title?: string;
+    /**
+     * Element or path used as the icon that will be placed next to the badge label in contextual mode.
+     */
+    icon?: string | SVG;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large";
+};
+type Props = (ContextualProps | NotificationProps) & CommonProps;
 export default Props;

package/button/Button.test.js

@@ -26,11 +26,13 @@ describe("Button component tests", function () {
   test("Renders with correct accessibility attributes", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         label: "Home",
-        title: "Go home"
+        title: "Go home",
+        tabIndex: 1
       })),
       getByRole = _render3.getByRole;
     var button = getByRole("button");
     expect(button.getAttribute("aria-label")).toBe("Go home");
     expect(button.getAttribute("title")).toBe("Go home");
+    expect(button.getAttribute("tabindex")).toBe("1");
   });
 });

package/common/coreTokens.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Halstack Color Palette 
+ * Halstack Color Palette
  * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
  */
 var CoreColorTokens = {
@@ -112,7 +112,7 @@ var getCoreColorToken = exports.getCoreColorToken = function getCoreColorToken(k
   return CoreColorTokens[key];
 };
 /**
- * Halstack Spacing Principles 
+ * Halstack Spacing Principles
  * @link https://developer.dxc.com/halstack/next/principles/spacing/
  */
 var SpacingTokens = {

package/common/variables.d.ts

@@ -282,8 +282,14 @@ export declare const componentTokens: {
         buttonPaddingBottom: string;
         buttonPaddingLeft: string;
         buttonPaddingRight: string;
+        buttonHeight: string;
+        buttonBorderRadius: string;
+        buttonBorderStyle: string;
+        buttonBorderThickness: string;
+        buttonBorderColor: string;
         disabledColor: string;
         disabledButtonBackgroundColor: string;
+        disabledButtonBorderColor: string;
         disabledBorderColor: string;
         optionBackgroundColor: string;
         hoverOptionBackgroundColor: string;
@@ -865,6 +871,16 @@ export declare const componentTokens: {
         scrollBarThumbColor: string;
         scrollBarTrackColor: string;
         sortIconColor: string;
+        actionIconColor: string;
+        disabledActionIconColor: string;
+        hoverActionIconColor: string;
+        focusActionIconColor: string;
+        activeActionIconColor: string;
+        actionBackgroundColor: string;
+        disabledActionBackgroundColor: string;
+        hoverActionBackgroundColor: string;
+        focusActionBorderColor: string;
+        activeActionBackgroundColor: string;
     };
     tabs: {
         fontFamily: string;
@@ -883,7 +899,6 @@ export declare const componentTokens: {
         disabledFontColor: string;
         disabledIconColor: string;
         disabledFontStyle: string;
-        disabledBadgeBackgroundColor: string;
         hoverBackgroundColor: string;
         pressedBackgroundColor: string;
         pressedFontWeight: string;
@@ -891,19 +906,6 @@ export declare const componentTokens: {
         dividerThickness: string;
         focusOutline: string;
         scrollButtonsWidth: string;
-        badgeBackgroundColor: string;
-        badgeFontFamily: string;
-        badgeFontSize: string;
-        badgeFontStyle: string;
-        badgeFontWeight: string;
-        badgeFontColor: string;
-        badgeLetterSpacing: string;
-        badgeWidth: string;
-        badgeHeight: string;
-        badgeRadius: string;
-        badgeWidthWithNotificationNumber: string;
-        badgeHeightWithNotificationNumber: string;
-        badgeRadiusWithNotificationNumber: string;
     };
     tag: {
         fontFamily: string;

package/common/variables.js

@@ -290,8 +290,14 @@ var componentTokens = exports.componentTokens = {
     buttonPaddingBottom: "0px",
     buttonPaddingLeft: "16px",
     buttonPaddingRight: "16px",
+    buttonHeight: "40px",
+    buttonBorderRadius: "4px",
+    buttonBorderStyle: _coreTokens["default"].border_none,
+    buttonBorderThickness: _coreTokens["default"].border_width_0,
+    buttonBorderColor: _coreTokens["default"].color_transparent,
     disabledColor: _coreTokens["default"].color_grey_500,
     disabledButtonBackgroundColor: _coreTokens["default"].color_transparent,
+    disabledButtonBorderColor: _coreTokens["default"].color_transparent,
     disabledBorderColor: _coreTokens["default"].color_transparent,
     optionBackgroundColor: _coreTokens["default"].color_white,
     hoverOptionBackgroundColor: _coreTokens["default"].color_grey_100,
@@ -850,10 +856,10 @@ var componentTokens = exports.componentTokens = {
     dataFontWeight: _coreTokens["default"].type_regular,
     dataFontColor: _coreTokens["default"].color_black,
     dataFontTextTransform: "none",
-    dataPaddingTop: "14px",
-    dataPaddingBottom: "12px",
+    dataPaddingTop: "16px",
+    dataPaddingBottom: "16px",
     dataPaddingRight: "20px",
-    dataPaddingLeft: "40px",
+    dataPaddingLeft: "20px",
     dataTextAlign: "left",
     dataTextLineHeight: "normal",
     headerBackgroundColor: _coreTokens["default"].color_purple_700,
@@ -867,12 +873,22 @@ var componentTokens = exports.componentTokens = {
     headerPaddingTop: "16px",
     headerPaddingBottom: "16px",
     headerPaddingRight: "20px",
-    headerPaddingLeft: "40px",
+    headerPaddingLeft: "20px",
     headerTextAlign: "left",
     headerTextLineHeight: "normal",
     scrollBarThumbColor: _coreTokens["default"].color_grey_700,
     scrollBarTrackColor: _coreTokens["default"].color_grey_300,
-    sortIconColor: _coreTokens["default"].color_white
+    sortIconColor: _coreTokens["default"].color_white,
+    actionIconColor: _coreTokens["default"].color_purple_700,
+    disabledActionIconColor: _coreTokens["default"].color_grey_500,
+    hoverActionIconColor: _coreTokens["default"].color_purple_700,
+    focusActionIconColor: _coreTokens["default"].color_purple_700,
+    activeActionIconColor: _coreTokens["default"].color_purple_700,
+    actionBackgroundColor: _coreTokens["default"].color_transparent,
+    disabledActionBackgroundColor: _coreTokens["default"].color_transparent,
+    hoverActionBackgroundColor: _coreTokens["default"].color_grey_100,
+    focusActionBorderColor: _coreTokens["default"].color_blue_600,
+    activeActionBackgroundColor: _coreTokens["default"].color_grey_300
   },
   tabs: {
     fontFamily: _coreTokens["default"].type_sans,
@@ -891,27 +907,13 @@ var componentTokens = exports.componentTokens = {
     disabledFontColor: _coreTokens["default"].color_grey_500,
     disabledIconColor: _coreTokens["default"].color_grey_500,
     disabledFontStyle: _coreTokens["default"].type_normal,
-    disabledBadgeBackgroundColor: "#0000004d",
     hoverBackgroundColor: _coreTokens["default"].color_purple_100,
     pressedBackgroundColor: _coreTokens["default"].color_purple_200,
     pressedFontWeight: _coreTokens["default"].type_semibold,
     dividerColor: _coreTokens["default"].color_grey_400,
     dividerThickness: "1px",
     focusOutline: _coreTokens["default"].color_purple_700,
-    scrollButtonsWidth: "48px",
-    badgeBackgroundColor: _coreTokens["default"].color_red_700,
-    badgeFontFamily: _coreTokens["default"].type_sans,
-    badgeFontSize: "10px",
-    badgeFontStyle: _coreTokens["default"].type_normal,
-    badgeFontWeight: "500",
-    badgeFontColor: _coreTokens["default"].color_white,
-    badgeLetterSpacing: _coreTokens["default"].type_spacing_wide_02,
-    badgeWidth: "16px",
-    badgeHeight: "16px",
-    badgeRadius: "10px",
-    badgeWidthWithNotificationNumber: "23px",
-    badgeHeightWithNotificationNumber: "17px",
-    badgeRadiusWithNotificationNumber: "10px"
+    scrollButtonsWidth: "48px"
   },
   tag: {
     fontFamily: _coreTokens["default"].type_sans,

package/container/Container.js

@@ -44,7 +44,7 @@ var getBorderStyles = function getBorderStyles(direction, borderProperties) {
   var _borderProperties$wid, _borderProperties$sty, _getCoreColorToken;
   return "border-".concat(direction, ": ").concat((_borderProperties$wid = borderProperties === null || borderProperties === void 0 ? void 0 : borderProperties.width) !== null && _borderProperties$wid !== void 0 ? _borderProperties$wid : "", " ").concat((_borderProperties$sty = borderProperties === null || borderProperties === void 0 ? void 0 : borderProperties.style) !== null && _borderProperties$sty !== void 0 ? _borderProperties$sty : "", " ").concat((_getCoreColorToken = (0, _coreTokens.getCoreColorToken)(borderProperties === null || borderProperties === void 0 ? void 0 : borderProperties.color)) !== null && _getCoreColorToken !== void 0 ? _getCoreColorToken : "", ";");
 };
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: ", ";\n  display: ", ";\n  width: ", ";\n  height: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  bottom: ", ";\n  left: ", ";\n  float: ", ";\n  z-index: ", ";\n  box-shadow: ", ";\n\n  background-attachment: ", ";\n  background-clip: ", ";\n  background-color: ", ";\n  background-image: ", ";\n  background-origin: ", ";\n  background-position: ", ";\n  background-repeat: ", ";\n  background-size: ", ";\n\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-width: ", ";\n\n  ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  outline: ", ";\n  outline-offset: ", ";\n\n  overflow: ", ";\n  overflow-x: ", ";\n  overflow-y: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_ref2) {
+var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: ", ";\n  display: ", ";\n  width: ", ";\n  height: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  bottom: ", ";\n  left: ", ";\n  float: ", ";\n  z-index: ", ";\n  box-shadow: ", ";\n\n  background-attachment: ", ";\n  background-clip: ", ";\n  background-color: ", ";\n  background-image: ", ";\n  background-origin: ", ";\n  background-position: ", ";\n  background-repeat: ", ";\n  background-size: ", ";\n\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  outline: ", ";\n  outline-offset: ", ";\n\n  overflow: ", ";\n  overflow-x: ", ";\n  overflow-y: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_ref2) {
   var boxSizing = _ref2.boxSizing;
   return boxSizing;
 }, function (_ref3) {

package/dropdown/Dropdown.js

@@ -263,7 +263,7 @@ var sizes = {
 var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
-var DropdownContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  width: ", ";\n  text-overflow: ellipsis;\n  overflow: hidden;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var DropdownContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
@@ -276,18 +276,20 @@ var DropdownContainer = _styledComponents["default"].div(_templateObject || (_te
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
-var DropdownTrigger = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  min-height: 40px;\n  min-width: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: ", ";\n\n  ", ";\n"])), function (props) {
+var DropdownTrigger = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  height: ", ";\n  min-width: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: ", ";\n\n  ", ";\n"])), function (props) {
   return props.theme.caretIconSpacing;
+}, function (props) {
+  return props.theme.buttonHeight;
 }, function (props) {
   return props.label === "" ? "0px" : calculateWidth(props.margin, props.size);
 }, function (props) {
-  return props.theme.borderRadius;
+  return props.theme.buttonBorderRadius;
 }, function (props) {
-  return props.theme.borderThickness;
+  return props.theme.buttonBorderThickness;
 }, function (props) {
-  return props.theme.borderStyle;
+  return props.theme.buttonBorderStyle;
 }, function (props) {
-  return props.disabled ? props.theme.disabledBorderColor : props.theme.borderColor;
+  return props.disabled ? props.theme.disabledButtonBorderColor : props.theme.buttonBorderColor;
 }, function (props) {
   return props.theme.buttonPaddingTop;
 }, function (props) {
@@ -303,7 +305,7 @@ var DropdownTrigger = _styledComponents["default"].button(_templateObject2 || (_
 }, function (props) {
   return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
-  return !props.disabled && "\n      &:focus {\n        outline: ".concat(props.theme.focusColor, " solid 2px;\n        outline-offset: -2px;\n      }\n      &:hover {\n        background-color: ").concat(props.theme.hoverButtonBackgroundColor, ";\n      }\n      &:active {\n        background-color: ").concat(props.theme.activeButtonBackgroundColor, ";\n      }\n  ");
+  return !props.disabled && "\n      &:focus {\n        outline: 2px solid ".concat(props.theme.focusColor, ";\n      }\n      &:hover {\n        background-color: ").concat(props.theme.hoverButtonBackgroundColor, ";\n      }\n      &:active {\n        background-color: ").concat(props.theme.activeButtonBackgroundColor, ";\n      }\n  ");
 });
 var DropdownTriggerContent = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  margin-left: 0px;\n  margin-right: 0px;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n"])), function (props) {
   return props.theme.buttonIconSpacing;

package/footer/Footer.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import FooterPropsType from "./types";
-declare const DxcFooter: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, }: FooterPropsType) => JSX.Element;
+declare const DxcFooter: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
 export default DxcFooter;

package/footer/Footer.js

@@ -24,11 +24,14 @@ var DxcFooter = function DxcFooter(_ref) {
     children = _ref.children,
     margin = _ref.margin,
     _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "default" : _ref$mode;
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
   var footerLogo = (0, _react.useMemo)(function () {
-    return !colorsTheme.footer.logo ? _Icons.dxcLogo : typeof colorsTheme.footer.logo === "string" ? /*#__PURE__*/_react["default"].createElement(LogoImg, {
+    return !colorsTheme.footer.logo ? mode === "default" ? _Icons.dxcLogo : _Icons.dxcSmallLogo : typeof colorsTheme.footer.logo === "string" ? /*#__PURE__*/_react["default"].createElement(LogoImg, {
+      mode: mode,
       alt: translatedLabels.formFields.logoAlternativeText,
       src: colorsTheme.footer.logo
     }) : colorsTheme.footer.logo;
@@ -36,13 +39,16 @@ var DxcFooter = function DxcFooter(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.footer
   }, /*#__PURE__*/_react["default"].createElement(FooterContainer, {
-    margin: margin
+    margin: margin,
+    mode: mode
   }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
     justifyContent: "space-between",
     alignItems: "center",
     wrap: "wrap",
     gap: "1.5rem"
-  }, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, footerLogo), /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(function (link, index) {
+  }, /*#__PURE__*/_react["default"].createElement(LogoContainer, {
+    mode: mode
+  }, footerLogo), mode === "default" && /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(function (link, index) {
     return /*#__PURE__*/_react["default"].createElement(SocialAnchor, {
       href: link.href,
       tabIndex: tabIndex,
@@ -51,9 +57,10 @@ var DxcFooter = function DxcFooter(_ref) {
       key: "social".concat(index).concat(link.href),
       index: index
     }, /*#__PURE__*/_react["default"].createElement(SocialIconContainer, null, typeof link.logo === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-      src: link.logo
+      src: link.logo,
+      alt: link.title
     }) : link.logo));
-  }))), /*#__PURE__*/_react["default"].createElement(ChildComponents, null, children), /*#__PURE__*/_react["default"].createElement(BottomContainer, null, /*#__PURE__*/_react["default"].createElement(BottomLinks, null, bottomLinks === null || bottomLinks === void 0 ? void 0 : bottomLinks.map(function (link, index) {
+  }))), /*#__PURE__*/_react["default"].createElement(ChildComponents, null, children), mode === "default" && /*#__PURE__*/_react["default"].createElement(BottomContainer, null, /*#__PURE__*/_react["default"].createElement(BottomLinks, null, bottomLinks === null || bottomLinks === void 0 ? void 0 : bottomLinks.map(function (link, index) {
     return /*#__PURE__*/_react["default"].createElement("span", {
       key: "bottom".concat(index).concat(link.text)
     }, /*#__PURE__*/_react["default"].createElement(BottomLink, {
@@ -62,13 +69,19 @@ var DxcFooter = function DxcFooter(_ref) {
     }, link.text));
   })), /*#__PURE__*/_react["default"].createElement(Copyright, null, copyright || translatedLabels.footer.copyrightText(new Date().getFullYear())))));
 };
-var FooterContainer = _styledComponents["default"].footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  min-height: ", ";\n  margin-top: ", ";\n  background-color: ", ";\n\n  @media (min-width: ", "rem) {\n    padding: 24px 36px 24px 36px;\n  }\n  @media (max-width: ", "rem) {\n    padding: 20px;\n  }\n"])), function (props) {
-  return props.theme.height;
+var FooterContainer = _styledComponents["default"].footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  margin-top: ", ";\n  min-height: ", ";\n  width: 100%;\n  gap: ", ";\n  @media (min-width: ", "rem) {\n    padding: ", ";\n  }\n  @media (max-width: ", "rem) {\n    padding: 20px;\n    flex-direction: column;\n  }\n"])), function (props) {
+  return props.theme.backgroundColor;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.mode) === "default" ? "column" : "row";
 }, function (props) {
   return props.margin ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
-  return props.theme.backgroundColor;
-}, _variables.responsiveSizes.small, _variables.responsiveSizes.small);
+  return (props === null || props === void 0 ? void 0 : props.mode) === "default" ? props.theme.height : "40px";
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.mode) === "default" ? "0px" : "32px";
+}, _variables.responsiveSizes.small, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.mode) === "default" ? "24px 32px" : "12px 32px";
+}, _variables.responsiveSizes.small);
 var BottomContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n\n  @media (min-width: ", "rem) {\n    flex-direction: row;\n  }\n  @media (max-width: ", "rem) {\n    flex-direction: column;\n    align-items: center;\n  }\n\n  border-top: ", ";\n  margin-top: 16px;\n"])), _variables.responsiveSizes.small, _variables.responsiveSizes.small, function (props) {
   return "".concat(props.theme.bottomLinksDividerThickness, " ").concat(props.theme.bottomLinksDividerStyle, " ").concat(props.theme.bottomLinksDividerColor);
 });
@@ -87,12 +100,12 @@ var Copyright = _styledComponents["default"].div(_templateObject4 || (_templateO
   return props.theme.copyrightFontColor;
 }, _variables.responsiveSizes.small, _variables.responsiveSizes.small);
 var LogoContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"])), function (props) {
-  return props.theme.logoHeight;
+  return (props === null || props === void 0 ? void 0 : props.mode) === "default" ? props.theme.logoHeight : "16px";
 }, function (props) {
   return props.theme.logoWidth;
 });
 var LogoImg = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"])), function (props) {
-  return props.theme.logoHeight;
+  return (props === null || props === void 0 ? void 0 : props.mode) === "default" ? props.theme.logoHeight : "16px";
 }, function (props) {
   return props.theme.logoWidth;
 });

package/footer/Footer.stories.tsx

@@ -3,6 +3,8 @@ import DxcFooter from "./Footer";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { HalstackProvider } from "../HalstackContext";
+import DxcFlex from "../flex/Flex";
+import DxcTypography from "../typography/Typography";
 
 const social = [
   {
@@ -99,6 +101,11 @@ const opinionatedTheme = {
   },
 };
 
+const info = [
+  { label: "Example Label", text: "Example" },
+  { label: "Example Label", text: "Example" },
+];
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -121,6 +128,18 @@ export const Chromatic = () => (
         </div>
       </DxcFooter>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Reduced" theme="light" level={4} />
+      <DxcFooter mode="reduced">
+        <DxcFlex justifyContent="center" alignItems="center" gap={"1rem"}>
+          {info.map((tag, index) => (
+            <DxcTypography color="white" key={`tag${index}${tag.label}${tag.text}`} >
+              {tag.label}: {tag.text}
+            </DxcTypography>
+          ))}
+        </DxcFlex>
+      </DxcFooter>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />

package/footer/Icons.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
 export declare const dxcLogo: React.JSX.Element;
+export declare const dxcSmallLogo: React.JSX.Element;

package/footer/Icons.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dxcLogo = void 0;
+exports.dxcSmallLogo = exports.dxcLogo = void 0;
 var _react = _interopRequireDefault(require("react"));
 var dxcLogo = exports.dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   id: "g10",
@@ -69,4 +69,68 @@ var dxcLogo = exports.dxcLogo = /*#__PURE__*/_react["default"].createElement("sv
   d: "M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892",
   transform: "translate(-21.08 69.298)",
   fill: "#fff"
+})));
+var dxcSmallLogo = exports.dxcSmallLogo = /*#__PURE__*/_react["default"].createElement("svg", {
+  id: "g10",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "100%",
+  height: "16",
+  viewBox: "0 0 280.781 32"
+}, /*#__PURE__*/_react["default"].createElement("title", null, "DXC Logo"), /*#__PURE__*/_react["default"].createElement("g", {
+  id: "g12"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path14",
+  d: "M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5",
+  transform: "translate(-68.528 65.45)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path16",
+  d: "M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96",
+  transform: "translate(-77.56 65.45)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path18",
+  d: "M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813",
+  transform: "translate(-86.019 65.583)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path20",
+  d: "M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594",
+  transform: "translate(-95.903 65.45)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path22",
+  d: "M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058",
+  transform: "translate(-105.869 65.45)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path24",
+  d: "M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145",
+  transform: "translate(-115.631 65.583)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path26",
+  d: "M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786",
+  transform: "translate(-126.654 65.45)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path28",
+  d: "M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145",
+  transform: "translate(-135.016 65.583)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path30",
+  d: "M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5",
+  transform: "translate(-145.284 65.583)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path32",
+  d: "M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46",
+  transform: "translate(-154.162 65.45)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path34",
+  d: "M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892",
+  transform: "translate(-21.08 69.298)",
+  fill: "#fff"
 })));

package/footer/types.d.ts

@@ -54,5 +54,11 @@ type FooterPropsType = {
      * inside the custom area.
      */
     tabIndex?: number;
+    /**
+     * Determines the visual style and layout
+     * - "default": The default mode with full content and styling.
+     * - "reduced": A reduced mode with minimal content and styling.
+     */
+    mode?: "default" | "reduced";
 };
 export default FooterPropsType;

package/layout/ApplicationLayout.d.ts

@@ -7,7 +7,7 @@ declare const DxcApplicationLayout: {
         Dropdown: (props: import("../dropdown/types").default) => React.JSX.Element;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
+    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: import("../footer/types").default) => JSX.Element;
     SideNav: {
         ({ title, children }: import("../sidenav/types").default): JSX.Element;
         Section: ({ children }: import("../sidenav/types").SidenavSectionPropsType) => JSX.Element;

package/main.d.ts

@@ -22,7 +22,6 @@ import DxcChip from "./chip/Chip";
 import DxcApplicationLayout from "./layout/ApplicationLayout";
 import DxcToggleGroup from "./toggle-group/ToggleGroup";
 import DxcAccordionGroup from "./accordion-group/AccordionGroup";
-import DxcBadge from "./badge/Badge";
 import DxcTextInput from "./text-input/TextInput";
 import DxcPasswordInput from "./password-input/PasswordInput";
 import DxcDateInput from "./date-input/DateInput";
@@ -42,5 +41,7 @@ import DxcBulletedList from "./bulleted-list/BulletedList";
 import DxcGrid from "./grid/Grid";
 import DxcImage from "./image/Image";
 import DxcContainer from "./container/Container";
+import DxcBadge from "./badge/Badge";
+import DxcStatusLight from "./status-light/StatusLight";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
-export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, };
+export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, DxcBadge, DxcStatusLight, };

package/main.js

@@ -215,6 +215,12 @@ Object.defineProperty(exports, "DxcSpinner", {
     return _Spinner["default"];
   }
 });
+Object.defineProperty(exports, "DxcStatusLight", {
+  enumerable: true,
+  get: function get() {
+    return _StatusLight["default"];
+  }
+});
 Object.defineProperty(exports, "DxcSwitch", {
   enumerable: true,
   get: function get() {
@@ -311,7 +317,6 @@ var _Chip = _interopRequireDefault(require("./chip/Chip"));
 var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
 var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
 var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
-var _Badge = _interopRequireDefault(require("./badge/Badge"));
 var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
 var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
 var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
@@ -331,6 +336,8 @@ var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList
 var _Grid = _interopRequireDefault(require("./grid/Grid"));
 var _Image = _interopRequireDefault(require("./image/Image"));
 var _Container = _interopRequireDefault(require("./container/Container"));
+var _Badge = _interopRequireDefault(require("./badge/Badge"));
+var _StatusLight = _interopRequireDefault(require("./status-light/StatusLight"));
 var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/nav-tabs/NavTabs.js

@@ -85,7 +85,7 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
     value: contextValue
   }, children), /*#__PURE__*/_react["default"].createElement(Underline, null)));
 };
-var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background-color: ", ";\n  z-index: -1;\n"])), function (props) {
+var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background-color: ", ";\n"])), function (props) {
   return props.theme.dividerColor;
 });
 DxcNavTabs.Tab = _Tab["default"];