From 6593ba6e4162d5dd9c51438cda28937078cac22e Mon Sep 17 00:00:00 2001
From: Adarsh Pastakia <adarshpastakia@outlook.com>
Date: Sun, 25 Aug 2024 00:27:46 +0400
Subject: [PATCH] docs: add component description

---
 packages/core/src/components/actionLabel/ActionLabel.tsx | 3 +++
 packages/core/src/core/page/Page.tsx                     | 2 +-
 packages/core/src/core/section/Section.tsx               | 2 +-
 packages/core/src/core/viewport/Viewport.tsx             | 2 +-
 packages/core/stories/0.core/Core.mdx                    | 3 ++-
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/actionLabel/ActionLabel.tsx b/packages/core/src/components/actionLabel/ActionLabel.tsx
index 66355c7..dee4aec 100644
--- a/packages/core/src/components/actionLabel/ActionLabel.tsx
+++ b/packages/core/src/components/actionLabel/ActionLabel.tsx
@@ -42,6 +42,9 @@ export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
   actions: ReactElement[];
 }
 
+/**
+ * A simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label, useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ */
 export const ActionLabel = ({
   children,
   className,
diff --git a/packages/core/src/core/page/Page.tsx b/packages/core/src/core/page/Page.tsx
index 7e16894..58557f4 100644
--- a/packages/core/src/core/page/Page.tsx
+++ b/packages/core/src/core/page/Page.tsx
@@ -47,7 +47,7 @@ export interface PageProps extends IconProps, ChildrenProp, TestProps {
 }
 
 /**
- * Route page with section areas
+ * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
  */
 export const Page = ({
   children,
diff --git a/packages/core/src/core/section/Section.tsx b/packages/core/src/core/section/Section.tsx
index a26a6e7..c26dad5 100644
--- a/packages/core/src/core/section/Section.tsx
+++ b/packages/core/src/core/section/Section.tsx
@@ -27,7 +27,7 @@ import { ErrorBoundary } from "../boundary/ErrorBoundary";
 import classes from "./Section.module.css";
 
 /**
- * Application viewport
+ * The section component provides a structured layout used within a page to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
  */
 export const Section = ({ children }: ChildrenProp) => {
   return (
diff --git a/packages/core/src/core/viewport/Viewport.tsx b/packages/core/src/core/viewport/Viewport.tsx
index 695ec3d..3ff7d62 100644
--- a/packages/core/src/core/viewport/Viewport.tsx
+++ b/packages/core/src/core/viewport/Viewport.tsx
@@ -26,7 +26,7 @@ import { type PropsWithChildren } from "react";
 import classes from "./Viewport.module.css";
 
 /**
- * Application viewport
+ * The application viewport is the main container that defines the visible area where content is displayed and interacted with.
  */
 export const Viewport = ({ children }: PropsWithChildren) => {
   return (
diff --git a/packages/core/stories/0.core/Core.mdx b/packages/core/stories/0.core/Core.mdx
index b49fd63..abff33e 100644
--- a/packages/core/stories/0.core/Core.mdx
+++ b/packages/core/stories/0.core/Core.mdx
@@ -21,6 +21,7 @@ import {
   ErrorBoundary,
   Page,
   Section,
+  Viewport,
 } from "../../src";
 import * as PageStories from "./Page.stories";
 import * as ContentStories from "./Content.stories";
@@ -38,7 +39,7 @@ import * as ThemeStories from "./Theme.stories";
 <Anchor storyId="viewport">
   <Subheading>Viewport</Subheading>
 </Anchor>
-<Description of={Page} />
+<Description of={Viewport} />
 <Canvas withToolbar of={ViewportStories._Viewport} />
 <Collapsable className="control-panel">
   <div>Controls</div>