Teemu/enhancement/637 feedbackcard update and interactive tooltips

[temez26]

📄 Pull Request Overview

Closes #637

🔧 Changes Made

1. FeedbackCard overhaul: Refactored FeedbackCard to use the new FeedbackCardSuccess component for the post-submission view, which displays the selected emoji rating and links to full feedback forms (web & game). Added dynamic, rating-aware input placeholders that change based on the selected emoji.

2. Interactive emoji tooltips: Updated FeedbackEmoji to render a speech-bubble style rating label (e.g. "Bad", "Meh..", "OK", "Good", "Great") below the selected emoji, with dynamic horizontal positioning. Emoji can now be deselected by clicking again.

3. New FeedbackCardSuccess component: Created new FeedbackCardSuccess component and its SCSS module to handle the success state UI after feedback submission.

4. CustomForm.TextareaField added: Extended the CustomForm compound component with a new TextareaField sub-component for more flexible, accessible multi-line text input in forms.

5. i18n updates: Updated feedbackCard.json localization files with shorter, cleaner sentences and added new keys: rating-label-1 through rating-label-5, input-placeholder-1 through input-placeholder-5, error-submit-failed, href-to-webform, and href-to-gameform.

---

✅ Checklist Before Submission

• Functionality: I have tested my code, and it works as expected.
• JSDoc: I have added or updated JSDoc comments for all relevant code.
• Debugging: No console.log() or other debugging statements are left.
• Clean Code: Removed commented-out or unnecessary code.
• Tests: Added new tests or updated existing ones for the changes made.
• Documentation: Documentation has been updated (if applicable).

---

📝 Additional Information

• Screenshots: Include screenshots of the interactive emoji tooltip (speech bubble label) and the new FeedbackCardSuccess view.
• Dependencies: No new dependencies added.
• Known Issues: English text for some i18n keys may still need final confirmation/review.

[Skoivumaki]

Good work! Unfortunately the original issue might have been a bit misleading, since the given Figma Design example is meant to be toggled via feedback button. (unless im mistaken @Rutjake ?) However the only differences between toggle vs footer applied feedback component really is the border😄

Todo:

• Remove borders from component if its implemented inside footer.
• Adjust components layout so it looks more clean. (see example)
• ratingLabels go off-center on small devices, fix by detaching the arrow and center it to emoji... or figure something else. (see example)
• Remove inline styling unless its setting CSS via variables.

Examples:
Feedback layout adjusted by fit-content and div filling the extra space, since the ratingLabels are absolute and don't contribute to flex:
https://github.com/user-attachments/assets/add71c85-c841-436b-90cc-35e1857d3131

ratingLabel off-center:

[Rutjake]

Good work! Unfortunately the original issue might have been a bit misleading, since the given Figma Design example is meant to be toggled via feedback button. (unless im mistaken @Rutjake ?)

You’re absolutely right. The original issue was a bit misleading, and I apologize for the lack of clarity in the initial description.
The goal is to include both elements for now. This is because the new footer design is still being finalized by the design team.

[temez26]

Alright, I will look into it at some point.