docs(Accordion): add description to all props and enable live edit

mondaycom · Jan 21, 2025 · 32e5cb3 · 32e5cb3
1 parent 1bb3fbe
commit 32e5cb3
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 5 deletions.
diff --git a/packages/core/src/components/Accordion/Accordion/Accordion.tsx b/packages/core/src/components/Accordion/Accordion/Accordion.tsx
@@ -33,6 +33,14 @@ export interface AccordionProps extends VibeComponentProps {
    * Array of initial expanded indexes
    */
   defaultIndex?: Array<number>;
+  /**
+   * A classname to be added to the accordion container
+   */
+  className?: string;
+  /**
+   * An id to be added the accordion container.
+   */
+  id?: string;
 }
 
 const Accordion: VibeComponent<AccordionProps, unknown> & object = forwardRef(

diff --git a/packages/core/src/components/Accordion/Accordion/__stories__/Accordion.mdx b/packages/core/src/components/Accordion/Accordion/__stories__/Accordion.mdx
@@ -1,6 +1,6 @@
 import Accordion from "../Accordion";
 import AccordionItem from "../../AccordionItem/AccordionItem";
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import {
   BREADCRUBMS,
   EXPAND_COLLAPSE,

diff --git a/packages/core/src/components/Accordion/Accordion/__stories__/Accordion.stories.tsx b/packages/core/src/components/Accordion/Accordion/__stories__/Accordion.stories.tsx
@@ -61,7 +61,14 @@ export default {
 export const Overview = {
   render: accordionTemplate.bind({}),
   name: "Overview",
-  args: {}
+  args: {},
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const MultiActive = {

diff --git a/packages/core/src/components/Accordion/AccordionItem/AccordionItem.tsx b/packages/core/src/components/Accordion/AccordionItem/AccordionItem.tsx
@@ -5,28 +5,53 @@ import { VibeComponentProps, ElementContent } from "../../../types";
 
 export interface AccordionItemProps extends VibeComponentProps {
   /**
-   * Header title
+   * Header title for the accordion item.
    */
   title?: ElementContent;
   /**
    * The value of the expandable section
    */
   children?: ElementContent;
   /**
-   * The expand icon font size
+   * The font size of the expand/collapse icon.
    */
   iconSize?: number | string;
   /**
-   * On click callback
+   * Custom callback triggered when the item is clicked.
    */
   onClick?: () => void;
+  /** @ignore */
   open?: boolean;
+  /** @ignore */
   onClickAccordionCallback?: () => void;
+  /**
+   * Determines whether the item's border is hidden.
+   */
   hideBorder?: boolean;
+  /**
+   * Custom class name to add to the header of the expandable
+   */
   headerClassName?: string;
+  /**
+   * Custom class name to add to the content of the expandable
+   */
   contentClassName?: string;
+  /**
+   * Custom class name to add to the ExpandCollapse component
+   */
   expandCollapseComponentClassName?: string;
+  /**
+   * Determines whether click events are captured.
+   */
   captureOnClick?: boolean;
+  /**
+   * A classname to be added to the accordion item container
+   */
+  className?: string;
+  /**
+   * An id to be added the accordion item container.
+   */
+  id?: string;
 }
 
 const AccordionItem: React.FC<AccordionItemProps> = forwardRef(