diff --git a/apps/website/screens/components/link/specs/LinkSpecsPage.tsx b/apps/website/screens/components/link/specs/LinkSpecsPage.tsx
index 130cef332..cd9807918 100644
--- a/apps/website/screens/components/link/specs/LinkSpecsPage.tsx
+++ b/apps/website/screens/components/link/specs/LinkSpecsPage.tsx
@@ -6,7 +6,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Image from "@/common/Image";
import Code from "@/common/Code";
import linkSpecs from "./images/link_specs.png";
-import linkStatesNoIcon from "./images/link_states_noIcon.png";
+import linkStates from "./images/link_states.png";
const sections = [
{
@@ -26,7 +26,7 @@ const sections = [
visited and disabled.
>
),
diff --git a/apps/website/screens/components/link/specs/images/link_specs.png b/apps/website/screens/components/link/specs/images/link_specs.png
index 508da4e6f..a243ef924 100644
Binary files a/apps/website/screens/components/link/specs/images/link_specs.png and b/apps/website/screens/components/link/specs/images/link_specs.png differ
diff --git a/apps/website/screens/components/link/specs/images/link_states.png b/apps/website/screens/components/link/specs/images/link_states.png
new file mode 100644
index 000000000..6e9c3e092
Binary files /dev/null and b/apps/website/screens/components/link/specs/images/link_states.png differ
diff --git a/apps/website/screens/components/link/specs/images/link_states_noIcon.png b/apps/website/screens/components/link/specs/images/link_states_noIcon.png
deleted file mode 100644
index ffd7b7e82..000000000
Binary files a/apps/website/screens/components/link/specs/images/link_states_noIcon.png and /dev/null differ
diff --git a/packages/lib/src/link/Link.tsx b/packages/lib/src/link/Link.tsx
index 0e553490d..396a1b0e9 100644
--- a/packages/lib/src/link/Link.tsx
+++ b/packages/lib/src/link/Link.tsx
@@ -6,8 +6,8 @@ import useTheme from "../useTheme";
import { LinkProps } from "./types";
const LinkContent = memo(
- ({ iconPosition, icon, children }: LinkProps): JSX.Element => (
- <>
+ ({ iconPosition, icon, inheritColor, children }: LinkProps): JSX.Element => (
+
{iconPosition === "after" && children}
{icon && (
@@ -15,7 +15,7 @@ const LinkContent = memo(
)}
{iconPosition === "before" && children}
- >
+
)
);
@@ -52,7 +52,7 @@ const DxcLink = forwardRef(
ref={ref}
{...otherProps}
>
-
+
);
@@ -77,45 +77,31 @@ const StyledLink = styled.div<{
props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
background: none;
border: none;
- padding: 0;
- cursor: pointer;
+ border-radius: 4px;
+ width: fit-content;
+ padding: 0 2px;
+ ${(props) => `padding-bottom: ${props.theme.underlineSpacing};`}
font-size: ${(props) => props.theme.fontSize};
font-weight: ${(props) => props.theme.fontWeight};
font-style: ${(props) => props.theme.fontStyle};
font-family: ${(props) => props.theme.fontFamily};
- text-decoration-color: transparent;
- width: fit-content;
- ${(props) =>
- `padding-bottom: ${props.theme.underlineSpacing};
- border-bottom: ${props.theme.underlineThickness} ${props.theme.underlineStyle} transparent;`}
- ${(props) => props.disabled && "cursor: default;"}
+ text-decoration: none;
color: ${(props) =>
props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledFontColor};
+ ${(props) => (props.disabled ? "cursor: default;" : "cursor: pointer;")}
${(props) => (props.disabled ? "pointer-events: none;" : "")}
+
&:visited {
color: ${(props) => (!props.inheritColor && !props.disabled ? props.theme.visitedFontColor : "")};
- &:hover {
- ${(props) =>
- `color: ${props.theme.visitedFontColor};
- border-bottom-color: ${props.theme.visitedUnderlineColor};`}
+ & > span:hover {
+ ${(props) => `color: ${props.theme.visitedFontColor};
+ border-bottom-color: ${props.theme.visitedUnderlineColor};`}
}
}
- &:hover {
- ${(props) =>
- `color: ${props.theme.hoverFontColor};
- border-bottom-color: ${props.theme.hoverUnderlineColor};
- cursor: pointer;`}
- }
&:focus {
- border-radius: 2px;
outline: 2px solid ${(props) => props.theme.focusColor};
${(props) => props.disabled && "outline: none"}
}
- &:active {
- ${(props) =>
- `color: ${props.theme.activeFontColor} !important;
- border-bottom-color: ${props.theme.activeUnderlineColor} !important;`}
- }
`;
const LinkIconContainer = styled.div<{ iconPosition: LinkProps["iconPosition"] }>`
@@ -132,4 +118,25 @@ const LinkIconContainer = styled.div<{ iconPosition: LinkProps["iconPosition"] }
}
`;
+const LinkContainer = styled.span<{
+ inheritColor: LinkProps["inheritColor"];
+}>`
+ display: inline-flex;
+ margin: 0;
+ padding: 0;
+ ${(props) => `border-bottom: ${props.theme.underlineThickness} ${props.theme.underlineStyle};`}
+ border-bottom-color: transparent;
+
+ &:hover {
+ ${(props) =>
+ `color: ${props.theme.hoverFontColor};
+ cursor: pointer;
+ border-bottom-color: ${props.theme.hoverUnderlineColor};`}
+ }
+ &:active {
+ ${(props) => `color: ${props.theme.activeFontColor} !important;
+ border-bottom-color: ${props.theme.activeUnderlineColor} !important;`}
+ }
+`;
+
export default DxcLink;