Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(boards): add breadcrumbs navbar #1845

Merged
merged 1 commit into from
Mar 18, 2025
+234 −22
Merged

feat(boards): add breadcrumbs navbar #1845

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
77 changes: 77 additions & 0 deletions tavla/app/(admin)/boards/[id]/BreadcrumbsNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
'use client'

import { BreadcrumbNavigation, BreadcrumbItem } from '@entur/menu'
import {
DEFAULT_BOARD_NAME,
DEFAULT_FOLDER_NAME,
} from 'app/(admin)/utils/constants'
import Link from 'next/link'
import { TBoard, TOrganization } from 'types/settings'

function FolderBreadcrumbs({ folder }: { folder: TOrganization }) {
return (
<BreadcrumbNavigation>
<BreadcrumbItem as={Link} href="/boards">
Mapper og tavler
</BreadcrumbItem>
<BreadcrumbItem as={Link} href={`/boards/${folder?.id}`}>
{folder?.name ?? DEFAULT_FOLDER_NAME}
</BreadcrumbItem>
</BreadcrumbNavigation>
)
}

function BoardBreadcrumbs({ board }: { board: TBoard }) {
return (
<BreadcrumbNavigation>
<BreadcrumbItem as={Link} href="/boards">
Mapper og tavler
</BreadcrumbItem>
<BreadcrumbItem as={Link} href={`/edit/${board?.id}`}>
{board?.meta.title ?? DEFAULT_BOARD_NAME}
</BreadcrumbItem>
</BreadcrumbNavigation>
)
}

function BoardInFolderBreadcrumbs({
folder,
board,
}: {
folder?: TOrganization
board?: TBoard
}) {
return (
<BreadcrumbNavigation>
<BreadcrumbItem as={Link} href="/boards">
Mapper og tavler
</BreadcrumbItem>
<BreadcrumbItem as={Link} href={`/boards/${folder?.id}`}>
{folder?.name ?? DEFAULT_FOLDER_NAME}
</BreadcrumbItem>
<BreadcrumbItem as={Link} href={`/edit/${board?.id}`}>
{board?.meta.title ?? DEFAULT_BOARD_NAME}
</BreadcrumbItem>
</BreadcrumbNavigation>
)
}

function BreadcrumbsNav({
folder,
board,
}: {
folder?: TOrganization
board?: TBoard
}) {
if (board && folder) {
return <BoardInFolderBreadcrumbs folder={folder} board={board} />
}
if (folder) {
return <FolderBreadcrumbs folder={folder} />
}
if (board) {
return <BoardBreadcrumbs board={board} />
}
}

export { BreadcrumbsNav }
10 changes: 3 additions & 7 deletions tavla/app/(admin)/boards/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import { Metadata } from 'next'
import { notFound, redirect } from 'next/navigation'
import { TOrganizationID } from 'types/settings'
import { Button } from '@entur/button'
import { BackArrowIcon, EditIcon, FolderIcon } from '@entur/icons'
import { EditIcon, FolderIcon } from '@entur/icons'
import Link from 'next/link'
import { BoardTable } from '../components/BoardTable'
import { CreateBoard } from 'app/(admin)/components/CreateBoard'
import { BreadcrumbsNav } from './BreadcrumbsNav'

export type TProps = {
params: Promise<{ id: TOrganizationID }>
Expand Down Expand Up @@ -43,12 +44,7 @@ async function FolderPage(props: TProps) {

return (
<div className="flex flex-col gap-4 container pb-20">
<p className="flex flex-row gap-2 items-center">
<BackArrowIcon className="!top-0" aria-label="Tilbake-ikon" />
<Link href="/boards" className="underline">
Mapper og tavler
</Link>
</p>
<BreadcrumbsNav folder={folder} />
<div className="flex flex-row justify-between">
<Heading1 className="flex flex-row gap-4 items-center">
<FolderIcon aria-label="Mappe-ikon" className="!top-0" />
Expand Down
2 changes: 2 additions & 0 deletions tavla/app/(admin)/edit/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { getUserFromSessionCookie } from 'app/(admin)/utils/server'
import { CompressSurvey } from './components/CompressSurvey'
import { Delete } from 'app/(admin)/boards/components/Column/Delete'
import { Settings } from './components/Settings'
import { BreadcrumbsNav } from 'app/(admin)/boards/[id]/BreadcrumbsNav'

export type TProps = {
params: Promise<{ id: TBoardID }>
Expand Down Expand Up @@ -58,6 +59,7 @@ export default async function EditPage(props: TProps) {
return (
<div className="bg-gray-50">
<div className="flex flex-col gap-6 pt-16 container pb-20">
<BreadcrumbsNav folder={organization} board={board} />
<div className="flex flex-col md:flex-row justify-between pb-2">
<Heading1 margin="top">
Rediger {board.meta?.title}
Expand Down
2 changes: 1 addition & 1 deletion tavla/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"@entur/icons": "7.7.0",
"@entur/layout": "2.3.18",
"@entur/loader": "0.5.12",
"@entur/menu": "5.0.3",
"@entur/menu": "5.1.3",
"@entur/modal": "1.7.55",
"@entur/tokens": "3.17.2",
"@entur/tooltip": "5.1.1",
Expand Down
5 changes: 5 additions & 0 deletions tavla/src/Shared/styles/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,8 @@ a.eds-button > .eds-icon,
.eds-dropdown__list__item {
word-break: keep-all;
}

.eds-breadcrumbs {
display: flex;
flex-direction: row;
}
160 changes: 146 additions & 14 deletions tavla/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -771,6 +771,19 @@ __metadata:
languageName: node
linkType: hard

"@entur/a11y@npm:^0.2.97":
version: 0.2.97
resolution: "@entur/a11y@npm:0.2.97"
dependencies:
"@entur/tokens": ^3.18.0
"@entur/utils": ^0.12.2
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: 84960d7de513904915568abd11b1c5866f8a2d4940b6765f0c20495e6c67997fc418840bcdb0e2eb39793189ad88c3bd7babee7859fdb60752aa4aef398dbb37
languageName: node
linkType: hard

"@entur/alert@npm:0.16.19":
version: 0.16.19
resolution: "@entur/alert@npm:0.16.19"
Expand Down Expand Up @@ -821,6 +834,21 @@ __metadata:
languageName: node
linkType: hard

"@entur/button@npm:^3.3.3":
version: 3.3.3
resolution: "@entur/button@npm:3.3.3"
dependencies:
"@entur/loader": ^0.5.20
"@entur/tokens": ^3.18.0
"@entur/utils": ^0.12.2
classnames: ^2.3.1
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: cf611351feb073a0e83a4254531566be0e066aee4858690e7108f052ed29fb698d20e275de722be992bf120e48ed5600a73b2753042b717668b82a8c184b2134
languageName: node
linkType: hard

"@entur/chip@npm:0.7.23":
version: 0.7.23
resolution: "@entur/chip@npm:0.7.23"
Expand Down Expand Up @@ -895,6 +923,23 @@ __metadata:
languageName: node
linkType: hard

"@entur/expand@npm:^3.6.3":
version: 3.6.3
resolution: "@entur/expand@npm:3.6.3"
dependencies:
"@entur/icons": ^7.7.1
"@entur/tokens": ^3.18.0
"@entur/typography": ^1.9.3
"@entur/utils": ^0.12.2
classnames: ^2.3.1
react-collapse: ^5.1.1
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: ac022f7e8defa4084932053834766d8298a0885c7ba70f836885af2140e134201d0eabfbb3ff707ca1698740968f7de66a1c5931b01cffc059598f83b790addf
languageName: node
linkType: hard

"@entur/form@npm:8.1.5":
version: 8.1.5
resolution: "@entur/form@npm:8.1.5"
Expand Down Expand Up @@ -952,6 +997,17 @@ __metadata:
languageName: node
linkType: hard

"@entur/icons@npm:^7.7.1":
version: 7.7.1
resolution: "@entur/icons@npm:7.7.1"
dependencies:
"@entur/tokens": ^3.18.0
peerDependencies:
react: ">=16.8.0"
checksum: 6e610ac0f552bc37d0d22404b1f4790355dc6b1d0e03def8a09dafe3abba21b30e454724064474bfc9f1b05f68f3e2d230893554eff649feb2dc51b169377624
languageName: node
linkType: hard

"@entur/layout@npm:2.3.18":
version: 2.3.18
resolution: "@entur/layout@npm:2.3.18"
Expand Down Expand Up @@ -984,6 +1040,22 @@ __metadata:
languageName: node
linkType: hard

"@entur/layout@npm:^3.0.0":
version: 3.0.0
resolution: "@entur/layout@npm:3.0.0"
dependencies:
"@entur/icons": ^7.7.1
"@entur/tokens": ^3.18.0
"@entur/typography": ^1.9.3
"@entur/utils": ^0.12.2
classnames: ^2.3.1
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: e610081770f9e306242074e3bc3075a61b35d41a6a092ac97baf715d762f3d13c39f5f97f7a7c20d89dd60ccabd657c4e8c816520dd3db51134bc34341beab97
languageName: node
linkType: hard

"@entur/loader@npm:0.5.12":
version: 0.5.12
resolution: "@entur/loader@npm:0.5.12"
Expand Down Expand Up @@ -1014,25 +1086,40 @@ __metadata:
languageName: node
linkType: hard

"@entur/menu@npm:5.0.3":
version: 5.0.3
resolution: "@entur/menu@npm:5.0.3"
"@entur/loader@npm:^0.5.20":
version: 0.5.20
resolution: "@entur/loader@npm:0.5.20"
dependencies:
"@entur/a11y": ^0.2.92
"@entur/button": ^3.2.34
"@entur/expand": ^3.5.23
"@entur/icons": ^7.4.2
"@entur/layout": ^2.3.18
"@entur/tokens": ^3.17.2
"@entur/tooltip": ^5.1.1
"@entur/typography": ^1.8.47
"@entur/utils": ^0.12.0
"@entur/tokens": ^3.18.0
"@entur/typography": ^1.9.3
"@entur/utils": ^0.12.2
classnames: ^2.3.1
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: a51f1113b2fe78596ac89c24ea94a0cc0427f58dd54c5ff0636a83c67fa583b22a7937905dd36d5f935eb5cbb67da8c7b3cc7772f67f71dd8849feea63294569
languageName: node
linkType: hard

"@entur/menu@npm:5.1.3":
version: 5.1.3
resolution: "@entur/menu@npm:5.1.3"
dependencies:
"@entur/a11y": ^0.2.97
"@entur/button": ^3.3.3
"@entur/expand": ^3.6.3
"@entur/icons": ^7.7.1
"@entur/layout": ^3.0.0
"@entur/tokens": ^3.18.0
"@entur/tooltip": ^5.2.3
"@entur/typography": ^1.9.3
"@entur/utils": ^0.12.2
"@floating-ui/react": ^0.26.23
classnames: ^2.3.1
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: 78566465656b5bfa85eb81e8be8db20d5593bceae702503cfd0ca98d209d186c5affe9226ccd9132891ae9f52db28087ad0fdaa1ec47f3bc8ca69aee62d39534
checksum: 51659e85c7c38c24f0fedcf80828b94968ee01b3b3e60e7642407700430e0ae6337ddd787087bbebe1471c0b2d2284bc55bebef237dc30b6ea83a177eb3801ff
languageName: node
linkType: hard

Expand Down Expand Up @@ -1087,6 +1174,16 @@ __metadata:
languageName: node
linkType: hard

"@entur/tokens@npm:^3.18.0":
version: 3.18.0
resolution: "@entur/tokens@npm:3.18.0"
dependencies:
flat: ^5.0.1
hex-rgb: ^4.3.0
checksum: 7d8a981406c44aebe63329faeaa8494979a4b4a966e35c3c4eb4cfc8a9bdbac3ec6f49360234c01a1b34e2cc4811df29ee6ae1c50ef63c3963507830a55b7ff9
languageName: node
linkType: hard

"@entur/tooltip@npm:5.1.1":
version: 5.1.1
resolution: "@entur/tooltip@npm:5.1.1"
Expand Down Expand Up @@ -1125,6 +1222,25 @@ __metadata:
languageName: node
linkType: hard

"@entur/tooltip@npm:^5.2.3":
version: 5.2.3
resolution: "@entur/tooltip@npm:5.2.3"
dependencies:
"@entur/button": ^3.3.3
"@entur/icons": ^7.7.1
"@entur/layout": ^3.0.0
"@entur/tokens": ^3.18.0
"@entur/utils": ^0.12.2
"@floating-ui/react": ^0.26.24
"@floating-ui/react-dom": ^2.1.0
classnames: ^2.3.1
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: d9dccda60d4633695e62e13c8abd1100f990ed74a391b4c523b1cab14d6035441f2a18b4d1f145a73d90780f3b7adc031898ce11ec44e7bd1bf6b03f097b42cb
languageName: node
linkType: hard

"@entur/typography@npm:1.8.47":
version: 1.8.47
resolution: "@entur/typography@npm:1.8.47"
Expand Down Expand Up @@ -1157,6 +1273,22 @@ __metadata:
languageName: node
linkType: hard

"@entur/typography@npm:^1.9.3":
version: 1.9.3
resolution: "@entur/typography@npm:1.9.3"
dependencies:
"@entur/icons": ^7.7.1
"@entur/tokens": ^3.18.0
"@entur/utils": ^0.12.2
classnames: ^2.3.1
normalize-scss: ^8.0.0
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: fc56cdc5da5fcc972ccdf5c2e55b56fafc59c72ca6fe8aae26438e00c1473333af47c1616ed3df8f6850cb165fac3d172aef99cf187ab150c30e2a430cbf34ee
languageName: node
linkType: hard

"@entur/utils@npm:^0.12.0, @entur/utils@npm:^0.12.2":
version: 0.12.2
resolution: "@entur/utils@npm:0.12.2"
Expand Down Expand Up @@ -14247,7 +14379,7 @@ __metadata:
"@entur/icons": 7.7.0
"@entur/layout": 2.3.18
"@entur/loader": 0.5.12
"@entur/menu": 5.0.3
"@entur/menu": 5.1.3
"@entur/modal": 1.7.55
"@entur/tokens": 3.17.2
"@entur/tooltip": 5.1.1
Expand Down