| 39 | ]); |
| 40 | |
| 41 | function generateTab(item: HTMLAnchorElement): JSX.Element { |
| 42 | const label = ($optional('[data-component="text"]', item) ?? item).textContent; |
| 43 | // Only a few items have counters |
| 44 | const counter = $optional('[data-component="counter"] [data-variant="secondary"]', item)?.textContent; |
| 45 | const selectedClass = item.hasAttribute('aria-current') ? 'selected' : ''; |
| 46 | |
| 47 | // Hard assertions will make the feature fail before it attempts to replace the native one. |
| 48 | // Being the repository's main navigation, we want to avoid breaking. |
| 49 | const itemId = item.getAttribute('data-tab-item'); |
| 50 | assertPresent(itemId); |
| 51 | const Icon = knownTabsIcons.get(itemId); |
| 52 | assertPresent(Icon); |
| 53 | |
| 54 | // `UnderlineNav-octicon` comes after d-none utility classes so they can't override it |
| 55 | const icon = <Icon className="UnderlineNav-octicon" />; |
| 56 | |
| 57 | return ( |
| 58 | <li key={item.href}> |
| 59 | <a href={item.href} className={cx('UnderlineNav-item', selectedClass)}> |
| 60 | {icon} |
| 61 | {label} |
| 62 | {counter && ( |
| 63 | <span className="Counter">{counter}</span> |
| 64 | )} |
| 65 | </a> |
| 66 | </li> |
| 67 | ); |
| 68 | } |
| 69 | |
| 70 | function replace(nativeNav: HTMLElement): void { |
| 71 | // Final check to avoid duplicates in any scenario. |