fix: docs HR examples

themesberg · Jun 19, 2024 · a7b6231 · a7b6231
1 parent 643b84d
commit a7b6231
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 92 deletions.
diff --git a/apps/web/examples/hr/hr.icon.tsx b/apps/web/examples/hr/hr.icon.tsx
@@ -2,32 +2,46 @@ import { HRIcon } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR.Icon />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HR.Icon />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
 const codeRSC = `
-import { HRTrimmed } from "flowbite-react";
+import { HRIcon } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HRIcon />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HRIcon />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -39,9 +53,7 @@ function Component() {
         data from other software development tools, so your IT support and operations teams have richer contextual
         information to rapidly respond to requests, incidents, and changes.
       </p>
-
       <HRIcon />
-
       <p className="text-gray-500 dark:text-gray-400">
         Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
         critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every

diff --git a/apps/web/examples/hr/hr.root.tsx b/apps/web/examples/hr/hr.root.tsx
@@ -2,32 +2,24 @@ import { HR } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
-}
-`;
-
-const codeRSC = `
-import { HR } from "flowbite-react";
-
-function Component() {
-  return (
-      <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
       <HR />
-        
-      <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -60,7 +52,7 @@ export const root: CodeData = {
     {
       fileName: "server",
       language: "tsx",
-      code: codeRSC,
+      code,
     },
   ],
   githubSlug: "/hr/hr.root.tsx",

diff --git a/apps/web/examples/hr/hr.square.tsx b/apps/web/examples/hr/hr.square.tsx
@@ -2,32 +2,46 @@ import { HRSquare } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR.Square />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HR.Square />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
 const codeRSC = `
-import { HRTrimmed } from "flowbite-react";
+import { HRSquare } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HRSquare />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HRSquare />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -39,9 +53,7 @@ function Component() {
         data from other software development tools, so your IT support and operations teams have richer contextual
         information to rapidly respond to requests, incidents, and changes.
       </p>
-
       <HRSquare />
-
       <p className="text-gray-500 dark:text-gray-400">
         Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
         critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every

diff --git a/apps/web/examples/hr/hr.text.tsx b/apps/web/examples/hr/hr.text.tsx
@@ -2,32 +2,46 @@ import { HRText } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR.Text text="or" />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HR.Text text="or" />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
 const codeRSC = `
-import { HRTrimmed } from "flowbite-react";
+import { HRText } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HRText />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HRText text="or" />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -39,9 +53,7 @@ function Component() {
         data from other software development tools, so your IT support and operations teams have richer contextual
         information to rapidly respond to requests, incidents, and changes.
       </p>
-
       <HRText text="or" />
-
       <p className="text-gray-500 dark:text-gray-400">
         Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
         critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every

diff --git a/apps/web/examples/hr/hr.trimmed.tsx b/apps/web/examples/hr/hr.trimmed.tsx
@@ -2,18 +2,24 @@ import { HRTrimmed } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR.Trimmed />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HR.Trimmed />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -22,12 +28,20 @@ import { HRTrimmed } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HRTrimmed />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HRTrimmed />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 

diff --git a/packages/ui/src/components/HR/HRIcon.tsx b/packages/ui/src/components/HR/HRIcon.tsx
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
 import type { ComponentProps, FC } from "react";
+import { forwardRef } from "react";
 import { FaQuoteRight } from "react-icons/fa6";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
@@ -21,11 +21,9 @@ export interface HRIconProps extends Omit<ComponentProps<"hr">, "ref"> {
 }
 
 export const HRIcon = forwardRef<HTMLHRElement, HRIconProps>(
-  ({ theme: customTheme = {}, icon: Icon, className, ...props }, ref) => {
+  ({ theme: customTheme = {}, icon: Icon = FaQuoteRight, className, ...props }, ref) => {
     const theme = mergeDeep(getTheme().hr.icon, customTheme);
 
-    const SVGIcon = Icon ? Icon : FaQuoteRight;
-
     return (
       <div className={theme.base}>
         <hr
@@ -36,7 +34,7 @@ export const HRIcon = forwardRef<HTMLHRElement, HRIconProps>(
           {...props}
         />
         <div className={theme.icon.base}>
-          <SVGIcon aria-hidden className={theme.icon.icon} />
+          <Icon aria-hidden className={theme.icon.icon} />
         </div>
       </div>
     );