Merge pull request #492 from WestpacGEL/483-design-system-docs-props-…

…anchor-link fixes #483 props anchor
WestpacGEL · Dec 8, 2023 · 1004354 · 1004354
2 parents 2503b0f + 4565bc7
commit 1004354
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/...[...component]/components/content-tabs/components/code-content/code-content.component.tsx b/...[...component]/components/content-tabs/components/code-content/code-content.component.tsx
@@ -20,20 +20,26 @@ import { type CodeContentProps } from '.';
 
 export function CodeContent({ codeSections = [], westpacUIInfo, componentProps, subComponentProps }: CodeContentProps) {
   const sectionNames = useMemo(() => {
-    return codeSections?.filter(({ noTitle }) => !noTitle).map(({ title }) => ({ title })) || [];
+    const sections = codeSections?.filter(({ noTitle }) => !noTitle).map(({ title }) => ({ title }));
+    if (sections.length > 0) {
+      return [...sections, { title: 'Props' }];
+    }
+    return [];
   }, [codeSections]);
 
   const sectionHeadings = useMemo(() => {
-    return (
-      codeSections.reduce((acc, section) => {
-        return section.content?.reduce((acc, item: DocumentElement & { level?: number }) => {
-          if (item.type === 'heading' && item?.level && item.level <= 3) {
-            return [...acc, { title: item.children[0].text as string }];
-          }
-          return acc;
-        }, acc);
-      }, [] as { title: string }[]) || []
-    );
+    const sections = codeSections.reduce((acc, section) => {
+      return section.content?.reduce((acc, item: DocumentElement & { level?: number }) => {
+        if (item.type === 'heading' && item?.level && item.level <= 3) {
+          return [...acc, { title: item.children[0].text as string }];
+        }
+        return acc;
+      }, acc);
+    }, [] as { title: string }[]);
+    if (sections.length > 0) {
+      return [...sections, { title: 'Props' }];
+    }
+    return [];
   }, [codeSections]);
 
   return (

diff --git a/apps/site/src/app/design-system/[...component]/layout.tsx b/apps/site/src/app/design-system/[...component]/layout.tsx
@@ -16,7 +16,7 @@ export default async function ComponentLayout({
     <>
       <Header title={content.name} />
       <div className="flex flex-1 flex-col p-5">
-        <div className="-m-5 flex flex-1 flex-col">{children}</div>
+        <div className="-m-5 flex flex-1 flex-col bg-background">{children}</div>
       </div>
     </>
   );