Add preview mode for checkboxes

frontend/language/src/en.json

@@ -702,6 +702,20 @@
   "testing.testing_in_testenv_body": "Here you can test your app from A to Z in a production-like test environment.",
   "testing.testing_in_testenv_title": "Testing in test environment",
   "ux_editor.api_connection_header": "API connections",
+  "ux_editor.checkboxes_add": "Add option",
+  "ux_editor.checkboxes_description_add": "Add descrption",
+  "ux_editor.checkboxes_description_placeholder": "No description",
+  "ux_editor.checkboxes_legend_add": "Add title",
+  "ux_editor.checkboxes_legend_placeholder": "Title is missing",
+  "ux_editor.checkboxes_option_description_add": "Add description",
+  "ux_editor.checkboxes_option_description_placeholder": "Description is missing",
+  "ux_editor.checkboxes_option_label": "Text",
+  "ux_editor.checkboxes_option_label_add": "Add text",
+  "ux_editor.checkboxes_option_label_placeholder": "Text is missing",
+  "ux_editor.checkboxes_option_value": "Value",
+  "ux_editor.checkboxes_option_value_error_duplicate": "The value must be unique.",
+  "ux_editor.checkboxes_option_value_error_empty": "The value cannot be empty.",
+  "ux_editor.choose_variant": "Choose message variant",
   "ux_editor.collapsable_schema_components": "Form",
   "ux_editor.collapsable_text_advanced_components": "Advanced",
   "ux_editor.collapsable_text_components": "Text",
@@ -718,13 +732,13 @@
   "ux_editor.component_group": "Group",
   "ux_editor.component_header": "Title",
   "ux_editor.component_image": "Image",
+  "ux_editor.component_information_panel": "Informative message",
   "ux_editor.component_input": "Short answer",
   "ux_editor.component_navigation_bar": "Navigation bar",
   "ux_editor.component_navigation_buttons": "Navigation buttons",
   "ux_editor.component_paragraph": "Paragraph",
   "ux_editor.component_radio_button": "Radio Button",
   "ux_editor.component_text_area": "Long answer",
-  "ux_editor.component_information_panel": "Informative message",
   "ux_editor.component_unknown": "Unknown component",
   "ux_editor.conditional_rendering_connection_header": "Conditional Rendering Connections",
   "ux_editor.container_empty": "Empty, drag something in here...",
@@ -740,6 +754,7 @@
   "ux_editor.helper_text_for_nav_bar": "The Navigation Bar gives easy access to all pages in an application. All pages in the application are listed, so this component is not suited for use with the tracks feature.",
   "ux_editor.helper_text_for_radio_button": "More information about this component will be available at a later date.",
   "ux_editor.helper_text_for_select": "More information about this component will be available at a later date.",
+  "ux_editor.info": "Information",
   "ux_editor.information_altinn_library": "This component is part of the Altinn component library",
   "ux_editor.information_more_info_link": "Read more about experiences and where this component is used",
   "ux_editor.information_third_party_library": "This component is developed by a third party, and is not part of the Altinn component library.",
@@ -866,20 +881,18 @@
   "ux_editor.service_logic_icon_aria_label": "Logic button",
   "ux_editor.service_logic_icon_title": "Logic icon",
   "ux_editor.service_logic_validations": "Validations",
+  "ux_editor.show_icon": "Should the icon be displayed?",
+  "ux_editor.success": "Success",
   "ux_editor.toolbar_add_container": "Add container",
   "ux_editor.toolbar_component_search": "Find component...",
   "ux_editor.toolbar_file_upload": "File Upload",
   "ux_editor.toolbar_header": "Header",
+  "ux_editor.warning": "Warning",
   "ux_editor.widget_message": "Message",
   "validation_errors.length": "Number of characters allowed is {0}",
   "validation_errors.max": "Maximum valid value is {0}",
   "validation_errors.maxLength": "Use {0} or fewer characters",
   "validation_errors.min": "Minimum valid value is {0}",
   "validation_errors.minLength": "Use {0} or more characters",
-  "validation_errors.pattern": "Wrong format or value",
-  "ux_editor.choose_variant": "Choose message variant",
-  "ux_editor.show_icon": "Should the icon be displayed?",
-  "ux_editor.info": "Information",
-  "ux_editor.warning": "Warning",
-  "ux_editor.success": "Success"
+  "validation_errors.pattern": "Wrong format or value"
 }

frontend/language/src/nb.json

@@ -733,6 +733,20 @@
   "top_menu.texts": "Tekst",
   "top_menu.texts_old": "Tekst *",
   "ux_editor.api_connection_header": "API-tilkoblinger",
+  "ux_editor.checkboxes_add": "Legg til alternativ",
+  "ux_editor.checkboxes_description_add": "Legg til beskrivelse",
+  "ux_editor.checkboxes_description_placeholder": "Ingen beskrivelse",
+  "ux_editor.checkboxes_legend_add": "Legg til tittel",
+  "ux_editor.checkboxes_legend_placeholder": "Tittel mangler",
+  "ux_editor.checkboxes_option_description_add": "Legg til beskrivelse",
+  "ux_editor.checkboxes_option_description_placeholder": "Ingen beskrivelse",
+  "ux_editor.checkboxes_option_label": "Tekst",
+  "ux_editor.checkboxes_option_label_add": "Legg til tekst",
+  "ux_editor.checkboxes_option_label_placeholder": "Tekst mangler",
+  "ux_editor.checkboxes_option_value": "Verdi",
+  "ux_editor.checkboxes_option_value_error_duplicate": "Verdien må være unik.",
+  "ux_editor.checkboxes_option_value_error_empty": "Du må angi en verdi.",
+  "ux_editor.choose_variant": "Velg meldingstype",
   "ux_editor.collapsable_schema_components": "Skjema",
   "ux_editor.collapsable_text_advanced_components": "Avansert",
   "ux_editor.collapsable_text_components": "Tekst",
@@ -750,13 +764,13 @@
   "ux_editor.component_group": "Gruppe",
   "ux_editor.component_header": "Tittel",
   "ux_editor.component_image": "Bilde",
+  "ux_editor.component_information_panel": "Informativ melding",
   "ux_editor.component_input": "Kort svar",
   "ux_editor.component_navigation_bar": "Navigasjonsbar",
   "ux_editor.component_navigation_buttons": "Navigasjonsknapper",
   "ux_editor.component_paragraph": "Paragraf",
   "ux_editor.component_radio_button": "Radioknapp",
   "ux_editor.component_text_area": "Langt svar",
-  "ux_editor.component_information_panel": "Informativ melding",
   "ux_editor.component_unknown": "Ukjent komponent",
   "ux_editor.conditional_rendering_connection_header": "Betingede renderingstilkoblinger",
   "ux_editor.container_empty": "Tomt, dra noe inn her...",
@@ -772,6 +786,7 @@
   "ux_editor.helper_text_for_nav_bar": "Navigasjonsbar gir enkel tilgang til alle sider i en applikasjon. Alle sider i appen blir listet opp, så denne komponenten egner seg derfor ikke til bruk sammen med sporvalg.",
   "ux_editor.helper_text_for_radio_button": "Bruk radioknapper når du vil at brukeren kun skal kunne svare på ett av alternativene. Om brukeren skal kunne svare på flere må du bruke avkrysningsbokser. Er det veldig mange alternativer kan det lønne seg og bruke en nedtrekksmeny.",
   "ux_editor.helper_text_for_select": "Dette er et komponent som ligger i Altinns designsystem. Fungerer som en avkrysningsboks.",
+  "ux_editor.info": "Informasjon",
   "ux_editor.information_altinn_library": "Dette er en komponent som inngår i Altinns faste bibliotek",
   "ux_editor.information_more_info_link": "Les mer om erfaringer og hvor elementet er i bruk",
   "ux_editor.information_third_party_library": "Dette er en komoponent som er utviklet av en tredjepart, og inngår ikke i Altinns faste bibliotek.",
@@ -902,20 +917,18 @@
   "ux_editor.service_logic_icon_aria_label": "Logikkknapp",
   "ux_editor.service_logic_icon_title": "Logikk",
   "ux_editor.service_logic_validations": "Valideringer",
+  "ux_editor.show_icon": "Skal ikonet vises?",
+  "ux_editor.success": "Vellykket",
   "ux_editor.toolbar_add_container": "Legg til container",
   "ux_editor.toolbar_component_search": "Finn komponent...",
   "ux_editor.toolbar_file_upload": "Filopplaster",
   "ux_editor.toolbar_header": "Overskrift",
+  "ux_editor.warning": "Advarsel",
   "ux_editor.widget_message": "Melding",
   "validation_errors.length": "Antall tillatte tegn er {0}",
   "validation_errors.max": "Største gyldig verdi er {0}",
   "validation_errors.maxLength": "Bruk {0} eller færre tegn",
   "validation_errors.min": "Minste gyldig verdi er {0}",
   "validation_errors.minLength": "Bruk {0} eller flere tegn",
-  "validation_errors.pattern": "Feil format eller verdi",
-  "ux_editor.choose_variant": "Velg meldingstype",
-  "ux_editor.show_icon": "Skal ikonet vises?",
-  "ux_editor.info": "Informasjon",
-  "ux_editor.warning": "Advarsel",
-  "ux_editor.success": "Vellykket"
+  "validation_errors.pattern": "Feil format eller verdi"
 }

frontend/packages/shared/src/utils/arrayUtils.test.ts

@@ -1,4 +1,4 @@
-import { prepend, removeDuplicates } from './arrayUtils';
+import { last, prepend, removeDuplicates } from './arrayUtils';
 
 describe('arrayUtils', () => {
 
@@ -25,4 +25,15 @@ describe('arrayUtils', () => {
       expect(prepend(['a', 'b', 'c'], 'd')).toEqual(['d', 'a', 'b', 'c']);
     });
   });
+
+  describe('last', () => {
+    it('Returns last item in array', () => {
+      expect(last([1, 2, 3])).toEqual(3);
+      expect(last(['a', 'b', 'c'])).toEqual('c');
+    });
+
+    it('Returns undefined if array is empty', () => {
+      expect(last([])).toBeUndefined();
+    });
+  });
 });

frontend/packages/shared/src/utils/arrayUtils.ts

@@ -1,3 +1,5 @@
 export const removeDuplicates = <T>(array: T[]): T[] => [...new Set(array)];
 
 export const prepend = <T>(array: T[], item: T): T[] => [item, ...array];
+
+export const last = <T>(array: T[]): T => array[array.length - 1];

frontend/packages/ux-editor/src/components/DragHandle.module.css

@@ -1,7 +1,7 @@
 .handle {
   --point-size: 3px;
   border-width: 0;
-  width: var(--drag-handle-width, 25px);
+  width: var(--drag-handle-inner-width, var(--drag-handle-width, 25px));
   display: flex;
   align-items: center;
   justify-content: center;

frontend/packages/ux-editor/src/components/TextResource.module.css

@@ -17,6 +17,10 @@
   box-shadow: 0 0 0 var(--frame-offset) var(--search-background-color);
 }
 
+.root.previewMode:not(.isSearching):not(:hover) .button {
+  visibility: hidden;
+}
+
 .label {
   margin: 0;
 }
@@ -32,6 +36,13 @@
   gap: 1rem;
 }
 
+.button {
+  --icon-size: 1em;
+  height: 1.5em;
+  width: 1.5em;
+  padding: 0.25em !important;
+}
+
 .placeholder {
   color: #c9c9c9;
 }

frontend/packages/ux-editor/src/components/TextResource.tsx

@@ -20,6 +20,7 @@ export interface TextResourceProps {
   handleIdChange: (id: string) => void;
   label?: string;
   placeholder?: string;
+  previewMode?: boolean;
   textResourceId?: string;
 }
 
@@ -28,6 +29,7 @@ export const TextResource = ({
   handleIdChange,
   label,
   placeholder,
+  previewMode,
   textResourceId,
 }: TextResourceProps) => {
   const dispatch = useDispatch();
@@ -65,6 +67,7 @@ export const TextResource = ({
   return (
     <span className={cn(
       classes.root,
+      previewMode && classes.previewMode,
       isEditing && classes.isEditing,
       isSearchMode && classes.isSearching,
     )}>
@@ -83,9 +86,11 @@ export const TextResource = ({
           </span>
           <Button
             aria-label={t('ux_editor.search_text_resources_close')}
+            className={classes.button}
             color={ButtonColor.Secondary}
             icon={<Close />}
             onClick={() => setIsSearchMode(false)}
+            title={t('ux_editor.search_text_resources_close')}
             variant={ButtonVariant.Quiet}
           />
         </span>
@@ -96,10 +101,12 @@ export const TextResource = ({
             <span>{textResource.value}</span>
             <Button
               aria-label={t('general.edit')}
+              className={classes.button}
               color={ButtonColor.Secondary}
               disabled={isEditing}
               icon={<Edit/>}
               onClick={handleEditButtonClick}
+              title={t('general.edit')}
               variant={ButtonVariant.Quiet}
             />
           </>
@@ -108,20 +115,24 @@ export const TextResource = ({
             <span className={classes.placeholder}>{placeholder}</span>
             <Button
               aria-label={t('general.add')}
+              className={classes.button}
               color={ButtonColor.Secondary}
               disabled={isEditing}
               icon={<Add />}
               onClick={handleEditButtonClick}
+              title={t('general.add')}
               variant={ButtonVariant.Quiet}
             />
           </>
         )}
         <Button
           aria-label={t('general.search')}
+          className={classes.button}
           color={ButtonColor.Secondary}
           disabled={isSearchMode}
           icon={<Search />}
           onClick={() => setIsSearchMode(true)}
+          title={t('general.search')}
           variant={ButtonVariant.Quiet}
         />
       </span>

frontend/packages/ux-editor/src/containers/ComponentPreview/CheckboxGroupPreview/CheckboxGroupPreview.module.css

@@ -0,0 +1,52 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: flex-start;
+}
+
+.addSection {
+  background-color: #f5f5f5;
+  border-radius: 5px;
+  padding: 1rem;
+  width: 100%;
+  border: 1px solid #c9c9c9;
+}
+
+.addSection fieldset > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.addSectionFields {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 2rem;
+}
+
+.addButtons {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+}
+
+.addButton {
+  margin-left: -12px;
+}
+
+.addCheckbox {
+  align-items: center;
+  background-color: #118849;
+  border-radius: 3px;
+  display: inline-flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.addCheckbox path {
+  fill: #fff;
+  stroke: #fff;
+}