Fix styles

Author: severo

.storybook/global.css

@@ -85,8 +85,3 @@ h6 {
 .custom-versions div a {
   text-decoration: underline;
 }
-
-.custom-search {
-  margin-left: auto;
-  margin-right: 20px;
-}

src/components/Breadcrumb/Breadcrumb.module.css

@@ -4,7 +4,7 @@
   display: flex;
   font-size: 18px;
   height: 32px;
-  justify-content: start;
+  justify-content: space-between;
   gap: 10px;
   min-height: 32px;
   padding-left: 20px;
@@ -47,3 +47,11 @@
     }
   }
 }
+
+.versions {
+  margin-left: auto;
+
+  [aria-current] {
+    font-weight: bold;
+  }
+}

src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -20,10 +20,11 @@ export const Default: Story = {
         { text: 'part2/', sourceId: '/part1/part2/' },
       ],
       versions: {
-        label: 'Versions',
+        label: 'Branches',
         versions: [
-          { label: 'v1.0', sourceId: 'part1/part2/file.txt?version=v1.0' },
-          { label: 'v2.0', sourceId: 'part1/part2/file.txt?version=v2.0' },
+          { label: 'master', sourceId: '/part1/part2/file.txt' },
+          { label: 'dev', sourceId: '/part1/part2/file.txt?branch=dev' },
+          { label: 'refs/convert/parquet', sourceId: '/part1/part2/file.txt?branch=refs/convert/parquet' },
         ],
       },
     },
@@ -40,7 +41,7 @@ export const Default: Story = {
     return (
       <ConfigProvider value={config}>
         <Breadcrumb {...args}>
-          <div className="custom-search">SEARCH</div>
+          <input type='text' placeholder="Search..." />
         </Breadcrumb>
       </ConfigProvider>
     )

src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import type { Source } from '../../lib/sources/types.js'
-import { Version } from '../../lib/sources/types.js'
 import { cn } from '../../lib/utils.js'
 import Dropdown from '../Dropdown/Dropdown.js'
 import styles from './Breadcrumb.module.css'
@@ -11,12 +10,20 @@ interface BreadcrumbProps {
   children?: ReactNode
 }
 
-function Versions({ versions, label }: { versions: Version[], label: string }) {
+function Versions({ source }: { source: Source }) {
   const { routes, customClass } = useConfig()
 
-  return <Dropdown label={label} className={customClass?.versions}>
+  if (!source.versions) return null
+  const { label, versions } = source.versions
+
+  return <Dropdown label={label} className={cn(styles.versions, customClass?.versions)} align="right">
     {versions.map(({ label, sourceId }) => {
-      return <a key={sourceId} role="menuitem" href={routes?.getSourceRouteUrl?.({ sourceId })}>{label}</a>
+      return <a
+        key={sourceId}
+        role="menuitem"
+        href={routes?.getSourceRouteUrl?.({ sourceId })}
+        aria-current={sourceId === source.sourceId ? 'true' : undefined}
+      >{label}</a>
     })}
   </Dropdown>
 }
@@ -33,7 +40,7 @@ export default function Breadcrumb({ source, children }: BreadcrumbProps) {
         <a href={routes?.getSourceRouteUrl?.({ sourceId: part.sourceId }) ?? ''} key={depth}>{part.text}</a>
       )}
     </div>
-    {source.versions && <Versions label={source.versions.label} versions={source.versions.versions} />}
+    {source.versions && <Versions source={source} />}
     {children}
   </nav>
 }