From 399e1b42d6b2bbc863f6c44f8084f8253d14e655 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@gmail.com>
Date: Tue, 3 Oct 2023 10:50:55 -0400
Subject: [PATCH] NavButton docs + preview

---
 .../docs/components/buttons/nav-button.mdx    | 24 +++++++++++++++++++
 .../src/componentPreview/navButtonPreview.tsx | 16 +++++++++++++
 .../src/components/PreviewBlock/index.tsx     |  2 ++
 .../src/components/NavButton/index.tsx        | 14 +++++++++--
 4 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 @stellar/design-system-website/docs/components/buttons/nav-button.mdx
 create mode 100644 @stellar/design-system-website/src/componentPreview/navButtonPreview.tsx

diff --git a/@stellar/design-system-website/docs/components/buttons/nav-button.mdx b/@stellar/design-system-website/docs/components/buttons/nav-button.mdx
new file mode 100644
index 00000000..db15cd57
--- /dev/null
+++ b/@stellar/design-system-website/docs/components/buttons/nav-button.mdx
@@ -0,0 +1,24 @@
+---
+slug: /nav-button
+---
+
+# Navigation button
+
+<ComponentDescription componentName="NavButton" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="NavButton">
+  <NavButton
+    icon={<Icon.Menu />}
+    id="nav-button"
+    onClick={() => {}}
+    title="Menu"
+  />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="NavButton" />
diff --git a/@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx b/@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx
new file mode 100644
index 00000000..2dc371cd
--- /dev/null
+++ b/@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx
@@ -0,0 +1,16 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const navButtonPreview: ComponentPreview = {
+  options: [
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+    {
+      type: "checkbox",
+      prop: "showBorder",
+      label: "Show border",
+    },
+  ],
+};
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
index 70a41cb1..63b67cff 100644
--- a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
+++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
@@ -19,6 +19,7 @@ import { iconButtonPreview } from "@site/src/componentPreview/iconButtonPreview"
 import { inputPreview } from "@site/src/componentPreview/inputPreview";
 import { linkPreview } from "@site/src/componentPreview/linkPreview";
 import { loaderPreview } from "@site/src/componentPreview/loaderPreview";
+import { navButtonPreview } from "@site/src/componentPreview/navButtonPreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
@@ -47,6 +48,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Input: inputPreview,
   Link: linkPreview,
   Loader: loaderPreview,
+  NavButton: navButtonPreview,
   Notification: notificationPreview,
   Paragraph: paragraphPreview,
   Profile: profilePreview,
diff --git a/@stellar/design-system/src/components/NavButton/index.tsx b/@stellar/design-system/src/components/NavButton/index.tsx
index d0a77bbf..3f3eb6bb 100644
--- a/@stellar/design-system/src/components/NavButton/index.tsx
+++ b/@stellar/design-system/src/components/NavButton/index.tsx
@@ -1,15 +1,25 @@
 import React from "react";
 import "./styles.scss";
 
-interface NavButtonProps {
+/** */
+export interface NavButtonProps {
+  /** ID of the component should be unique */
   id: string;
+  /** Title or label to show on hover */
   title: string;
+  /** Action to trigger on click */
   onClick: () => void;
+  /** Icon of the component */
   icon: React.ReactNode;
+  /** Disable the component */
   disabled?: boolean;
+  /** Show border around the component */
   showBorder?: boolean;
 }
 
+/**
+ * `NavButton` is used to trigger actions like toggle dark and light mode, close a modal, and toggle side navigation.
+ */
 export const NavButton: React.FC<NavButtonProps> = ({
   id,
   title,
@@ -17,7 +27,7 @@ export const NavButton: React.FC<NavButtonProps> = ({
   icon,
   disabled,
   showBorder,
-}) => (
+}: NavButtonProps) => (
   <button
     id={id}
     className={`NavButton ${showBorder ? "NavButton--border" : ""}`}