@dxc-technology/halstack-react 0.0.0-c709eea → 0.0.0-c713b1b

package/layout/ApplicationLayout.js

@@ -21,13 +21,11 @@ var _main = require("../main");
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _variables = require("../common/variables.js");
 
 var _Icons = require("./Icons");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
@@ -55,23 +53,14 @@ var Footer = function Footer(_ref3) {
 };
 
 var SideNav = function SideNav(props) {
-  var displayArrow = props.displayArrow,
-      mode = props.mode,
+  var _props$displayArrow = props.displayArrow,
+      displayArrow = _props$displayArrow === void 0 ? true : _props$displayArrow,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? "overlay" : _props$mode,
       childProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_main.DxcSidenav, childProps, childProps.children);
 };
 
-SideNav.propTypes = {
-  mode: _propTypes["default"].oneOf(["overlay", "push", ""]),
-  displayArrow: _propTypes["default"].bool,
-  padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  })])
-};
-
 var defaultFooter = function defaultFooter() {
   return /*#__PURE__*/_react["default"].createElement(_main.DxcFooter, {
     copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
@@ -120,7 +109,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
       isSideNavVisible = _useState2[0],
       setIsSideNavVisible = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       isResponsive = _useState4[0],
       setIsResponsive = _useState4[1];
@@ -147,27 +136,20 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
     }));
   };
 
-  var handleResize = function handleResize(width) {
-    if (width) {
-      if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
-      setIsSideNavVisible(true);
-    }
-  };
-
-  var handleEventListener = function handleEventListener() {
-    handleResize(ref.current.offsetWidth);
+  var handleResize = function handleResize() {
+    setIsResponsive(window.matchMedia("(max-width: ".concat(_variables.responsiveSizes.medium, "rem)")).matches);
+    setIsSideNavVisible(true);
   };
 
   (0, _react.useEffect)(function () {
     if (ref.current) {
-      window.addEventListener("resize", handleEventListener);
-      handleResize(ref.current.offsetWidth);
+      window.addEventListener("resize", handleResize);
     }
 
     return function () {
-      window.removeEventListener("resize", handleEventListener);
+      window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, [ref.current]);
 
   var handleSidenav = function handleSidenav() {
     setIsSideNavVisible(!isSideNavVisible);
@@ -180,6 +162,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
   }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, header), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(SideNavArrowContainer, {
     isSideNavVisible: isSideNavVisible
   }, sideNav, /*#__PURE__*/_react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && /*#__PURE__*/_react["default"].createElement(ArrowTrigger, {
+    role: "button",
     tabIndex: 0,
     onClick: handleSidenav,
     isSideNavVisible: isSideNavVisible
@@ -223,7 +206,7 @@ var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8 ||
 
 var ArrowContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  height: calc(100vh - 64px);\n  left: 279px;\n"])));
 
-var ArrowTrigger = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: sticky;\n  top: 45vh;\n  width: 42px;\n  min-height: 42px;\n  background-color: ", ";\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.4s ease-in-out;\n  z-index: 1250;\n  cursor: pointer;\n  & > svg {\n    fill: ", ";\n  }\n"])), function (props) {
+var ArrowTrigger = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: sticky;\n  top: 45vh;\n  width: 42px;\n  min-height: 42px;\n  background-color: ", ";\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.4s ease-in-out;\n  z-index: 1250;\n  cursor: pointer;\n  & > svg {\n    fill: ", ";\n  }\n  :focus {\n    outline: #0095ff auto 1px;\n  }\n"])), function (props) {
   return "".concat(props.theme.arrowContainerColor);
 }, function (props) {
   return props.isSideNavVisible ? "rotate(-180deg)" : "rotate(0deg)";

package/layout/ApplicationLayout.stories.tsx

@@ -0,0 +1,171 @@
+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';
+import { userEvent, within, waitFor } from "@storybook/testing-library";
+
+export default {
+  title: "Application Layout ",
+  component: DxcApplicationLayout,
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    }
+  }
+};
+
+export const DefaultApplicationLayout = () => (
+  <>
+    <DxcApplicationLayout>
+      <DxcApplicationLayout.Main>
+        <Title title="Default application layout" theme="light" level={4} />
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+export const ApplicationLayoutWithPushSidenav = () => (
+  <>
+    <DxcApplicationLayout>
+      <DxcApplicationLayout.SideNav mode="push">
+        <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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+export const ApplicationLayoutWithArrowSidenav = () => (
+  <>
+    <DxcApplicationLayout>
+      <DxcApplicationLayout.SideNav mode="overlay" displayArrow>
+        <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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+export const ApplicationLayoutWithResponsiveSidenav = () => (
+  <>
+    <DxcApplicationLayout>
+      <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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+ApplicationLayoutWithResponsiveSidenav.parameters = {
+  viewport: {
+    defaultViewport: 'pixel',
+  },
+};
+
+export const ApplicationLayoutWithCustomHeader = () => (
+  <>
+    <DxcApplicationLayout>
+      <DxcApplicationLayout.Header> <p>Custom Header</p> </DxcApplicationLayout.Header>
+      <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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+export const ApplicationLayoutWithCustomFooter = () => (
+  <>
+    <DxcApplicationLayout>
+      <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.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>
+  </>
+);
+
+export const ApplicationLayoutWithClosingSidenav = ApplicationLayoutWithArrowSidenav.bind({});
+ApplicationLayoutWithClosingSidenav.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const arrow = canvas.getByRole("button");
+  await userEvent.click(arrow);
+};

package/layout/types.d.ts

@@ -0,0 +1,57 @@
+/// <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;
+};
+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.
+     */
+    padding?: Space | Padding;
+    /**
+     * The area inside the sidenav. This area can be used to render custom content.
+     */
+    children: React.ReactNode;
+    /**
+     * If false, the arrow button is hidden.
+     * In lower resolutions the arrow will be always displayed.
+     */
+    displayArrow?: boolean;
+    /**
+     * Default action over the content of the page, overlay the content or push to the right ('push' | 'overlay').
+     * In lower resolutions the mode will always be overlay.
+     */
+    mode: "push" | "overlay";
+};
+declare type AppLayoutPropsType = {
+    /**
+     * The area inside the sidenav. This area can be used to render custom content.
+     */
+    children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
+};
+export default AppLayoutPropsType;

package/layout/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/link/Link.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { LinkProps } from "./types";
+declare const DxcLink: ({ inheritColor, disabled, icon, iconPosition, href, newWindow, onClick, margin, tabIndex, children, }: LinkProps) => JSX.Element;
+export default DxcLink;

package/link/Link.js

@@ -9,21 +9,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
@@ -31,57 +27,62 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var DxcLink = function DxcLink(_ref) {
-  var _ref$inheritColor = _ref.inheritColor,
-      inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      iconSrc = _ref.iconSrc,
+var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var iconPosition = _ref.iconPosition,
       icon = _ref.icon,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
-      _ref$href = _ref.href,
-      href = _ref$href === void 0 ? "" : _ref$href,
-      _ref$newWindow = _ref.newWindow,
-      newWindow = _ref$newWindow === void 0 ? false : _ref$newWindow,
-      onClick = _ref.onClick,
-      _ref$text = _ref.text,
-      text = _ref$text === void 0 ? "" : _ref$text,
-      margin = _ref.margin,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var colorsTheme = (0, _useTheme["default"])();
-
-  var linkContent = /*#__PURE__*/_react["default"].createElement(LinkText, {
-    iconPosition: iconPosition
-  }, text, icon ? /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(LinkText, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
     iconPosition: iconPosition
-  }, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : iconSrc && /*#__PURE__*/_react["default"].createElement(LinkIcon, {
-    src: iconSrc,
-    iconPosition: iconPosition
-  }));
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
+    src: icon
+  }) : icon), iconPosition === "before" && children);
+});
 
+var DxcLink = function DxcLink(_ref2) {
+  var _ref2$inheritColor = _ref2.inheritColor,
+      inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      icon = _ref2.icon,
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
+      _ref2$href = _ref2.href,
+      href = _ref2$href === void 0 ? "" : _ref2$href,
+      _ref2$newWindow = _ref2.newWindow,
+      newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
+      onClick = _ref2.onClick,
+      margin = _ref2.margin,
+      _ref2$tabIndex = _ref2.tabIndex,
+      tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
+      children = _ref2.children;
+  var colorsTheme = (0, _useTheme["default"])();
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.link
-  }, /*#__PURE__*/_react["default"].createElement(DxcLinkContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(LinkContainer, {
     margin: margin
-  }, onClick ? /*#__PURE__*/_react["default"].createElement(StyledButton, {
-    type: "button",
+  }, typeof children === "string" && (href || onClick) ? /*#__PURE__*/_react["default"].createElement(StyledLink, {
+    as: href ? "a" : "button",
+    tabIndex: tabIndex,
     onClick: !disabled && onClick,
-    margin: margin,
+    href: !disabled && href ? href : undefined,
+    target: href ? newWindow ? "_blank" : "_self" : undefined,
     disabled: disabled,
     inheritColor: inheritColor
-  }, linkContent) : /*#__PURE__*/_react["default"].createElement(StyledLink, {
-    tabIndex: tabIndex,
-    href: !disabled && href,
-    target: newWindow ? "_blank" : "_self",
-    margin: margin,
+  }, /*#__PURE__*/_react["default"].createElement(LinkContent, {
+    iconPosition: iconPosition,
+    icon: icon,
+    children: children
+  })) : /*#__PURE__*/_react["default"].createElement(CustomLinkContainer, {
     disabled: disabled,
     inheritColor: inheritColor
-  }, linkContent)));
+  }, /*#__PURE__*/_react["default"].createElement(LinkContent, {
+    iconPosition: iconPosition,
+    icon: icon,
+    children: children
+  }))));
 };
 
-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) {
+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) {
   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] : "";
@@ -91,16 +92,26 @@ var DxcLinkContainer = _styledComponents["default"].div(_templateObject || (_tem
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
+}, function (props) {
+  return props.theme.fontSize;
+}, function (props) {
+  return props.theme.fontWeight;
+}, function (props) {
+  return props.theme.fontStyle;
+}, function (props) {
+  return props.theme.fontFamily;
 });
 
-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    outline-color: ", ";\n    outline-width: 2px;\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+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) {
+  return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n     border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
+}, function (props) {
+  return props.disabled && "cursor: default;";
+}, function (props) {
   return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
 }, function (props) {
   return props.disabled ? "pointer-events: none;" : "";
 }, function (props) {
-  return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n     border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
-}, function (props) {
-  return !props.inheritColor ? props.theme.visitedFontColor : "";
+  return !props.inheritColor && !props.disabled ? props.theme.visitedFontColor : "";
 }, function (props) {
   return "color: ".concat(props.theme.visitedFontColor, ";\n         border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
 }, function (props) {
@@ -113,47 +124,33 @@ var StyledLink = _styledComponents["default"].a(_templateObject2 || (_templateOb
   return "color: ".concat(props.theme.activeFontColor, " !important;\n       border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
 });
 
-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    outline-color: ", ";\n    outline-width: 2px;\n    outline-offset: 1px;\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+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) {
   return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n     border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
 }, function (props) {
   return props.disabled && "cursor: default;";
+}, function (props) {
+  return props.disabled ? "pointer-events: none;" : "";
 }, function (props) {
   return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
 }, function (props) {
-  return props.disabled ? "pointer-events: none;" : "";
+  return props.theme.hoverFontColor;
 }, function (props) {
-  return "color: ".concat(props.theme.hoverFontColor, ";\n       border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n       cursor: pointer;");
+  return "border-bottom-color: ".concat(props.theme.hoverUnderlineColor, ";\n       cursor: pointer;");
 }, function (props) {
   return props.theme.focusColor;
 }, function (props) {
   return props.disabled && "outline: none";
 }, function (props) {
-  return "color: ".concat(props.theme.activeFontColor, " !important;\n       border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
-});
-
-var LinkText = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  font-family: ", ";\n  display: inline-flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: center;\n  max-width: 100%;\n"])), function (props) {
-  return props.theme.fontSize;
-}, function (props) {
-  return props.theme.fontWeight;
-}, function (props) {
-  return props.theme.fontStyle;
-}, function (props) {
-  return props.theme.fontFamily;
+  return props.theme.activeFontColor;
 }, function (props) {
-  return props.iconPosition === "after" ? "row" : "row-reverse";
-}, function (props) {
-  return props.iconPosition === "after" ? "flex-start" : "flex-end";
+  return "border-bottom-color: ".concat(props.theme.activeUnderlineColor, " !important;");
 });
 
-var LinkIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", ";\n"])), function (props) {
-  return props.theme.iconSize;
-}, function (props) {
-  return props.theme.iconSize;
-}, function (props) {
-  return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
-});
+var LinkText = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: baseline;\n  max-width: 100%;\n"])));
+
+var LinkIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])([""])));
 
-var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", ";\n  overflow: hidden;\n  \n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+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) {
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;
@@ -161,23 +158,5 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_t
   return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
 });
 
-DxcLink.propTypes = {
-  inheritColor: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-  iconSrc: _propTypes["default"].string,
-  iconPosition: _propTypes["default"].oneOf(["after", "before"]),
-  href: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  newWindow: _propTypes["default"].bool,
-  text: _propTypes["default"].string,
-  tabIndex: _propTypes["default"].number
-};
 var _default = DxcLink;
 exports["default"] = _default;