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

Karma

(not verified)

Link to Figma: tba

Overview

• The Dynamic SFM Karma Component displays a karma score in a circular gauge.
• It retrieves the score from a configured data source.
• The score is visualized as one of four levels: Poor, Fair, Good, and Excellent.
• It is useful for showing performance metrics, health scores, or quality ratings.
• The visual gauge makes the information engaging and easy to understand.

...

• id – Specifies a unique identifier for the component used for programmatic access. For example, "customerSatisfactionKarma" enables targeted manipulation of this specific karma component.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "customer-karma-gauge" allows test scripts to reliably locate this component.
• enableAsHotspot – Enables the karma component as a guided tour hotspot. When enabled, the karma gauge can be highlighted during guided tours to draw user attention to important metrics.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot with support for multiple languages. For example, {"en-US": "Customer Satisfaction Score", "de-DE": "Kundenzufriedenheitswert"} provides localized titles when the karma gauge is highlighted during a guided tour.
• guidedTourHotSpotDescription – Sets the description text for the guided tour hotspot with language support. For example, {"en-US": "This gauge shows the overall satisfaction rating from customer feedback", "de-DE": "Diese Anzeige zeigt die Gesamtzufriedenheitsbewertung aus dem Kundenfeedback"} provides detailed explanations during guided tours.

Links

• Figma: tba
• Live style guide: tba

Guidelines

Sizing & Layout

...