update the documentation link in the JSDoc (#570)

gsoft-inc · Jan 10, 2025 · 4dfdfaa · 4dfdfaa
2 parents 8d04084 + 2bcc8fd
commit 4dfdfaa
Show file tree

Hide file tree

Showing 68 changed files with 87 additions and 89 deletions.
diff --git a/.changeset/angry-actors-film.md b/.changeset/angry-actors-film.md
@@ -0,0 +1,5 @@
+---
+"@hopper-ui/components": patch
+---
+
+Update links to documentation in the JSDoc
diff --git a/packages/components/src/Accordion/src/Accordion.tsx b/packages/components/src/Accordion/src/Accordion.tsx
@@ -86,7 +86,7 @@ function Accordion(props:AccordionProps, ref: ForwardedRef<HTMLDivElement>) {
 /**
  * An accordion is a container for multiple disclosures.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Accordion)
  */
 const _Accordion = forwardRef<HTMLDivElement, AccordionProps>(Accordion);
 _Accordion.displayName = "Accordion";

diff --git a/packages/components/src/Avatar/src/AnonymousAvatar.tsx b/packages/components/src/Avatar/src/AnonymousAvatar.tsx
@@ -80,7 +80,7 @@ function AnonymousAvatar(props: AnonymousAvatarProps, ref: ForwardedRef<HTMLDivE
 /**
  * AnonymousAvatars are used to represent users who wish to remain anonymous.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Avatar)
  */
 const _AnonymousAvatar = forwardRef<HTMLDivElement, AnonymousAvatarProps>(AnonymousAvatar);
 _AnonymousAvatar.displayName = "AnonymousAvatar";

diff --git a/packages/components/src/Avatar/src/Avatar.tsx b/packages/components/src/Avatar/src/Avatar.tsx
@@ -233,7 +233,7 @@ function Avatar(props: AvatarProps, ref: ForwardedRef<HTMLDivElement>) {
 /**
  * Avatars are used to show a thumbnail representation of an individual, team or group in the interface.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Avatar)
  */
 const _Avatar = slotFn("avatar", forwardRef<HTMLDivElement, AvatarProps>(Avatar));
 _Avatar.displayName = "Avatar";

diff --git a/packages/components/src/Avatar/src/DeletedAvatar.tsx b/packages/components/src/Avatar/src/DeletedAvatar.tsx
@@ -82,7 +82,7 @@ function DeletedAvatar(props: DeletedAvatarProps, ref: ForwardedRef<HTMLDivEleme
 /**
  * DeletedAvatars are used to represent deleted users.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Avatar)
  */
 const _DeletedAvatar = forwardRef<HTMLDivElement, DeletedAvatarProps>(DeletedAvatar);
 _DeletedAvatar.displayName = "DeletedAvatar";

diff --git a/packages/components/src/Avatar/src/RichIconAvatarImage.tsx b/packages/components/src/Avatar/src/RichIconAvatarImage.tsx
@@ -113,7 +113,7 @@ function RichIconAvatarImage(props: RichIconAvatarImageProps, ref: ForwardedRef<
 /**
  * RichIconAvatarImage is a wrapper component that provides a consistent way to style the image of a RichIcon.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Avatar)
  */
 const _RichIconAvatarImage = slotFn("avatar", forwardRef<HTMLDivElement, RichIconAvatarImageProps>(RichIconAvatarImage));
 _RichIconAvatarImage.displayName = "RichIconAvatarImage";

diff --git a/packages/components/src/Badge/src/Badge.tsx b/packages/components/src/Badge/src/Badge.tsx
@@ -132,7 +132,7 @@ function Badge(props: BadgeProps, ref: ForwardedRef<HTMLSpanElement>) {
 /**
  * A badge displays either a number, text or a dot to indicate the status of an element.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Badge)
  */
 const _Badge = slotFn("badge", forwardRef<HTMLSpanElement, BadgeProps>(Badge));
 _Badge.displayName = "Badge";

diff --git a/packages/components/src/Badge/src/FloatingBadge.tsx b/packages/components/src/Badge/src/FloatingBadge.tsx
@@ -100,7 +100,7 @@ function FloatingBadge(props: FloatingBadgeProps, ref: ForwardedRef<HTMLDivEleme
 /**
  * A floating badge serves to present notices or notifications associated with a parent component.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/FloatingBadge)
  */
 const _FloatingBadge = forwardRef<HTMLDivElement, FloatingBadgeProps>(FloatingBadge);
 _FloatingBadge.displayName = "FloatingBadge";

diff --git a/packages/components/src/Card/src/Card.tsx b/packages/components/src/Card/src/Card.tsx
@@ -63,7 +63,7 @@ const Card = (props: CardProps, ref: ForwardedRef<HTMLDivElement>) => {
 /**
  * Cards are used to group similar concepts and tasks to make it easier for users to scan, read and get things done.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Card)
  */
 const _Card = forwardRef<HTMLDivElement, CardProps>(Card);
 _Card.displayName = "Card";

diff --git a/packages/components/src/ComboBox/src/ComboBox.tsx b/packages/components/src/ComboBox/src/ComboBox.tsx
@@ -376,7 +376,7 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
 /**
  * Combo box components enable users to choose a single option from a collapsible list, optimizing space efficiency.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/ComboBox)
  */
 const _ComboBox = forwardRef(ComboBox) as <T extends object>(
     props: ComboBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> }

diff --git a/packages/components/src/Disclosure/src/Disclosure.tsx b/packages/components/src/Disclosure/src/Disclosure.tsx
@@ -88,7 +88,7 @@ function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
 /**
  * The Disclosure component is used to organize lengthy sections of information within an expandable block, allowing users to reveal or hide content as needed.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Disclosure)
  */
 const _Disclosure = forwardRef<HTMLDivElement, DisclosureProps>(Disclosure);
 _Disclosure.displayName = "Disclosure";

diff --git a/packages/components/src/Disclosure/src/DisclosureHeader.tsx b/packages/components/src/Disclosure/src/DisclosureHeader.tsx
@@ -121,7 +121,7 @@ function DisclosureHeader(props: DisclosureHeaderProps, ref: ForwardedRef<HTMLHe
 /**
  * DisclosureHeader is the main header element that users interact with to expand or collapse the associated panel.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Disclosure)
  */
 const _DisclosureHeader = forwardRef<HTMLHeadingElement, DisclosureHeaderProps>(DisclosureHeader);
 _DisclosureHeader.displayName = "DisclosureHeader";

diff --git a/packages/components/src/Disclosure/src/DisclosurePanel.tsx b/packages/components/src/Disclosure/src/DisclosurePanel.tsx
@@ -66,7 +66,7 @@ function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivE
 /**
  * The DisclosurePanel is a collapsible container that displays detailed content when expanded, helping organize information efficiently.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Disclosure)
  */
 const _DisclosurePanel = forwardRef<HTMLDivElement, DisclosurePanelProps>(DisclosurePanel);
 _DisclosurePanel.displayName = "DisclosurePanel";

diff --git a/packages/components/src/Divider/src/Divider.tsx b/packages/components/src/Divider/src/Divider.tsx
@@ -53,7 +53,7 @@ function Divider(props: DividerProps, ref: ForwardedRef<HTMLElement>) {
 /**
  * The Divider separates the distinguishes sections of content or groups.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Divider)
  */
 const _Divider = forwardRef<HTMLElement, DividerProps>(Divider);
 _Divider.displayName = "Divider";

diff --git a/packages/components/src/ErrorMessage/src/ErrorMessage.tsx b/packages/components/src/ErrorMessage/src/ErrorMessage.tsx
@@ -37,7 +37,7 @@ function ErrorMessage(props: ErrorMessageProps, ref: ForwardedRef<HTMLSpanElemen
 /**
  * An ErrorMessage displays validation errors for a form field.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/ErrorMessage)
  */
 const _ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(ErrorMessage);
 _ErrorMessage.displayName = "ErrorMessage";

diff --git a/packages/components/src/Form/src/Form.tsx b/packages/components/src/Form/src/Form.tsx
@@ -49,7 +49,7 @@ export function useFormProps<T extends FormStyleProps>(props: T): T {
 
     return useMemo(() => {
         let result: T = props;
-    
+
         if (ctx) {
             result = { ...props };
 
@@ -60,7 +60,7 @@ export function useFormProps<T extends FormStyleProps>(props: T): T {
                 }
             }
         }
-    
+
         return result;
     }, [ctx, props]);
 }
@@ -112,7 +112,7 @@ function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
 /**
  * Forms are commonly used to provide user interaction in web applications.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Form)
  */
 const _Form = forwardRef<HTMLFormElement, FormProps>(Form);
 _Form.displayName = "Form";

diff --git a/packages/components/src/Header/src/Header.tsx b/packages/components/src/Header/src/Header.tsx
@@ -49,7 +49,7 @@ function Header(props: HeaderProps, ref: ForwardedRef<HTMLElement>) {
 /**
  * The Header component represents a header within a Hopper container such as a Modal or Section.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Header)
  */
 const _Header = slotFn("header", forwardRef<HTMLElement, HeaderProps>(Header));
 _Header.displayName = "Header";

diff --git a/packages/components/src/HelperMessage/src/HelperMessage.tsx b/packages/components/src/HelperMessage/src/HelperMessage.tsx
@@ -32,7 +32,7 @@ function HelperMessage(props: HelperMessageProps, ref: ForwardedRef<HTMLSpanElem
 /**
  * The HelperMessage component is used to display auxiliary text to guide users in the interface.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/HelperMessage)
  */
 const _HelperMessage = forwardRef<HTMLSpanElement, HelperMessageProps>(HelperMessage);
 _HelperMessage.displayName = "HelperMessage";

diff --git a/packages/components/src/HopperProvider/src/HopperProvider.tsx b/packages/components/src/HopperProvider/src/HopperProvider.tsx
@@ -94,7 +94,7 @@ const HopperProvider = (props: HopperProviderProps, ref: ForwardedRef<HTMLDivEle
  * - Managing color scheme (light, dark, auto)
  * - Optionally adding body styles to the document
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/HopperProvider)
  */
 const _HopperProvider = forwardRef<HTMLDivElement, HopperProviderProps>(HopperProvider);
 _HopperProvider.displayName = "HopperProvider";

diff --git a/packages/components/src/IconList/src/IconList.tsx b/packages/components/src/IconList/src/IconList.tsx
@@ -61,7 +61,7 @@ function IconList(props:IconListProps, ref: ForwardedRef<HTMLSpanElement>) {
 /**
  * A component that allows you to render a list of icons
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/IconList)
  */
 const _IconList = slotFn("icon", forwardRef<HTMLSpanElement, IconListProps>(IconList));
 _IconList.displayName = "IconList";

diff --git a/packages/components/src/IllustratedMessage/src/IllustratedMessage.tsx b/packages/components/src/IllustratedMessage/src/IllustratedMessage.tsx
@@ -94,7 +94,7 @@ function IllustratedMessage(props: IllustratedMessageProps, ref: ForwardedRef<HT
 /**
  * An illustrated message display an image and a message, usually for an empty state or an error page.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/IllustratedMessage)
  */
 const _IllustratedMessage = forwardRef<HTMLDivElement, IllustratedMessageProps>(IllustratedMessage);
 _IllustratedMessage.displayName = "IllustratedMessage";

diff --git a/packages/components/src/Image/src/Image.tsx b/packages/components/src/Image/src/Image.tsx
@@ -82,7 +82,7 @@ function Image(props: ImageProps, ref: ForwardedRef<HTMLImageElement>) {
 /**
  * An image component that can be used to display images.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Image)
  */
 const _Image = forwardRef<HTMLImageElement, ImageProps>(Image);
 _Image.displayName = "Image";

diff --git a/packages/components/src/Image/src/SvgImage.tsx b/packages/components/src/Image/src/SvgImage.tsx
@@ -68,7 +68,7 @@ function SvgImage(props: SvgImageProps, ref: ForwardedRef<SVGSVGElement>) {
 /**
  * An SvgImage component that can be used to display SVGs.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/SvgImage)
  */
 const _SvgImage = forwardRef<SVGSVGElement, SvgImageProps>(SvgImage);
 _SvgImage.displayName = "SvgImage";

diff --git a/packages/components/src/Link/src/Link.tsx b/packages/components/src/Link/src/Link.tsx
@@ -161,7 +161,7 @@ function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
 /**
  * Links allow users to navigate to a different location. They can be presented inline inside a paragraph, as standalone text or as an image.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Link)
  */
 const _Link = forwardRef<HTMLAnchorElement, LinkProps>(Link);
 _Link.displayName = "Link";

diff --git a/packages/components/src/ListBox/src/ListBox.tsx b/packages/components/src/ListBox/src/ListBox.tsx
@@ -201,7 +201,7 @@ function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTM
 /**
  * A listbox is a list of interactive options that appears when users interact with an element or perform a specific action.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/ListBox)
  */
 const _ListBox = forwardRef(ListBox) as <T>(
     props: ListBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> }

diff --git a/packages/components/src/ListBox/src/ListBoxItem.tsx b/packages/components/src/ListBox/src/ListBoxItem.tsx
@@ -311,7 +311,7 @@ function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, ref: Forwarde
 /**
  * A ListBoxItem represents an item within a ListBox component.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/ListBox)
  */
 const _ListBoxItem = (forwardRef as forwardRefType)(ListBoxItem);
 (_ListBoxItem as NamedExoticComponent).displayName = "ListBoxItem";

diff --git a/packages/components/src/ListBox/src/ListBoxItemSkeleton.tsx b/packages/components/src/ListBox/src/ListBoxItemSkeleton.tsx
@@ -63,7 +63,7 @@ function ListBoxItemSkeleton(props: ListBoxItemSkeletonProps, ref: ForwardedRef<
 /**
  * A ListBoxItem represents an item within a ListBox component.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/ListBox)
  */
 const _ListBoxItemSkeleton = forwardRef<HTMLDivElement, ListBoxItemSkeletonProps>(ListBoxItemSkeleton);
 _ListBoxItemSkeleton.displayName = "ListBoxItemSkeleton";

diff --git a/packages/components/src/ListBoxSection/src/ListBoxSection.tsx b/packages/components/src/ListBoxSection/src/ListBoxSection.tsx
@@ -45,7 +45,7 @@ function ListBoxSection<T extends object>(props: ListBoxSectionProps<T>, ref: Fo
 /**
  * A Section serves as a versatile container component, encapsulating an HTML section element to facilitate the organization and grouping of content.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/ListBox)
  */
 const _ListBoxSection = forwardRef(ListBoxSection) as <T>(
     props: ListBoxSectionProps<T> & { ref?: ForwardedRef<HTMLDivElement> }

diff --git a/packages/components/src/Select/src/Select.tsx b/packages/components/src/Select/src/Select.tsx
@@ -306,7 +306,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
 /**
  * Select components enable users to choose a single option from a collapsible list, optimizing space efficiency.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Select)
  */
 const _Select = forwardRef(Select) as <T extends object>(
     props: SelectProps<T> & { ref?: ForwardedRef<HTMLDivElement> }

diff --git a/packages/components/src/Select/src/SelectValue.tsx b/packages/components/src/Select/src/SelectValue.tsx
@@ -133,7 +133,7 @@ function SelectValue<T extends object>(props: SelectValueProps<T>, ref: Forwarde
 /**
  * A select value displays the selected value of a select.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Select)
  */
 const _SelectValue = forwardRef(SelectValue) as <T extends object>(
     props: SelectValueProps<T> & { ref?: ForwardedRef<HTMLSpanElement> }

diff --git a/packages/components/src/Spinner/src/Spinner.tsx b/packages/components/src/Spinner/src/Spinner.tsx
@@ -107,7 +107,7 @@ const Spinner = (props: SpinnerProps, ref: ForwardedRef<HTMLDivElement>) => {
 /**
  * A spinner indicates that a part of the product is currently performing a task, and the duration of this process is unknown.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Spinner)
  */
 const _Spinner = forwardRef<HTMLDivElement, SpinnerProps>(Spinner);
 _Spinner.displayName = "Spinner";

diff --git a/packages/components/src/ToggleArrow/src/ToggleArrow.tsx b/packages/components/src/ToggleArrow/src/ToggleArrow.tsx
@@ -58,8 +58,6 @@ function ToggleArrow(props:ToggleArrowProps, ref: ForwardedRef<SVGSVGElement>) {
 
 /**
  * A simple arrow icon for expanding and collapsing content.
- *
- * [View Documentation](TODO)
  */
 const _ToggleArrow = forwardRef<SVGSVGElement, ToggleArrowProps>(ToggleArrow);
 _ToggleArrow.displayName = "ToggleArrow";

diff --git a/packages/components/src/buttons/src/Button.tsx b/packages/components/src/buttons/src/Button.tsx
@@ -176,7 +176,7 @@ function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
 
 /**
  * Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Button)
  *
  */
 const _Button = slotFn("button", forwardRef(Button));

diff --git a/packages/components/src/buttons/src/ButtonGroup.tsx b/packages/components/src/buttons/src/ButtonGroup.tsx
@@ -122,7 +122,7 @@ function ButtonGroup(props: ButtonGroupProps, ref: ForwardedRef<HTMLDivElement>)
 /**
  * ButtonGroup handles the spacing and orientation for a grouping of buttons whose actions are related to each other.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/ButtonGroup)
  */
 const _ButtonGroup = slotFn("button-group", forwardRef(ButtonGroup));
 

diff --git a/packages/components/src/buttons/src/ClearButton.tsx b/packages/components/src/buttons/src/ClearButton.tsx
@@ -38,8 +38,6 @@ function ClearButton(props: ClearButtonProps, ref: ForwardedRef<HTMLButtonElemen
 
 /**
  * ClearButtons are used to initialize an action. ClearButton labels express what action will occur when the user interacts with it.
- *
- * [View Documentation](TODO)
  */
 const _ClearButton = forwardRef<HTMLButtonElement, ClearButtonProps>(ClearButton);
 

diff --git a/packages/components/src/buttons/src/EmbeddedButton.tsx b/packages/components/src/buttons/src/EmbeddedButton.tsx
@@ -116,8 +116,6 @@ function EmbeddedButton(props: EmbeddedButtonProps, ref: ForwardedRef<HTMLButton
 
 /**
  * EmbeddedButtons are buttons embedded within other components, such as inputs and tags.
- *
- * [View Documentation](TODO)
  */
 const _EmbeddedButton = slotFn("button", forwardRef<HTMLButtonElement, EmbeddedButtonProps>(EmbeddedButton));
 

diff --git a/packages/components/src/buttons/src/LinkButton.tsx b/packages/components/src/buttons/src/LinkButton.tsx
@@ -157,7 +157,8 @@ function LinkButton(props: LinkButtonProps, ref: ForwardedRef<HTMLAnchorElement>
 
 /**
  * A LinkButton merges the functionality of a link with the appearance of a button, providing a user-friendly way to direct users to other pages.
- * [View Documentation](TODO)
+ *
+ * [View Documentation](https://hopper.workleap.design/components/LinkButton)
  *
  */
 const _LinkButton = slotFn("button", forwardRef(LinkButton));

diff --git a/packages/components/src/checkbox/src/Checkbox.tsx b/packages/components/src/checkbox/src/Checkbox.tsx
@@ -121,7 +121,7 @@ function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
 /**
  * The Checkbox component indicates the selection state of an option. It displays either one of three states: checked, unchecked, or indeterminate.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Checkbox)
  */
 const _Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(Checkbox);
 _Checkbox.displayName = "Checkbox";

diff --git a/packages/components/src/checkbox/src/CheckboxField.tsx b/packages/components/src/checkbox/src/CheckboxField.tsx
@@ -131,7 +131,7 @@ function CheckboxField(props: CheckboxFieldProps, ref: ForwardedRef<HTMLDivEleme
 /**
  * The Checkbox Field component is a container for a checkbox and a description.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/Checkbox)
  */
 const _CheckboxField = forwardRef<HTMLDivElement, CheckboxFieldProps>(CheckboxField);
 _CheckboxField.displayName = "CheckboxField";

diff --git a/packages/components/src/checkbox/src/CheckboxGroup.tsx b/packages/components/src/checkbox/src/CheckboxGroup.tsx
@@ -111,10 +111,10 @@ function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivEleme
 
     const children = composeRenderProps(childrenProp, prev => {
         return (
-            <div 
+            <div
                 className={listClassNames}
                 slot={listSlot ?? undefined}
-                style={listStyle} 
+                style={listStyle}
                 {...otherListProps}
             >
                 {prev}
@@ -176,7 +176,7 @@ function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivEleme
 /**
  * The CheckboxGroup component is used to group multiple Checkbox or CheckboxField components together.
  *
- * [View Documentation](TODO)
+ * [View Documentation](https://hopper.workleap.design/components/CheckboxGroup)
  */
 const _CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(CheckboxGroup);
 _CheckboxGroup.displayName = "CheckboxGroup";

diff --git a/packages/components/src/checkbox/src/DecorativeCheckbox.tsx b/packages/components/src/checkbox/src/DecorativeCheckbox.tsx
@@ -143,8 +143,6 @@ function DecorativeCheckbox(props: DecorativeCheckboxProps, ref: ForwardedRef<HT
 
 /**
  * The DecorativeCheckbox component indicates the selection state of an option without using a native radio input. To be used for visual purposes only.
- *
- * [View Documentation](TODO)
  */
 const _DecorativeCheckbox = forwardRef<HTMLElement, DecorativeCheckboxProps>(DecorativeCheckbox);
 _DecorativeCheckbox.displayName = "DecorativeCheckbox";
-Original file line number
+Diff line change
@@ Expand Up @@
     /**
      * ClearButtons are used to initialize an action. ClearButton labels express what action will occur when the user interacts with it.
-     *
-     * [View Documentation](TODO)
      */
     const _ClearButton = forwardRef<HTMLButtonElement, ClearButtonProps>(ClearButton);
@@ Expand Down @@