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

Clock

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

Overview

• The Dynamic Clock Component is a countdown timer that provides visual feedback as time progresses.
• Users can start, stop, and monitor countdown periods.
• The timer shows visual warnings when approaching time limits.
• It is useful for time-sensitive operations, timing processes, or activity monitoring.

...

• enableAsHotspot: Enables the clock component as a guided tour hotspot. When enabled, the clock can be highlighted during guided tours to draw user attention to timing features.
• guidedTourHotSpotTitle: Sets the title for the guided tour hotspot with multilingual support. For example, {"en-US": "Monitor Operation Time", "de-DE": "Betriebszeit überwachen"}.
• guidedTourHotSpotDescription: Sets the description for the guided tour hotspot with multilingual support. For example, {"en-US": "Click the play button to start timing your operation. The timer will warn you when time is running out.", "de-DE": "Klicken Sie auf die Wiedergabetaste, um die Zeitmessung Ihres Vorgangs zu starten. Der Timer warnt Sie, wenn die Zeit knapp wird."}.

Links

Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-77301&t=iosNC2AkSTGs5lMh-1 Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id7/3-clock

Guidelines

Usage

• Use the Clock to time a bounded activity by setting the total duration via countDownBarInSeconds.
• Provide an early warning window so users can prepare before time expires by configuring warningRangeInPercent.

...