@trackunit/react-components 0.1.377 → 0.1.378

package/index.cjs.js

@@ -1757,8 +1757,19 @@ const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge([
 });
 
 /**
- * The Collapse component is used to condense non-important information.
- 
+ * The Collapse component is a container for additional information that adds context to various flows. It is used for displaying non-essential information that can be hidden away.
+ *
+ * ### When to use
+ * - To keep content off the screen to shorten pages and reduce scrolling, while it’s still only a tap away. Remember that the users might choose not to interact with the component and won’t see the information within.
+ * - To display additional details that are not essential or necessary in the main flow/page.
+ *
+ * ### When not to use
+ *
+ * - For explanations connected to individual elements, use a tooltip instead.
+ * - For important content that the user needs to see at a glance or a primary action to be taken on the page.
+ * - To hide errors or information that is relevant for a user within a flow.
+ * - To creating hierarchy levels by nesting them within each other.
+ *
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */

package/index.esm.js

@@ -1726,8 +1726,19 @@ const cvaChevronIcon = cvaMerge([
 });
 
 /**
- * The Collapse component is used to condense non-important information.
- 
+ * The Collapse component is a container for additional information that adds context to various flows. It is used for displaying non-essential information that can be hidden away.
+ *
+ * ### When to use
+ * - To keep content off the screen to shorten pages and reduce scrolling, while it’s still only a tap away. Remember that the users might choose not to interact with the component and won’t see the information within.
+ * - To display additional details that are not essential or necessary in the main flow/page.
+ *
+ * ### When not to use
+ *
+ * - For explanations connected to individual elements, use a tooltip instead.
+ * - For important content that the user needs to see at a glance or a primary action to be taken on the page.
+ * - To hide errors or information that is relevant for a user within a flow.
+ * - To creating hierarchy levels by nesting them within each other.
+ *
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.377",
+  "version": "0.1.378",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Collapse/Collapse.d.ts

@@ -23,14 +23,24 @@ export interface CollapseProps extends CommonProps {
      */
     label: React.ReactNode;
     /**
-     * An addon to add to the header.
-     * This can be used for a status indicator or similar.
+     * An addon to add to the header. This can be used for a status indicator or similar.
      */
     headerAddon?: React.ReactNode;
 }
 /**
- * The Collapse component is used to condense non-important information.
- 
+ * The Collapse component is a container for additional information that adds context to various flows. It is used for displaying non-essential information that can be hidden away.
+ *
+ * ### When to use
+ * - To keep content off the screen to shorten pages and reduce scrolling, while it’s still only a tap away. Remember that the users might choose not to interact with the component and won’t see the information within.
+ * - To display additional details that are not essential or necessary in the main flow/page.
+ *
+ * ### When not to use
+ *
+ * - For explanations connected to individual elements, use a tooltip instead.
+ * - For important content that the user needs to see at a glance or a primary action to be taken on the page.
+ * - To hide errors or information that is relevant for a user within a flow.
+ * - To creating hierarchy levels by nesting them within each other.
+ *
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */