feat: update codelist config design (#14276)

Co-authored-by: Erling Hauan <[email protected]>

frontend/language/src/nb.json

@@ -1598,7 +1598,7 @@
   "ux_editor.modal_new_option": "Legg til alternativ",
   "ux_editor.modal_properties_add_radio_button_options": "Hvordan vil du legge til radioknapper?",
   "ux_editor.modal_properties_code_list": "Velg fra biblioteket",
-  "ux_editor.modal_properties_code_list_alert_title": "Du redigerer nå en kodeliste i biblioteket.",
+  "ux_editor.modal_properties_code_list_alert_title": "Du er i ferd med å endre en kodeliste i biblioteket. Da endrer du også kodelisten alle andre steder der den blir brukt.",
   "ux_editor.modal_properties_code_list_button_title_library": "Kodeliste fra biblioteket",
   "ux_editor.modal_properties_code_list_button_title_manual": "Kodeliste på komponenten",
   "ux_editor.modal_properties_code_list_custom_list": "Egendefinert kodeliste",
@@ -1756,13 +1756,17 @@
   "ux_editor.options.code_list_only": "Denne komponenten støtter bare oppsett med forhåndsdefinerte kodelister.",
   "ux_editor.options.code_list_reference_id.description": "Her kan du legge til en referanse-ID til en dynamisk kodeliste som er satt opp i koden.",
   "ux_editor.options.code_list_reference_id.description_details": "Du bruker dynamiske kodelister for å tilpasse alternativer for brukerne. Det kan for eksempel være tilpasninger ut fra geografisk plassering, eller valg brukeren gjør tidligere i skjemaet.",
+  "ux_editor.options.modal_header_library_code_list": "Kodeliste fra biblioteket",
+  "ux_editor.options.modal_header_manual_code_list": "Kodeliste på komponenten",
+  "ux_editor.options.modal_header_select_library_code_list": "Biblioteket for kodelister",
   "ux_editor.options.multiple": "{{value}} alternativer",
   "ux_editor.options.option_edit_text": "Rediger kodeliste",
-  "ux_editor.options.option_remove_text": "Fjern valgt kodeliste",
+  "ux_editor.options.option_remove_text": "Fjern kobling til kodelisten",
   "ux_editor.options.section_heading": "Valg for kodelister",
   "ux_editor.options.single": "{{value}} alternativ",
   "ux_editor.options.tab_code_list": "Velg kodeliste",
   "ux_editor.options.tab_manual": "Sett opp egne alternativer",
+  "ux_editor.options.tab_option_list_alert_title": "Komponenten refererer allerede til en egendefinert ID. Legger du til en ny kodeliste her vil du overstyre den egendefinerte ID-en.",
   "ux_editor.options.tab_reference_id": "Angi referanse-ID",
   "ux_editor.options.tab_reference_id_alert_title": "Du har allerede referert til en kodeliste. Skriver du inn en ID, vil referansen bli slettet.",
   "ux_editor.options.upload_title": "Last opp egen kodeliste",
@@ -1827,6 +1831,7 @@
   "ux_editor.properties_panel.texts.no_properties": "Det er ingen tekster å konfigurere for denne komponenten.",
   "ux_editor.properties_panel.texts.sub_title_images": "Valg for bilde",
   "ux_editor.properties_panel.texts.sub_title_texts": "Tekster",
+  "ux_editor.radios_error_DuplicateValues": "Alle verdier må være unike.",
   "ux_editor.radios_error_NoOptions": "Det må være minst én radioknapp.",
   "ux_editor.radios_option": "Radioknapp {{optionNumber}}",
   "ux_editor.search_text_resources_close": "Lukk tekstsøk",

frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/EditTab.module.css

@@ -1,25 +1,20 @@
-.chosenOptionContainer {
-  display: flex;
-  overflow: hidden;
-}
-
-.deleteButtonContainer {
-  display: flex;
-  width: min-content;
-  margin-left: auto;
+.container {
+  padding: 0 var(--fds-spacing-5);
 }
 
-.deleteButton {
-  border-radius: 0;
-}
-
-.optionButtons {
+.addOptionListContainer {
   display: flex;
+  width: 60%;
+  min-width: 12rem;
+  white-space: nowrap;
   flex-direction: column;
   gap: var(--fds-spacing-2);
-  margin-left: var(--fds-spacing-5);
+}
+
+.alert {
+  margin-top: var(--fds-spacing-2);
 }
 
 .errorMessage {
-  margin: var(--fds-spacing-5) var(--fds-spacing-5) 0;
+  margin-top: var(--fds-spacing-2);
 }