Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

bugfix/COR-1069-inconsistent-link-hover-styles #4507

Closed
wants to merge 1 commit into from
Closed

bugfix/COR-1069-inconsistent-link-hover-styles #4507

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 33 additions & 87 deletions packages/app/src/components/link-with-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,127 +9,74 @@ import { Box } from './base';
import { Anchor } from './typography';

interface LinkWithIconProps {
href: UrlObject | string;
children: string;
href: UrlObject | string;
icon: ReactNode;
iconPlacement?: 'left' | 'right';
underline?: boolean;
fontWeight?: 'normal' | 'bold';
iconPlacement?: 'left' | 'right';
showAsButton?: boolean;
underline?: boolean;
}

interface IconProps {
icon: ReactNode;
isSingleWord?: boolean;
width: number;
height: number;
mr?: number | string;
}

interface LinkContainerProps {
showAsButton: boolean;
}

export const LinkWithIcon = ({
href,
icon,
children,
iconPlacement = 'left',
fontWeight,
showAsButton = false,
}: LinkWithIconProps) => {
const words = children.split(' ');
const firstWords = `${words.slice(0, -1).join(' ')} `;

export const LinkWithIcon = ({ href, icon, children, iconPlacement = 'left', fontWeight, showAsButton = false }: LinkWithIconProps) => {
return (
<LinkContainer showAsButton={showAsButton}>
<StyledLinkContainer showAsButton={showAsButton}>
<Link href={href} passHref locale={false}>
<Anchor
underline="hover"
css={css({
fontWeight,
})}
>
{iconPlacement === 'right' && (
<>
{!words.length ? children : firstWords}
<IconWrapper>
{words[words.length - 1]}
<IconSmall icon={icon} width={11} height={10} />
</IconWrapper>
Copy link
Contributor Author

@VWSCoronaDashboard26 VWSCoronaDashboard26 Nov 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps someone could elaborate on this functionality and why it was written like this initially? I do not understand why we would

  • split all words only to correctly place the icon after the last word?
  • adjust positioning of the icon based on whether there is only a single word or not?
  • only use this logic when the iconPlacement evaluates to right, and not also left?

I removed all this logic as I personally did not see any differences between the before and after versions of this component, and I feel my new solution is more straightforward and simple.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I cannot think of why this would have been done this way in the past 🤷

</>
)}
{iconPlacement === 'left' && (
<>
<IconSmall icon={icon} width={11} height={10} mr={1} />
{children}
</>
)}
<Anchor underline="hover" fontWeight={fontWeight}>
{iconPlacement === 'left' && <IconSmall icon={icon} width={11} height={10} />}

{children}

{iconPlacement === 'right' && <IconSmall icon={icon} width={11} height={10} />}
</Anchor>
</Link>
</LinkContainer>
</StyledLinkContainer>
);
};

export const HeadingLinkWithIcon = ({
href,
icon,
children,
underline,
}: LinkWithIconProps) => {
const words = children.split(' ');
const firstWords = `${words.slice(0, -1).join(' ')} `;
const isSingleWord = words.length === 1;

export const HeadingLinkWithIcon = ({ href, icon, children, iconPlacement = 'left', underline }: LinkWithIconProps) => {
return (
<Box display="inline-block" position="relative">
<Link href={href} passHref locale={false}>
<Anchor variant="h5" color="blue8" hoverColor="blue8">
<Box
paddingRight={isSingleWord ? `calc(0.5rem + 18px)` : ''}
css={css({
'&:hover': {
textDecoration: underline ? 'underline' : undefined,
},
})}
>
{!words.length ? children : firstWords}
<IconWrapper>
{words[words.length - 1]}
<IconLarge
icon={icon}
isSingleWord={isSingleWord}
width={16}
height={13}
/>
</IconWrapper>
{iconPlacement === 'left' && <IconLarge icon={icon} width={16} height={13} />}

{children}

{iconPlacement === 'right' && <IconLarge icon={icon} width={16} height={13} />}
</Box>
</Anchor>
</Link>
</Box>
);
};

const IconSmall = ({ icon, width, height, mr }: IconProps) => {
return (
<span css={css({ marginRight: mr, svg: { height, width, mx: '3px' } })}>
{icon}
</span>
);
interface IconProps {
icon: ReactNode;
width: number;
height: number;
}

const IconSmall = ({ icon, width, height }: IconProps) => {
return <span css={css({ svg: { height, width, marginX: '3px' } })}>{icon}</span>;
};

const IconLarge = ({ icon, isSingleWord, width, height }: IconProps) => {
const IconLarge = ({ icon, width, height }: IconProps) => {
return (
<span
css={css({
svg: {
width,
height,
marginLeft: 2,
position: isSingleWord ? 'absolute' : 'relative',
marginLeft: space[2],
minHeight: '100%',
right: 0,
top: 0,
},
})}
>
Expand All @@ -138,17 +85,16 @@ const IconLarge = ({ icon, isSingleWord, width, height }: IconProps) => {
);
};

const IconWrapper = styled.span`
display: inline-block;
text-decoration: inherit;
`;
interface StyledLinkContainerProps {
showAsButton: boolean;
}

const LinkContainer = styled.span`
const StyledLinkContainer = styled.span`
display: inline-block;
a {
color: ${colors.blue8};

${({ showAsButton }: LinkContainerProps) =>
${({ showAsButton }: StyledLinkContainerProps) =>
showAsButton &&
`
background-color: ${colors.blue1};
Expand Down