feat(Breadcrumbs): update component for new DS

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import BreadcrumbsComponent from "."
+
+type BreadcumbsType = typeof BreadcrumbsComponent
+
+const meta: Meta<BreadcumbsType> = {
+  title: "Molecules / Navigation / Breadcrumbs",
+  component: BreadcrumbsComponent,
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Breadcrumbs: Story = {
+  render: () => (
+    <>
+      <BreadcrumbsComponent slug="/en/staking/" />
+      <BreadcrumbsComponent slug="/en/staking/solo/" />
+      <BreadcrumbsComponent slug="/en/roadmap/merge/issuance/" />
+    </>
+  ),
+}

src/components/Breadcrumbs.tsx → src/components/Breadcrumbs/index.tsx

@@ -7,7 +7,7 @@ import {
   BreadcrumbProps,
 } from "@chakra-ui/react"
 
-import Link from "./Link"
+import Link from "../Link"
 
 export interface IProps extends BreadcrumbProps {
   slug: string
@@ -73,10 +73,10 @@ const Breadcrumbs: React.FC<IProps> = ({
       position="relative"
       zIndex="1"
       mb={8}
+      spacing="2.5"
       listProps={{
         m: 0,
-        lineHeight: 1,
-        rowGap: 1.5,
+        lineHeight: 1.6,
         flexWrap: "wrap",
       }}
       {...restProps}
@@ -87,10 +87,8 @@ const Breadcrumbs: React.FC<IProps> = ({
           <BreadcrumbItem
             key={idx}
             isCurrentPage={isCurrentPage}
-            color="textTableOfContents"
-            fontSize="sm"
+            color="body.medium"
             letterSpacing="wider"
-            lineHeight="140%"
             m={0}
           >
             <BreadcrumbLink
@@ -99,6 +97,15 @@ const Breadcrumbs: React.FC<IProps> = ({
               isPartiallyActive={isCurrentPage}
               _hover={{ color: "primary.base", textDecor: "none" }}
               _active={{ color: "primary.base" }}
+              sx={{
+                /*
+                 * Redundancy to ensure styling on the active
+                 * link is applied.
+                 */
+                '&[aria-current="page"]': {
+                  color: "primary.base",
+                },
+              }}
             >
               {crumb.text.toUpperCase()}
             </BreadcrumbLink>