RedHat-UX · adamjohnson · Jul 15, 2024 · Apr 22, 2024 · Apr 23, 2024 · Apr 23, 2024
diff --git a/.changeset/metal-snakes-wave.md b/.changeset/metal-snakes-wave.md
@@ -0,0 +1,19 @@
+---
+"@rhds/elements": minor
+---
+
+✨ Added `<rh-breadcrumb>`.
+
+A breadcrumb navigation is a secondary navigation element consisting of a list
+of links to the parent pages of the current page in hierarchical order. It
+helps users find their place within a website or web application.
+
+```html
+<rh-breadcrumb>
+  <ol>
+    <li><a href="../../../..">Home</a></li>
+    <li><a href="../../../">About</a></li>
+    <li><a href="#" aria-current="page">Our Team</a></li>
+  </ol>
+</rh-breadcrumb>
+```
diff --git a/docs/_data/comingSoonItems.yaml b/docs/_data/comingSoonItems.yaml
@@ -1,2 +1 @@
-- rh-breadcrumb
 - rh-footnote
diff --git a/elements/rh-breadcrumb/README.md b/elements/rh-breadcrumb/README.md
@@ -0,0 +1,22 @@
+# Breadcrumb
+
+A breadcrumb trail consists of a list of links to the parent pages of
+the current page in hierarchical order. It helps users find their
+place within a website or web application. Breadcrumbs are often
+placed horizontally before a page's main content.
+
+## Usage
+
+Place the following on your page with your site's breadcrumb
+navigation inside as an ordered list:
+
+```html
+<rh-breadcrumb>
+  <ol>
+    <li><a href="../../../..">Home</a></li>
+    <li><a href="../../../">About</a></li>
+    <li><a href="../../">Our Team</a></li>
+    <li><a href="" aria-current="page">Jamie Simeon Walinsky-Choeffer</a></li>
+  </ol>
+</rh-breadcrumb>
+```
diff --git a/elements/rh-breadcrumb/demo/color-context.html b/elements/rh-breadcrumb/demo/color-context.html
@@ -0,0 +1,37 @@
+<rh-context-demo>
+  <rh-breadcrumb>
+    <ol>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Products</a></li>
+      <li><a href="#">Red Hat OpenShift on AWS</a></li>
+      <li><a href="#">4</a></li>
+      <li><a href="#">Introduction to ROSA</a></li>
+      <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
+    </ol>
+  </rh-breadcrumb>
+
+  <h2 class="subtle-heading">Subtle:</h2>
+
+  <rh-breadcrumb variant="subtle">
+    <ol>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Products</a></li>
+      <li><a href="#">Red Hat OpenShift on AWS</a></li>
+      <li><a href="#">4</a></li>
+      <li><a href="#">Introduction to ROSA</a></li>
+      <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
+    </ol>
+  </rh-breadcrumb>
+</rh-context-demo>
+
+<link rel="stylesheet" href="../../rh-breadcrumb-lightdom.css">
+<script type="module">
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+  import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
+</script>
+
+<style>
+  .subtle-heading {
+    margin-block-start: 100px;
+  }
+</style>
diff --git a/elements/rh-breadcrumb/demo/non-interactive-last-item.html b/elements/rh-breadcrumb/demo/non-interactive-last-item.html
@@ -0,0 +1,34 @@
+<rh-breadcrumb>
+  <ol>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Products</a></li>
+    <li><a href="#">Red Hat OpenShift on AWS</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">Introduction to ROSA</a></li>
+    <li>Chapter 1. Understanding ROSA</li>
+  </ol>
+</rh-breadcrumb>
+
+<h2 class="subtle-heading">Subtle:</h2>
+
+<rh-breadcrumb variant="subtle">
+  <ol>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Products</a></li>
+    <li><a href="#">Red Hat OpenShift on AWS</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">Introduction to ROSA</a></li>
+    <li>Chapter 1. Understanding ROSA</li>
+  </ol>
+</rh-breadcrumb>
+
+<link rel="stylesheet" href="../../rh-breadcrumb-lightdom.css">
+<script type="module">
+  import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
+</script>
+
+<style>
+  .subtle-heading {
+    margin-block-start: 100px;
+  }
+</style>
diff --git a/elements/rh-breadcrumb/demo/rh-breadcrumb.html b/elements/rh-breadcrumb/demo/rh-breadcrumb.html
@@ -0,0 +1,15 @@
+<rh-breadcrumb>
+  <ol>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Products</a></li>
+    <li><a href="#">Red Hat OpenShift on AWS</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">Introduction to ROSA</a></li>
+    <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
+  </ol>
+</rh-breadcrumb>
+
+<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">
+<script type="module">
+  import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
+</script>
diff --git a/elements/rh-breadcrumb/demo/subtle.html b/elements/rh-breadcrumb/demo/subtle.html
@@ -0,0 +1,15 @@
+<rh-breadcrumb variant="subtle">
+  <ol>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Products</a></li>
+    <li><a href="#">Red Hat OpenShift on AWS</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">Introduction to ROSA</a></li>
+    <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
+  </ol>
+</rh-breadcrumb>
+
+<link rel="stylesheet" href="../../rh-breadcrumb-lightdom.css">
+<script type="module">
+  import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
+</script>
diff --git a/elements/rh-breadcrumb/docs/00-overview.md b/elements/rh-breadcrumb/docs/00-overview.md
@@ -0,0 +1,27 @@
+<link rel="stylesheet" type="text/css" href="/assets/packages/@rhds/elements/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css">
+
+## Overview
+
+{{ tagName | getElementDescription }}
+
+## Sample element
+
+<rh-breadcrumb>
+  <ol>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Products</a></li>
+    <li><a href="#">Red Hat OpenShift on AWS</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">Introduction to ROSA</a></li>
+    <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
+  </ol>
+</rh-breadcrumb>
+
+## Demo
+
+{% playground tagName=tagName %}{% endplayground %}
+{% cta href="./demo/", target="_blank" %}View the demo{% endcta %}
+
+## When to use
+
+- When a user needs to know where they are within a site
diff --git a/elements/rh-breadcrumb/docs/10-style.md b/elements/rh-breadcrumb/docs/10-style.md
@@ -0,0 +1,14 @@
+## Style
+
+## Theme
+
+## Configuration
+
+## Placement
+
+## Space
+
+## Interaction States
+
+
+
diff --git a/elements/rh-breadcrumb/docs/20-guidelines.md b/elements/rh-breadcrumb/docs/20-guidelines.md
@@ -0,0 +1,8 @@
+## Usage
+
+## Behavior
+
+## Writing Content
+
+## Best Practices
+
diff --git a/elements/rh-breadcrumb/docs/30-code.md b/elements/rh-breadcrumb/docs/30-code.md
@@ -0,0 +1,18 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+<rh-breadcrumb>
+  <ol>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Products</a></li>
+    <li><a href="#">Red Hat OpenShift on AWS</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">Introduction to ROSA</a></li>
+    <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
+  </ol>
+</rh-breadcrumb>
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-breadcrumb/docs/40-accessibility.md b/elements/rh-breadcrumb/docs/40-accessibility.md
@@ -0,0 +1,4 @@
+## Keyboard navigation
+
+## Focus order
+
diff --git a/elements/rh-breadcrumb/docs/screenshot.png b/elements/rh-breadcrumb/docs/screenshot.png
diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css
@@ -0,0 +1,121 @@
+rh-breadcrumb {
+  /* stylelint-disable-next-line max-line-length */
+  --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
+  /* stylelint-disable-next-line max-line-length */
+  --_breadcrumb-caret-image-subtle: var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
+  --_breadcrumb-link-color:
+    var(
+        --rh-breadcrumb-link-color,
+        var(--rh-color-interactive-blue-darker, #0066cc)
+      );
+  --_breadcrumb-link-color-current-page:
+    var(
+        --rh-breadcrumb-link-color-current-page,
+        var(--rh-color-text-primary-on-light, #151515)
+      );
+  --_breadcrumb-link-color-current-page-subtle:
+    var(
+        --rh-breadcrumb-link-color-current-page-subtle,
+        var(--rh-color-text-secondary-on-light, #4d4d4d)
+      );
+  --_breadcrumb-link-color-hover:
+    var(
+        --rh-breadcrumb-link-color-hover,
+        var(--rh-color-interactive-blue-darkest, #003366)
+      );
+  --_breadcrumb-link-color-visited:
+    var(
+        --rh-breadcrumb-link-color-visited,
+        var(--rh-color-interactive-purple-darker, #5e40be)
+      );
+  --_breadcrumb-link-color-visited-hover:
+    var(
+        --rh-breadcrumb-link-color-visited-hover,
+        var(--rh-color-interactive-purple-darkest, #21134d)
+      );
+  --_breadcrumb-link-focus-outline-color:
+    var(
+        --rh-breadcrumb-link-focus-outline-color,
+        var(--rh-color-border-interactive-on-light, #0066cc)
+      );
+
+  display: block;
+}
+
+rh-breadcrumb ol {
+  container-type: inline-size;
+  container-name: breadcrumbs-list;
+  font-size: var(--rh-font-size-body-text-sm, 0.875rem);
+  line-height: var(--rh-line-height-body-text, 1.5);
+  margin-block: 0;
+  padding-inline-start: 0;
+}
+
+rh-breadcrumb > ol > li {
+  background-image: var(--_breadcrumb-caret-image-default);
+  background-position: calc(100% - 14px) center;
+  background-repeat: no-repeat;
+  background-size: 10px;
+  display: inline-block;
+  margin-block-end: var(--rh-space-md, 8px);
+  padding-inline-end: var(--rh-breadcrumb-li-padding-inline-end, 42px);
+  vertical-align: bottom;
+}
+
+rh-breadcrumb[variant="subtle"] > ol > li {
+  background-image: var(--_breadcrumb-caret-image-subtle);
+}
+
+rh-breadcrumb > ol > li:first-child {
+  padding-inline-start: 0;
+}
+
+rh-breadcrumb > ol > li:last-child {
+  background-image: none;
+}
+
+rh-breadcrumb > ol > li,
+rh-breadcrumb > ol > li > a {
+  color: var(--_breadcrumb-link-color);
+}
+
+rh-breadcrumb > ol > li > a {
+  text-decoration: none;
+}
+
+rh-breadcrumb > ol > li > a:is(:hover, :focus, :active) {
+  color: var(--_breadcrumb-link-color-hover);
+  text-decoration: underline;
+}
+
+rh-breadcrumb > ol > li > a:is(:focus, :focus-visible) {
+  border-radius: var(--rh-border-radius-default, 3px);
+  outline: 2px solid var(--_breadcrumb-link-focus-outline-color);
+}
+
+rh-breadcrumb > ol > li:first-child > a {
+  margin-inline-start: 0;
+}
+
+rh-breadcrumb > ol > li > a:visited {
+  color: var(--_breadcrumb-link-color-visited);
+}
+
+rh-breadcrumb > ol > li > a:visited:hover {
+  color: var(--_breadcrumb-link-color-visited-hover);
+}
+
+rh-breadcrumb > ol > li:last-child,
+rh-breadcrumb > ol > li > a[aria-current="page"] {
+  color: var(--_breadcrumb-link-color-current-page);
+}
+
+rh-breadcrumb > ol > li > a[aria-current="page"] {
+  cursor: default;
+  pointer-events: none;
+}
+
+rh-breadcrumb[variant="subtle"] > ol > li:last-child,
+rh-breadcrumb[variant="subtle"] > ol > li > a[aria-current="page"] {
+  color: var(--_breadcrumb-link-color-current-page-subtle);
+}
diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css
@@ -0,0 +1,45 @@
+:host {
+  display: block;
+}
+
+#container.dark {
+  /* stylelint-disable-next-line max-line-length */
+  --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
+  /* stylelint-disable-next-line max-line-length */
+  --_breadcrumb-caret-image-subtle: var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23a3a3a3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
+  --_breadcrumb-link-color:
+    var(
+        --rh-breadcrumb-link-color,
+        var(--rh-color-interactive-blue-lighter, #92c5f9)
+      );
+  --_breadcrumb-link-color-current-page:
+    var(
+        --rh-breadcrumb-link-color-current-page,
+        var(--rh-color-text-primary-on-dark, #ffffff)
+      );
+  --_breadcrumb-link-color-current-page-subtle:
+    var(
+        --rh-breadcrumb-link-color-current-page-subtle,
+        var(--rh-color-text-secondary-on-dark, #c7c7c7)
+      );
+  --_breadcrumb-link-color-hover:
+    var(
+        --rh-breadcrumb-link-color-hover,
+        var(--rh-color-interactive-blue-lightest, #b9dafc)
+      );
+  --_breadcrumb-link-color-visited:
+    var(
+        --rh-breadcrumb-link-color-visited,
+        var(--rh-color-interactive-purple-lighter, #b6a6e9)
+      );
+  --_breadcrumb-link-color-visited-hover:
+    var(
+        --rh-breadcrumb-link-color-visited-hover,
+        var(--rh-color-interactive-purple-lightest, #ece6ff)
+      );
+  --_breadcrumb-link-focus-outline-color:
+    var(
+        --rh-breadcrumb-link-focus-outline-color,
+        var(--rh-color-border-interactive-on-dark, #92c5f9)
+      );
+}