fix: remove underlines from breadcrumbs (#1451)

* changes non-links to midGrey
nulogy · Oct 11, 2024 · 6a68084 · 6a68084
1 parent c20d65a
commit 6a68084
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -52,7 +52,8 @@
     "@nulogy/icons": "4",
     "react": ">=16.10.2",
     "react-dom": ">=16.10.2",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.1.0",
+    "typescript": "4.9.5"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",

diff --git a/src/Breadcrumbs/Breadcrumbs.story.tsx b/src/Breadcrumbs/Breadcrumbs.story.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
 import { Link } from "../Link";
 import { Text } from "../Type";
-import { Breadcrumbs } from "./index";
 import { Flex } from "../Flex";
 import dashed from "../utils/dashed";
+import { Breadcrumbs } from "./index";
 
 export default {
   title: "Components/Breadcrumbs",
@@ -17,7 +17,7 @@ export const _Breadcrumbs = () => (
     </Breadcrumbs>
     <Breadcrumbs>
       <Link href="/">Home</Link>
-      <Link href="/Tenants">Tenants</Link>
+      <Link href="/">Tenants</Link>
     </Breadcrumbs>
   </>
 );
@@ -44,7 +44,7 @@ export const WithDifferentSizes = () => (
 export const WithoutLink = () => (
   <Breadcrumbs>
     <Link href="/">Home</Link>
-    <Link href="/Tenants">Tenants</Link>
+    <Link href="/">Tenants</Link>
     <Text>Current Tenant</Text>
   </Breadcrumbs>
 );
@@ -59,7 +59,7 @@ export const WithReactRouter = () => (
       <Link as={ReactRouterLink} to="/">
         Home
       </Link>
-      <Link as={ReactRouterLink} to="/Tenants">
+      <Link as={ReactRouterLink} to="/">
         Tenants
       </Link>
       <Text>Current Tenant</Text>

diff --git a/src/Breadcrumbs/BreadcrumbsListItem.tsx b/src/Breadcrumbs/BreadcrumbsListItem.tsx
@@ -28,9 +28,10 @@ export const BreadcrumbsListItem = styled.li<{ size: ComponentSize }>(
     listStyle: "none",
     display: "inline-flex",
     alignSelf: "center",
-    color: theme.colors.darkBlue,
+    color: theme.colors.midGrey,
     a: {
       color: theme.colors.darkBlue,
+      textDecorationLine: "none",
     },
     "a:visited": {
       color: theme.colors.darkBlue,
@@ -46,7 +47,7 @@ export const BreadcrumbsListItem = styled.li<{ size: ComponentSize }>(
       large: {
         "a, p": {
           py: "x2",
-          px: "x1",
+          px: "x0",
           fontSize: "medium",
         },
       },

diff --git a/src/Layout/Header.story.tsx b/src/Layout/Header.story.tsx
@@ -10,6 +10,7 @@ import {
   PrimaryButton,
   StatusIndicator,
   Header,
+  Text,
 } from "..";
 import Summary from "../Summary/Summary";
 import SummaryItem from "../Summary/SummaryItem";
@@ -71,6 +72,7 @@ export const WithContent = () => (
       <Breadcrumbs>
         <Link href="/">Home</Link>
         <Link href="/">Materials</Link>
+        <Text>Orders</Text>
       </Breadcrumbs>
     )}
     title="Materials Overview"