From fda53f60f0349fe6efe080db807b8aed6897896a Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Tue, 26 Nov 2024 08:54:47 +0100
Subject: [PATCH 01/19] feedback form frontend implementation

---
 .../src/FeedbackForm/FeedbackForm.test.tsx    |  2 +
 .../src/FeedbackForm/FeedbackForm.tsx         |  5 +-
 .../src/config/FeedbackFormImpl.test.tsx      |  2 +
 .../src/config/FeedbackFormImpl.tsx           |  4 ++
 frontend/packages/shared/src/api/paths.js     |  3 ++
 .../DesignView/AddItemModal/FeedbackForm.tsx  | 54 +++++++++++++++++++
 .../src/containers/FormDesignerToolbar.tsx    |  8 ++-
 7 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx

diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.test.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.test.tsx
index 4cd6ac174d6..d74c5ac8d9b 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.test.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.test.tsx
@@ -13,6 +13,7 @@ const buttonTexts: ButtonTexts = {
 };
 
 const heading = 'Heading';
+const description = 'Description';
 
 describe('FeedbackForm', () => {
   it('should render FeedbackForm', () => {
@@ -104,6 +105,7 @@ const renderFeedbackForm = ({
       <FeedbackForm
         buttonTexts={buttonTexts}
         heading={heading}
+        description={description}
         questions={questions}
         position={position || 'inline'}
         onSubmit={jest.fn()}
diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
index 1b64e976780..c32c58fd1db 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { StudioButton, StudioModal } from '@studio/components';
+import { StudioButton, StudioModal, StudioParagraph } from '@studio/components';
 import type { ButtonTexts, QuestionConfig, QuestionsProps } from '../types/QuestionsProps';
 import { YesNoQuestion } from './Question/YesNoQuestion';
 import { useFeedbackFormContext } from '../contexts/FeedbackFormContext';
@@ -11,6 +11,7 @@ import type { AnswerType } from '../types/AnswerType';
 type FeedbackFormProps = {
   buttonTexts: ButtonTexts;
   heading: string;
+  description: string;
   questions: QuestionConfig[];
   position?: 'inline' | 'fixed';
   onSubmit: (answers: Record<string, AnswerType>) => void;
@@ -20,6 +21,7 @@ export function FeedbackForm({
   questions,
   buttonTexts,
   heading,
+  description,
   position = 'inline',
   onSubmit,
 }: FeedbackFormProps): React.ReactElement {
@@ -77,6 +79,7 @@ export function FeedbackForm({
         closeButtonTitle={buttonTexts.close}
         ref={modalRef}
       >
+        <StudioParagraph spacing={true}>{description}</StudioParagraph>
         {questions.map((question) => {
           return renderQuestion(question);
         })}
diff --git a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.test.tsx b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.test.tsx
index f69a8c69eca..7c55b347d11 100644
--- a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.test.tsx
+++ b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.test.tsx
@@ -14,6 +14,7 @@ describe('FeedbackFormImpl', () => {
         close: 'Close',
       },
       heading: 'Give feedback - heading',
+      description: 'Description',
       questions: mockQuestions,
     });
 
@@ -32,6 +33,7 @@ describe('FeedbackFormImpl', () => {
         close: 'Close',
       },
       heading: 'Give feedback - heading',
+      description: 'Description',
       questions: mockQuestions,
     });
 
diff --git a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
index 47d2da25fc5..7ca6aafe4a0 100644
--- a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
+++ b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
@@ -7,6 +7,7 @@ import type { AnswerType } from '../types/AnswerType';
 export class FeedbackFormImpl {
   private readonly buttonTexts: ButtonTexts;
   private readonly heading: string;
+  private readonly description: string;
   private readonly questions: QuestionConfig[];
   private readonly position: 'inline' | 'fixed' = 'inline';
   private readonly onSubmit: (answers: Record<string, any>) => void;
@@ -14,12 +15,14 @@ export class FeedbackFormImpl {
   constructor(config: {
     buttonTexts: ButtonTexts;
     heading: string;
+    description: string;
     questions: QuestionConfig[];
     position?: 'inline' | 'fixed';
     onSubmit: (answers: Record<string, AnswerType>) => void;
   }) {
     this.buttonTexts = config.buttonTexts;
     this.heading = config.heading;
+    this.description = config.description;
     this.questions = config.questions;
     this.getFeedbackForm = this.getFeedbackForm.bind(this);
     this.position = config.position || 'inline';
@@ -32,6 +35,7 @@ export class FeedbackFormImpl {
         <FeedbackForm
           buttonTexts={this.buttonTexts}
           heading={this.heading}
+          description={this.description}
           questions={this.questions}
           position={this.position}
           onSubmit={this.onSubmit}
diff --git a/frontend/packages/shared/src/api/paths.js b/frontend/packages/shared/src/api/paths.js
index e5198d24394..e749e05eaa1 100644
--- a/frontend/packages/shared/src/api/paths.js
+++ b/frontend/packages/shared/src/api/paths.js
@@ -35,6 +35,9 @@ export const dataModelAddXsdFromRepoPath = (org, app, filePath) => `${basePath}/
 // Deployment
 // See frontend/app-development/utils/urlHelper.ts Deployments
 
+// Feedback form
+export const submitFeedbackPath = (org, app) => `${basePath}/${org}/${app}/feedbackform/submit`; // Post
+
 // FormEditor
 export const ruleHandlerPath = (org, app, layoutSetName) => `${basePath}/${org}/${app}/app-development/rule-handler?${s({ layoutSetName })}`; // Get, Post
 export const widgetSettingsPath = (org, app) => `${basePath}/${org}/${app}/app-development/widget-settings`; // Get
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
new file mode 100644
index 00000000000..e03593a0ae5
--- /dev/null
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
@@ -0,0 +1,54 @@
+import type React from 'react';
+import { submitFeedbackPath } from 'app-shared/api/paths';
+import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
+import { post } from 'app-shared/utils/networking';
+import { FeedbackFormImpl } from '@studio/feedback-form';
+import { toast } from 'react-toastify';
+
+export function FeedbackForm(): React.ReactNode {
+  const { org, app } = useStudioEnvironmentParams();
+
+  const submitFeedback = async (answers: Record<string, string>) => {
+    // Using regular axios post rather than a mutation hook, since we are not storing
+    // the feedback in the cache, nor do we need to update any state.
+    try {
+      await post(submitFeedbackPath(org, app), { text: JSON.stringify(answers) });
+      toast.success('Takk for tilbakemeldingen!');
+    } catch (error) {
+      console.error('Failed to submit feedback', error);
+      toast.error('Noe gikk galt. Vennligst prøv igjen senere.');
+    }
+  };
+
+  // Using explicit texts here to avoid adding these potentially
+  // temporary and unnecessary translations to the translation files.
+  const feedbackForm = new FeedbackFormImpl({
+    onSubmit: submitFeedback,
+    buttonTexts: {
+      submit: 'Send',
+      trigger: 'Gi tilbakemelding',
+      close: 'Lukk',
+    },
+    heading: 'Gi tilbakemelding',
+    description: 'Vi ønsker å vite hva du synes om den nye løsningen.',
+    position: 'inline',
+    questions: [
+      {
+        id: '1',
+        type: 'yesNo',
+        questionText: 'Var dette bedre enn før?',
+        buttonLabels: {
+          yes: 'Ja',
+          no: 'Nei',
+        },
+      },
+      {
+        id: '2',
+        type: 'text',
+        questionText: 'Hva kan vi gjøre bedre?',
+      },
+    ],
+  });
+
+  return feedbackForm.getFeedbackForm();
+}
diff --git a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
index 26a38a78a44..6c642cf412d 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
@@ -3,11 +3,17 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen
 import classes from './FormDesignerToolbar.module.css';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
 import { LayoutSetsContainer } from '../components/Elements/LayoutSetsContainer';
+import { FeedbackForm } from './DesignView/AddItemModal/FeedbackForm';
 
 export const FormDesignerToolbar = () => {
   const { org, app } = useStudioEnvironmentParams();
   const layoutSetsQuery = useLayoutSetsQuery(org, app);
   const layoutSetNames = layoutSetsQuery?.data?.sets;
 
-  return <section className={classes.toolbar}>{layoutSetNames && <LayoutSetsContainer />}</section>;
+  return (
+    <section className={classes.toolbar}>
+      {layoutSetNames && <LayoutSetsContainer />}
+      <FeedbackForm />
+    </section>
+  );
 };

From d677de7942de6b26d85696fe332082a9d8ebb955 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Tue, 26 Nov 2024 10:14:43 +0100
Subject: [PATCH 02/19] update request to match endpoint

---
 .../src/containers/DesignView/AddItemModal/FeedbackForm.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
index e03593a0ae5..125664cbbd6 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
@@ -12,7 +12,7 @@ export function FeedbackForm(): React.ReactNode {
     // Using regular axios post rather than a mutation hook, since we are not storing
     // the feedback in the cache, nor do we need to update any state.
     try {
-      await post(submitFeedbackPath(org, app), { text: JSON.stringify(answers) });
+      await post(submitFeedbackPath(org, app), { answers: { ...answers } });
       toast.success('Takk for tilbakemeldingen!');
     } catch (error) {
       console.error('Failed to submit feedback', error);

From 27df48ceed08700840e27deedd28382bed211ace Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Tue, 26 Nov 2024 10:40:08 +0100
Subject: [PATCH 03/19] small tweaks in feedback form library

---
 .../src/FeedbackForm/FeedbackForm.test.tsx                 | 1 +
 .../studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx | 7 ++++++-
 .../src/FeedbackForm/Question/TextQuestion.tsx             | 6 +++---
 .../src/FeedbackForm/Question/YesNoQuestion.tsx            | 4 ++--
 .../src/config/FeedbackFormImpl.test.tsx                   | 2 ++
 .../studio-feedback-form/src/config/FeedbackFormImpl.tsx   | 4 ++++
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.test.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.test.tsx
index d74c5ac8d9b..b54757b4773 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.test.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.test.tsx
@@ -103,6 +103,7 @@ const renderFeedbackForm = ({
   render(
     <FeedbackFormContext.Provider value={{ answers: {}, setAnswers: setAnswers || jest.fn() }}>
       <FeedbackForm
+        id='test'
         buttonTexts={buttonTexts}
         heading={heading}
         description={description}
diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
index c32c58fd1db..6425e153eca 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
@@ -9,6 +9,7 @@ import { getDefaultAnswerValueForQuestion } from '../utils/questionUtils';
 import type { AnswerType } from '../types/AnswerType';
 
 type FeedbackFormProps = {
+  id: string;
   buttonTexts: ButtonTexts;
   heading: string;
   description: string;
@@ -18,6 +19,7 @@ type FeedbackFormProps = {
 };
 
 export function FeedbackForm({
+  id,
   questions,
   buttonTexts,
   heading,
@@ -44,7 +46,10 @@ export function FeedbackForm({
   };
 
   const handleSubmit = () => {
-    onSubmit(answers);
+    onSubmit({
+      ...answers,
+      feedbackFormId: id,
+    });
     handleCloseModal();
   };
 
diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/TextQuestion.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/TextQuestion.tsx
index 40d2e7cf4ed..0da1e0b8c57 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/TextQuestion.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/TextQuestion.tsx
@@ -1,17 +1,17 @@
 import React, { type ChangeEvent } from 'react';
 import type { QuestionsProps } from '../../types/QuestionsProps';
-import { StudioTextfield } from '@studio/components';
+import { StudioTextarea } from '@studio/components';
 import { useDebounce } from '@studio/hooks';
 
 export function TextQuestion({ id, label, value, onChange }: QuestionsProps): React.ReactElement {
   const { debounce } = useDebounce({ debounceTimeInMs: 500 });
   const debouncedOnChange = (newValue: string) => debounce(() => onChange(id, newValue));
   return (
-    <StudioTextfield
+    <StudioTextarea
       id={id}
       label={label}
       value={value}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => debouncedOnChange(e.target.value)}
+      onChange={(e: ChangeEvent<HTMLTextAreaElement>) => debouncedOnChange(e.target.value)}
     />
   );
 }
diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx
index 5b9a38ab6f5..a5808e7a21c 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StudioButton, StudioParagraph } from '@studio/components';
+import { StudioButton, StudioLabelAsParagraph, StudioParagraph } from '@studio/components';
 import { ThumbDownFillIcon, ThumbDownIcon, ThumbUpFillIcon, ThumbUpIcon } from '@studio/icons';
 import type { QuestionsProps } from '../../types/QuestionsProps';
 import classes from './YesNoQuestion.module.css';
@@ -26,7 +26,7 @@ export function YesNoQuestion({ id, label, value, buttonLabels, onChange }: YesN
 
   return (
     <div>
-      <StudioParagraph>{label}</StudioParagraph>
+      <StudioLabelAsParagraph>{label}</StudioLabelAsParagraph>
       <div className={classes.buttons}>
         <StudioButton
           variant='tertiary'
diff --git a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.test.tsx b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.test.tsx
index 7c55b347d11..a81f6c65012 100644
--- a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.test.tsx
+++ b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.test.tsx
@@ -8,6 +8,7 @@ describe('FeedbackFormImpl', () => {
   it('should render FeedbackFormImpl', () => {
     const feedbackForm = new FeedbackFormImpl({
       onSubmit: jest.fn(),
+      id: 'test',
       buttonTexts: {
         submit: 'Submit',
         trigger: 'Give feedback',
@@ -26,6 +27,7 @@ describe('FeedbackFormImpl', () => {
   it('should open form modal when trigger button is clicked', async () => {
     const user = userEvent.setup();
     const feedbackForm = new FeedbackFormImpl({
+      id: 'test',
       onSubmit: jest.fn(),
       buttonTexts: {
         submit: 'Submit',
diff --git a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
index 7ca6aafe4a0..3f319adafdd 100644
--- a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
+++ b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
@@ -5,6 +5,7 @@ import { FeedbackForm } from '../FeedbackForm/FeedbackForm';
 import type { AnswerType } from '../types/AnswerType';
 
 export class FeedbackFormImpl {
+  private readonly id: string;
   private readonly buttonTexts: ButtonTexts;
   private readonly heading: string;
   private readonly description: string;
@@ -13,6 +14,7 @@ export class FeedbackFormImpl {
   private readonly onSubmit: (answers: Record<string, any>) => void;
 
   constructor(config: {
+    id: string;
     buttonTexts: ButtonTexts;
     heading: string;
     description: string;
@@ -20,6 +22,7 @@ export class FeedbackFormImpl {
     position?: 'inline' | 'fixed';
     onSubmit: (answers: Record<string, AnswerType>) => void;
   }) {
+    this.id = config.id;
     this.buttonTexts = config.buttonTexts;
     this.heading = config.heading;
     this.description = config.description;
@@ -33,6 +36,7 @@ export class FeedbackFormImpl {
     return (
       <FeedbackFormContextProvider>
         <FeedbackForm
+          id={this.id}
           buttonTexts={this.buttonTexts}
           heading={this.heading}
           description={this.description}

From 02b1a227de86beaebfdd8d5386747b07f9a392c4 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Thu, 28 Nov 2024 16:15:18 +0100
Subject: [PATCH 04/19] updated feedback form texts

---
 .../DesignView/AddItemModal/FeedbackForm.tsx           | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
index 125664cbbd6..ac7513a0517 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
@@ -23,6 +23,7 @@ export function FeedbackForm(): React.ReactNode {
   // Using explicit texts here to avoid adding these potentially
   // temporary and unnecessary translations to the translation files.
   const feedbackForm = new FeedbackFormImpl({
+    id: 'add-component-poc-feedback',
     onSubmit: submitFeedback,
     buttonTexts: {
       submit: 'Send',
@@ -30,13 +31,14 @@ export function FeedbackForm(): React.ReactNode {
       close: 'Lukk',
     },
     heading: 'Gi tilbakemelding',
-    description: 'Vi ønsker å vite hva du synes om den nye løsningen.',
-    position: 'inline',
+    description:
+      'Hei! Vi ser du tester et nytt design for å legge til komponenter og vil gjerne høre hva du synes!',
+    position: 'fixed',
     questions: [
       {
         id: '1',
         type: 'yesNo',
-        questionText: 'Var dette bedre enn før?',
+        questionText: 'Likte du dette designet bedre?',
         buttonLabels: {
           yes: 'Ja',
           no: 'Nei',
@@ -45,7 +47,7 @@ export function FeedbackForm(): React.ReactNode {
       {
         id: '2',
         type: 'text',
-        questionText: 'Hva kan vi gjøre bedre?',
+        questionText: 'Har du kommentarer eller forslag til forbedringer?',
       },
     ],
   });

From d7cee41e6f80604c112335f6e645df4923ebc513 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Thu, 28 Nov 2024 16:50:16 +0100
Subject: [PATCH 05/19] testing feedback form with updated texts

---
 .../DesignView/AddItemModal/FeedbackForm.tsx  |  7 ++--
 .../containers/FormDesignerToolbar.module.css |  1 +
 .../src/containers/FormDesignerToolbar.tsx    | 36 ++++++++++++++++++-
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
index ac7513a0517..f5ff1328880 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItemModal/FeedbackForm.tsx
@@ -12,7 +12,8 @@ export function FeedbackForm(): React.ReactNode {
     // Using regular axios post rather than a mutation hook, since we are not storing
     // the feedback in the cache, nor do we need to update any state.
     try {
-      await post(submitFeedbackPath(org, app), { answers: { ...answers } });
+      console.log('Submitting feedback', answers, org, app);
+      // await post(submitFeedbackPath(org, app), { answers: { ...answers } });
       toast.success('Takk for tilbakemeldingen!');
     } catch (error) {
       console.error('Failed to submit feedback', error);
@@ -36,7 +37,7 @@ export function FeedbackForm(): React.ReactNode {
     position: 'fixed',
     questions: [
       {
-        id: '1',
+        id: 'bedreJaNei',
         type: 'yesNo',
         questionText: 'Likte du dette designet bedre?',
         buttonLabels: {
@@ -45,7 +46,7 @@ export function FeedbackForm(): React.ReactNode {
         },
       },
       {
-        id: '2',
+        id: 'kommentar',
         type: 'text',
         questionText: 'Har du kommentarer eller forslag til forbedringer?',
       },
diff --git a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.module.css b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.module.css
index e1c0d8b41fc..9c947c58eff 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.module.css
+++ b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.module.css
@@ -3,4 +3,5 @@
   display: flex;
   padding: 8px;
   border-bottom: 1px solid #c9c9c9;
+  justify-content: space-between;
 }
diff --git a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
index 6c642cf412d..c72b687265f 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
@@ -4,16 +4,50 @@ import classes from './FormDesignerToolbar.module.css';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
 import { LayoutSetsContainer } from '../components/Elements/LayoutSetsContainer';
 import { FeedbackForm } from './DesignView/AddItemModal/FeedbackForm';
+import {
+  addFeatureFlagToLocalStorage,
+  removeFeatureFlagFromLocalStorage,
+  shouldDisplayFeature,
+} from 'app-shared/utils/featureToggleUtils';
+import { StudioParagraph, StudioSwitch } from '@studio/components';
+import { HelpText } from '@digdir/designsystemet-react';
 
 export const FormDesignerToolbar = () => {
   const { org, app } = useStudioEnvironmentParams();
   const layoutSetsQuery = useLayoutSetsQuery(org, app);
   const layoutSetNames = layoutSetsQuery?.data?.sets;
 
+  const toggleComponentModalPocAndReload = () => {
+    if (shouldDisplayFeature('addComponentModal')) {
+      removeFeatureFlagFromLocalStorage('addComponentModal');
+    } else {
+      addFeatureFlagToLocalStorage('addComponentModal');
+    }
+    window.location.reload();
+  };
+
   return (
     <section className={classes.toolbar}>
       {layoutSetNames && <LayoutSetsContainer />}
-      <FeedbackForm />
+      <div style={{ display: 'flex', flexDirection: 'row', gap: 'var(--fds-spacing-2)' }}>
+        <StudioSwitch
+          checked={shouldDisplayFeature('addComponentModal')}
+          onChange={toggleComponentModalPocAndReload}
+        >
+          Prøv nytt design
+        </StudioSwitch>
+        <HelpText title='Prøv vårt nye design for å legge til komponenter' placement='bottom-start'>
+          <StudioParagraph spacing size='small'>
+            Vi jobber med brukeropplevelsen i Studio. Vil du prøve vårt forslag til nytt design for
+            å legge til komponenter?
+          </StudioParagraph>
+          <StudioParagraph spacing size='small'>
+            Du kan fortelle oss hva du synes om det nye designet ved å trykke på "Gi tilbakemelding"
+            nederst til høyre på siden.
+          </StudioParagraph>
+        </HelpText>
+      </div>
+      {shouldDisplayFeature('addComponentModal') && <FeedbackForm />}
     </section>
   );
 };

From 31858de8e0752bf184023fcfb3833eadb4f65651 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Thu, 28 Nov 2024 17:55:56 +0100
Subject: [PATCH 06/19] cleanup feedback form implementation

---
 .../containers/DesignView/AddItem/FeedbackForm.tsx    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
index f5ff1328880..0423bd7c81c 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
@@ -9,15 +9,16 @@ export function FeedbackForm(): React.ReactNode {
   const { org, app } = useStudioEnvironmentParams();
 
   const submitFeedback = async (answers: Record<string, string>) => {
-    // Using regular axios post rather than a mutation hook, since we are not storing
-    // the feedback in the cache, nor do we need to update any state.
+    // Using explicit texts here to avoid adding these potentially
+    // temporary and unnecessary translations to the translation files.
     try {
-      console.log('Submitting feedback', answers, org, app);
-      // await post(submitFeedbackPath(org, app), { answers: { ...answers } });
+      // Using regular axios post rather than a mutation hook, since we are not storing
+      // the feedback in the cache, nor are we updating any state.
+      await post(submitFeedbackPath(org, app), { answers: { ...answers } });
       toast.success('Takk for tilbakemeldingen!');
     } catch (error) {
       console.error('Failed to submit feedback', error);
-      toast.error('Noe gikk galt. Vennligst prøv igjen senere.');
+      toast.error('Noe gikk galt. Prøv igjen senere.');
     }
   };
 

From 9312302e25f3d2cf3d1b7921ef9539547719ddb4 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Thu, 28 Nov 2024 17:58:25 +0100
Subject: [PATCH 07/19] fix build errors

---
 .../src/FeedbackForm/Question/YesNoQuestion.tsx                 | 2 +-
 .../packages/ux-editor/src/containers/FormDesignerToolbar.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx
index a5808e7a21c..f45508dd254 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StudioButton, StudioLabelAsParagraph, StudioParagraph } from '@studio/components';
+import { StudioButton, StudioLabelAsParagraph } from '@studio/components';
 import { ThumbDownFillIcon, ThumbDownIcon, ThumbUpFillIcon, ThumbUpIcon } from '@studio/icons';
 import type { QuestionsProps } from '../../types/QuestionsProps';
 import classes from './YesNoQuestion.module.css';
diff --git a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
index c72b687265f..75827bfa3ff 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
@@ -3,7 +3,7 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen
 import classes from './FormDesignerToolbar.module.css';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
 import { LayoutSetsContainer } from '../components/Elements/LayoutSetsContainer';
-import { FeedbackForm } from './DesignView/AddItemModal/FeedbackForm';
+import { FeedbackForm } from './DesignView/AddItem/FeedbackForm';
 import {
   addFeatureFlagToLocalStorage,
   removeFeatureFlagFromLocalStorage,

From 51f951e5671bb28b647fd91fc71aa35ee9339d33 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Thu, 28 Nov 2024 18:07:52 +0100
Subject: [PATCH 08/19] fix linting error

---
 .../packages/ux-editor/src/containers/FormDesignerToolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
index 75827bfa3ff..28bcefa448d 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
@@ -42,8 +42,8 @@ export const FormDesignerToolbar = () => {
             å legge til komponenter?
           </StudioParagraph>
           <StudioParagraph spacing size='small'>
-            Du kan fortelle oss hva du synes om det nye designet ved å trykke på "Gi tilbakemelding"
-            nederst til høyre på siden.
+            Du kan fortelle oss hva du synes om det nye designet ved å trykke på &quot;Gi
+            tilbakemelding&quot; nederst til høyre på siden.
           </StudioParagraph>
         </HelpText>
       </div>

From 6a85ec40a6615818f4ae70f71d55e380d475ecfc Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Thu, 28 Nov 2024 18:39:44 +0100
Subject: [PATCH 09/19] Updated sizing and some refactoring

---
 .../src/FeedbackForm/FeedbackForm.tsx         |  4 +-
 .../FeedbackForm/Question/TextQuestion.tsx    |  1 +
 .../FeedbackForm/Question/YesNoQuestion.tsx   |  2 +-
 .../src/config/FeedbackFormImpl.tsx           |  2 +-
 .../DesignView/AddItem/FeedbackForm.tsx       |  4 +-
 .../AddItem/ToggleAddComponentPoc.module.css  |  5 ++
 .../AddItem/ToggleAddComponentPoc.tsx         | 57 +++++++++++++++++++
 .../src/containers/FormDesignerToolbar.tsx    | 39 +------------
 8 files changed, 73 insertions(+), 41 deletions(-)
 create mode 100644 frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.module.css
 create mode 100644 frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.tsx

diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
index 6425e153eca..1c762d467c0 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
@@ -84,7 +84,9 @@ export function FeedbackForm({
         closeButtonTitle={buttonTexts.close}
         ref={modalRef}
       >
-        <StudioParagraph spacing={true}>{description}</StudioParagraph>
+        <StudioParagraph size='sm' spacing={true}>
+          {description}
+        </StudioParagraph>
         {questions.map((question) => {
           return renderQuestion(question);
         })}
diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/TextQuestion.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/TextQuestion.tsx
index 0da1e0b8c57..8770e5bce79 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/TextQuestion.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/TextQuestion.tsx
@@ -8,6 +8,7 @@ export function TextQuestion({ id, label, value, onChange }: QuestionsProps): Re
   const debouncedOnChange = (newValue: string) => debounce(() => onChange(id, newValue));
   return (
     <StudioTextarea
+      size='sm'
       id={id}
       label={label}
       value={value}
diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx
index f45508dd254..d9941348115 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/Question/YesNoQuestion.tsx
@@ -26,7 +26,7 @@ export function YesNoQuestion({ id, label, value, buttonLabels, onChange }: YesN
 
   return (
     <div>
-      <StudioLabelAsParagraph>{label}</StudioLabelAsParagraph>
+      <StudioLabelAsParagraph size='sm'>{label}</StudioLabelAsParagraph>
       <div className={classes.buttons}>
         <StudioButton
           variant='tertiary'
diff --git a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
index 3f319adafdd..82d8818c38a 100644
--- a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
+++ b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
@@ -32,7 +32,7 @@ export class FeedbackFormImpl {
     this.onSubmit = config.onSubmit;
   }
 
-  public getFeedbackForm(): React.ReactNode {
+  public getFeedbackForm(): React.ReactElement {
     return (
       <FeedbackFormContextProvider>
         <FeedbackForm
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
index 0423bd7c81c..eb6c178f6ad 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
@@ -1,11 +1,11 @@
-import type React from 'react';
+import React from 'react';
 import { submitFeedbackPath } from 'app-shared/api/paths';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { post } from 'app-shared/utils/networking';
 import { FeedbackFormImpl } from '@studio/feedback-form';
 import { toast } from 'react-toastify';
 
-export function FeedbackForm(): React.ReactNode {
+export function FeedbackForm(): React.ReactElement {
   const { org, app } = useStudioEnvironmentParams();
 
   const submitFeedback = async (answers: Record<string, string>) => {
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.module.css b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.module.css
new file mode 100644
index 00000000000..ba386190aa9
--- /dev/null
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.module.css
@@ -0,0 +1,5 @@
+.switchWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: var(--fds-spacing-2);
+}
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.tsx
new file mode 100644
index 00000000000..d2d333aa944
--- /dev/null
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { FeedbackForm } from './FeedbackForm';
+import { StudioParagraph, StudioSwitch } from '@studio/components';
+import {
+  addFeatureFlagToLocalStorage,
+  removeFeatureFlagFromLocalStorage,
+  shouldDisplayFeature,
+} from 'app-shared/utils/featureToggleUtils';
+import { HelpText } from '@digdir/designsystemet-react';
+import classes from './ToggleAddComponentPoc.module.css';
+
+/**
+ * Component that toggles the AddComponentModal POC and
+ * displays the feedback form if the feature flag is enabled
+ * NOTE: Since this is a poc, and the switch at some point will be
+ * removed,  all texts are explicit in this file, rather than being
+ * fetched from the translation files.
+ * @returns The ToggleAddComponentPoc component
+ */
+export function ToggleAddComponentPoc(): React.ReactElement {
+  const toggleComponentModalPocAndReload = () => {
+    if (shouldDisplayFeature('addComponentModal')) {
+      removeFeatureFlagFromLocalStorage('addComponentModal');
+    } else {
+      addFeatureFlagToLocalStorage('addComponentModal');
+    }
+    window.location.reload();
+  };
+  return (
+    <>
+      <div className={classes.switchWrapper}>
+        <StudioSwitch
+          checked={shouldDisplayFeature('addComponentModal')}
+          onChange={toggleComponentModalPocAndReload}
+          size='sm'
+        >
+          Prøv nytt design
+        </StudioSwitch>
+        <HelpText
+          size='sm'
+          title='Prøv vårt nye design for å legge til komponenter'
+          placement='bottom-start'
+        >
+          <StudioParagraph spacing size='sm'>
+            Vi jobber med brukeropplevelsen i Studio. Vil du prøve vårt forslag til nytt design for
+            å legge til komponenter?
+          </StudioParagraph>
+          <StudioParagraph spacing size='sm'>
+            Du kan fortelle oss hva du synes om det nye designet ved å trykke på &quot;Gi
+            tilbakemelding&quot; nederst til høyre på siden.
+          </StudioParagraph>
+        </HelpText>
+      </div>
+      {shouldDisplayFeature('addComponentModal') && <FeedbackForm />}
+    </>
+  );
+}
diff --git a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
index 28bcefa448d..370773d5776 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesignerToolbar.tsx
@@ -3,51 +3,18 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen
 import classes from './FormDesignerToolbar.module.css';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
 import { LayoutSetsContainer } from '../components/Elements/LayoutSetsContainer';
-import { FeedbackForm } from './DesignView/AddItem/FeedbackForm';
-import {
-  addFeatureFlagToLocalStorage,
-  removeFeatureFlagFromLocalStorage,
-  shouldDisplayFeature,
-} from 'app-shared/utils/featureToggleUtils';
-import { StudioParagraph, StudioSwitch } from '@studio/components';
-import { HelpText } from '@digdir/designsystemet-react';
+import { ToggleAddComponentPoc } from './DesignView/AddItem/ToggleAddComponentPoc';
 
 export const FormDesignerToolbar = () => {
   const { org, app } = useStudioEnvironmentParams();
   const layoutSetsQuery = useLayoutSetsQuery(org, app);
   const layoutSetNames = layoutSetsQuery?.data?.sets;
 
-  const toggleComponentModalPocAndReload = () => {
-    if (shouldDisplayFeature('addComponentModal')) {
-      removeFeatureFlagFromLocalStorage('addComponentModal');
-    } else {
-      addFeatureFlagToLocalStorage('addComponentModal');
-    }
-    window.location.reload();
-  };
-
   return (
     <section className={classes.toolbar}>
       {layoutSetNames && <LayoutSetsContainer />}
-      <div style={{ display: 'flex', flexDirection: 'row', gap: 'var(--fds-spacing-2)' }}>
-        <StudioSwitch
-          checked={shouldDisplayFeature('addComponentModal')}
-          onChange={toggleComponentModalPocAndReload}
-        >
-          Prøv nytt design
-        </StudioSwitch>
-        <HelpText title='Prøv vårt nye design for å legge til komponenter' placement='bottom-start'>
-          <StudioParagraph spacing size='small'>
-            Vi jobber med brukeropplevelsen i Studio. Vil du prøve vårt forslag til nytt design for
-            å legge til komponenter?
-          </StudioParagraph>
-          <StudioParagraph spacing size='small'>
-            Du kan fortelle oss hva du synes om det nye designet ved å trykke på &quot;Gi
-            tilbakemelding&quot; nederst til høyre på siden.
-          </StudioParagraph>
-        </HelpText>
-      </div>
-      {shouldDisplayFeature('addComponentModal') && <FeedbackForm />}
+      {/* POC of new design for adding components*/}
+      <ToggleAddComponentPoc />
     </section>
   );
 };

From 7e5f1ced7c6cfcdd9f2d7e946f8eb954691b4f52 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Fri, 29 Nov 2024 07:54:28 +0100
Subject: [PATCH 10/19] lintfix

---
 .../src/containers/DesignView/AddItem/FeedbackForm.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
index eb6c178f6ad..63e8ff71254 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { submitFeedbackPath } from 'app-shared/api/paths';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { post } from 'app-shared/utils/networking';
 import { FeedbackFormImpl } from '@studio/feedback-form';
 import { toast } from 'react-toastify';
 
-export function FeedbackForm(): React.ReactElement {
+export function FeedbackForm(): ReactElement {
   const { org, app } = useStudioEnvironmentParams();
 
   const submitFeedback = async (answers: Record<string, string>) => {

From c2ad51be44bc0be44f20d658611f1194fb4b0eee Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Fri, 29 Nov 2024 08:03:27 +0100
Subject: [PATCH 11/19] design tweaks

---
 .../DesignView/AddItem/AddItemModal.module.css         |  6 +++---
 .../DesignView/AddItem/ComponentButton.module.css      | 10 +++++-----
 .../containers/DesignView/AddItem/ComponentButton.tsx  |  2 +-
 frontend/packages/ux-editor/src/data/formItemConfig.ts |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/AddItemModal.module.css b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/AddItemModal.module.css
index c714ea08127..2b74175bca0 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/AddItemModal.module.css
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/AddItemModal.module.css
@@ -1,6 +1,6 @@
 .componentButtonInline {
-  height: 80px;
-  width: 140px;
-  margin: 8px;
+  height: 60px;
+  width: 120px;
+  margin: 4px;
   padding: 6px;
 }
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.module.css b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.module.css
index b3306811c15..7f17695070a 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.module.css
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.module.css
@@ -1,14 +1,14 @@
 .componentButton {
   margin: 4px;
-  width: 140px;
-  height: 100px;
+  width: 120px;
+  height: 80px;
   padding: 2px;
   overflow: wrap;
 }
 
 .componentButtonInline {
-  height: 80px;
-  width: 140px;
-  margin: 8px;
+  height: 60px;
+  width: 120px;
+  margin: 4px;
   padding: 2px;
 }
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.tsx
index d9904f77e44..eec01d9c00c 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.tsx
@@ -20,7 +20,7 @@ export function ComponentButton({
     <StudioButton
       variant={selected ? 'primary' : 'secondary'}
       onClick={onClick}
-      size='sm'
+      size='xs'
       aria-label={tooltipContent}
       className={inline ? classes.componentButtonInline : classes.componentButton}
       title={tooltipContent}
diff --git a/frontend/packages/ux-editor/src/data/formItemConfig.ts b/frontend/packages/ux-editor/src/data/formItemConfig.ts
index 878d3a335a4..a8e7c62e615 100644
--- a/frontend/packages/ux-editor/src/data/formItemConfig.ts
+++ b/frontend/packages/ux-editor/src/data/formItemConfig.ts
@@ -578,6 +578,7 @@ export const defaultComponents: ComponentType[] = [
 
 export const allComponents: KeyValuePairs<ComponentType[]> = {
   form: [ComponentType.Input, ComponentType.TextArea, ComponentType.Datepicker],
+  text: [ComponentType.Header, ComponentType.Paragraph, ComponentType.Panel, ComponentType.Alert],
   select: [
     ComponentType.Checkboxes,
     ComponentType.RadioButtons,
@@ -585,7 +586,6 @@ export const allComponents: KeyValuePairs<ComponentType[]> = {
     ComponentType.MultipleSelect,
     ComponentType.Likert,
   ],
-  text: [ComponentType.Header, ComponentType.Paragraph, ComponentType.Panel, ComponentType.Alert],
   info: [
     ComponentType.InstanceInformation,
     ComponentType.Image,

From 6633edc316cfca9ae3d3129ecfe14e47cbf5c2bc Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Fri, 29 Nov 2024 08:38:49 +0100
Subject: [PATCH 12/19] one more sizing tweak

---
 .../containers/DesignView/AddItem/ComponentButton.module.css    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.module.css b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.module.css
index 7f17695070a..b3a83174dcd 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.module.css
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ComponentButton.module.css
@@ -1,6 +1,6 @@
 .componentButton {
   margin: 4px;
-  width: 120px;
+  width: 130px;
   height: 80px;
   padding: 2px;
   overflow: wrap;

From daeea425d6a0378259b8f3e36cf3c77cdbe499db Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Fri, 29 Nov 2024 09:05:14 +0100
Subject: [PATCH 13/19] tests and cleanup

---
 .../DesignView/AddItem/FeedbackForm.test.tsx  | 56 +++++++++++++++++++
 .../DesignView/AddItem/FeedbackForm.tsx       | 13 +++--
 .../AddItem/ToggleAddComponentPoc.test.tsx    | 10 ++++
 3 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
 create mode 100644 frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.test.tsx

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
new file mode 100644
index 00000000000..3ed34160677
--- /dev/null
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { getByText, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FeedbackForm } from './FeedbackForm';
+
+describe('FeedbackForm', () => {
+  it('should render feedback form', () => {
+    renderFeedbackForm();
+    expect(screen.getByRole('button', { name: 'Gi tilbakemelding' })).toBeInTheDocument();
+  });
+
+  it('should open the feedback form when clicking trigger', async () => {
+    const user = userEvent.setup();
+    renderFeedbackForm();
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Gi tilbakemelding' }));
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('should close the feedback form when clicking send', async () => {
+    const user = userEvent.setup();
+    renderFeedbackForm();
+    await user.click(screen.getByRole('button', { name: 'Gi tilbakemelding' }));
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Send' }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('should call axios post when clicking send', async () => {
+    const user = userEvent.setup();
+    const postMock = jest.fn().mockImplementation(() => Promise.resolve({}));
+    jest.mock('app-shared/utils/networking', () => ({
+      post: postMock,
+    }));
+    renderFeedbackForm();
+    await user.click(screen.getByRole('button', { name: 'Gi tilbakemelding' }));
+    await user.click(screen.getByRole('button', { name: 'Send' }));
+    waitFor(() => expect(postMock).toHaveBeenCalledTimes(1));
+  });
+
+  it('should show success toast after clicking send', async () => {
+    const user = userEvent.setup();
+    const postMock = jest.fn().mockImplementation(() => Promise.resolve({}));
+    jest.mock('app-shared/utils/networking', () => ({
+      post: postMock,
+    }));
+    renderFeedbackForm();
+    await user.click(screen.getByRole('button', { name: 'Gi tilbakemelding' }));
+    await user.click(screen.getByRole('button', { name: 'Send' }));
+    waitFor(() => expect(screen.getByText('Takk for tilbakemeldingen!')).toBeInTheDocument());
+  });
+});
+
+const renderFeedbackForm = () => {
+  return render(<FeedbackForm />);
+};
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
index 63e8ff71254..7c14dd21df8 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
@@ -1,16 +1,21 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { submitFeedbackPath } from 'app-shared/api/paths';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { post } from 'app-shared/utils/networking';
 import { FeedbackFormImpl } from '@studio/feedback-form';
 import { toast } from 'react-toastify';
 
+/**
+ * This is a feedback form to gather feedback on the new design for adding components.
+ * It uses the FeedbackForm component from the @studio/feedback-form package.
+ * The form is temporary, and will be removed once the new design is fully tested, or we decide to go in a different direction.
+ * As such, all texts are hardcoded in Norwegian, to avoid adding unnecessary translations.
+ * @returns The FeedbackForm component.
+ */
 export function FeedbackForm(): ReactElement {
   const { org, app } = useStudioEnvironmentParams();
 
   const submitFeedback = async (answers: Record<string, string>) => {
-    // Using explicit texts here to avoid adding these potentially
-    // temporary and unnecessary translations to the translation files.
     try {
       // Using regular axios post rather than a mutation hook, since we are not storing
       // the feedback in the cache, nor are we updating any state.
@@ -22,8 +27,6 @@ export function FeedbackForm(): ReactElement {
     }
   };
 
-  // Using explicit texts here to avoid adding these potentially
-  // temporary and unnecessary translations to the translation files.
   const feedbackForm = new FeedbackFormImpl({
     id: 'add-component-poc-feedback',
     onSubmit: submitFeedback,
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.test.tsx
new file mode 100644
index 00000000000..fb9658b84a4
--- /dev/null
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ToggleAddComponentPoc.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToggleAddComponentPoc } from './ToggleAddComponentPoc';
+
+describe('ToggleAddComponentPoc', () => {
+  it('should render the component', () => {
+    render(<ToggleAddComponentPoc />);
+    expect(screen.getByText('Prøv nytt design')).toBeInTheDocument();
+  });
+});

From 65e4ff38b1d082122a66afe2880f59f1ebab39f8 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Fri, 29 Nov 2024 09:48:44 +0100
Subject: [PATCH 14/19] remove broken tests and unused imports

---
 .../DesignView/AddItem/FeedbackForm.test.tsx  | 26 +------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
index 3ed34160677..521976225ca 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { getByText, render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FeedbackForm } from './FeedbackForm';
 
@@ -25,30 +25,6 @@ describe('FeedbackForm', () => {
     await user.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
-
-  it('should call axios post when clicking send', async () => {
-    const user = userEvent.setup();
-    const postMock = jest.fn().mockImplementation(() => Promise.resolve({}));
-    jest.mock('app-shared/utils/networking', () => ({
-      post: postMock,
-    }));
-    renderFeedbackForm();
-    await user.click(screen.getByRole('button', { name: 'Gi tilbakemelding' }));
-    await user.click(screen.getByRole('button', { name: 'Send' }));
-    waitFor(() => expect(postMock).toHaveBeenCalledTimes(1));
-  });
-
-  it('should show success toast after clicking send', async () => {
-    const user = userEvent.setup();
-    const postMock = jest.fn().mockImplementation(() => Promise.resolve({}));
-    jest.mock('app-shared/utils/networking', () => ({
-      post: postMock,
-    }));
-    renderFeedbackForm();
-    await user.click(screen.getByRole('button', { name: 'Gi tilbakemelding' }));
-    await user.click(screen.getByRole('button', { name: 'Send' }));
-    waitFor(() => expect(screen.getByText('Takk for tilbakemeldingen!')).toBeInTheDocument());
-  });
 });
 
 const renderFeedbackForm = () => {

From 1356c24d3815aaaafa96eb2da327d2684ff5327f Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Fri, 29 Nov 2024 10:36:24 +0100
Subject: [PATCH 15/19] mock post function

---
 .../DesignView/AddItem/FeedbackForm.test.tsx         | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
index 521976225ca..6612b82007a 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
@@ -4,6 +4,18 @@ import userEvent from '@testing-library/user-event';
 import { FeedbackForm } from './FeedbackForm';
 
 describe('FeedbackForm', () => {
+  beforeAll(() => {
+    jest.mock('app-shared/utils/networking', () => {
+      return {
+        post: jest.fn(() => Promise.resolve()),
+      };
+    });
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
   it('should render feedback form', () => {
     renderFeedbackForm();
     expect(screen.getByRole('button', { name: 'Gi tilbakemelding' })).toBeInTheDocument();

From 8404b41a33e24a522e217893d5cb900129304210 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Fri, 29 Nov 2024 10:38:11 +0100
Subject: [PATCH 16/19] News item

---
 .../overview/components/News/NewsContent/news.nb.json        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json b/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json
index 63ee640e5f5..f9eda7a9d5a 100644
--- a/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json
+++ b/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json
@@ -1,6 +1,11 @@
 {
   "$schema": "news.schema.json",
   "news": [
+    {
+      "date": "2024-11-29",
+      "title": "Prøv nytt design på Utforming!",
+      "content": "Vi tester ny måte å legge til komponenter på sidene i Utforming. Nytt design kan skrus på øverst til høyre på Utforming-siden, og du kan gi tilbakemeldinger på hva du synes via et tilbakemeldingsskjema."
+    },
     {
       "date": "2024-10-25",
       "title": "Prosess har blitt voksen!",

From f911e61cfa4f89b163115cbab34a71b48ad55981 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Fri, 29 Nov 2024 15:44:57 +0100
Subject: [PATCH 17/19] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Gørild Døhl <gorild.dohl@digdir.no>
---
 .../features/overview/components/News/NewsContent/news.nb.json  | 2 +-
 .../src/containers/DesignView/AddItem/FeedbackForm.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json b/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json
index f9eda7a9d5a..01b971e82fd 100644
--- a/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json
+++ b/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json
@@ -4,7 +4,7 @@
     {
       "date": "2024-11-29",
       "title": "Prøv nytt design på Utforming!",
-      "content": "Vi tester ny måte å legge til komponenter på sidene i Utforming. Nytt design kan skrus på øverst til høyre på Utforming-siden, og du kan gi tilbakemeldinger på hva du synes via et tilbakemeldingsskjema."
+      "content": "Vi tester en ny måte å legge til komponenter på Utforming-siden. Du kan velge det nye designet  øverst til høyre på Utforming-siden og teste så mye du vil! Etterpå kan du gi tilbakemelding på hva du synes, ved å velge Gi tilbakemelding nederst til høyre."
     },
     {
       "date": "2024-10-25",
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
index 7c14dd21df8..740b0696a21 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
@@ -37,7 +37,7 @@ export function FeedbackForm(): ReactElement {
     },
     heading: 'Gi tilbakemelding',
     description:
-      'Hei! Vi ser du tester et nytt design for å legge til komponenter og vil gjerne høre hva du synes!',
+      'Hei! Så bra at du har testet det nye designet for å legge til komponenter! Vi vil gjerne høre hva du synes.',
     position: 'fixed',
     questions: [
       {

From 5bf58939fc0f24eb8cd6fc9014ee360b787377c6 Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Mon, 2 Dec 2024 11:13:37 +0100
Subject: [PATCH 18/19] add AI analysis disclaimer

---
 .../src/FeedbackForm/FeedbackForm.module.css               | 4 ++++
 .../studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx | 7 +++++++
 .../studio-feedback-form/src/config/FeedbackFormImpl.tsx   | 4 ++++
 .../src/containers/DesignView/AddItem/FeedbackForm.tsx     | 2 ++
 4 files changed, 17 insertions(+)

diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.module.css b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.module.css
index 9dd716795a7..6b5dd06619d 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.module.css
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.module.css
@@ -5,6 +5,10 @@
   z-index: 99999999; /* Make sure this is on top of everything */
 }
 
+.disclaimer {
+  margin-top: var(--fds-spacing-2);
+}
+
 .submit {
   margin-top: var(--fds-spacing-2);
 }
diff --git a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
index 1c762d467c0..96da9eaf253 100644
--- a/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
+++ b/frontend/libs/studio-feedback-form/src/FeedbackForm/FeedbackForm.tsx
@@ -13,6 +13,7 @@ type FeedbackFormProps = {
   buttonTexts: ButtonTexts;
   heading: string;
   description: string;
+  disclaimer?: string;
   questions: QuestionConfig[];
   position?: 'inline' | 'fixed';
   onSubmit: (answers: Record<string, AnswerType>) => void;
@@ -24,6 +25,7 @@ export function FeedbackForm({
   buttonTexts,
   heading,
   description,
+  disclaimer,
   position = 'inline',
   onSubmit,
 }: FeedbackFormProps): React.ReactElement {
@@ -90,6 +92,11 @@ export function FeedbackForm({
         {questions.map((question) => {
           return renderQuestion(question);
         })}
+        {disclaimer && (
+          <StudioParagraph size='xs' spacing={true} className={classes.disclaimer}>
+            {disclaimer}
+          </StudioParagraph>
+        )}
         <StudioButton className={classes.submit} onClick={handleSubmit} color='success'>
           {buttonTexts.submit}
         </StudioButton>
diff --git a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
index 82d8818c38a..e011459ee14 100644
--- a/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
+++ b/frontend/libs/studio-feedback-form/src/config/FeedbackFormImpl.tsx
@@ -9,6 +9,7 @@ export class FeedbackFormImpl {
   private readonly buttonTexts: ButtonTexts;
   private readonly heading: string;
   private readonly description: string;
+  private readonly disclaimer?: string;
   private readonly questions: QuestionConfig[];
   private readonly position: 'inline' | 'fixed' = 'inline';
   private readonly onSubmit: (answers: Record<string, any>) => void;
@@ -18,6 +19,7 @@ export class FeedbackFormImpl {
     buttonTexts: ButtonTexts;
     heading: string;
     description: string;
+    disclaimer?: string;
     questions: QuestionConfig[];
     position?: 'inline' | 'fixed';
     onSubmit: (answers: Record<string, AnswerType>) => void;
@@ -26,6 +28,7 @@ export class FeedbackFormImpl {
     this.buttonTexts = config.buttonTexts;
     this.heading = config.heading;
     this.description = config.description;
+    this.disclaimer = config.disclaimer;
     this.questions = config.questions;
     this.getFeedbackForm = this.getFeedbackForm.bind(this);
     this.position = config.position || 'inline';
@@ -40,6 +43,7 @@ export class FeedbackFormImpl {
           buttonTexts={this.buttonTexts}
           heading={this.heading}
           description={this.description}
+          disclaimer={this.disclaimer}
           questions={this.questions}
           position={this.position}
           onSubmit={this.onSubmit}
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
index 740b0696a21..db5b2acec86 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.tsx
@@ -38,6 +38,8 @@ export function FeedbackForm(): ReactElement {
     heading: 'Gi tilbakemelding',
     description:
       'Hei! Så bra at du har testet det nye designet for å legge til komponenter! Vi vil gjerne høre hva du synes.',
+    disclaimer:
+      'Merk at KI-verktøy kan bli brukt til å analysere svarene. Påse at du ikke inkluderer personopplysninger i dine svar.',
     position: 'fixed',
     questions: [
       {

From c3df21f835a99a667d2c408a867a9e423fc9465e Mon Sep 17 00:00:00 2001
From: Nina Kylstad <nkylstad@gmail.com>
Date: Mon, 2 Dec 2024 13:34:10 +0100
Subject: [PATCH 19/19] update post mock

---
 .../DesignView/AddItem/FeedbackForm.test.tsx        | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
index 6612b82007a..1e79cb956d5 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/FeedbackForm.test.tsx
@@ -2,16 +2,12 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FeedbackForm } from './FeedbackForm';
+import axios from 'axios';
 
-describe('FeedbackForm', () => {
-  beforeAll(() => {
-    jest.mock('app-shared/utils/networking', () => {
-      return {
-        post: jest.fn(() => Promise.resolve()),
-      };
-    });
-  });
+jest.mock('axios');
+var mockedAxios = axios as jest.Mocked<typeof axios>;
 
+describe('FeedbackForm', () => {
   afterAll(() => {
     jest.clearAllMocks();
   });
@@ -31,6 +27,7 @@ describe('FeedbackForm', () => {
 
   it('should close the feedback form when clicking send', async () => {
     const user = userEvent.setup();
+    mockedAxios.post.mockResolvedValueOnce({});
     renderFeedbackForm();
     await user.click(screen.getByRole('button', { name: 'Gi tilbakemelding' }));
     expect(await screen.findByRole('dialog')).toBeInTheDocument();