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 #4516

Merged
merged 1 commit into from
Nov 30, 2022
Merged

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

Show file tree
Hide file tree
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
108 changes: 57 additions & 51 deletions packages/app/src/components/typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Color } from '@corona-dashboard/common';
import { Color, colors } from '@corona-dashboard/common';
import css, { CSSProperties } from '@styled-system/css';
import styled, { DefaultTheme } from 'styled-components';
import { Preset, preset } from '~/style/preset';
Expand All @@ -13,20 +13,7 @@ export interface TextProps {
ariaLabel?: string;
}

export interface AnchorProps extends TextProps {
underline?: boolean | 'hover';
hoverColor?: TextProps['color'];
display?: string;
width?: string | number;
}

export interface HeadingProps extends TextProps {
level: HeadingLevel;
}

export type HeadingLevel = 1 | 2 | 3 | 4 | 5;

function textStyle(props: TextProps & { as?: string }) {
export const textStyle = (props: TextProps & { as?: string }) => {
return css({
...(props.as === 'button'
? {
Expand All @@ -40,57 +27,76 @@ function textStyle(props: TextProps & { as?: string }) {
: undefined),

...(props.variant ? preset.typography[props.variant] : undefined),

...(props.fontWeight ? { fontWeight: props.fontWeight } : undefined),
...(props.color ? { color: props.color } : undefined),
...(props.textTransform
? { textTransform: props.textTransform }
: undefined),
...(props.textTransform ? { textTransform: props.textTransform } : undefined),
...(props.textAlign ? { textAlign: props.textAlign } : undefined),
...(props.hyphens ? { hyphens: props.hyphens } : undefined),
});
}
};

export const Text = styled.p<TextProps>(textStyle);

export const InlineText = styled.span<TextProps>(textStyle);

export const BoldText = styled.strong<TextProps>(textStyle);

export const Anchor = styled.a<AnchorProps>(
textStyle,
(props) =>
props.underline &&
css({
textDecoration: props.underline === 'hover' ? 'none' : 'underline',
'&:hover, &:focus': {
span: {
textDecoration: 'underline',
},
},
}),
(props) =>
props.hoverColor &&
css({
'&:hover,&:focus': { color: 'blue8' },
}),
(props) =>
props.display &&
css({
display: props.display,
})
);
export interface AnchorProps extends TextProps {
underline?: boolean | 'hover';
hoverColor?: TextProps['color'];
display?: string;
width?: string | number;
}

export const Anchor = styled.a<AnchorProps>`
VWSCoronaDashboard26 marked this conversation as resolved.
Show resolved Hide resolved
${textStyle}
${({ underline }) =>
underline
? `
cursor: pointer;
text-decoration: ${underline === 'hover' ? 'none' : 'underline'};

&:hover,
&:focus {
text-decoration: underline;

export const Heading = styled.h1.attrs(
(props: HeadingProps & { as?: string }) => ({
as: props.as ?? (`h${props.level}` as const),
variant: props.variant ?? (`h${props.level}` as const),
})
)<HeadingProps>(textStyle);
span {
text-decoration: underline;
}
}
`
: undefined}
${({ hoverColor }) =>
hoverColor
? `
&:hover,
&:focus {
color: ${colors.blue8};
}
`
: undefined}
${({ display }) =>
display
? `
display: ${display};
`
: undefined}
`;

export function styledTextVariant(variant: string, as?: string) {
export interface HeadingProps extends TextProps {
level: HeadingLevel;
}

export type HeadingLevel = 1 | 2 | 3 | 4 | 5;

export const Heading = styled.h1.attrs((props: HeadingProps & { as?: string }) => ({
VWSCoronaDashboard26 marked this conversation as resolved.
Show resolved Hide resolved
VWSCoronaDashboard26 marked this conversation as resolved.
Show resolved Hide resolved
as: props.as ?? (`h${props.level}` as const),
variant: props.variant ?? (`h${props.level}` as const),
}))<HeadingProps>(textStyle);

export const styledTextVariant = (variant: string, as?: string) => {
VWSCoronaDashboard26 marked this conversation as resolved.
Show resolved Hide resolved
return styled.p.attrs(() => ({
as: as ?? 'p',
variant,
}));
}
};
33 changes: 10 additions & 23 deletions packages/app/src/domain/layout/gm-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ import { Menu, MenuRenderer } from '~/components/aside/menu';
import { Box } from '~/components/base';
import { ErrorBoundary } from '~/components/error-boundary';
import { AppContent } from '~/components/layout/app-content';
import { Heading, Text } from '~/components/typography';
import { Anchor, Heading, Text } from '~/components/typography';
import { VisuallyHidden } from '~/components/visually-hidden';
import { useIntl } from '~/intl';
import { space } from '~/style/theme';
import { getVrForMunicipalityCode } from '~/utils/get-vr-for-municipality-code';
import { Link } from '~/utils/link';
import { useReverseRouter } from '~/utils/use-reverse-router';
Expand Down Expand Up @@ -64,10 +65,7 @@ export function GmLayout(props: GmLayoutProps) {
layout: 'gm',
code: code,
map: [
[
'development_of_the_virus',
['sewage_measurement', 'positive_tests', 'mortality'],
],
['development_of_the_virus', ['sewage_measurement', 'positive_tests', 'mortality']],
['consequences_for_healthcare', ['hospital_admissions']],
['actions_to_take', ['vaccinations']],
],
Expand All @@ -76,23 +74,14 @@ export function GmLayout(props: GmLayoutProps) {
return (
<>
<Head>
<link
key="dc-spatial"
rel="dcterms:spatial"
href="https://standaarden.overheid.nl/owms/terms/Nederland"
/>
<link
key="dc-spatial-title"
rel="dcterms:spatial"
href="https://standaarden.overheid.nl/owms/terms/Nederland"
title="Nederland"
/>
<link key="dc-spatial" rel="dcterms:spatial" href="https://standaarden.overheid.nl/owms/terms/Nederland" />
<link key="dc-spatial-title" rel="dcterms:spatial" href="https://standaarden.overheid.nl/owms/terms/Nederland" title="Nederland" />
</Head>

<AppContent
hideBackButton={isMainRoute}
searchComponent={
<Box height="100%" maxWidth={{ _: '38rem', md: undefined }} mx="auto">
<Box height="100%" maxWidth={{ _: '38rem', md: undefined }} marginX="auto">
<GmComboBox getLink={getLink} selectedGmCode={code} />
</Box>
}
Expand All @@ -107,21 +96,19 @@ export function GmLayout(props: GmLayoutProps) {
aria-labelledby="sidebar-title"
role="navigation"
maxWidth={{ _: '38rem', md: undefined }}
mx="auto"
marginX="auto"
spacing={1}
>
<Box px={3} pb={4} spacing={1}>
<Box paddingX={space[3]} paddingBottom={space[4]} spacing={1}>
<Heading id="sidebar-title" level={2} variant="h3">
<VisuallyHidden as="span">
{commonTexts.gemeente_layout.headings.sidebar}
</VisuallyHidden>
<VisuallyHidden as="span">{commonTexts.gemeente_layout.headings.sidebar}</VisuallyHidden>
{municipalityName}
</Heading>
{vr && (
<Text>
{commonTexts.common.veiligheidsregio_label}{' '}
<Link href={reverseRouter.vr.index(vr.code)}>
<a>{vr.name}</a>
<Anchor underline="hover">{vr.name}</Anchor>
</Link>
</Text>
)}
Expand Down