docs-ui: use matching casing for changelog component badges

Change changelog badge labels from spaced title case (e.g.
"Button Link") to PascalCase (e.g. "ButtonLink") so they match
the actual component names and are searchable. Hook slugs
starting with `use-` display as camelCase (e.g. "useTable").

Signed-off-by: Johan Persson <johanopersson@gmail.com>

docs-ui/src/components/Changelog/utils.tsx

@@ -41,10 +41,20 @@ export const BreakingBadge = () => <Badge variant="red">Breaking</Badge>;
 
 // Utility Functions
 export const toTitleCase = (kebabCase: string): string => {
+  // Hook slugs (e.g. "use-table") display as camelCase (e.g. "useTable")
+  if (/^use-[A-Za-z]/.test(kebabCase)) {
+    const [first, ...rest] = kebabCase.split('-');
+    return (
+      first +
+      rest
+        .map(word => word.charAt(0).toLocaleUpperCase('en-US') + word.slice(1))
+        .join('')
+    );
+  }
   return kebabCase
     .split('-')
     .map(word => word.charAt(0).toLocaleUpperCase('en-US') + word.slice(1))
-    .join(' ');
+    .join('');
 };
 
 export const groupByVersion = (