From 4a914bea5557c330794f3586ed8c26702fa4e2e4 Mon Sep 17 00:00:00 2001
From: aidanCQ <aidan.keay@quantinuum.com>
Date: Mon, 16 Sep 2024 14:34:32 +0100
Subject: [PATCH] fix(): Update docs component exports.

---
 src/custom/docs/components/header/index.tsx | 25 ++++++++++-----------
 stories/custom/docs-header.stories.tsx      | 16 ++++++-------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/custom/docs/components/header/index.tsx b/src/custom/docs/components/header/index.tsx
index fe425f8..70b5c55 100644
--- a/src/custom/docs/components/header/index.tsx
+++ b/src/custom/docs/components/header/index.tsx
@@ -3,7 +3,7 @@ import { cn } from 'src'
 import React from 'react'
 import { CodeCopy } from './CodeCopy'
 
-const Title = React.forwardRef<
+const DocsHeaderTitle = React.forwardRef<
 HTMLHeadingElement,
 React.InputHTMLAttributes<HTMLParagraphElement>
 >(({ className, type, ...props }, ref) => {
@@ -16,9 +16,9 @@ return (
   </h1>
 )
 })
-Title.displayName = 'Title'
+DocsHeaderTitle.displayName = 'DocsHeaderTitle'
 
-const Subtitle = React.forwardRef<
+const DocsHeaderSubtitle = React.forwardRef<
 HTMLHeadingElement,
 React.InputHTMLAttributes<HTMLParagraphElement>
 >(({ className, type, ...props }, ref) => {
@@ -31,9 +31,9 @@ return (
   </h2>
 )
 })
-Subtitle.displayName = 'Subtitle'
+DocsHeaderSubtitle.displayName = 'DocsHeaderSubtitle'
 
-const Left = React.forwardRef<
+const DocsHeaderLeft = React.forwardRef<
 HTMLDivElement,
 React.InputHTMLAttributes<HTMLParagraphElement>
 >(({ className, type, ...props }, ref) => {
@@ -42,9 +42,9 @@ React.InputHTMLAttributes<HTMLParagraphElement>
    <div className="mb-4 mt-0 md:mt-6 flex flex-col" ref={ref}>{props.children}</div></div>
  
 })
-Left.displayName = 'Left'
+DocsHeaderLeft.displayName = 'DocsHeaderLeft'
 
-const Right = React.forwardRef<
+const DocsHeaderRight = React.forwardRef<
 HTMLDivElement,
 React.InputHTMLAttributes<HTMLParagraphElement>
 >(({ className, type, ...props }, ref) => {
@@ -52,14 +52,14 @@ React.InputHTMLAttributes<HTMLParagraphElement>
   return <div className="mt-0 mr-10 hidden lg:flex md:justify-end" ref={ref}>{props.children}</div>
  
 })
-Right.displayName = 'Right'
+DocsHeaderRight.displayName = 'DocsHeaderRight'
 
 
 
 
 // mt-4 flex flex-col max-w-[32rem] gap-3
 
-const Wrapper  = React.forwardRef<
+const DocsHeaderWrapper  = React.forwardRef<
 HTMLDivElement,
 React.InputHTMLAttributes<HTMLParagraphElement>
 >(({ className, type, ...props }, ref) => {
@@ -67,9 +67,8 @@ React.InputHTMLAttributes<HTMLParagraphElement>
       {props.children}</div>
  
 })
-Wrapper.displayName = 'Wrapper'
+DocsHeaderWrapper.displayName = 'DocsHeaderWrapper'
 
-const LeftTitle = Title
-const LeftSubtitle = Subtitle;
 
-export {Wrapper, Right, Left, LeftTitle, LeftSubtitle, CodeCopy}
+
+export {DocsHeaderWrapper, DocsHeaderRight, DocsHeaderLeft, DocsHeaderTitle, DocsHeaderSubtitle, CodeCopy}
diff --git a/stories/custom/docs-header.stories.tsx b/stories/custom/docs-header.stories.tsx
index e8b5be1..189ff16 100644
--- a/stories/custom/docs-header.stories.tsx
+++ b/stories/custom/docs-header.stories.tsx
@@ -1,18 +1,18 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Wrapper, Right, Left, CodeCopy, LeftTitle, LeftSubtitle } from "src/custom/docs";
+import { DocsHeaderWrapper, DocsHeaderRight, DocsHeaderLeft, DocsHeaderTitle, DocsHeaderSubtitle, CodeCopy} from "src/custom/docs";
 import { NexusLogo } from "./NexusLogo";
 import { Button } from "src";
 import { RocketIcon } from "lucide-react";
 
 
 export function DocsHeaderDemo() {
-  return <Wrapper>
-    <Left>  
+  return <DocsHeaderWrapper>
+    <DocsHeaderLeft>  
         <NexusLogo
           variant="horizontal"
           className="w-[18rem] md:w-[23rem]"
         />
-        <LeftSubtitle>The Full Stack Quantum Computing Platform</LeftSubtitle>
+        <DocsHeaderSubtitle>The Full Stack Quantum Computing Platform</DocsHeaderSubtitle>
         <div className=" mt-4 flex flex-col max-w-[32rem] gap-3">
         <CodeCopy textToCopy="pip install qnexus"></CodeCopy>
         <Button
@@ -25,9 +25,9 @@ export function DocsHeaderDemo() {
             </a>
         </Button>
         </div>
-    </Left>
+    </DocsHeaderLeft>
 
-  <Right>
+  <DocsHeaderRight>
     <img
       className="rounded-xl overflow-hidden dark:hidden brightness-110"
       src="nexusw.png"
@@ -45,8 +45,8 @@ export function DocsHeaderDemo() {
       alt=""
     />
 
-    </Right>
- </Wrapper>
+    </DocsHeaderRight>
+ </DocsHeaderWrapper>
 }
 
 const meta: Meta<typeof DocsHeaderDemo> = {