diff --git a/apps/ui/components/application/ApplicationPage.tsx b/apps/ui/components/application/ApplicationPage.tsx index 400c5426a..e664a67d5 100644 --- a/apps/ui/components/application/ApplicationPage.tsx +++ b/apps/ui/components/application/ApplicationPage.tsx @@ -10,8 +10,8 @@ import { import { useRouter } from "next/router"; import Stepper, { StepperProps } from "./Stepper"; import NotesWhenApplying from "@/components/application/NotesWhenApplying"; -import { getApplicationPath } from "@/modules/urls"; -import BreadcrumbWrapper from "../common/BreadcrumbWrapper"; +import { applicationsPrefix, getApplicationPath } from "@/modules/urls"; +import { Breadcrumb } from "../common/Breadcrumb"; import { H1 } from "common"; const InnerContainer = styled.div<{ $hideStepper: boolean }>` @@ -111,9 +111,20 @@ export function ApplicationPageWrapper({ const title = t(`${translationKeyPrefix}.heading`); const subTitle = headContent || overrideText || t(`${translationKeyPrefix}.text`); + + const routes = [ + { + slug: applicationsPrefix, + title: t("breadcrumb:applications"), + }, + { + title: t("breadcrumb:application"), + }, + ] as const; + return ( <> - +

{title}

{subTitle}

diff --git a/apps/ui/components/common/Breadcrumb.tsx b/apps/ui/components/common/Breadcrumb.tsx index 2357fdb0a..c4d94af5f 100644 --- a/apps/ui/components/common/Breadcrumb.tsx +++ b/apps/ui/components/common/Breadcrumb.tsx @@ -1,7 +1,12 @@ -import React, { ElementType, Fragment } from "react"; +import React from "react"; import styled, { css } from "styled-components"; import { IconAngleLeft, IconAngleRight } from "hds-react"; -import { fontMedium } from "common"; +import { breakpoints, fontMedium } from "common"; +import { useMedia } from "react-use"; +import Link from "next/link"; +import { Flex } from "common/styles/util"; +import { truncatedText } from "common/styles/cssFragments"; +import { useTranslation } from "next-i18next"; export type RouteItem = { title: string; @@ -9,19 +14,10 @@ export type RouteItem = { }; type Props = { - routes: RouteItem[]; - isMobile: boolean; - linkComponent?: ElementType; - className?: string; -}; - -const limits = { - default: 25, - current: 40, + routes: Readonly; }; const Nav = styled.nav<{ $isMobile?: boolean }>` - font-size: var(--fontsize-body-m); display: flex; align-items: center; line-height: var(--spacing-3-xl); @@ -35,19 +31,24 @@ const Nav = styled.nav<{ $isMobile?: boolean }>` } `; -const Item = styled.div` - display: flex; - align-items: center; - max-width: 100%; -`; +const Item = styled(Flex).attrs({ + $alignItems: "center", + $direction: "row", + $gap: "none", +})``; const currentCss = css` color: var(--color-black); ${fontMedium} `; -const Anchor = styled.span<{ $current?: boolean; $isMobile?: boolean }>` +// const LIMIT_CURRENT_CH = 40; +const LIMIT_DEFAULT_CH = 25; +const Anchor = styled(Link)<{ $current?: boolean; $isMobile?: boolean }>` && { + ${truncatedText} + display: inline-block; + max-width: ${LIMIT_DEFAULT_CH}ch; ${({ $current }) => { switch ($current) { case true: @@ -61,102 +62,73 @@ const Anchor = styled.span<{ $current?: boolean; $isMobile?: boolean }>` } }} } - - ${({ $isMobile }) => - $isMobile && - ` - overflow: hidden; - text-overflow: ellipsis; - } - `}; - - white-space: nowrap; `; const Slug = styled.span<{ $current?: boolean }>` ${({ $current }) => $current && currentCss} - - white-space: nowrap; + ${truncatedText} + max-width: ${LIMIT_DEFAULT_CH}ch; `; -export function Breadcrumb({ - routes = [], +function BreadcrumbImpl({ + routes, isMobile, - linkComponent, - className, -}: Props): JSX.Element { - const Link = linkComponent || Fragment; - +}: Pick & { isMobile: boolean }): JSX.Element | null { const routesWithSlug = routes?.filter((n) => n.slug != null && n.slug !== ""); const lastRoute = routes[routes.length - 1]; const lastRouteWithSlug = routesWithSlug[routesWithSlug.length - 1]; - // TODO why are we doing this? is there a case where we need to do this? // or would it just be better to pass hideMobileBreadcrumb prop to the component // instead of having hidden logic here? const isMobileEnabled = isMobile && - routesWithSlug.length > 1 && + routesWithSlug.length > 0 && lastRoute.slug !== lastRouteWithSlug.slug; + if (!isMobileEnabled && isMobile) { + return null; + } + + if (isMobile) { + return ( + + + ); + } + return ( -