draft ui changes

linting
Altinn · Jan 8, 2025 · 6565fca · 6565fca
1 parent 765d844
commit 6565fca
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 72 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -1366,7 +1366,6 @@
   "ux_editor.component_properties.optionsId": "Kodeliste",
   "ux_editor.component_properties.overrides": "Overstyringer",
   "ux_editor.component_properties.overrides_description": "Overstyringer per komponent for oppsummeringen",
-  "ux_editor.component_properties.overrides_is_compact": "Kompakt visning",
   "ux_editor.component_properties.overrides_list": "Liste",
   "ux_editor.component_properties.overrides_not_set": "Ikke satt",
   "ux_editor.component_properties.overrides_string": "Tekst",
@@ -1438,12 +1437,14 @@
   "ux_editor.component_properties.subform.no_existing_layout_set_instructions_header": "Slik gjør du:",
   "ux_editor.component_properties.subform.selected_layout_set_label": "Underskjema",
   "ux_editor.component_properties.subform.selected_layout_set_title": "Valgt underskjemakobling er {{subform}}",
-  "ux_editor.component_properties.summary.add_override": "Legg til overstyring",
-  "ux_editor.component_properties.summary.override.component_id": "ID på komponenten",
-  "ux_editor.component_properties.summary.override.empty_field_text": "Tekst for tomme felter",
+  "ux_editor.component_properties.summary.add_override": "Lag en ny overstyring",
+  "ux_editor.component_properties.summary.override.choose_component": "Velg komponent",
+  "ux_editor.component_properties.summary.override.empty_field_text": "Tekst du vil vise i tomt felt",
   "ux_editor.component_properties.summary.override.force_show": "Vis alltid feltet",
   "ux_editor.component_properties.summary.override.hidden": "Skjul feltet",
-  "ux_editor.component_properties.summary.override.hide_empty_fields": "Skjul tomme felter",
+  "ux_editor.component_properties.summary.override.hide_empty_fields": "Vis tomme felter",
+  "ux_editor.component_properties.summary.override.hide_empty_fields.info_message": "Du kan bare skjule tomme felt i oppsummeringen hvis de er valgfrie",
+  "ux_editor.component_properties.summary.override.is_compact": "Bruk kompakt visning",
   "ux_editor.component_properties.summaryDelimiter": "Skillelinje for sammendragsvisningsceller",
   "ux_editor.component_properties.tableColumns": "Innstillinger for kolonner",
   "ux_editor.component_properties.tableHeaders": "Felter som skal vises i tabellens overskrift",

diff --git a/...end/packages/ux-editor/src/components/Properties/PropertiesHeader/ComponentMainConfig.tsx b/...end/packages/ux-editor/src/components/Properties/PropertiesHeader/ComponentMainConfig.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import type { FormItem } from '../../../types/FormItem';
+import { ComponentType } from 'app-shared/types/ComponentType';
+import { Accordion } from '@digdir/designsystemet-react';
+import { useTranslation } from 'react-i18next';
+import { Summary2Override } from '../../config/componentSpecificContent/Summary2/Override/Summary2Override';
+import type { Summary2OverrideConfig } from 'app-shared/types/ComponentSpecificConfig';
+
+export type ComponentMainConfigProps = {
+  component: FormItem;
+  handleComponentChange: (component: FormItem) => void;
+};
+
+export const ComponentMainConfig = ({
+  component,
+  handleComponentChange,
+}: ComponentMainConfigProps) => {
+  const [accordionOpen, setAccordionOpen] = React.useState<string[]>([]);
+  const { t } = useTranslation();
+
+  const handleOverridesChange = (updatedOverrides: Summary2OverrideConfig[]): void => {
+    const updatedComponent = { ...component } as FormItem<ComponentType.Summary2>;
+    updatedComponent.overrides = updatedOverrides;
+    handleComponentChange(updatedComponent);
+  };
+
+  return (
+    <>
+      {component.type === ComponentType.Summary2 && (
+        <Accordion color='subtle'>
+          <Accordion.Item open={accordionOpen['summary2overrides'] === true}>
+            <Accordion.Header
+              onHeaderClick={() =>
+                setAccordionOpen((prev) => {
+                  return { ...prev, summary2overrides: !prev['summary2overrides'] };
+                })
+              }
+            >
+              {t('Overstyr hva som skal vises')}
+            </Accordion.Header>
+            <Accordion.Content>
+              <Summary2Override overrides={component.overrides} onChange={handleOverridesChange} />
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      )}
+    </>
+  );
+};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.tsx
@@ -10,6 +10,7 @@ import { EditComponentIdRow } from './EditComponentIdRow';
 import type { FormItem } from '../../../types/FormItem';
 import { ComponentType } from 'app-shared/types/ComponentType';
 import { EditLayoutSetForSubform } from './EditLayoutSetForSubform';
+import { ComponentMainConfig } from './ComponentMainConfig';
 
 export type PropertiesHeaderProps = {
   formItem: FormItem;
@@ -49,6 +50,7 @@ export const PropertiesHeader = ({
           />
         )}
       </div>
+      <ComponentMainConfig component={formItem} handleComponentChange={handleComponentUpdate} />
     </>
   );
 };
diff --git a/.../components/config/componentSpecificContent/Summary2/Override/Summary2Override.module.css b/.../components/config/componentSpecificContent/Summary2/Override/Summary2Override.module.css
diff --git a/...tor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.tsx b/...tor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.tsx
@@ -1,8 +1,9 @@
-import { StudioButton, StudioCard, StudioHeading, StudioParagraph } from '@studio/components';
+import { StudioButton } from '@studio/components';
 import type { Summary2OverrideConfig } from 'app-shared/types/ComponentSpecificConfig';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Summary2OverrideEntry } from './Summary2OverrideEntry';
+import { PlusIcon } from '@studio/icons';
 
 export type Summary2OverrideProps = {
   overrides: Summary2OverrideConfig[];
@@ -35,27 +36,22 @@ export const Summary2Override = ({ overrides, onChange }: Summary2OverrideProps)
     };
 
   return (
-    <StudioCard>
-      <StudioCard.Header>
-        <StudioHeading size='2xs'>{t('ux_editor.component_properties.overrides')}</StudioHeading>
-      </StudioCard.Header>
-      <StudioParagraph size='sm'>
-        {t('ux_editor.component_properties.overrides_description')}
-      </StudioParagraph>
-      <StudioCard.Content>
-        {overrides &&
-          overrides.map((override, index) => (
+    <>
+      {overrides?.length > 0 && (
+        <div style={{ marginBottom: 'var(--fds-spacing-4)' }}>
+          {overrides.map((override, index) => (
             <Summary2OverrideEntry
               key={`${index}${override.componentId}`}
               override={override}
               onChange={onChangeOverride(index)}
               onDelete={onDeleteOverride(index)}
             ></Summary2OverrideEntry>
           ))}
-        <StudioButton size='sm' variant='primary' onClick={addOverride}>
-          {t('ux_editor.component_properties.summary.add_override')}
-        </StudioButton>
-      </StudioCard.Content>
-    </StudioCard>
+        </div>
+      )}
+      <StudioButton icon={<PlusIcon />} size='sm' variant='secondary' onClick={addOverride}>
+        {t('ux_editor.component_properties.summary.add_override')}
+      </StudioButton>
+    </>
   );
 };
diff --git a/...rc/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx b/...rc/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx
@@ -1,8 +1,15 @@
 import React, { type ChangeEvent } from 'react';
-import { StudioDeleteButton, StudioTextfield } from '@studio/components';
+import {
+  StudioAlert,
+  StudioCard,
+  StudioDeleteButton,
+  StudioDivider,
+  StudioParagraph,
+  StudioSwitch,
+  StudioToggleableTextfield,
+} from '@studio/components';
 import type { Summary2OverrideConfig } from 'app-shared/types/ComponentSpecificConfig';
 import { useTranslation } from 'react-i18next';
-import { Checkbox } from '@digdir/designsystemet-react';
 import { getAllLayoutComponents } from '../../../../../utils/formLayoutUtils';
 import { useAppContext, useComponentTitle } from '@altinn/ux-editor/hooks';
 import { useFormLayoutsQuery } from '../../../../../hooks/queries/useFormLayoutsQuery';
@@ -31,8 +38,6 @@ export const Summary2OverrideEntry = ({
   const components = Object.values(formLayoutsData).flatMap((layout) =>
     getAllLayoutComponents(layout),
   );
-  const component = components.find((comp) => comp.id === override.componentId);
-  const isGroupComponent = component?.type === (ComponentType.Group as ComponentType);
 
   const componentOptions = components.map((e) => ({
     id: e.id,
@@ -51,55 +56,96 @@ export const Summary2OverrideEntry = ({
   return (
     <>
       <Summmary2ComponentReferenceSelector
-        label={t('ux_editor.component_properties.summary.override.component_id')}
+        label={t('ux_editor.component_properties.summary.override.choose_component')}
         value={override.componentId}
         options={componentOptions}
         onValueChange={(value) => onChangeOverride('componentId', value)}
       ></Summmary2ComponentReferenceSelector>
-      <Checkbox
-        size='sm'
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-          onChangeOverride(event.target.value as keyof Summary2OverrideConfig, event.target.checked)
-        }
-        checked={override.hidden ?? false}
-        value={'hidden'}
-      >
-        {t('ux_editor.component_properties.summary.override.hidden')}
-      </Checkbox>
-      <Checkbox
-        size='sm'
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-          onChangeOverride(event.target.value as keyof Summary2OverrideConfig, event.target.checked)
-        }
-        checked={override.forceShow ?? false}
-        value={'forceShow'}
+      <StudioCard
+        style={{ marginTop: 'var(--fds-spacing-4)', marginBottom: 'var(--fds-spacing-4)' }}
       >
-        {t('ux_editor.component_properties.summary.override.force_show')}
-      </Checkbox>
-      <Checkbox
-        size='sm'
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-          onChangeOverride(event.target.value as keyof Summary2OverrideConfig, event.target.checked)
-        }
-        checked={override.hideEmptyFields ?? false}
-        value={'hideEmptyFields'}
-      >
-        {t('ux_editor.component_properties.summary.override.hide_empty_fields')}
-      </Checkbox>
-      <StudioTextfield
-        label={t('ux_editor.component_properties.summary.override.empty_field_text')}
-        size='sm'
-        value={override.emptyFieldText ?? ''}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-          onChangeOverride('emptyFieldText', event.target.value)
-        }
-      ></StudioTextfield>
-      {override.componentId && checkboxOrMultipleselect && (
-        <Summary2OverrideDisplayType override={override} onChange={onChange} />
-      )}
-      {isGroupComponent && (
-        <ComponentInGroupCheckbox onChangeOverride={onChangeOverride} override={override} />
-      )}
+        <StudioCard.Content>
+          <StudioSwitch
+            position='right'
+            size='sm'
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              onChangeOverride(
+                event.target.value as keyof Summary2OverrideConfig,
+                event.target.checked,
+              )
+            }
+            checked={override.hidden ?? false}
+            value={'hidden'}
+          >
+            {t('ux_editor.component_properties.summary.override.force_show')}
+          </StudioSwitch>
+          {!override.hidden ? (
+            <StudioAlert>
+              {t('ux_editor.component_properties.summary.override.hide_empty_fields.info_message')}
+            </StudioAlert>
+          ) : (
+            <>
+              <StudioDivider
+                style={{
+                  border: '1px solid',
+                  borderColor: 'var(--fds-semantic-border-divider-subtle)',
+                  width: '100%',
+                }}
+              />
+              <ComponentInGroupCheckbox onChangeOverride={onChangeOverride} override={override} />
+              <StudioSwitch
+                position='right'
+                size='sm'
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  onChangeOverride(
+                    event.target.value as keyof Summary2OverrideConfig,
+                    !event.target.checked,
+                  )
+                }
+                checked={!override.hideEmptyFields}
+                value={'hideEmptyFields'}
+              >
+                {t('ux_editor.component_properties.summary.override.hide_empty_fields')}
+              </StudioSwitch>
+              {override.hideEmptyFields ? (
+                <StudioAlert>
+                  {t(
+                    'ux_editor.component_properties.summary.override.hide_empty_fields.info_message',
+                  )}
+                </StudioAlert>
+              ) : (
+                <StudioToggleableTextfield
+                  inputProps={{
+                    icon: '',
+                    label: t('ux_editor.component_properties.summary.override.empty_field_text'),
+                    size: 'sm',
+                    value: override.emptyFieldText ?? '',
+                    onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+                      onChangeOverride('emptyFieldText', event.target.value),
+                  }}
+                  viewProps={{
+                    style: { width: '100px' },
+                    icon: '',
+                    iconPlacement: 'right',
+                    children: (
+                      <StudioParagraph size='small'>
+                        <label>
+                          {t('ux_editor.component_properties.summary.override.empty_field_text')}
+                        </label>
+                        {override.emptyFieldText}
+                      </StudioParagraph>
+                    ),
+                    variant: 'tertiary',
+                  }}
+                ></StudioToggleableTextfield>
+              )}
+            </>
+          )}
+          {override.componentId && checkboxOrMultipleselect && (
+            <Summary2OverrideDisplayType override={override} onChange={onChange} />
+          )}
+        </StudioCard.Content>
+      </StudioCard>
       <StudioDeleteButton onDelete={onDelete}></StudioDeleteButton>
     </>
   );
@@ -115,17 +161,29 @@ const ComponentInGroupCheckbox = ({
   override,
 }: ComponentInGroupCheckboxProps) => {
   const { t } = useTranslation();
+  const { org, app } = useStudioEnvironmentParams();
+  const { selectedFormLayoutSetName } = useAppContext();
+  const { data: formLayoutsData } = useFormLayoutsQuery(org, app, selectedFormLayoutSetName);
   const handleChange = (event: ChangeEvent<HTMLInputElement>) =>
     onChangeOverride(event.target.value as keyof Summary2OverrideConfig, event.target.checked);
+  const components = Object.values(formLayoutsData).flatMap((layout) =>
+    getAllLayoutComponents(layout),
+  );
+  const component = components.find((comp) => comp.id === override.componentId);
+  const isGroupComponent = component?.type === (ComponentType.Group as ComponentType);
 
+  if (!isGroupComponent) {
+    return null;
+  }
   return (
-    <Checkbox
+    <StudioSwitch
+      position='right'
       size='sm'
       onChange={handleChange}
       checked={override.isCompact ?? false}
       value='isCompact'
     >
-      {t('ux_editor.component_properties.overrides_is_compact')}
-    </Checkbox>
+      {t('ux_editor.component_properties.summary.override.is_compact')}
+    </StudioSwitch>
   );
 };