From 0a6fb0f3137d4cc12898bd81e9786f2bf444d195 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard26 Date: Mon, 28 Nov 2022 12:32:28 +0100 Subject: [PATCH] bugfix(general): updated general typography styles to always make anchor elements underlined when associated props are supplied; rewrote (parts of) the styled component; --- packages/app/src/components/typography.tsx | 108 ++++++++++--------- packages/app/src/domain/layout/gm-layout.tsx | 33 ++---- 2 files changed, 67 insertions(+), 74 deletions(-) diff --git a/packages/app/src/components/typography.tsx b/packages/app/src/components/typography.tsx index bff978e848..300b21d227 100644 --- a/packages/app/src/components/typography.tsx +++ b/packages/app/src/components/typography.tsx @@ -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'; @@ -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' ? { @@ -40,16 +27,13 @@ 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(textStyle); @@ -57,40 +41,62 @@ export const InlineText = styled.span(textStyle); export const BoldText = styled.strong(textStyle); -export const Anchor = styled.a( - 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` + ${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), - }) -)(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 }) => ({ + as: props.as ?? (`h${props.level}` as const), + variant: props.variant ?? (`h${props.level}` as const), +}))(textStyle); + +export const styledTextVariant = (variant: string, as?: string) => { return styled.p.attrs(() => ({ as: as ?? 'p', variant, })); -} +}; diff --git a/packages/app/src/domain/layout/gm-layout.tsx b/packages/app/src/domain/layout/gm-layout.tsx index 22c976673a..b36b42da99 100644 --- a/packages/app/src/domain/layout/gm-layout.tsx +++ b/packages/app/src/domain/layout/gm-layout.tsx @@ -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'; @@ -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']], ], @@ -76,23 +74,14 @@ export function GmLayout(props: GmLayoutProps) { return ( <> - - + + + } @@ -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} > - + - - {commonTexts.gemeente_layout.headings.sidebar} - + {commonTexts.gemeente_layout.headings.sidebar} {municipalityName} {vr && ( {commonTexts.common.veiligheidsregio_label}{' '} - {vr.name} + {vr.name} )}