Teemu/enhancement/637 feedbackcard update and interactive tooltips

frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json

@@ -1,10 +1,24 @@
 {
     "title": "Tell your opinion about our websites",
-    "input-placeholder": "Please write here",
+    "success-title": "Thank you for your feedback!",
+    "input-placeholder": "(Optional)",
+    "input-placeholder-1": "What bothered you the most?",
+    "input-placeholder-2": "What fell short of your expectations?",
+    "input-placeholder-3": "What could be improved?",
+    "input-placeholder-4": "Any suggestions for improvement?",
+    "input-placeholder-5": "Wonderful! What did you like the most?",
     "send": "Send",
+    "loading": "Sending...",
     "href-to-fullform": "Go to the full form ->",
     "error": "Select emote and then write feedback",
+    "error-submit-failed": "Submission failed. Please try again.",
+    "feedback-text": "Give specific feedback",
     "success": "Thank you very much! We appreciate your feedback.",
-    "href-to-webform": "Website form",
-    "href-to-gameform": "Game form"
+    "href-to-webform": "Web form",
+    "href-to-gameform": "Game form",
+    "rating-label-1": "Bad",
+    "rating-label-2": "Meh..",
+    "rating-label-3": "OK",
+    "rating-label-4": "Good",
+    "rating-label-5": "Great"
 }

frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json

@@ -1,10 +1,24 @@
 {
     "title": "Kerro mielipiteesi verkkosivuistamme",
-    "input-placeholder": "Kirjoita tähän",
+    "success-title": "Kiitos palautteestasi!",
+    "input-placeholder": "(Valinnainen)",
+    "input-placeholder-1": "Harmi! Mikä mätti eniten?",
+    "input-placeholder-2": "Voi ei - mikä jäi vajaaksi?",
+    "input-placeholder-3": "Mikä oli hyvää ja mitä parantaisit?",
+    "input-placeholder-4": "Kiva kuulla! Parannus ehdotuksia?",
+    "input-placeholder-5": "Ihanaa! Mikä oli parasta?",
     "send": "Lähetä",
+    "loading": "Lähetetään...",
     "href-to-fullform": "Siirry koko lomakkeeseen ->",
     "error": "Valitse mieliala ja sitten kirjoita palaute.",
+    "error-submit-failed": "Lähetys epäonnistui. Yritä uudelleen.",
+    "feedback-text": "Anna tarkempi palaute",
     "success": "Kiitos paljon! Arvostamme palautettasi.",
-    "href-to-webform": "Verkkosivulomake",
-    "href-to-gameform": "Pelilomake"
+    "href-to-webform": "Web lomake",
+    "href-to-gameform": "Peli lomake",
+    "rating-label-1": "Huono",
+    "rating-label-2": "Meh..",
+    "rating-label-3": "Ihan ok",
+    "rating-label-4": "Hyvä",
+    "rating-label-5": "Loistava"
 }

frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json

@@ -1,10 +1,19 @@
 {
     "title": "Поделитесь своим мнением о нашем сайте",
+    "success-title": "Спасибо за ваш отзыв!",
     "input-placeholder": "Напишите сюда",
+    "input-placeholder-1": "Что вам не понравилось больше всего?",
+    "input-placeholder-2": "Что не оправдало ваших ожиданий?",
+    "input-placeholder-3": "Что было хорошо и что можно улучшить?",
+    "input-placeholder-4": "Приятно слышать! Есть предложения по улучшению?",
+    "input-placeholder-5": "Замечательно! Что понравилось больше всего?",
     "send": "Отправить",
+    "loading": "Отправка...",
     "href-to-fullform": "Перейти к полной форме ->",
     "error": "Выберите настроение и затем напишите отзыв.",
+    "error-submit-failed": "Отправка не удалась. Попробуйте снова.",
+    "feedback-text": "Оставьте подробный отзыв",
     "success": "Большое спасибо! Мы ценим ваш отзыв.",
-    "href-to-webform": "Отзыв о сайте",
-    "href-to-gameform": "Отзыв о игре"
+    "href-to-webform": "Форма сайта",
+    "href-to-gameform": "Форма игры"
 }

frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx

@@ -8,6 +8,7 @@ import React, {
     memo,
     DetailedHTMLProps,
     InputHTMLAttributes,
+    TextareaHTMLAttributes,
     useState,
     useEffect,
     useId,
@@ -318,12 +319,52 @@ function MultiSelectionDropdown<T>({
     );
 }
 
+type TextareaFieldProps = {
+    label?: string;
+    error?: any;
+    className?: string;
+    textareaProps?: DetailedHTMLProps<
+        TextareaHTMLAttributes<HTMLTextAreaElement>,
+        HTMLTextAreaElement
+    >;
+};
+
+function TextareaField({ label, error, textareaProps, className = '' }: TextareaFieldProps) {
+    const reactId = useId();
+    const slug = slugifyLabel(label);
+    const normalizedReactId = reactId
+        .toString()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-');
+    const textareaId =
+        textareaProps?.id || (slug ? `textarea-${slug}` : `textarea-${normalizedReactId}`);
+
+    return (
+        <div className={classNames(cls.field, {}, [className])}>
+            {label && <label htmlFor={textareaId}>{label}</label>}
+            <textarea
+                id={textareaId}
+                {...textareaProps}
+            />
+            {error && (
+                <p
+                    role="alert"
+                    className={cls.error}
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+}
+
 interface IFormProps extends HTMLAttributes<HTMLFormElement> {}
 
 interface MemoizedFormCompose {
     Button: typeof Button;
     Header: typeof Header;
     InputField: typeof InputField;
+    TextareaField: typeof TextareaField;
     Checkbox: typeof Checkbox;
     MultiSelectionDropdown: typeof MultiSelectionDropdown;
 }
@@ -359,6 +400,7 @@ const MemoizedForm = memo(BaseForm) as NamedExoticComponent<IFormProps> & Memoiz
 MemoizedForm.Button = Button;
 MemoizedForm.Header = Header;
 MemoizedForm.InputField = InputField;
+MemoizedForm.TextareaField = TextareaField;
 MemoizedForm.Checkbox = Checkbox;
 MemoizedForm.MultiSelectionDropdown = MultiSelectionDropdown;
 

frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss

@@ -1,29 +1,36 @@
 .feedbackForm {
+    font: var(--font-dm-xl);
     background-color: var(--base-card-background);
-    display: flex;
+    display: flex !important;
     flex-direction: column;
-    margin: 5px;
-    width: 100%;
-    max-width: 330px;
-    height: fit-content;
-    padding-top: 0;
+    width: 320px !important;
+    height: 400px;
     align-items: center;
-    gap: 10px;
+    gap: 5px;
     box-shadow: 8px 8px 1px #000000;
     border-width: 4px;
     border-style: solid;
     border-color: #000000;
 }
 
+.collapsedVersion {
+    height: 230px;
+}
+
+.borderlessVersion {
+    box-shadow: none;
+    border: none;
+}
+
 .feedbackTitle {
-    line-height: 40px !important;
-    font: var(--font-sw-xl);
-    box-sizing: border-box;
-    height: fit-content;
+    font-size: 24px;
+    font-family: 'Marko One';
+    font-weight: bold;
+    line-height: 100%;
     color: var(--primary-color);
     text-align: center;
     width: 100%;
-    margin: 0 auto;
+    margin: 0 0 8px 0;
 }
 
 .feedbackButton {
@@ -37,67 +44,67 @@
     align-items: center;
     padding: 9px 12px;
     gap: 10px;
-    width: 100%;
-    max-width: 300px;
+    width:250px;
     height: 48px;
     background: var(--primary-color) !important;
     border: 2px solid var(--drop-shadows) !important;
     border-radius: 25px !important;
     box-shadow: 2px 4px 0 var(--black) !important;
 }
 
+.inputField {
+    label {
+        font: var(--font-dm-m);
+        font-size: 14px;
+        color: var(--white);
+        display: block;
+    }
+}
+
 .textInput {
     font: var(--font-dm-m);
     color: var(--black);
-    width: 100%;
-    max-width: 300px;
-    height: 45px;
-    padding: 10px 10px;
-    background: #ffffff;
+    height: 81px;
+    padding: 10px;
+    border-radius: 12px;
+    background: #FFFFFF;
     border: 2px solid #000000;
     box-shadow: 2px 4px 0 #121212;
-    border-radius: 25px !important;
     box-sizing: border-box;
+    resize: none;
+    vertical-align: top;
+    outline: none;
 }
-
 .emojiList {
     display: inline-flex !important;
     justify-content: space-between;
-    align-items: center;
+    align-items: start;
     width: 100%;
-    padding-bottom: 5px;
-    box-sizing: border-box;
-}
-
-.linkToForm {
-    display: flex;
-    flex-direction: row;
-    font: var(--font-dm-m);
-    color: var(--white);
+    height: 100px;
 }
-
 .linkToFormContainer {
-    width: 100%;
-    max-width: 300px;
+    max-width:fit-content;
     display: inline-flex !important;
-    flex-direction: row;
     justify-content: space-between;
-    gap: unset;
+    gap: 10px;
 }
 
-.linkToFormContainer > * {
-    display: inline-block;
-    vertical-align: middle;
-    justify-items: end;
-    padding: 0 10px 0 10px;
+.linkToFormLabel {
+    font: var(--font-dm-m);
+    color: var(--white);
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
 }
 
-.embedabbleVersion {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
+.linkToForm {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font: var(--font-dm-m);
+    color: var(--white);
 }
+
 .externalLinkIcon {
     display: inline;
     vertical-align: middle !important;

frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.stories.tsx

@@ -23,12 +23,12 @@ const meta = {
     argTypes: {
         /**
          * Defines the variant of the feedback card, which determines the layout style.
-         * @type {('full' | 'embedabble')}
+         * @type {('full' | 'borderless')}
          */
         variant: {
             control: 'select',
-            description: 'The variant of the FeedbackCard (either "full" or "embedabble").',
-            options: ['full', 'embedabble'],
+            description: 'The variant of the FeedbackCard ("full", "borderless").',
+            options: ['full', 'borderless'],
         },
     },
 } satisfies Meta<typeof FeedbackCard>;
@@ -43,7 +43,7 @@ type Story = StoryObj<typeof meta>;
  */
 export const Default: Story = {
     args: {
-        variant: 'full', // Default is 'full'
+        variant: 'full',
     },
     parameters: {
         docs: {
@@ -54,18 +54,14 @@ export const Default: Story = {
     },
 };
 
-/**
- * Story for the `FeedbackCard` component with the "embedabble" variant.
- * A more compact version of the feedback card suitable for embedding in other sections of the app.
- */
-export const Embedabble: Story = {
+export const BorderlessVersion: Story = {
     args: {
-        variant: 'embedabble', // Embedabble version for compact display
+        variant: 'borderless',
     },
     parameters: {
         docs: {
             description: {
-                story: 'Displays the `FeedbackCard` component with the "embedabble" variant, rendering a smaller, more compact layout.',
+                story: 'Displays the `FeedbackCard` component with the "borderless" variant, rendering the card without border and shadow styles.',
             },
         },
     },