feat(pie-docs): WEBEX-341 add sticky behaviour to docs site toggle component

.changeset/gorgeous-tips-appear.md

@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-monorepo-utils": patch
+"pie-monorepo": patch
+---
+
+[Changed] - Jira ticket regex to allow for longer project IDs

.changeset/stale-drinks-collect.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-docs": minor
+---
+
+[Added] - sticky behaviour to docs site's toggle component

.cz-config.js

@@ -26,7 +26,7 @@ const getCurrentTicketNumberFromBranch = () => {
         const branchName = require('child_process').execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
         const { getTicketIdFromBranchName } = require('./packages/tools/pie-monorepo-utils/git-hooks/git-hooks-utils.js');
         const ticketId = getTicketIdFromBranchName(branchName);
-        
+
         return ticketId;
     } catch (error) {
         console.warn('Warning: Could not determine current branch name:', error.message);
@@ -69,5 +69,5 @@ module.exports = {
   allowTicketNumber: true,
   fallbackTicketNumber: getCurrentTicketNumberFromBranch(),
   isTicketNumberRequired: true,
-  ticketNumberRegExp: '[A-Z]{2,4}-(?!0+$)\\d{1,7}',
+  ticketNumberRegExp: '[A-Z]{2,10}-(?!0+$)\\d{1,7}',
 };

apps/pie-docs/src/_includes/layouts/toggle-page-layout.njk

@@ -10,7 +10,7 @@ bodyDataAttribute: data-toggle-page
 <h2>{{ subtitle }}</h2>
 <p>{{ subtitleDescription }}</p>
 
-<div class="c-toggle u-spacing-e--top">
+<div class="c-toggle u-spacing-e--top" data-js="toggle">
     <div
         id="toggle-option-a-wrapper"
         data-test-id="toggle-option-a"

apps/pie-docs/src/_includes/scripts.njk

@@ -8,6 +8,7 @@
 <script defer src="{{ '/assets/js/awesome.js' | url }}" type="module"></script>
 <script defer src="{{ '/assets/js/contents.js' | url }}" type="module"></script>
 <script defer src="{{ '/assets/js/scroll-to-top.js' | url }}" type="module"></script>
+<script defer src="{{ '/assets/js/sticky-toggle.js' | url }}" type="module"></script>
 <script defer src="{{ '/assets/js/show-more.js' | url }}" type="module"></script>
 <script defer src="{{ '/assets/js/docsearch.js' | url }}" type="module"></script>
 <script defer src="{{ '/assets/js/search.js' | url }}" type="module"></script>

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);
+    }
+});

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 {

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.*/,
 };
 
 /**