docs: add component description

adarshpastakia · Aug 24, 2024 · 6593ba6 · 6593ba6
1 parent 1a38227
commit 6593ba6
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>