docs: rewrite Alert documentation according to new component doc schema

[laske185]

This pull request significantly restructures and expands the documentation for the Alert component in both German (docs/30-components/alert.mdx) and English (i18n/en/docusaurus-plugin-content-docs/current/30-components/alert.mdx). The changes focus on improving clarity, providing comprehensive usage guidance, enhancing accessibility documentation, and modernizing examples with interactive previews. The documentation is now more user-friendly and better organized, with clear sections for best practices, accessibility, technical details, and code-based demonstrations.

Key improvements include:

Documentation Structure and Content Overhaul

• Completely reorganized the documentation to use clearer sections (e.g., Example, Accessibility, Best Practices, Use Cases, Construction/Technical, Functionalities with code, API). This makes the documentation more navigable and easier to understand for users at all levels. [1] [2]
• Expanded explanations for each component property (such as _type, _variant, _label, _level, _alert, _hasCloser) with dedicated subsections and interactive code previews, replacing static code samples and outdated example structures. [1] [2]

Accessibility Guidance

• Added detailed accessibility recommendations, including how screen readers interact with the Alert component, best practices for labeling, and when to use the _alert attribute for dynamic notifications. [1] [2]

Best Practices and Use Cases

• Introduced clear best practice guidelines and typical use cases for the Alert component, helping developers understand when and how to use different alert types and variants effectively. [1] [2]

Modernized Examples

• Replaced static and less interactive examples with AlertPreview components, allowing for live previews of different alert configurations directly in the documentation. [1] [2]
• Updated and clarified event documentation, including how to handle the close event and references to relevant conceptual documentation. [1] [2]

Links and References

• Added

[gemini-code-assist]

Code Review

This pull request refactors the Alert component documentation in both German and English, replacing older preview components with a new AlertPreview and reorganizing the content for better clarity and accessibility. The review feedback identifies an inconsistency where the descriptive text refers to _has-closer while the actual attribute name used in code snippets and component definitions is _hasCloser.

[gemini-code-assist]

The property name used in the code examples and the component definition is _hasCloser. For consistency with the rest of the documentation and the provided code snippets, it is recommended to use _hasCloser instead of _has-closer.

Mit dem Attribut _hasCloser wird ein Schließen-Button eingeblendet.

[gemini-code-assist]

The property name used in the code examples and the component definition is _hasCloser. For consistency with the rest of the documentation and the provided code snippets, it is recommended to use _hasCloser instead of _has-closer.

The _hasCloser attribute shows a close button.

[github-actions]

Netlify Draft Deployment
URL: https://69cbccf05fed8f1e0171f84a--docs-kolibri-public-ui.netlify.app
Logs: https://app.netlify.com/projects/docs-kolibri-public-ui/deploys/69cbccf05fed8f1e0171f84a