Merge pull request #17 from github/ui/user-details-breadcrumbs

Add user details breadcrumbs

Author: asizikov

src/App.css

@@ -1312,42 +1312,97 @@ td.cost-centers-view__num {
   gap: 16px;
 }
 
-.user-details__backButton {
-  border: none;
-  cursor: pointer;
-}
-
 .user-details__header {
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
+  flex-direction: column;
   gap: 16px;
-  flex-wrap: wrap;
 }
 
-.user-details__title {
+.user-details__titleGroup {
   display: flex;
-  align-items: baseline;
-  gap: 12px;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.user-details__breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.user-details__title--meta {
-  row-gap: 8px;
+.user-details__breadcrumbItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.user-details__title--meta > *:not(:last-child)::after {
-  content: '|';
-  margin-left: 12px;
-  color: #8b949e;
+.user-details__breadcrumbItem:not(:last-child)::after {
+  content: '/';
+  font-size: 18px;
+  font-weight: 600;
+  color: #8c959f;
+}
+
+.user-details__breadcrumb {
+  font: inherit;
+  font-size: 18px;
+  font-weight: 600;
+  color: #57606a;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.user-details__breadcrumb--link {
+  color: #0969da;
+  cursor: pointer;
+}
+
+.user-details__breadcrumb--link:hover {
+  text-decoration: underline;
+}
+
+.user-details__breadcrumb--link:focus-visible {
+  outline: 2px solid #0969da;
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+.user-details__breadcrumbItem--current {
+  color: #1f2328;
+}
+
+.user-details__breadcrumbItem--current .user-details__heading {
+  color: inherit;
 }
 
 .user-details__heading {
   margin: 0;
   font-size: 18px;
+  font-weight: 600;
   color: #1f2328;
 }
 
+.user-details__metaRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  row-gap: 8px;
+  flex-wrap: wrap;
+}
+
+.user-details__metaRow > *:not(:last-child)::after {
+  content: '|';
+  margin-left: 12px;
+  color: #8b949e;
+}
+
 .user-details__meta {
   font-size: 14px;
   color: #57606a;

src/views/UserDetailsView.tsx

@@ -145,15 +145,27 @@ export function UserDetailsView({ user, rangeStart, rangeEnd, onBackToUsers }: U
 
   return (
     <section className="user-details">
-      {onBackToUsers && (
-        <button type="button" className="next-steps__cta next-steps__cta--primary user-details__backButton" onClick={onBackToUsers}>
-          Back to users
-        </button>
-      )}
-
       <div className="user-details__header">
-        <div className="user-details__title user-details__title--meta">
-          <h2 className="user-details__heading">Username: {user.username}</h2>
+        <div className="user-details__titleGroup">
+          <nav aria-label="Breadcrumb">
+            <ol className="user-details__breadcrumbs">
+              <li className="user-details__breadcrumbItem">
+                {onBackToUsers ? (
+                  <button type="button" className="user-details__breadcrumb user-details__breadcrumb--link" onClick={onBackToUsers}>
+                    users
+                  </button>
+                ) : (
+                  <span className="user-details__breadcrumb">users</span>
+                )}
+              </li>
+              <li className="user-details__breadcrumbItem user-details__breadcrumbItem--current" aria-current="page">
+                <h2 className="user-details__heading">{user.username}</h2>
+              </li>
+            </ol>
+          </nav>
+        </div>
+
+        <div className="user-details__metaRow">
           {user.organizations.length > 0 && <span className="user-details__meta">Organizations: {joinValues(user.organizations)}</span>}
           {user.costCenters.length > 0 && <span className="user-details__meta">Cost Centers: {joinValues(user.costCenters)}</span>}
           <span className="user-details__meta">Days Active: {formatInt(activeDailyEntries.length)}</span>