Blocks: Ensure Subheading slugs heading IDs to remove spaces

storybookjs · Jan 15, 2025 · 961f458 · 961f458
1 parent 51f4b60
commit 961f458
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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"