Update Component Documentation

.changeset/shiny-mugs-sit.md

@@ -0,0 +1,7 @@
+---
+"@hopper-ui/styled-system": patch
+"@hopper-ui/components": patch
+"@hopper-ui/icons": patch
+---
+
+Updated peer dependency versions range

apps/docs/app/components/[...slug]/page.tsx

@@ -11,7 +11,7 @@ interface PageProps {
     };
 }
 
-async function findComponentFromSlug(params : { slug: string[] }) {
+function findComponentFromSlug(params : { slug: string[] }) {
     const [type] = params.slug;
 
     const component = allComponents.find(x => x.slug === type);
@@ -73,14 +73,19 @@ export default async function ComponentPage({ params }: PageProps) {
 }
 
 export async function generateMetadata({ params }: PageProps) {
-    const component = await findComponentFromSlug(params);
+    const component = findComponentFromSlug(params);
 
     if (component) {
-        const title = component?.title;
-
-        return {
-            title: `${title}`
+        const metadata: Record<string, string> = {
+            title: component.title
         };
+
+        if (component.description) {
+            metadata.description = component.description;
+        }
+
+
+        return metadata;
     }
 
     return {

apps/docs/app/components/layout.tsx

@@ -20,7 +20,8 @@ async function ComponentsLayout({ children }: { children: ReactNode }) {
             "pickers",
             "status",
             "content",
-            "placeholders"
+            "placeholders",
+            "internal-parts"
         ],
         // the components paths are slightly different than the other pages
         // we want the URLS to be /components/ComponentName

apps/docs/app/getting-started/[...slug]/page.tsx

@@ -45,9 +45,22 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata({ params }: PageProps) {
-    const page = await findPageFromSlug(params.slug);
+    const page = findPageFromSlug(params.slug);
+
+    if (page) {
+        const metadata: Record<string, string> = {
+            title: page.title
+        };
+
+        if (page.description) {
+            metadata.description = page.description;
+        }
+
+
+        return metadata;
+    }
 
     return {
-        title: page ? `${page.title}` : null
+        title: null
     };
 }

apps/docs/app/icons/[...slug]/page.tsx

@@ -44,9 +44,22 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata({ params }: PageProps) {
-    const page = await findPageFromSlug(params.slug);
+    const page = findPageFromSlug(params.slug);
+
+    if (page) {
+        const metadata: Record<string, string> = {
+            title: page.title
+        };
+
+        if (page.description) {
+            metadata.description = page.description;
+        }
+
+
+        return metadata;
+    }
 
     return {
-        title: page ? `${page.title}` : null
+        title: null
     };
 }

apps/docs/app/tokens/[...slug]/page.tsx

@@ -44,15 +44,15 @@ export async function generateStaticParams() {
 
 // The sections are Overview, Semantic and Core. we want all title in "Core" to be "Core " + "Color"(the token type) + " Tokens"
 export async function generateMetadata({ params }: PageProps) {
-    const page = await findPageFromSlug(params.slug);
+    const page = findPageFromSlug(params.slug);
 
     if (!page) {
         return {
             title: null
         };
     }
 
-    const { title, section } = page;
+    const { title, section, description } = page;
 
     let pageTitle = `${title}`;
     if (section === "core") {
@@ -61,7 +61,14 @@ export async function generateMetadata({ params }: PageProps) {
         pageTitle = `Semantic ${title} Tokens`;
     }
 
-    return {
+    const metadata: Record<string, string> = {
         title: pageTitle
     };
+
+    if (description) {
+        metadata.description = description;
+    }
+
+
+    return metadata;
 }

apps/docs/app/ui/components/overview/Overview.tsx

@@ -23,7 +23,9 @@ const sortOrder = [
     "overlays",
     "pickers",
     "status",
-    "content"
+    "content",
+    "placeholders",
+    "internal-parts"
 ];
 
 const categories = Array.from(new Set(allComponents.map(component => component.category))).filter(x => x && !ignoreCategories.includes(x)).sort((a, b) => {

apps/docs/app/ui/layout/mobileMenu/MobileMenu.tsx

@@ -17,7 +17,6 @@ import HopperLogo from "./assets/hopper-logo.svg";
 
 import "./mobileMenu.css";
 
-
 interface MobileMenuProps {
     onClose?: () => void;
     isOpen: boolean;

apps/docs/content/components/buttons/Button.mdx

@@ -21,17 +21,9 @@ links:
 
 ## Anatomy
 
-<FeatureFlag flag="rc">
-    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
-
-    ### Concepts
-
-    - [Client Side Routing](./client-side-routing)
-</FeatureFlag>
-
 ### Composed Components
 
-A `Button` uses the following components.
+A `Button` uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"] }/>
 
@@ -74,7 +66,7 @@ A button can be expanded to full width to fill its parent container.
 <Example src="buttons/docs/button/layout" />
 
 ### Icon Only
-A button can contain only an icon.
+A button can contain only an icon. An accessible name must be provided through [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) prop. See also [WCAG practices](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html).
 
 <Example src="buttons/docs/button/icon" />
 

apps/docs/content/components/buttons/ButtonGroup.mdx

@@ -33,20 +33,10 @@ links:
 
 A `ButtonGroup` uses the following component.
 
-<ComposedComponents components={["Button"]}/>
+<ComposedComponents components={["Button", "LinkButton"]}/>
 
 ## Usage
 
-### Disabled
-A button group can be disabled.
-
-<Example src="buttons/docs/buttonGroup/disabled" />
-
-### Fluid
-A button group can be fluid.
-
-<Example src="buttons/docs/buttonGroup/fluid" />
-
 ### Orientation
 A button group can render his items vertically.
 
@@ -57,6 +47,16 @@ A button group can change the alignment of his items.
 
 <Example src="buttons/docs/buttonGroup/alignment" />
 
+### Disabled
+A button group can be disabled.
+
+<Example src="buttons/docs/buttonGroup/disabled" />
+
+### Fluid
+A button group can be fluid.
+
+<Example src="buttons/docs/buttonGroup/fluid" />
+
 ### Sizes
 A button group can be of different sizes.
 

apps/docs/content/components/buttons/LinkButton.mdx

@@ -21,17 +21,15 @@ links:
 
 ## Anatomy
 
-<FeatureFlag flag="rc">
-    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+### Concepts
 
-    ### Concepts
+*LinkButton* makes use of the following concepts:
 
-    - [Client Side Routing](./client-side-routing)
-</FeatureFlag>
+- [Client Side Routing](./client-side-routing)
 
 ### Composed Components
 
-A `LinkButton` uses the following components.
+A *LinkButton* uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"]}/>
 
@@ -64,13 +62,11 @@ A link button can be disabled.
 <Example src="buttons/docs/linkButton/state" />
 
 ### External
-
 Add `rel="noopener noreferrer"` and `target="_blank"` attributes to render and external link button.
 
 <Example src="buttons/docs/linkButton/external" />
 
 ### No Href
-
 When a link button link does not have an href prop, it is rendered as a `<span role="link">` instead of an `<a>`. Events will need to be handled in JavaScript with the `onPress` prop.
 
 Note: this will not behave like a native link. Browser features like context menus and open in a new tab will not apply.
@@ -87,6 +83,11 @@ A link button can contain only an icon.
 
 <Example src="buttons/docs/linkButton/icon" />
 
+### Router Link
+A link button can be used with any Router. For more information, see the [Client Side Routing](../concepts/client-side-routing) article.
+
+<Example src="buttons/docs/linkButton/reactRouterLink" />
+
 ### Icon
 A link button can contain icons.
 
@@ -97,8 +98,6 @@ Nonstandard end icons can be provided to handle special cases. However, think tw
 
 <Example src="buttons/docs/linkButton/endIcon" />
 
-<Example src="buttons/docs/linkButton/reactRouterLink" />
-
 <FeatureFlag flag="next">
     ## Advanced customization
 

apps/docs/content/components/collections/Listbox.mdx

@@ -33,7 +33,7 @@ links:
 
 #### ListBox
 
-A `ListBox` uses the following components.
+A `ListBox` uses the following components:
 
 <ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
@@ -69,6 +69,12 @@ A list box can have sections and section headers.
 
 <Example src="ListBox/docs/section" />
 
+### Dividers
+
+A list box can have dividers.
+
+<Example src="ListBox/docs/divider" />
+
 ### Avatar
 
 A ListBox can contain an avatar.

apps/docs/content/components/collections/TagGroup.mdx

@@ -32,7 +32,7 @@ links:
 
 ### Composed Components
 
-A `TagGroup` uses the following components.
+A `TagGroup` uses the following components:
 
 <ComposedComponents components={["Avatar", "Badge", "Icon", "IconList", "Text"]}/>
 

apps/docs/content/components/concepts/controlled-mode.mdx

@@ -1,5 +1,6 @@
 ---
 title: Controlled Mode
+description: Learn how to use controlled and uncontrolled modes to customize Hopper components.
 order: 5
 ---
 When working with Hopper components, you can customize a component's behavior using **controlled** or **uncontrolled** properties, depending on your needs. This flexibility is the foundation for **building custom components** on top of Hopper, enabling you to implement interactive features or modify the default behavior of components while preserving their visual style and structure.

apps/docs/content/components/content/Card.mdx

@@ -22,7 +22,7 @@ links:
 
 ### Composed Components
 
-A `Card` uses the following components.
+A `Card` uses the following components:
 
 <ComposedComponents components={["Header", "Content", "Footer"]}/>
 

apps/docs/content/components/content/IllustratedMessage.mdx

@@ -12,7 +12,7 @@ links:
 
 ### Composed Components
 
-A `IllustratedMessage` uses the following components.
+A `IllustratedMessage` uses the following components:
 
 <ComposedComponents components={["Image", "Heading", "Content", "ButtonGroup", "Button"]}/>
 

apps/docs/content/components/forms/Checkbox.mdx

@@ -32,7 +32,7 @@ links:
 
 ### Composed Components
 
-A `Checkbox` uses the following components.
+A `Checkbox` uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"]}/>
 

apps/docs/content/components/forms/CheckboxGroup.mdx

@@ -31,7 +31,7 @@ links:
 
 ### Composed Components
 
-A `CheckboxGroup` uses the following components.
+A `CheckboxGroup` uses the following components:
 
 <ComposedComponents components={["Checkbox"]}/>
 

apps/docs/content/components/forms/Form.mdx

@@ -30,7 +30,7 @@ links:
 
 ### Composed Components
 
-A `Form` uses the following components.
+A `Form` uses the following components:
 
 <ComposedComponents components={["Button", "ButtonGroup", "ErrorMessage", "HelperMessage", "NumberField", "PasswordField", "TextField"]}/>
 

apps/docs/content/components/forms/RadioGroup.mdx

@@ -32,7 +32,7 @@ links:
 
 ### Composed Components
 
-A `RadioGroup` uses the following components.
+A `RadioGroup` uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"]}/>
 

apps/docs/content/components/forms/Switch.mdx

@@ -32,7 +32,7 @@ links:
 
 ### Composed Components
 
-A `Switch` uses the following components.
+A `Switch` uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"]}/>
 

apps/docs/content/components/icons/Icon.mdx

@@ -48,10 +48,10 @@ import { Icon, type CreatedIconProps } from "@hopper-ui/icons";
 function CustomIcon(props: CreatedIconProps) {
   return (
     <Icon
-    src16={CustomIcon16}
-    src24={CustomIcon24}
-    src32={CustomIcon32}
-    {...props} />
+        src16={CustomIcon16}
+        src24={CustomIcon24}
+        src32={CustomIcon32}
+        {...props} />
   )
 }
 ```