docs: add component description

Author: adarshpastakia

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,

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,

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 (

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 (

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>