(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Content

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11524-14777&t=iosNC2AkSTGs5lMh-1

Overview

• The Content Component is a versatile UI element.
• It embeds and displays other content, such as boardlets, inside the application.
• It supports conditional rendering based on context values.
• It allows customized sizing of the embedded content.
• It enables reuse of content across multiple areas while staying context-aware.

...

• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "contentAccessPolicy" restricts the content visibility to users with specific access permissions, allowing for role-based display of sensitive information.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11524-14777&t=iosNC2AkSTGs5lMh-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id2/3-content-switch

Guidelines

Usage

• Embed and reuse content by setting contentId to the target unit; the component renders that content in place and stays context-aware.
• Expose stable automation handles via id and dataTestId for scripts and tests.
• Make onboarding discoverable by enabling a hotspot with enableAsHotspot and provide localized text via guidedTourHotSpotTitle and guidedTourHotSpotDescription.

Sizing & Layout

• Set a predictable height with customHeight using valid CSS lengths (e.g., 400px, 28rem, 100%) to prevent layout shift.
• Control interior spacing with paddingClass; keep a consistent spacing scale to reinforce grouping and hierarchy.

Data-Driven / Conditional Behavior

• Use displayConditions to show or hide the entire component for high-level gating (progressive disclosure of non-essential content).
• Use rules for precise, context-field logic (field, operator, threshold). When matching multiple allowed values, define one rule per value for clarity.
• Keep conditions mutually exclusive and based on stable fields to avoid rapid toggling.

Visibility & Authorization

• Restrict visibility for sensitive content with visibilityPolicySetId.
• When both role and state must align, combine visibilityPolicySetId with displayConditions.

Content & Localization

• Localize hotspot copy with guidedTourHotSpotTitle and guidedTourHotSpotDescription.
• Use displayName only for authoring clarity in the structure panel; it does not affect end-user text.

Dos & Don’ts

...