+
diff --git a/apps/pie-docs/src/assets/js/sticky-toggle.js b/apps/pie-docs/src/assets/js/sticky-toggle.js
new file mode 100644
index 0000000000..c48d03afae
--- /dev/null
+++ b/apps/pie-docs/src/assets/js/sticky-toggle.js
@@ -0,0 +1,19 @@
+const stickyClass = 'c-toggle--stuck';
+
+window.addEventListener('DOMContentLoaded', () => {
+ const stickyObserver = new IntersectionObserver(([e]) => {
+ e.target.classList.toggle(stickyClass, e.intersectionRatio < 1);
+ }, {
+ threshold: [1],
+ // Apply styles when toggles comes within 81px of the top of the page
+ // (56px nav + 16px spacing + 1px threshold)
+ // This is slightly premature for wide viewports (which don't have the nav)
+ // but it still looks okay
+ rootMargin: '-73px 0px 0px 0px',
+ });
+
+ const toggle = document.querySelector('[data-js="toggle"]');
+ if (toggle) {
+ stickyObserver.observe(toggle);
+ }
+});
diff --git a/apps/pie-docs/src/assets/styles/components/_toggle.scss b/apps/pie-docs/src/assets/styles/components/_toggle.scss
index fd94fc6976..8022daf15e 100644
--- a/apps/pie-docs/src/assets/styles/components/_toggle.scss
+++ b/apps/pie-docs/src/assets/styles/components/_toggle.scss
@@ -1,10 +1,14 @@
@use 'sass:color';
@use '@justeattakeaway/pie-css/scss' as p;
+@use '../fozzie-config' as f;
$toggle-bg: var(--dt-color-container-strong);
$toggle-radius: var(--dt-radius-rounded-e);
$toggle-padding: 2px;
$toggle-item-height: 44px;
+$toggle-sticky-offset--base: var(--dt-spacing-d);
+$toggle-sticky-offset--narrow: calc($toggle-sticky-offset--base + 56px); // 56px is height of nav tabs
+$toggle-elevation: var(--dt-elevation-below-20);
$toggle-item-fw: var(--dt-font-weight-regular);
$toggle-item-fw--checked: var(--dt-font-weight-bold);
$toggle-item-padding-y: 10px;
@@ -27,6 +31,17 @@ $toggle-item-elevation--checked: var(--dt-elevation-below-10);
padding: $toggle-padding;
border-radius: $toggle-radius;
background-color: $toggle-bg;
+ position: sticky;
+ inset-block-start: $toggle-sticky-offset--narrow;
+ z-index: var(--dt-z-index-base);
+
+ @include f.media('>=wide') {
+ inset-block-start: $toggle-sticky-offset--base;
+ }
+}
+
+.c-toggle--stuck {
+ box-shadow: $toggle-elevation;
}
.c-toggle-label {
diff --git a/packages/tools/pie-monorepo-utils/git-hooks/git-hooks-utils.js b/packages/tools/pie-monorepo-utils/git-hooks/git-hooks-utils.js
index 911d4e3d6e..1510dde709 100644
--- a/packages/tools/pie-monorepo-utils/git-hooks/git-hooks-utils.js
+++ b/packages/tools/pie-monorepo-utils/git-hooks/git-hooks-utils.js
@@ -1,10 +1,10 @@
const TICKET_PATTERNS = {
// Case insensitive branch name pattern: supports multiple ticket formats like dsw-123, abc-789
- BRANCH: /(^[a-z]{2,4}-(\d{1,7}))-\w.*/i,
+ BRANCH: /(^[a-z]{2,10}-(\d{1,7}))-\w.*/i,
// Case insensitive commit message pattern: type(scope): TICKET-123 title (supports multiple ticket formats)
- COMMIT: /^(\w+)\((\w.*)\): ([A-Z]{2,4}-(?!0+)\d{1,7}) (\w.*)$/i,
+ COMMIT: /^(\w+)\((\w.*)\): ([A-Z]{2,10}-(?!0+)\d{1,7}) (\w.*)$/i,
// PR title pattern: type(scope): TICKET-123 title (supports multiple ticket formats)
- PR_TITLE: /^(\w+)\((\w.*)\): ([A-Z]{2,4}-(?!0+)\d{1,7}) (\w.*)$|^Version Packages.*/,
+ PR_TITLE: /^(\w+)\((\w.*)\): ([A-Z]{2,10}-(?!0+)\d{1,7}) (\w.*)$|^Version Packages.*/,
};
/**