disabled breadcrumb (#640)

Author: ignasveleckisnc

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.16.0",
+  "version": "8.16.1",
   "license": "MIT",
   "repository": {
     "type": "git",

src/components/breadcrumbs/Breadcrumbs.stories.mdx

@@ -16,17 +16,20 @@ import { Breadcrumbs } from ".";
 
 ## BreadcrumbsList properties
 
-| properties | required | type   | description |
-| ---------: | :------: | :----- | :---------- |
-|      label |   true   | string |             |
-|        uri |   true   | string |             |
+| properties | required | type    | description |
+| ---------: | :------: | :------ | :---------- |
+|      label |   true   | string  |             |
+|        uri |   true   | string  |             |
+| isDisabled |  false   | boolean |             |
 
 <Canvas>
   <Story name="default">
     <Breadcrumbs
       list={[
         { label: "Home", uri: `#` },
         { label: "Hosts", uri: `#` },
+        { label: "Disabled", uri: `#`, isDisabled: true },
+        { label: "Hosts 2", uri: `#` },
         { label: "Host Details", uri: `#` },
       ]}
     />

src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,17 +1,65 @@
 import * as React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import theme from "../../theme";
 
 export type BreadcrumbsList = {
   label: string;
   uri: string;
+  isDisabled?: boolean;
 };
 
 export type BreadcrumbsListProps = {
   list: BreadcrumbsList[];
-  Component?: React.FC<{ to: string }>;
+  Component?: React.FC<{ to: string; isDisabled?: boolean }>;
 };
 
+export function Breadcrumbs({ list, Component }: BreadcrumbsListProps) {
+  return (
+    <StyledBreadcrumbs>
+      <ul>
+        {list.map((breadcrumb) => (
+          <li key={breadcrumb.label}>
+            {Component ? (
+              <Component
+                isDisabled={breadcrumb.isDisabled}
+                css={aStyles}
+                to={breadcrumb.uri}
+              >
+                {breadcrumb.label}
+              </Component>
+            ) : (
+              <StyledLink
+                isDisabled={breadcrumb.isDisabled}
+                href={breadcrumb.uri}
+              >
+                {breadcrumb.label}
+              </StyledLink>
+            )}
+          </li>
+        ))}
+      </ul>
+    </StyledBreadcrumbs>
+  );
+}
+
+const aStyles = css`
+  line-height: 1.125rem;
+  font-size: ${theme.fontSizes.sm};
+  font-weight: ${theme.fontWeights.regular};
+  font-family: ${theme.fonts.body};
+  text-decoration: none;
+  transition: ${theme.transition};
+  color: ${theme.color.interactive.link};
+  &:hover,
+  &:focus,
+  &:active {
+    opacity: ${theme.opacity};
+  }
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
 const StyledBreadcrumbs = styled.nav`
   ul {
     padding: 0;
@@ -24,21 +72,7 @@ const StyledBreadcrumbs = styled.nav`
       text-transform: ${theme.typography.titleCase};
 
       a {
-        line-height: 1.125rem;
-        font-size: ${theme.fontSizes.sm};
-        font-weight: ${theme.fontWeights.regular};
-        font-family: ${theme.fonts.body};
-        color: ${theme.color.interactive.link};
-        text-decoration: none;
-        transition: ${theme.transition};
-        &:hover,
-        &:focus,
-        &:active {
-          opacity: ${theme.opacity};
-        }
-        &:hover {
-          text-decoration: underline;
-        }
+        ${aStyles}
       }
 
       &:after {
@@ -62,20 +96,14 @@ const StyledBreadcrumbs = styled.nav`
   }
 `;
 
-export function Breadcrumbs({ list, Component }: BreadcrumbsListProps) {
-  return (
-    <StyledBreadcrumbs>
-      <ul>
-        {list.map((br) => (
-          <li key={br.label}>
-            {Component ? (
-              <Component to={br.uri || ""}>{br.label}</Component>
-            ) : (
-              <a href={br.uri || ""}>{br.label}</a>
-            )}
-          </li>
-        ))}
-      </ul>
-    </StyledBreadcrumbs>
-  );
-}
+const disabledLinkStyles = css`
+  pointer-events: none;
+  color: ${theme.color.text.text02};
+`;
+
+const StyledLink = styled.a<{ isDisabled?: boolean }>`
+  && {
+    ${aStyles}
+    ${(props) => (props.isDisabled ? disabledLinkStyles : {})}
+  }
+`;