diff --git a/package.json b/package.json index d592b975e..72eef6e72 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "gatsby-transformer-remark": "^6.12.3", "gatsby-transformer-sharp": "^5.12.3", "html-entities": "^2.3.2", - "i18next": "^22.5.0", + "i18next": "^23.7.7", "leaflet": "^1.9.4", "leaflet-gesture-handling": "^1.2.2", "modern-normalize": "^2.0.0", @@ -80,12 +80,12 @@ "react-dropzone": "^14.2.3", "react-helmet": "^6.1.0", "react-hook-form": "^7.44.2", - "react-i18next": "^12.3.1", + "react-i18next": "^13.5.0", "react-leaflet": "^4.2.1", "react-medium-image-zoom": "^5.1.6", - "react-share": "^4.4.1", + "react-share": "^5.0.2", "react-spring": "^9.7.3", - "react-use": "^17.4.0", + "react-use": "^17.4.1", "rehype-react": "^7.2.0", "sass": "^1.62.1", "schema-dts": "^1.1.2", @@ -93,7 +93,8 @@ "showdown": "^2.1.0", "slugify": "^1.6.6", "striptags": "^3.2.0", - "styled-components": "^5.3.11", + "styled-components": "^6.1.1", + "stylis": "^4.0.0", "unified": "^10.1.1", "util": "^0.12.5", "webpack": "^5.84.1", @@ -101,32 +102,32 @@ }, "devDependencies": { "@babel/core": "^7.22.1", - "@testing-library/jest-dom": "^5.16.5", + "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.0.0", "@types/jest": "^29.5.10", - "@types/node": "^20.2.5", - "@types/react": "^18.2.38", + "@types/node": "^20.10.0", + "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", "@types/react-helmet": "^6.1.9", "@types/react-syntax-highlighter": "^15.5.10", "@types/showdown": "^2.0.6", "@types/styled-components": "^5.1.32", - "@typescript-eslint/eslint-plugin": "^5.59.7", - "@typescript-eslint/parser": "^5.59.7", + "@typescript-eslint/eslint-plugin": "^6.13.1", + "@typescript-eslint/parser": "^6.13.1", "babel-loader": "^9.1.2", "eslint": "^8.41.0", - "eslint-config-prettier": "^8.8.0", + "eslint-config-prettier": "^9.0.0", "eslint-loader": "^4.0.2", - "eslint-plugin-jest-dom": "^4.0.3", + "eslint-plugin-jest-dom": "^5.1.0", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-react": "^7.32.2", "husky": "^8.0.3", "identity-obj-proxy": "^3.0.0", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", - "jsdom": "^22.1.0", - "lint-staged": "^13.2.2", - "prettier": "^2.8.8", + "jsdom": "^23.0.0", + "lint-staged": "^15.1.0", + "prettier": "^3.1.0", "serve": "^14.2.0", "ts-jest": "^29.1.0", "typescript": "^5.3.2" @@ -138,6 +139,7 @@ ] }, "resolutions": { - "webpack": "^5" + "webpack": "^5", + "styled-components": "^6" } } diff --git a/src/components/content/header-block/header-block.tsx b/src/components/content/header-block/header-block.tsx index 0240fce79..b3dafb0c6 100644 --- a/src/components/content/header-block/header-block.tsx +++ b/src/components/content/header-block/header-block.tsx @@ -19,7 +19,7 @@ interface HeaderBlockProps { } interface LargeProps { - large?: boolean; + $large?: boolean; } const BlockWrapper = styled.div` @@ -66,14 +66,14 @@ const Metaline = styled.p` ${TextStyles.textS} letter-spacing: -0.01em; color: rgba(0, 0, 0, 0.5); - margin-top: ${({ large }) => (large ? '32px' : '16px')}; + margin-top: ${({ $large }) => ($large ? '32px' : '16px')}; `; const HeaderBlockText = styled.p` - ${({ large }) => (large ? TextStyles.textSR : TextStyles.textS)}; + ${({ $large }) => ($large ? TextStyles.textSR : TextStyles.textS)}; ${up('md')} { - ${({ large }) => (large ? TextStyles.textR : TextStyles.textSR)}; + ${({ $large }) => ($large ? TextStyles.textR : TextStyles.textSR)}; } margin: 16px 0 0; letter-spacing: -0.01em; @@ -91,9 +91,9 @@ export const HeaderBlock = (props: HeaderBlockProps) => { {props.topline} {props.headline} {props.metaline && ( - {props.metaline} + {props.metaline} )} - {props.children} + {props.children} {props.illustration && ( diff --git a/src/components/content/heroes/aurora/aurora-components.ts b/src/components/content/heroes/aurora/aurora-components.ts index e2d2f1030..ae74ed8d5 100644 --- a/src/components/content/heroes/aurora/aurora-components.ts +++ b/src/components/content/heroes/aurora/aurora-components.ts @@ -4,7 +4,7 @@ const BACKGROUND_LAYER_Z = -2; const FOREGROUND_LAYER_Z = -1; interface AuroraBackgroundProps { - source: string; + $source: string; overwriteBackground?: string; } @@ -22,7 +22,7 @@ export const AuroraBackground = styled.div` ${(props) => props.overwriteBackground === undefined ? css` - background-image: url(${props.source}); + background-image: url(${props.$source}); background-repeat: no-repeat; background-size: cover; background-position: center -20vw; diff --git a/src/components/content/heroes/aurora/aurora.tsx b/src/components/content/heroes/aurora/aurora.tsx index 824bf45d7..27d1aa85f 100644 --- a/src/components/content/heroes/aurora/aurora.tsx +++ b/src/components/content/heroes/aurora/aurora.tsx @@ -34,7 +34,7 @@ export const Aurora = ({ type, className }: AuroraProps) => { return ( diff --git a/src/components/content/heroes/aurora/default-flares.tsx b/src/components/content/heroes/aurora/default-flares.tsx index 70345b1f4..21e514cc6 100644 --- a/src/components/content/heroes/aurora/default-flares.tsx +++ b/src/components/content/heroes/aurora/default-flares.tsx @@ -6,33 +6,33 @@ export const DefaultFlares = () => { <> ); @@ -42,22 +42,22 @@ export const DefaultFlaresDark = () => { return ( <> ); diff --git a/src/components/content/heroes/aurora/flare.ts b/src/components/content/heroes/aurora/flare.ts index 78e13f82a..40ce1e226 100644 --- a/src/components/content/heroes/aurora/flare.ts +++ b/src/components/content/heroes/aurora/flare.ts @@ -16,20 +16,20 @@ export interface FlareProps { * we can use an existing css property to scale that value into a size we can see * The bigger the value, the bigger the area being walked on. */ - stepSize?: number; + $stepSize?: number; /** * The human eye spots similar animations really quickly * that's why we want to allow to rotate the entire animation with this value * This creates enough noise, so it looks like a distinct animation. */ - rotation?: number; + $rotation?: number; /** * The actual animation has a fixed duration (currently 240s) to appear * very slowly. This multiplier allows to scale the value. A value of 2 means * half the time (120s) which makes the animation twice as fast. If you pass 0.5 * the animation will run 480s (half the speed) */ - speedMultiplier?: number; + $speedMultiplier?: number; /** * the actual center of the animation give by x & y * This again involves a custom CSS property which is made available @@ -41,7 +41,7 @@ export interface FlareProps { /** * we have two types of flares. One is light and one is dark. */ - flareType?: FlareType; + $flareType?: FlareType; /** * This is again to add more noise to the human eye * not to spot the fact that the actual animation is shared between all flares @@ -49,7 +49,7 @@ export interface FlareProps { * into a negative animation-delay (in seconds) which will cause the animation to start in-between. * The negative value is required to prevent any pause in the beginning. */ - animationOffset?: number; + $animationOffset?: number; opacity?: number; background?: string; blur?: number; @@ -74,9 +74,9 @@ function getFlareImage(type: FlareType) { } export const Flare = styled.div` - --flare-step-size: ${(props) => props.stepSize ?? 20}px; + --flare-step-size: ${(props) => props.$stepSize ?? 20}px; --flare-size: ${(props) => props.size ?? 100}px; - --flare-rotate: ${(props) => props.rotation ?? 0}deg; + --flare-rotate: ${(props) => props.$rotation ?? 0}deg; --flare-x: ${(props) => props.x ?? 0}; --flare-y: ${(props) => props.y ?? 0}; --flare-opacity: ${(props) => props.opacity ?? 1}; @@ -96,12 +96,13 @@ export const Flare = styled.div` ${(props) => props.background ? `background: ${props.background}; border-radius: 1000px;` - : getFlareImage(props.flareType ?? FlareType.LIGHT)} + : getFlareImage(props.$flareType ?? FlareType.LIGHT)} filter: blur(${(props) => props.blur ?? 0}px); animation: ${WanderAnimation} - ${(props) => FLARE_ANIMATION_DURATION * (1 / (props.speedMultiplier ?? 1))}s + ${(props) => + FLARE_ANIMATION_DURATION * (1 / (props.$speedMultiplier ?? 1))}s infinite linear; - animation-delay: ${(props) => -1 * (props.animationOffset ?? 0)}s; + animation-delay: ${(props) => -1 * (props.$animationOffset ?? 0)}s; ${(props) => (props.noAnimation ? 'animation: none;' : '')} transform: translate(var(--flare-x, 0), var(--flare-y, 0)) diff --git a/src/components/content/heroes/aurora/weather-easter-egg/sun.tsx b/src/components/content/heroes/aurora/weather-easter-egg/sun.tsx index f3bfacf40..283bb4558 100644 --- a/src/components/content/heroes/aurora/weather-easter-egg/sun.tsx +++ b/src/components/content/heroes/aurora/weather-easter-egg/sun.tsx @@ -118,22 +118,22 @@ export const Sun = () => { diff --git a/src/components/content/heroes/blog-hero.tsx b/src/components/content/heroes/blog-hero.tsx index 31bce3c07..3697fd39c 100644 --- a/src/components/content/heroes/blog-hero.tsx +++ b/src/components/content/heroes/blog-hero.tsx @@ -61,13 +61,13 @@ export const BlogHero = ({ const gatsbyImageData = getImage(image); return ( - + {gatsbyImageData && ( )} {title && ( - + {children} diff --git a/src/components/content/heroes/hero-text.tsx b/src/components/content/heroes/hero-text.tsx index 31ff2b2d2..a19edb406 100644 --- a/src/components/content/heroes/hero-text.tsx +++ b/src/components/content/heroes/hero-text.tsx @@ -14,7 +14,7 @@ export const HeroText = ({ title, children, hideMobileText }: HeroWithText) => { return ( {title} - {children} + {children} ); }; @@ -39,15 +39,15 @@ const Headline = styled.h1` } `; -const Text = styled.div<{ hideMobileText?: boolean }>` +const Text = styled.div<{ $hideMobileText?: boolean }>` ${TextStyles.textR} ${up('md')} { ${TextStyles.textL} } - ${({ hideMobileText }) => - hideMobileText && + ${({ $hideMobileText }) => + $hideMobileText && css` ${down('md')} { display: none; diff --git a/src/components/content/heroes/image-hero.tsx b/src/components/content/heroes/image-hero.tsx index 8fe57d934..5b7641192 100644 --- a/src/components/content/heroes/image-hero.tsx +++ b/src/components/content/heroes/image-hero.tsx @@ -34,7 +34,7 @@ export const ImageHero = ({ )} {title && ( - + {children} diff --git a/src/components/content/heroes/support.tsx b/src/components/content/heroes/support.tsx index 3c4e1612a..71d2ba3c2 100644 --- a/src/components/content/heroes/support.tsx +++ b/src/components/content/heroes/support.tsx @@ -10,11 +10,11 @@ import { rgba } from 'polished'; * to spread the content over the full available width. * That way we don't need any position absolute & friends. * */ -export const HeroContainer = styled.div<{ naturalHeight?: boolean }>` +export const HeroContainer = styled.div<{ $naturalHeight?: boolean }>` display: grid; - ${({ naturalHeight }) => - !naturalHeight && + ${({ $naturalHeight }) => + !$naturalHeight && css` height: 640px; @@ -33,7 +33,7 @@ export const HeroContainer = styled.div<{ naturalHeight?: boolean }>` `; interface TextContainerProps { - dimmed?: boolean; + $dimmed?: boolean; } /** @@ -55,8 +55,8 @@ export const TextContainer = styled.div` align-items: end; - ${({ dimmed }) => - dimmed && + ${({ $dimmed }) => + $dimmed && css` background-color: ${rgba('#000000', 0.2)}; `} diff --git a/src/components/content/section-header/section-header.tsx b/src/components/content/section-header/section-header.tsx index 590427b1a..809201d5c 100644 --- a/src/components/content/section-header/section-header.tsx +++ b/src/components/content/section-header/section-header.tsx @@ -45,7 +45,7 @@ const KickerStyled = styled.span` } `; -const HeadlineStyled = styled.h2<{ large?: boolean }>` +const HeadlineStyled = styled.h2<{ $large?: boolean }>` ${TextStyles.headlineM} margin: 0; color: #202840; @@ -56,8 +56,8 @@ const HeadlineStyled = styled.h2<{ large?: boolean }>` ${TextStyles.headlineL} } - ${({ large }) => - large && + ${({ $large }) => + $large && css` ${TextStyles.headlineL} ${up('md')} { @@ -80,7 +80,7 @@ export const SectionHeader = (props: SectionHeaderProps) => { {props.kicker && ( {props.kicker} )} - + {props.headline} {props.children} diff --git a/src/components/content/teaser/teaser.tsx b/src/components/content/teaser/teaser.tsx index 8e33d8d1c..207d6c9bb 100644 --- a/src/components/content/teaser/teaser.tsx +++ b/src/components/content/teaser/teaser.tsx @@ -12,13 +12,13 @@ import { TextStyles } from '../../typography'; import { up } from '../../support/breakpoint'; const TeaserContainer = styled.div<{ - hover: boolean; - preventStretching?: boolean; + $hover: boolean; + $preventStretching?: boolean; }>` overflow: hidden; ${(props) => - props.hover && + props.$hover && css` color: ${theme.palette.text.topline}; cursor: pointer; @@ -26,7 +26,7 @@ const TeaserContainer = styled.div<{ ${up('md')} { ${(props) => - props.preventStretching && + props.$preventStretching && css` &:only-child { max-width: 50%; @@ -35,10 +35,10 @@ const TeaserContainer = styled.div<{ } `; -const StyledIllustration = styled(Illustration)<{ hover: boolean }>` +const StyledIllustration = styled(Illustration)<{ $hover: boolean }>` margin-bottom: 24px; ${(props) => - props.hover && + props.$hover && css` svg path { fill: ${theme.palette.text.topline}; @@ -46,12 +46,12 @@ const StyledIllustration = styled(Illustration)<{ hover: boolean }>` `} `; -const ImageContainer = styled.div<{ hover: boolean }>` +const ImageContainer = styled.div<{ $hover: boolean }>` overflow: hidden; margin-bottom: 16px; transition: transform 0.2s; - ${(props) => props.hover && 'transform: scale(1.05)'}; + ${(props) => props.$hover && 'transform: scale(1.05)'}; `; const ToplineContainer = styled.div` @@ -67,10 +67,10 @@ const Topline = styled.p` margin: 0; `; -const Timestamp = styled.p<{ hover: boolean }>` +const Timestamp = styled.p<{ $hover: boolean }>` ${TextStyles.timestamp}; color: ${(props) => - props.hover ? theme.palette.text.topline : theme.palette.text.timestamp}; + props.$hover ? theme.palette.text.topline : theme.palette.text.timestamp}; margin: 0; `; @@ -84,19 +84,19 @@ const TeaserText = styled.div` `; const StyledTeaserTitle = styled.h3<{ - large: boolean; - hasTopline: boolean; + $large: boolean; + $hasTopline: boolean; }>` ${TextStyles.headlineXS} - ${(props) => props.large && TextStyles.headlineXS}; + ${(props) => props.$large && TextStyles.headlineXS}; ${up('md')} { - ${(props) => props.large && TextStyles.headlineM}; + ${(props) => props.$large && TextStyles.headlineM}; } margin-top: 0; - margin-bottom: ${(props) => (props.hasTopline ? '8px' : '16px')}; + margin-bottom: ${(props) => (props.$hasTopline ? '8px' : '16px')}; `; const StyledIcon = styled(Icon)` @@ -186,8 +186,8 @@ export const Teaser = ({ return ( {!illustration && image && ( - {image} + {image} )} {illustration && ( )} {hasToplineContainer && ( {topline && {topline}} {dateFormatted && ( - {dateFormatted} + {dateFormatted} )} )} {title} diff --git a/src/components/forms/file-dropper/file-dropper.tsx b/src/components/forms/file-dropper/file-dropper.tsx index 2c09b7b3a..9cd66a793 100644 --- a/src/components/forms/file-dropper/file-dropper.tsx +++ b/src/components/forms/file-dropper/file-dropper.tsx @@ -72,9 +72,9 @@ const Highlight = styled.span` `; const FileDropperContainer = styled.div<{ - isDragActive: boolean; - hasFiles: boolean; - hasErrors: boolean; + $isDragActive: boolean; + $hasFiles: boolean; + $hasErrors: boolean; }>` position: relative; display: flex; @@ -86,18 +86,18 @@ const FileDropperContainer = styled.div<{ cursor: pointer; border: 1px solid ${(props) => - props.isDragActive + props.$isDragActive ? theme.palette.text.default : theme.palette.background.leadbox}; ${(props) => - props.hasErrors && + props.$hasErrors && css` border: 2px solid ${theme.palette.text.errorMessage}; `} ${(props) => - props.hasFiles && + props.$hasFiles && css` align-items: flex-start; padding: 12px 16px; @@ -151,7 +151,7 @@ export const FileDropper = ({ if (maxFiles && currentFiles.length + acceptedFiles.length > maxFiles) { setError(name, { type: 'manual', - message: t('career.error.max-number'), + message: t('career.error.max-number'), }); return; } @@ -206,9 +206,9 @@ export const FileDropper = ({ {label && } diff --git a/src/components/forms/text-area/text-area.tsx b/src/components/forms/text-area/text-area.tsx index 956fc580f..baea48f8d 100644 --- a/src/components/forms/text-area/text-area.tsx +++ b/src/components/forms/text-area/text-area.tsx @@ -6,7 +6,7 @@ import { useController, UseControllerProps } from 'react-hook-form'; import { StyledErrorMessage, Label } from '../text-input/text-input'; import { FormDataProps } from '../../pages/career-details/new-career-form/career-form'; -const StyledTextArea = styled.textarea<{ hasError?: boolean }>` +const StyledTextArea = styled.textarea<{ $hasError?: boolean }>` height: 160px; width: 100%; padding: 19px 16px; @@ -22,7 +22,7 @@ const StyledTextArea = styled.textarea<{ hasError?: boolean }>` } ${(props) => - props.hasError && + props.$hasError && css` border: 2px solid ${theme.palette.text.errorMessage}; `}; @@ -44,7 +44,7 @@ export const TextArea = ( )} ` +const Input = styled.input<{ $hasError?: boolean }>` width: 100%; height: 48px; @@ -22,7 +22,7 @@ const Input = styled.input<{ hasError?: boolean }>` } ${(props) => - props.hasError && + props.$hasError && css` border: 2px solid ${theme.palette.text.errorMessage}; `}; @@ -63,7 +63,7 @@ export const TextInput = ( { export const useTranslationParagraphs = ( ns?: string, - options?: UseTranslationOptions, + options?: UseTranslationOptions, ) => { const { t, ...useTranslationResponse } = useTranslation(ns, options); diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx index f29e76d00..021f10eeb 100644 --- a/src/components/layout/header/header.tsx +++ b/src/components/layout/header/header.tsx @@ -29,8 +29,8 @@ const StyledHeader = styled.header<{ ? props.theme.palette.background.headerTransparent : 'none' : props.$lightTheme - ? props.theme.palette.background.bodyLight - : props.theme.palette.background.body}; + ? props.theme.palette.background.bodyLight + : props.theme.palette.background.body}; height: ${HEADER_HEIGHT}; display: flex; diff --git a/src/components/layout/header/language-switch.tsx b/src/components/layout/header/language-switch.tsx index c10054d0e..a71c0ff5b 100644 --- a/src/components/layout/header/language-switch.tsx +++ b/src/components/layout/header/language-switch.tsx @@ -45,10 +45,7 @@ export const LanguageSwitch = ({ const { languages, language, t, changeLanguage } = useI18next(); return ( - ('navigation.language-aria')} - className={className} - > + { diff --git a/src/components/layout/header/menu-flyout.tsx b/src/components/layout/header/menu-flyout.tsx index 8f3eede1d..e76dce186 100644 --- a/src/components/layout/header/menu-flyout.tsx +++ b/src/components/layout/header/menu-flyout.tsx @@ -5,11 +5,11 @@ import Navigation from '../navigation/navigation'; export const FLYOUT_Z_INDEX = 999; const BACKGROUND_Z_INDEX = 900; -const FullscreenOverlay = styled.div<{ visible: boolean }>` +const FullscreenOverlay = styled.div<{ $visible: boolean }>` position: fixed; z-index: ${FLYOUT_Z_INDEX}; - bottom: ${(props) => (props.visible ? 0 : '-1000px')}; + bottom: ${(props) => (props.$visible ? 0 : '-1000px')}; left: 0; min-width: 100%; @@ -17,19 +17,23 @@ const FullscreenOverlay = styled.div<{ visible: boolean }>` flex-direction: column; justify-content: flex-end; - visibility: ${(props) => (props.visible ? 'visible' : 'hidden')}; - transition: bottom 0.3s ease-out, visibility 0.3s ease-out; + visibility: ${(props) => (props.$visible ? 'visible' : 'hidden')}; + transition: + bottom 0.3s ease-out, + visibility 0.3s ease-out; `; -const BackgroundOverlay = styled.div<{ visible: boolean }>` +const BackgroundOverlay = styled.div<{ $visible: boolean }>` position: fixed; z-index: ${BACKGROUND_Z_INDEX}; top: 0; left: 0; background-color: ${(props) => - props.visible ? 'rgba(0, 0, 0, 0.3)' : 'none'}; - visibility: ${(props) => (props.visible ? 'visible' : 'hidden')}; - transition: background-color 0.3s, visibility 0.3s ease-out; + props.$visible ? 'rgba(0, 0, 0, 0.3)' : 'none'}; + visibility: ${(props) => (props.$visible ? 'visible' : 'hidden')}; + transition: + background-color 0.3s, + visibility 0.3s ease-out; width: 100%; height: 100%; @@ -61,7 +65,7 @@ interface NavigationFlyoutProp { export const NavigationFlyout: React.FC = (props) => { return ( <> - + = (props) => { {props.visible && } props.setIsNavigationVisible(false)} /> diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index 8bd01e4ec..c0c7cc979 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -68,8 +68,9 @@ const HeaderStickyContainer = styled.div` z-index: 100; `; -const BreadcrumbContainer = styled.div<{ hero: boolean }>` - margin: ${(props) => !props.hero && `calc(${HEADER_HEIGHT} + 16px)`} 24px 16px; +const BreadcrumbContainer = styled.div<{ $hero: boolean }>` + margin: ${(props) => !props.$hero && `calc(${HEADER_HEIGHT} + 16px)`} 24px + 16px; `; interface LayoutProps { @@ -135,7 +136,7 @@ export const Layout = ({ {hero} {breadcrumb && ( - + )} diff --git a/src/components/layout/seo.tsx b/src/components/layout/seo.tsx index 341d8ad7a..461772a16 100644 --- a/src/components/layout/seo.tsx +++ b/src/components/layout/seo.tsx @@ -67,19 +67,17 @@ const SEO = ({ location, rssLink, }: SeoProps) => { - const { site } = useStaticQuery( - graphql` - query { - site { - siteMetadata { - title - author - siteUrl - } + const { site } = useStaticQuery(graphql` + query { + site { + siteMetadata { + title + author + siteUrl } } - `, - ); + } + `); const { t } = useTranslation(); const i18n = useI18next(); diff --git a/src/components/layout/with-anchor-hoc.tsx b/src/components/layout/with-anchor-hoc.tsx index 80b5d0a39..acc53e437 100644 --- a/src/components/layout/with-anchor-hoc.tsx +++ b/src/components/layout/with-anchor-hoc.tsx @@ -22,13 +22,13 @@ export const generateAnchorId = (children) => { .toLowerCase(); }; -const ShareSymbol = styled.a<{ visible }>` +const ShareSymbol = styled.a<{ $visible }>` scroll-margin-top: ${SCROLLING_OFFSET}px; color: ${theme.palette.text.default}; opacity: 0.3; ${up('md')} { - visibility: ${(props) => (props.visible ? 'visible' : 'hidden')}; + visibility: ${(props) => (props.$visible ? 'visible' : 'hidden')}; } &:hover { @@ -50,7 +50,7 @@ export const WithAnchorHOC = diff --git a/src/components/legacy/icons/header-icons/burger-menu.tsx b/src/components/legacy/icons/header-icons/burger-menu.tsx index 8936f0a49..687999a85 100644 --- a/src/components/legacy/icons/header-icons/burger-menu.tsx +++ b/src/components/legacy/icons/header-icons/burger-menu.tsx @@ -12,7 +12,7 @@ export const BurgerMenu = ({ setHoverTransition, }: BurgerMenuProps) => { return ( - setHoverTransition()}> + setHoverTransition()}>
@@ -20,7 +20,7 @@ export const BurgerMenu = ({ ); }; -const Wrapper = styled.div<{ transition: boolean }>` +const Wrapper = styled.div<{ $transition: boolean }>` display: flex; flex-direction: column; align-items: flex-end; @@ -69,18 +69,18 @@ const Wrapper = styled.div<{ transition: boolean }>` &:hover { .bar:nth-child(1) { - ${({ transition }) => - transition ? `transition: all 0.1s;` : `transition: none;`} + ${({ $transition }) => + $transition ? `transition: all 0.1s;` : `transition: none;`} width: 18px; } .bar:nth-child(2) { - ${({ transition }) => - transition ? `transition: all 0.1s 0.1s;` : `transition: none;`} + ${({ $transition }) => + $transition ? `transition: all 0.1s 0.1s;` : `transition: none;`} width: 14px; } .bar:nth-child(3) { - ${({ transition }) => - transition ? `transition: all 0.1s 0.2s;` : `transition: none;`} + ${({ $transition }) => + $transition ? `transition: all 0.1s 0.2s;` : `transition: none;`} width: 10px; } } diff --git a/src/components/legacy/markdown/custom-components.tsx b/src/components/legacy/markdown/custom-components.tsx index 9fe6c87a1..a0d33b79b 100644 --- a/src/components/legacy/markdown/custom-components.tsx +++ b/src/components/legacy/markdown/custom-components.tsx @@ -82,7 +82,9 @@ const TableStyled = styled.table` border: solid 1px #ddeeee; border-collapse: collapse; border-spacing: 0; - font: normal 13px Arial, sans-serif; + font: + normal 13px Arial, + sans-serif; thead th { border: solid 1px #ddeeee; diff --git a/src/components/pages/about-us/impressions.tsx b/src/components/pages/about-us/impressions.tsx index 68ad5f60f..a73854224 100644 --- a/src/components/pages/about-us/impressions.tsx +++ b/src/components/pages/about-us/impressions.tsx @@ -43,8 +43,8 @@ const getSpan = (tileSize: AboutUsImpressionTileSize) => { } }; -const GalleryItem = styled.div<{ tileSize: AboutUsImpressionTileSize }>` - grid-area: ${({ tileSize }) => getSpan(tileSize)}; +const GalleryItem = styled.div<{ $tileSize: AboutUsImpressionTileSize }>` + grid-area: ${({ $tileSize }) => getSpan($tileSize)}; `; const GalleryImage = styled(GatsbyImage)` @@ -73,7 +73,7 @@ export const Impressions = ({ {impressions.map((item) => { const imageData = getImage(item.image); return ( - + {imageData && } ); diff --git a/src/components/pages/blog-post/share-panel.tsx b/src/components/pages/blog-post/share-panel.tsx index 9672efc53..862f0250e 100644 --- a/src/components/pages/blog-post/share-panel.tsx +++ b/src/components/pages/blog-post/share-panel.tsx @@ -64,7 +64,7 @@ export const SharePanel: React.FC = ({ title }) => { {t('blog.share')} - + diff --git a/src/components/pages/career-details/career-details.tsx b/src/components/pages/career-details/career-details.tsx index bf9d64a39..91112fab0 100644 --- a/src/components/pages/career-details/career-details.tsx +++ b/src/components/pages/career-details/career-details.tsx @@ -51,7 +51,7 @@ export const CareerDetails = ({ large as={'h1'} headline={position.name} - kicker={t('career.position')} + kicker={t('career.position')} > {position.shortDescription.shortDescription} diff --git a/src/components/pages/career-details/new-career-form/career-form-fields.tsx b/src/components/pages/career-details/new-career-form/career-form-fields.tsx index aa37a9fb8..0a8a3f73c 100644 --- a/src/components/pages/career-details/new-career-form/career-form-fields.tsx +++ b/src/components/pages/career-details/new-career-form/career-form-fields.tsx @@ -32,9 +32,7 @@ export const CareerDetailsSubmitButton = ({ isSubmitting, errors }) => { const { t } = useTranslation(); return ( ); }; @@ -71,7 +69,7 @@ export const CareerDetailsCheckbox = ({ control }) => { } control={control} - rules={{ required: t('career.error.approval') }} + rules={{ required: t('career.error.approval') }} /> ); }; @@ -88,22 +86,22 @@ export const CareerDetailsFileUpload = ({ const fileCategories = [ { value: 'cv', - label: t('career.cv'), + label: t('career.cv'), }, { value: 'cover-letter', - label: t('career.cover-letter'), + label: t('career.cover-letter'), }, { value: 'other', - label: t('career.other'), + label: t('career.other'), }, ]; const fileValidator = (file: File): FileError | null => { if (file.size > MAX_SIZE) return { - message: t('career.error.max-size'), + message: t('career.error.max-size'), code: ErrorCode.FileTooLarge, }; @@ -135,12 +133,12 @@ export const CareerDetailsSuccess = () => { return ( ('career.thank')} - headline={t('career.email-confirmation')} + kicker={t('career.thank')} + headline={t('career.email-confirmation')} > - {t('career.success-text')} + {t('career.success-text')} - {t('career.action.home')} + {t('career.action.home')} ); }; diff --git a/src/components/pages/career-details/new-career-form/career-form.tsx b/src/components/pages/career-details/new-career-form/career-form.tsx index eab0ba92b..8cc7d9b12 100644 --- a/src/components/pages/career-details/new-career-form/career-form.tsx +++ b/src/components/pages/career-details/new-career-form/career-form.tsx @@ -67,8 +67,8 @@ export const Form = (props: CareerFormProps) => { const { t } = useTranslation(); const submitErrorMessages = { - cv: t('career.error.cv'), - category: t('career.error.category'), + cv: t('career.error.cv'), + category: t('career.error.category'), }; const selectedFiles = watch('documents'); @@ -78,7 +78,7 @@ export const Form = (props: CareerFormProps) => { if (selectedFiles?.length === 0 || !selectedFiles) { setError( 'documents', - { type: 'manual', message: t('career.error.cv') }, + { type: 'manual', message: t('career.error.cv') }, { shouldFocus: true }, ); } @@ -87,7 +87,7 @@ export const Form = (props: CareerFormProps) => { if (!selectedFiles[i].fileCategory) setError('documents', { type: 'manual', - message: t('career.error.category'), + message: t('career.error.category'), }); } }; @@ -117,54 +117,54 @@ export const Form = (props: CareerFormProps) => { ('career.first-name')} + label={t('career.first-name')} control={control} - rules={{ required: t('career.error.first-name') }} + rules={{ required: t('career.error.first-name') }} /> ('career.last-name')} + label={t('career.last-name')} control={control} - rules={{ required: t('career.error.last-name') }} + rules={{ required: t('career.error.last-name') }} /> ('career.email')} + label={t('career.email')} control={control} rules={{ - required: t('career.error.email'), + required: t('career.error.email'), pattern: { value: SIMPLE_EMAIL_PATTERN, - message: t('career.error.email-undefined'), + message: t('career.error.email-undefined'), }, }} /> ('career.location')} + label={t('career.location')} control={control} /> ('career.available-from')} + label={t('career.available-from')} control={control} /> ('career.salary-expectations')} + label={t('career.salary-expectations')} control={control} />