@dxc-technology/halstack-react 0.0.0-e201636 → 0.0.0-e26622f

package/layout/ApplicationLayout.js

@@ -13,8 +13,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _Header = _interopRequireDefault(require("../header/Header"));
@@ -29,13 +27,11 @@ var _variables = require("../common/variables.js");
 
 var _Icons = require("./Icons");
 
-var _uuid = require("uuid");
-
 var _SidenavContext = require("./SidenavContext");
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 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); }
 
@@ -43,24 +39,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var year = new Date().getFullYear();
 
-var Header = function Header(_ref) {
+var Main = function Main(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
 };
 
-var Main = function Main(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
-};
-
-var Footer = function Footer(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
-};
-
-var Sidenav = function Sidenav(_ref4) {
-  var childProps = (0, _extends2["default"])({}, _ref4);
-  return /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], childProps, childProps.children);
+var defaultHeader = function defaultHeader() {
+  return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+    underlined: true
+  });
 };
 
 var defaultFooter = function defaultFooter() {
@@ -89,47 +76,37 @@ var defaultFooter = function defaultFooter() {
   });
 };
 
-var defaultHeader = function defaultHeader() {
-  return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-    underlined: true
-  });
-};
-
 var childTypeExists = function childTypeExists(children, childType) {
   return children.find(function (child) {
     return (child === null || child === void 0 ? void 0 : child.type) === childType;
   });
 };
 
-var DxcApplicationLayout = function DxcApplicationLayout(_ref5) {
-  var _ref5$visibilityToggl = _ref5.visibilityToggleLabel,
-      visibilityToggleLabel = _ref5$visibilityToggl === void 0 ? "" : _ref5$visibilityToggl,
-      children = _ref5.children;
-
-  var _useState = (0, _react.useState)("appLayout-".concat((0, _uuid.v4)())),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      appLayoutId = _useState2[0];
+var DxcApplicationLayout = function DxcApplicationLayout(_ref2) {
+  var _ref2$visibilityToggl = _ref2.visibilityToggleLabel,
+      visibilityToggleLabel = _ref2$visibilityToggl === void 0 ? "" : _ref2$visibilityToggl,
+      header = _ref2.header,
+      sidenav = _ref2.sidenav,
+      footer = _ref2.footer,
+      children = _ref2.children;
 
-  var visibilityToggleLabelId = "label-".concat(appLayoutId);
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isSidenavVisibleResponsive = _useState2[0],
+      setIsSidenavVisibleResponsive = _useState2[1];
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isSidenavVisibleResponsive = _useState4[0],
-      setIsSidenavVisibleResponsive = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isResponsive = _useState6[0],
-      setIsResponsive = _useState6[1];
+      isResponsive = _useState4[0],
+      setIsResponsive = _useState4[1];
 
   var ref = (0, _react.useRef)(null);
   var translatedLabels = (0, _useTranslatedLabels["default"])();
 
   var childrenArray = _react["default"].Children.toArray(children);
 
-  var header = childTypeExists(childrenArray, _Header["default"]) || childTypeExists(childrenArray, Header) || defaultHeader();
-  var footer = childTypeExists(childrenArray, _Footer["default"]) || childTypeExists(childrenArray, Footer) || defaultFooter();
-  var sidenav = childTypeExists(childrenArray, Sidenav);
+  var headerContent = header || defaultHeader();
+  var footerContent = footer || defaultFooter();
   var main = childTypeExists(childrenArray, Main);
 
   var handleResize = function handleResize() {
@@ -142,58 +119,53 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref5) {
     });
   };
 
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     handleResize();
     window.addEventListener("resize", handleResize);
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, [setIsResponsive]);
+  }, []);
   (0, _react.useEffect)(function () {
     !isResponsive && setIsSidenavVisibleResponsive(false);
-  }, [isResponsive, setIsSidenavVisibleResponsive]);
+  }, [isResponsive]);
   return /*#__PURE__*/_react["default"].createElement(ApplicationLayoutContainer, {
     hasSidenav: sidenav ? true : false,
     isSidenavVisible: isSidenavVisibleResponsive,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, header), sidenav && isResponsive && /*#__PURE__*/_react["default"].createElement(VisibilityToggle, null, /*#__PURE__*/_react["default"].createElement(HamburgerTrigger, {
+  }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, headerContent), sidenav && isResponsive && /*#__PURE__*/_react["default"].createElement(VisibilityToggle, null, /*#__PURE__*/_react["default"].createElement(HamburgerTrigger, {
     onClick: handleSidenavVisibility,
-    "aria-labelledby": visibilityToggleLabel ? visibilityToggleLabelId : undefined,
     "aria-label": visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle,
     title: translatedLabels.applicationLayout.visibilityToggleTitle
-  }, _Icons.hamburgerIcon), visibilityToggleLabel && /*#__PURE__*/_react["default"].createElement(VisibilityToggleLabel, {
-    id: visibilityToggleLabelId
-  }, visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
+  }, _Icons.hamburgerIcon, visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
     value: setIsSidenavVisibleResponsive
-  }, sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /*#__PURE__*/_react["default"].createElement(SidenavContainer, null, sidenav)), /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(MainContentContainer, null, main), footer)));
+  }, sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /*#__PURE__*/_react["default"].createElement(SidenavContainer, null, sidenav)), /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(MainContentContainer, null, main), footerContent)));
 };
 
 var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 64px;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  @media (max-width: ", "rem) {\n    ", ";\n    ", "\n  }\n"])), _variables.responsiveSizes.medium, function (props) {
-  return props.hasSidenav && "top: 112px";
+  return props.hasSidenav && "top: 116px";
 }, function (props) {
   return props.isSidenavVisible && "overflow: hidden;";
 });
 
 var HeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 3;\n"])));
 
-var VisibilityToggle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 64px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  gap: 10px;\n  width: 100%;\n  background-color: #f2f2f2;\n  user-select: none;\n  z-index: 2;\n"])));
-
-var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  border: 0px solid transparent;\n  border-radius: 2px;\n  padding: 3px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  cursor: pointer;\n\n  :hover {\n    background-color: #e6e6e6;\n  }\n  :active {\n    background-color: #cccccc;\n  }\n  :focus,\n  :focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  & > svg {\n    height: 20px;\n    width: 20px;\n  }\n"])));
+var VisibilityToggle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 64px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 4px 16px;\n  width: 100%;\n  background-color: #f2f2f2;\n  user-select: none;\n  z-index: 2;\n"])));
 
-var VisibilityToggleLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: Open Sans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n"])));
+var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  border: 0px solid transparent;\n  border-radius: 2px;\n  padding: 12px 4px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  font-family: Open Sans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n  color: #000;\n  cursor: pointer;\n  :active {\n    background-color: #cccccc;\n  }\n  :focus,\n  :focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  & > svg {\n    height: 20px;\n    width: 20px;\n  }\n"])));
 
-var BodyContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n"])));
+var BodyContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n"])));
 
-var SidenavContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  position: sticky;\n  top: 64px;\n  display: flex;\n  height: calc(100vh - 64px);\n  z-index: 1;\n\n  @media (max-width: ", "rem) {\n    position: fixed;\n    top: 112px;\n  }\n"])), _variables.responsiveSizes.medium);
+var SidenavContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: sticky;\n  top: 64px;\n  display: flex;\n  height: calc(100vh - 64px);\n  z-index: 1;\n\n  @media (max-width: ", "rem) {\n    position: absolute;\n    top: 0px;\n    height: 100%;\n  }\n"])), _variables.responsiveSizes.medium);
 
-var MainContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
+var MainContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
 
-var MainContentContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n"])));
+var MainContentContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n"])));
 
-DxcApplicationLayout.Header = Header;
+DxcApplicationLayout.Header = _Header["default"];
 DxcApplicationLayout.Main = Main;
-DxcApplicationLayout.Footer = Footer;
-DxcApplicationLayout.SideNav = Sidenav;
+DxcApplicationLayout.Footer = _Footer["default"];
+DxcApplicationLayout.SideNav = _Sidenav["default"];
 DxcApplicationLayout.useResponsiveSidenavVisibility = _SidenavContext.useResponsiveSidenavVisibility;
 var _default = DxcApplicationLayout;
 exports["default"] = _default;

package/layout/ApplicationLayout.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import DxcApplicationLayout from "./ApplicationLayout";
-import DxcSidenav from "../sidenav/Sidenav";
 import Title from "../../.storybook/components/Title";
 import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 
@@ -30,15 +29,25 @@ export const DefaultApplicationLayout = () => (
 
 export const ApplicationLayoutWithDefaultSidenav = () => (
   <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with sidenav</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
+    <DxcApplicationLayout
+      sidenav={
+        <DxcApplicationLayout.SideNav
+          title={
+            <DxcApplicationLayout.SideNav.Title>
+              Application layout with push sidenav
+            </DxcApplicationLayout.SideNav.Title>
+          }
+        >
+          <DxcApplicationLayout.SideNav.Section>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+          </DxcApplicationLayout.SideNav.Section>
+        </DxcApplicationLayout.SideNav>
+      }
+    >
       <DxcApplicationLayout.Main>
         <p>Main Content</p>
         <p>Main Content</p>
@@ -51,15 +60,26 @@ export const ApplicationLayoutWithDefaultSidenav = () => (
 
 export const ApplicationLayoutWithResponsiveSidenav = () => (
   <>
-    <DxcApplicationLayout visibilityToggleLabel="Example">
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
+    <DxcApplicationLayout
+      visibilityToggleLabel="Example"
+      sidenav={
+        <DxcApplicationLayout.SideNav
+          title={
+            <DxcApplicationLayout.SideNav.Title>
+              Application layout with push sidenav
+            </DxcApplicationLayout.SideNav.Title>
+          }
+        >
+          <DxcApplicationLayout.SideNav.Section>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+          </DxcApplicationLayout.SideNav.Section>
+        </DxcApplicationLayout.SideNav>
+      }
+    >
       <DxcApplicationLayout.Main>
         <p>Main Content</p>
         <p>Main Content</p>
@@ -74,23 +94,31 @@ ApplicationLayoutWithResponsiveSidenav.parameters = {
   viewport: {
     defaultViewport: "pixel",
   },
+  chromatic: { viewports: [540] },
 };
 
 export const ApplicationLayoutWithCustomHeader = () => (
   <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.Header>
-        {" "}
-        <p>Custom Header</p>{" "}
-      </DxcApplicationLayout.Header>
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with custom header</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
+    <DxcApplicationLayout
+      header={<p>Custom Header</p>}
+      sidenav={
+        <DxcApplicationLayout.SideNav
+          title={
+            <DxcApplicationLayout.SideNav.Title>
+              Application layout with push sidenav
+            </DxcApplicationLayout.SideNav.Title>
+          }
+        >
+          <DxcApplicationLayout.SideNav.Section>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+          </DxcApplicationLayout.SideNav.Section>
+        </DxcApplicationLayout.SideNav>
+      }
+    >
       <DxcApplicationLayout.Main>
         <p>Main Content</p>
         <p>Main Content</p>
@@ -103,24 +131,32 @@ export const ApplicationLayoutWithCustomHeader = () => (
 
 export const ApplicationLayoutWithCustomFooter = () => (
   <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with custom footer</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
+    <DxcApplicationLayout
+      footer={<p>Custom Footer</p>}
+      sidenav={
+        <DxcApplicationLayout.SideNav
+          title={
+            <DxcApplicationLayout.SideNav.Title>
+              Application layout with push sidenav
+            </DxcApplicationLayout.SideNav.Title>
+          }
+        >
+          <DxcApplicationLayout.SideNav.Section>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+          </DxcApplicationLayout.SideNav.Section>
+        </DxcApplicationLayout.SideNav>
+      }
+    >
       <DxcApplicationLayout.Main>
         <p>Main Content</p>
         <p>Main Content</p>
         <p>Main Content</p>
         <p>Main Content</p>
       </DxcApplicationLayout.Main>
-      <DxcApplicationLayout.Footer>
-        <p>Custom Footer</p>
-      </DxcApplicationLayout.Footer>
     </DxcApplicationLayout>
   </>
 );

package/layout/types.d.ts

@@ -1,42 +1,20 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type ChildrenType = AppLayoutHeaderPropsType | AppLayoutMainPropsType | AppLayoutFooterPropsType | AppLayoutSidenavPropsType;
-export declare type AppLayoutHeaderPropsType = {
-    /**
-     * Everything between this tags will be displayed as a header, at the top of the screen.
-     * This is optional and if it is not specified, the DxcHeader will be shown by default.
-     */
-    children?: React.ReactNode;
-};
+declare type ChildrenType = AppLayoutMainPropsType | AppLayoutSidenavPropsType;
 export declare type AppLayoutMainPropsType = {
     /**
      * Everything between the tags will be displayed as the content of the main part of the application.
      */
     children: React.ReactNode;
 };
-export declare type AppLayoutFooterPropsType = {
-    /**
-     * Everything between the tags will be displayed as a footer, at the bottom of the screen.
-     * This is optional and if it is not specified, the DxcFooter will be shown by default.
-     */
-    children?: React.ReactNode;
-};
 export declare type AppLayoutSidenavPropsType = {
     /**
-     * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
+     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
      */
-    padding?: Space | Padding;
+    children: React.ReactNode;
     /**
-     * The area inside the sidenav. This area can be used to render custom content.
+     * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
      */
-    children: React.ReactNode;
+    title?: React.ReactNode;
 };
 declare type AppLayoutPropsType = {
     /**
@@ -44,6 +22,18 @@ declare type AppLayoutPropsType = {
      * visibility of the sidenav.
      */
     visibilityToggleLabel?: string;
+    /**
+     * Header content.
+     */
+    header?: React.ReactNode;
+    /**
+     * Sidenav content
+     */
+    sidenav?: React.ReactNode;
+    /**
+     * Footer content
+     */
+    footer?: React.ReactNode;
     /**
      * The area inside the sidenav. This area can be used to render custom content.
      */

package/link/Link.js

@@ -82,7 +82,7 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   })));
 });
 
-var StyledLink = _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  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  width: fit-content;\n\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) {
+var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: baseline;\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\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  width: fit-content;\n\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) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";

package/link/Link.stories.tsx

@@ -9,7 +9,7 @@ export default {
 };
 
 const icon = (
-  <svg viewBox="0 0 24 24" enable-background="new 0 0 24 24" fill="currentColor">
+  <svg viewBox="0 0 24 24" enableBackground="new 0 0 24 24" fill="currentColor">
     <g id="Bounding_Box">
       <rect fill="none" width="24" height="24" />
     </g>
@@ -68,11 +68,18 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Long text with hover" theme="light" level={4} />
-      Lorem <DxcLink href="https://www.google.com">Test</DxcLink> ipsum dolor sit amet, consectetur adipiscing elit, sed
-      do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-      officia deserunt mollit anim id est laborum.
+      Lorem{" "}
+      <DxcLink href="https://www.google.com" icon={icon}>
+        Test
+      </DxcLink>{" "}
+      ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit{" "}
+      <DxcLink href="https://www.google.com" icon={icon} iconPosition="after">
+        Test
+      </DxcLink>{" "}
+      anim id est laborum.
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Long text with focus" theme="light" level={4} />

package/link/types.d.ts

@@ -6,7 +6,7 @@ export declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 export declare type LinkProps = {
     /**
      * If true, the color is inherited from parent.

package/main.d.ts

@@ -5,8 +5,6 @@ import DxcCard from "./card/Card";
 import DxcCheckbox from "./checkbox/Checkbox";
 import DxcDialog from "./dialog/Dialog";
 import DxcDropdown from "./dropdown/Dropdown";
-import DxcFooter from "./footer/Footer";
-import DxcHeader from "./header/Header";
 import DxcSlider from "./slider/Slider";
 import DxcSwitch from "./switch/Switch";
 import DxcTabs from "./tabs/Tabs";
@@ -16,7 +14,6 @@ import DxcTable from "./table/Table";
 import DxcBox from "./box/Box";
 import DxcTag from "./tag/Tag";
 import DxcPaginator from "./paginator/Paginator";
-import DxcSidenav from "./sidenav/Sidenav";
 import DxcWizard from "./wizard/Wizard";
 import DxcLink from "./link/Link";
 import DxcHeading from "./heading/Heading";
@@ -33,15 +30,15 @@ import DxcNumberInput from "./number-input/NumberInput";
 import DxcTextarea from "./textarea/Textarea";
 import DxcSelect from "./select/Select";
 import DxcFileInput from "./file-input/FileInput";
-import DxcStack from "./stack/Stack";
-import DxcRow from "./row/Row";
-import DxcText from "./text/Text";
-import DxcList from "./list/List";
 import DxcRadioGroup from "./radio-group/RadioGroup";
 import DxcBleed from "./bleed/Bleed";
 import DxcInset from "./inset/Inset";
 import DxcQuickNav from "./quick-nav/QuickNav";
 import DxcNavTabs from "./tabs-nav/NavTabs";
+import DxcFlex from "./flex/Flex";
+import DxcTypography from "./typography/Typography";
+import DxcParagraph from "./paragraph/Paragraph";
+import DxcBulletedList from "./bulleted-list/BulletedList";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
 import { BackgroundColorProvider } from "./BackgroundColorContext";
-export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, };
+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, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, };