Versions Compared

Old Version 4

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 5

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Provide meaningful, unique titles for each section so context is clear even when collapsed (elements.title). Use plain-language; avoid icon-only labels (elements.title).
  • Expose a stable handle for automated accessibility checks (dataTestId).
  • Avoid color-only meaning; place essential cues in text (elements.title, elements.content).
  • Keep expansion order predictable by establishing item order during initialization (ON_INIT, elements).

Datasource

Accordions can be automaically created with the help of a template. This template uses the data source from the accordion in conjunction with placeholders.

Specs - Acordion Template (Header/Content)

General Properties

  • displayName — Sets the display name of the component shown in the structure panel. For example, "Product FAQ" allows for easy identification of the accordion's purpose in the component structure.

Visual Properties

  • title – Sets the title text displayed in the accordion, with support for multiple languages. For example, {"en-US": "Contract Details", "de-DE": "Vertragsdetails"} ensures proper localization of the title based on the user's language settings. This title helps users understand what document they're viewing.
  • disabled – Controls whether users can interact with the accordion. When set to true, the accordion appears grayed out and cannot be changed by users.
  • layout - Determines how child elements are arranged within the accordion template. Options include "vertical" (stacked elements) or "horizontal" (side-by-side elements). For example, "horizontal" places items in a row rather than stacking them.
  • alignItemsClass - Controls the vertical alignment of child elements within the accordion template. For example, "align-items-center" centers all child elements vertically within the section.
  • gapClass - Configures the spacing between child elements within the accordion template. For example, {"row": "row-gap-4", "column": "column-gap-2"} creates consistent spacing between elements with more vertical than horizontal spacing.

Events

Configures the events that the component can trigger and respond to:

  • ON_INIT — Triggered when the accordion component is initialized. Can be used to perform setup operations like loading default data or setting initial states.
  • ON_DESTROY — Triggered when the accordion component is removed from the DOM. Useful for cleanup operations and releasing resources.

Testing Hooks

  • dataTestId — Sets the testing hook ID for automated testing. For example, setting it to "faq-accordion" allows test scripts to reliably locate this component.
  • enableAsHotspot — Enables the component as a guided tour hotspot. When enabled, the accordion can be highlighted during guided tours of your application.