From 961f458598c949706a40f322ade6ebb4737e8e0a Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Wed, 15 Jan 2025 10:47:18 +0100
Subject: [PATCH] Blocks: Ensure Subheading slugs heading IDs to remove spaces

---
 code/lib/blocks/package.json              | 1 +
 code/lib/blocks/src/blocks/Subheading.tsx | 6 +++++-
 code/yarn.lock                            | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json
index ce701e1249ec..f0ca23979f40 100644
--- a/code/lib/blocks/package.json
+++ b/code/lib/blocks/package.json
@@ -45,6 +45,7 @@
   "dependencies": {
     "@storybook/csf": "0.1.12",
     "@storybook/icons": "^1.2.12",
+    "github-slugger": "^2.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/lib/blocks/src/blocks/Subheading.tsx b/code/lib/blocks/src/blocks/Subheading.tsx
index 6b7b67e55571..a37f1f20dd35 100644
--- a/code/lib/blocks/src/blocks/Subheading.tsx
+++ b/code/lib/blocks/src/blocks/Subheading.tsx
@@ -3,14 +3,18 @@ import React from 'react';
 
 import { H3 } from 'storybook/internal/components';
 
+import GithubSlugger from 'github-slugger';
+
 import type { HeadingProps } from './Heading';
 import { HeaderMdx } from './mdx';
 
+const slugs = new GithubSlugger();
+
 export const Subheading: FC<PropsWithChildren<HeadingProps>> = ({ children, disableAnchor }) => {
   if (disableAnchor || typeof children !== 'string') {
     return <H3>{children}</H3>;
   }
-  const tagID = globalThis.encodeURIComponent(children.toLowerCase());
+  const tagID = slugs.slug(children.toLowerCase());
   return (
     <HeaderMdx as="h3" id={tagID}>
       {children}
diff --git a/code/yarn.lock b/code/yarn.lock
index 0e87b9201c52..8567697ec038 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5848,6 +5848,7 @@ __metadata:
     "@types/color-convert": "npm:^2.0.0"
     color-convert: "npm:^2.0.1"
     es-toolkit: "npm:^1.22.0"
+    github-slugger: "npm:^2.0.0"
     markdown-to-jsx: "npm:^7.4.5"
     memoizerific: "npm:^1.11.3"
     polished: "npm:^4.2.2"