feat(breadcrumbs): add breadcrumbs component

yomatters · yomatters · commit 8a56d0c67624 · 2024-12-13T12:56:18.000-05:00
diff --git a/index.html b/index.html
@@ -53,26 +53,13 @@
     <script type="module">
       import {
         footer,
-        footerMenus,
         header,
         resourceCatalog,
-        siteMenus,
         tableOfContents,
         universalMenuItems,
         universalMenus,
       } from "/src/index.jsx";
 
-      const siteItems = [
-        {
-          name: "Resources",
-          href: "/access-ci-ui",
-        },
-        {
-          name: "Resource Providers",
-          href: "https://access-ci.org/about/resource-providers/",
-        },
-      ];
-
       universalMenus({
         loginUrl: "/login",
         logoutUrl: "/logout",
@@ -83,21 +70,11 @@
         target: document.getElementById("header"),
       });
 
-      siteMenus({
-        items: siteItems,
-        target: document.getElementById("site-menus"),
-        siteName: "Resources",
-      });
-
       resourceCatalog({
+        baseUri: "/access-ci-ui",
         target: document.getElementById("resource-catalog"),
       });
 
-      footerMenus({
-        items: siteItems,
-        target: document.getElementById("footer-menus"),
-      });
-
       footer({ target: document.getElementById("footer") });
     </script>
   </body>
diff --git a/src/base.css b/src/base.css
@@ -4,6 +4,7 @@
   --contrast-2: #3f3f3f;
   --contrast-3: #707070;
   --contrast-6: #999999;
+  --contrast-7: #d9d9d9;
   --contrast-8: #dfdfdf;
   --contrast-9: #e5e5e5;
   --green-400: #288654;
diff --git a/src/breadcrumbs.css b/src/breadcrumbs.css
@@ -0,0 +1,59 @@
+ul.breadcrumbs {
+  --offset: calc((100vw - var(--width)) / 2);
+  border-bottom: 1px solid var(--contrast-7);
+  box-sizing: border-box;
+  font-size: 14px;
+  font-stretch: 70%;
+  font-weight: 600;
+  line-height: 20px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  padding-left: 30px;
+  padding-right: 30px;
+  width: 100vw;
+}
+ul.breadcrumbs.top-border {
+  border-top: 1px solid var(--contrast-7);
+}
+ul.breadcrumbs.expand {
+  margin-left: -30px;
+  margin-right: -30px;
+}
+ul.breadcrumbs li {
+  display: inline-block;
+  margin: 0;
+  padding: 11px 0 6px;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
+ul.breadcrumbs li.home {
+  vertical-align: top;
+}
+ul.breadcrumbs li.home img {
+  height: 14px;
+  margin-top: 3px;
+}
+ul.breadcrumbs li:not(.home)::before {
+  content: "/";
+  margin: 0 12px;
+}
+ul.breadcrumbs li a {
+  color: var(--teal-700);
+  text-decoration: none;
+}
+ul.breadcrumbs li:not(.home) a:active,
+ul.breadcrumbs li:not(.home) a:focus,
+ul.breadcrumbs li:not(.home) a:hover {
+  text-decoration: underline;
+}
+@media (min-width: 600px) {
+  ul.breadcrumbs {
+    padding-left: var(--offset);
+    padding-right: var(--offset);
+  }
+  ul.breadcrumbs.expand {
+    margin-left: calc(var(--offset) * -1);
+    margin-right: calc(var(--offset) * -1);
+  }
+}
diff --git a/src/breadcrumbs.jsx b/src/breadcrumbs.jsx
@@ -0,0 +1,29 @@
+import homeIconUrl from "./icons/home.svg";
+
+export default function Breadcrumbs({
+  expandWidth = false,
+  homeTitle = "ACCESS Home",
+  homeUrl = "https://access-ci.org/",
+  items = [],
+  topBorder = false,
+}) {
+  if (!items || !items.length) return;
+  return (
+    <ul
+      class={`breadcrumbs ${expandWidth ? "expand" : ""} ${
+        topBorder ? "top-border" : ""
+      }`}
+    >
+      <li class="home">
+        <a href={homeUrl} title={homeTitle}>
+          <img src={homeIconUrl} alt={homeTitle} />
+        </a>
+      </li>
+      {items.map((item) => (
+        <li class={item.classes || ""}>
+          {item.href ? <a href={item.href}>{item.name}</a> : item.name}
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/header.css b/src/header.css
@@ -5,7 +5,7 @@
 }
 @media (min-width: 900px) {
   .container {
-    height: 146px;
+    height: 144px;
     padding-top: 52px;
   }
 }
diff --git a/src/icons/home.svg b/src/icons/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#1a5b6e" d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
diff --git a/src/index.jsx b/src/index.jsx
@@ -1,3 +1,5 @@
+import Breadcrumbs from "./breadcrumbs";
+import breadcrumbsStyle from "./breadcrumbs.css?inline";
 import { Footer } from "./footer";
 import { Header } from "./header";
 import { FooterMenus, Menus } from "./menu";
@@ -6,6 +8,16 @@ import { ResourceCatalog } from "./resource-catalog";
 import { TableOfContents } from "./table-of-contents";
 import { renderShadow } from "./utils";
 
+const breadcrumbs = (params = {}) => {
+  renderShadow(
+    <>
+      <Breadcrumbs {...params} />
+      <style>{breadcrumbsStyle}</style>
+    </>,
+    params.target
+  );
+};
+
 const footer = (params = {}) => {
   renderShadow(<Footer {...params} />, params.target);
 };
@@ -81,6 +93,7 @@ const resourceCatalog = ({ baseUri, showTitle, target, title }) =>
   );
 
 export {
+  breadcrumbs,
   footer,
   header,
   footerMenus,
diff --git a/src/resource-catalog.css b/src/resource-catalog.css
@@ -7,6 +7,7 @@
 
 @import url("./accordion.css");
 @import url("./alert.css");
+@import url("./breadcrumbs.css");
 @import url("./carousel.css");
 @import url("./components.css");
 @import url("./donut-chart.css");
diff --git a/src/resource-catalog.jsx b/src/resource-catalog.jsx
@@ -7,7 +7,7 @@ const ResourceHome = lazy(() => import("./resource-home.jsx"));
 export function ResourceCatalog({
   title = "Resources",
   showTitle = true,
-  baseUri = "/access-ci-ui",
+  baseUri = "/resources",
 }) {
   return (
     <>
@@ -20,7 +20,10 @@ export function ResourceCatalog({
               title={title}
               showTitle={showTitle}
             />
-            <ResourceGroupDetail path={`${baseUri}/:infoGroupId`} />
+            <ResourceGroupDetail
+              path={`${baseUri}/:infoGroupId`}
+              baseUri={baseUri}
+            />
           </Router>
         </ErrorBoundary>
       </LocationProvider>
diff --git a/src/resource-group-detail.jsx b/src/resource-group-detail.jsx
@@ -1,3 +1,4 @@
+import Breadcrumbs from "./breadcrumbs";
 import ResourceGroupAffinityGroup from "./resource-group-affinity-group";
 import ResourceGroupDescription from "./resource-group-description";
 import ResourceGroupDiscussion from "./resource-group-discussion";
@@ -8,20 +9,39 @@ import ResourceGroupProjects from "./resource-group-projects";
 import ResourceGroupQueueMetrics from "./resource-group-queue-metrics";
 import ResourceGroupSoftware from "./resource-group-software";
 import SectionNavigation from "./section-navigation";
+import { useResourceGroup } from "./utils";
+
+export default function ResourceGroupDetail({
+  baseUri,
+  infoGroupId,
+  showBreadcrumbs = true,
+}) {
+  const resourceGroup = useResourceGroup(infoGroupId);
+
+  const breadcrumbItems = [{ name: "Resources", href: baseUri }];
+  if (resourceGroup) breadcrumbItems.push({ name: resourceGroup.name });
 
-export default function ResourceGroupDetail({ infoGroupId }) {
   return (
-    <div class="resource-group-detail">
-      <ResourceGroupDescription infoGroupId={infoGroupId} />
-      <SectionNavigation />
-      <ResourceGroupHardware infoGroupId={infoGroupId} />
-      <ResourceGroupDocumentation infoGroupId={infoGroupId} />
-      <ResourceGroupEvents infoGroupId={infoGroupId} />
-      <ResourceGroupAffinityGroup infoGroupId={infoGroupId} />
-      <ResourceGroupSoftware infoGroupId={infoGroupId} />
-      <ResourceGroupProjects infoGroupId={infoGroupId} />
-      <ResourceGroupQueueMetrics infoGroupId={infoGroupId} />
-      <ResourceGroupDiscussion infoGroupId={infoGroupId} />
-    </div>
+    <>
+      {showBreadcrumbs && (
+        <Breadcrumbs
+          expandWidth={true}
+          items={breadcrumbItems}
+          topBorder={true}
+        />
+      )}
+      <div class="resource-group-detail">
+        <ResourceGroupDescription infoGroupId={infoGroupId} />
+        <SectionNavigation />
+        <ResourceGroupHardware infoGroupId={infoGroupId} />
+        <ResourceGroupDocumentation infoGroupId={infoGroupId} />
+        <ResourceGroupEvents infoGroupId={infoGroupId} />
+        <ResourceGroupAffinityGroup infoGroupId={infoGroupId} />
+        <ResourceGroupSoftware infoGroupId={infoGroupId} />
+        <ResourceGroupProjects infoGroupId={infoGroupId} />
+        <ResourceGroupQueueMetrics infoGroupId={infoGroupId} />
+        <ResourceGroupDiscussion infoGroupId={infoGroupId} />
+      </div>
+    </>
   );
 }
diff --git a/src/resource-home.jsx b/src/resource-home.jsx
@@ -1,11 +1,17 @@
 import { useMemo, useState } from "preact/hooks";
 import { filterResourceGroups, useResourceGroups } from "./utils";
 
+import Breadcrumbs from "./breadcrumbs";
 import { ResourceCategory } from "./resource-category";
 import { ResourceFilters } from "./resource-filters";
 import { ResourcePathways } from "./resource-pathways";
 
-export default function ResourceHome({ baseUri, title, showTitle }) {
+export default function ResourceHome({
+  baseUri,
+  title,
+  showBreadcrumbs = true,
+  showTitle = true,
+}) {
   const [activeTagIds, setActiveTagIds] = useState([]);
   const groups = useResourceGroups();
   const active = useMemo(
@@ -24,6 +30,13 @@ export default function ResourceHome({ baseUri, title, showTitle }) {
 
   return (
     <>
+      {showBreadcrumbs && (
+        <Breadcrumbs
+          expandWidth={true}
+          items={[{ name: "Resources" }]}
+          topBorder={true}
+        />
+      )}
       {title && <h1 class={showTitle ? "" : "visually-hidden"}>{title}</h1>}
       <ResourcePathways />
       <div id="browse-resources">

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`}`
`6`	`6`	`@media (min-width: 900px) {`
`7`	`7`	`.container {`
`8`		`- height: 146px;`
	`8`	`+ height: 144px;`
`9`	`9`	`padding-top: 52px;`
`10`	`10`	`}`
`11`	`11`	`}`