Option component

src/app-components/Date/DisplayDate.tsx

@@ -16,7 +16,8 @@ export const DisplayDate = ({ value, format, iconUrl, iconAltText, labelId }: Da
   const parsedValue = parseISO(value);
   let displayData = parsedValue.toDateString();
   if (!isValid(parsedValue)) {
-    displayData = 'Ugyldig format';
+    window.logErrorOnce(`Ugyldig datoformat gitt til Date-komponent: "${value}"`);
+    displayData = '';
   } else if (format) {
     displayData = formatDate(parsedValue, format);
   }
@@ -30,7 +31,8 @@ export const DisplayDate = ({ value, format, iconUrl, iconAltText, labelId }: Da
           alt={iconAltText}
         />
       )}
-      <span aria-labelledby={labelId}>{displayData}</span>
+      {labelId && <span aria-labelledby={labelId}>{displayData}</span>}
+      {!labelId && <span>{displayData}</span>}
     </>
   );
 };

src/app-components/Number/DisplayNumber.tsx

@@ -37,7 +37,8 @@ export const DisplayNumber = ({
           alt={iconAltText}
         />
       )}
-      <span aria-labelledby={labelId}>{displayData}</span>
+      {labelId && <span aria-labelledby={labelId}>{displayData}</span>}
+      {!labelId && <span>{displayData}</span>}
     </>
   );
 };

src/app-components/Text/DisplayText.tsx

@@ -18,6 +18,7 @@ export const DisplayText = ({ value, iconUrl, iconAltText, labelId }: TextProps)
         alt={iconAltText}
       />
     )}
-    <span aria-labelledby={labelId}>{value}</span>
+    {labelId && <span aria-labelledby={labelId}>{value}</span>}
+    {!labelId && <span>{value}</span>}
   </>
 );

src/features/expressions/shared-tests/functions/displayValue/type-Option.json

@@ -0,0 +1,42 @@
+{
+  "name": "Display value of Option component",
+  "expression": ["displayValue", "valg"],
+  "context": {
+    "component": "valg",
+    "currentLayout": "Page"
+  },
+  "expects": "Pål",
+  "layouts": {
+    "Page": {
+      "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+      "data": {
+        "layout": [
+          {
+            "id": "valg",
+            "type": "Option",
+            "value": ["dataModel", "Skjema.Valg"],
+            "options": [
+              {
+                "value": "1",
+                "label": "Per",
+                "description": "Hello world",
+                "helpText": "This is a help text"
+              },
+              {
+                "value": "2",
+                "label": "Pål",
+                "description": "Hello world",
+                "helpText": "This is a help text"
+              }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  "dataModel": {
+    "Skjema": {
+      "Valg": "2"
+    }
+  }
+}

src/features/options/OptionsPlugin.tsx

@@ -12,6 +12,7 @@ interface Config<SupportsPreselection extends boolean> {
   componentType: CompTypes;
   expectedFromExternal: SupportsPreselection extends true ? ISelectionComponentFull : ISelectionComponent;
   settings: {
+    allowsEffects?: boolean;
     supportsPreselection: SupportsPreselection;
     type: OptionsValueType;
   };
@@ -22,6 +23,7 @@ interface Config<SupportsPreselection extends boolean> {
 }
 
 interface ExternalConfig {
+  allowsEffects?: boolean;
   supportsPreselection: boolean;
   type: OptionsValueType;
 }
@@ -49,10 +51,6 @@ export class OptionsPlugin<E extends ExternalConfig> extends NodeDefPlugin<ToInt
   }
 
   addToComponent(component: ComponentConfig): void {
-    if (!component.isFormLike()) {
-      throw new Error('OptionsPlugin can only be used with container or form components');
-    }
-
     component.inner.extends(
       this.settings!.supportsPreselection ? CG.common('ISelectionComponentFull') : CG.common('ISelectionComponent'),
     );
@@ -65,6 +63,12 @@ export class OptionsPlugin<E extends ExternalConfig> extends NodeDefPlugin<ToInt
       from: 'src/features/options/StoreOptionsInNode',
     });
 
-    return `<${StoreOptionsInNode} valueType={'${this.settings!.type}'} />`;
+    const allowsEffects = this.settings!.allowsEffects ?? true;
+
+    return `
+      <${StoreOptionsInNode}
+        valueType={'${this.settings!.type}'}
+        allowEffects={${allowsEffects ? 'true' : 'false'}}
+      />`.trim();
   }
 }

src/features/options/StoreOptionsInNode.tsx

@@ -19,6 +19,7 @@ import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 interface GeneratorOptionProps {
   valueType: OptionsValueType;
+  allowEffects: boolean;
 }
 
 export function StoreOptionsInNode(props: GeneratorOptionProps) {
@@ -32,7 +33,7 @@ export function StoreOptionsInNode(props: GeneratorOptionProps) {
   );
 }
 
-function StoreOptionsInNodeWorker({ valueType }: GeneratorOptionProps) {
+function StoreOptionsInNodeWorker({ valueType, allowEffects }: GeneratorOptionProps) {
   const item = GeneratorInternal.useIntermediateItem() as CompIntermediate<CompWithBehavior<'canHaveOptions'>>;
   const node = GeneratorInternal.useParent() as LayoutNode<CompWithBehavior<'canHaveOptions'>>;
   const dataModelBindings = item.dataModelBindings as IDataModelBindingsOptionsSimple | undefined;
@@ -55,7 +56,7 @@ function StoreOptionsInNodeWorker({ valueType }: GeneratorOptionProps) {
   NodesStateQueue.useSetNodeProp({ node, prop: 'options', value: options }, !hasBeenSet && !isFetching);
   NodesStateQueue.useSetNodeProp({ node, prop: 'isFetchingOptions', value: isFetching }, !hasBeenSet);
 
-  if (isFetching || !hasBeenSet) {
+  if (isFetching || !hasBeenSet || !allowEffects) {
     // No need to run effects while fetching or if the data has not been set yet
     return false;
   }

src/layout/Date/DateComponent.tsx

@@ -5,12 +5,18 @@ import cn from 'classnames';
 import classes from 'src/app-components/Date/Date.module.css';
 import { DisplayDate } from 'src/app-components/Date/DisplayDate';
 import { getLabelId } from 'src/components/label/Label';
+import { useLanguage } from 'src/features/language/useLanguage';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 
 export const DateComponent = ({ node }: PropsFromGenericComponent<'Date'>) => {
-  const { textResourceBindings, value, icon, direction, format } = useNodeItem(node);
+  const textResourceBindings = useNodeItem(node, (i) => i.textResourceBindings);
+  const direction = useNodeItem(node, (i) => i.direction) ?? 'horizontal';
+  const value = useNodeItem(node, (i) => i.value);
+  const icon = useNodeItem(node, (i) => i.icon);
+  const format = useNodeItem(node, (i) => i.format);
+  const { langAsString } = useLanguage(node);
 
   if (!textResourceBindings?.title) {
     return (
@@ -33,7 +39,7 @@ export const DateComponent = ({ node }: PropsFromGenericComponent<'Date'>) => {
       <DisplayDate
         value={value}
         iconUrl={icon}
-        iconAltText={textResourceBindings.title}
+        iconAltText={langAsString(textResourceBindings.title)}
         labelId={getLabelId(node.id)}
         format={format}
       />

src/layout/Group/GroupSummary.tsx

@@ -33,18 +33,6 @@ function getHeadingLevel(hierarchyLevel: number): HeadingLevel {
   }
 }
 
-const ChildComponents = ({ componentNode, hierarchyLevel, summaryOverride }: GroupComponentSummaryProps) => {
-  const childComponents = useNodeItem(componentNode, (i) => i.childComponents);
-  return childComponents.map((childId) => (
-    <ChildComponent
-      key={childId}
-      id={childId}
-      hierarchyLevel={hierarchyLevel}
-      summaryOverride={summaryOverride}
-    />
-  ));
-};
-
 function ChildComponent({
   id,
   hierarchyLevel,
@@ -84,6 +72,7 @@ export const GroupSummary = ({ componentNode, hierarchyLevel = 0, summaryOverrid
   const isNestedGroup = hierarchyLevel > 0;
 
   const dataTestId = hierarchyLevel > 0 ? `summary-group-component-${hierarchyLevel}` : 'summary-group-component';
+  const childComponents = useNodeItem(componentNode, (i) => i.childComponents);
 
   return (
     <section
@@ -106,11 +95,14 @@ export const GroupSummary = ({ componentNode, hierarchyLevel = 0, summaryOverrid
         spacing={6}
         alignItems='flex-start'
       >
-        <ChildComponents
-          componentNode={componentNode}
-          hierarchyLevel={hierarchyLevel}
-          summaryOverride={summaryOverride}
-        />
+        {childComponents.map((childId) => (
+          <ChildComponent
+            key={childId}
+            id={childId}
+            hierarchyLevel={hierarchyLevel}
+            summaryOverride={summaryOverride}
+          />
+        ))}
       </Flex>
     </section>
   );

src/layout/Number/NumberComponent.tsx

@@ -6,13 +6,20 @@ import { DisplayNumber } from 'src/app-components/Number/DisplayNumber';
 import classes from 'src/app-components/Number/Number.module.css';
 import { getLabelId } from 'src/components/label/Label';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
+import { useLanguage } from 'src/features/language/useLanguage';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 
 export const NumberComponent = ({ node }: PropsFromGenericComponent<'Number'>) => {
-  const { textResourceBindings, value, icon, direction, formatting } = useNodeItem(node);
+  const textResourceBindings = useNodeItem(node, (i) => i.textResourceBindings);
+  const value = useNodeItem(node, (i) => i.value);
+  const icon = useNodeItem(node, (i) => i.icon);
+  const direction = useNodeItem(node, (i) => i.direction) ?? 'horizontal';
+  const formatting = useNodeItem(node, (i) => i.formatting);
+  const { langAsString } = useLanguage(node);
   const currentLanguage = useCurrentLanguage();
+
   if (isNaN(value)) {
     return null;
   }
@@ -40,7 +47,7 @@ export const NumberComponent = ({ node }: PropsFromGenericComponent<'Number'>) =
         value={value}
         currentLanguage={currentLanguage}
         iconUrl={icon}
-        iconAltText={textResourceBindings.title}
+        iconAltText={langAsString(textResourceBindings.title)}
         labelId={getLabelId(node.id)}
         formatting={formatting}
       />

src/layout/Option/Option.module.css

@@ -0,0 +1,29 @@
+.icon {
+  width: 24px;
+  margin-right: 12px;
+}
+
+.optionComponent {
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  width: 100%;
+}
+
+.horizontal {
+  flex-direction: row;
+}
+.vertical {
+  flex-direction: column;
+}
+
+.optionLabelContainer {
+  display: flex;
+  column-gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.optionDescription {
+  flex: 0 0 100%;
+}

src/layout/Option/OptionComponent.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import { HelpText } from '@digdir/designsystemet-react';
+import cn from 'classnames';
+
+import { getLabelId } from 'src/components/label/Label';
+import { Lang } from 'src/features/language/Lang';
+import { useLanguage } from 'src/features/language/useLanguage';
+import { useGetOptions } from 'src/features/options/useGetOptions';
+import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
+import classes from 'src/layout/Option/Option.module.css';
+import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import type { PropsFromGenericComponent } from 'src/layout';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
+
+export const OptionComponent = ({ node }: PropsFromGenericComponent<'Option'>) => {
+  const textResourceBindings = useNodeItem(node, (i) => i.textResourceBindings);
+  const direction = useNodeItem(node, (i) => i.direction);
+
+  if (!textResourceBindings?.title) {
+    return (
+      <Text
+        node={node}
+        usingLabel={false}
+      />
+    );
+  }
+
+  return (
+    <ComponentStructureWrapper
+      node={node}
+      label={{
+        node,
+        renderLabelAs: 'span',
+        className: cn(classes.optionComponent, direction === 'vertical' ? classes.vertical : classes.horizontal),
+      }}
+    >
+      <Text
+        node={node}
+        usingLabel={true}
+      />
+    </ComponentStructureWrapper>
+  );
+};
+
+interface TextProps {
+  node: LayoutNode<'Option'>;
+  usingLabel: boolean;
+}
+
+function Text({ node, usingLabel }: TextProps) {
+  const textResourceBindings = useNodeItem(node, (i) => i.textResourceBindings);
+  const icon = useNodeItem(node, (i) => i.icon);
+  const value = useNodeItem(node, (i) => i.value);
+  const { options, isFetching } = useGetOptions(node, 'single');
+  const { langAsString } = useLanguage(node);
+  const selectedOption = options.find((option) => option.value === value);
+  if (isFetching) {
+    return null;
+  }
+
+  return (
+    <>
+      {icon && textResourceBindings?.title && (
+        <img
+          src={icon}
+          className={classes.icon}
+          alt={langAsString(textResourceBindings.title)}
+        />
+      )}
+      <span
+        {...(usingLabel ? { 'aria-labelledby': getLabelId(node.id) } : {})}
+        className={classes.optionLabelContainer}
+      >
+        <Lang id={selectedOption?.label} />
+        {selectedOption?.helpText && (
+          <HelpText title={langAsString(selectedOption.helpText)}>
+            <Lang id={selectedOption.helpText} />
+          </HelpText>
+        )}
+        {selectedOption?.description && (
+          <span className={classes.optionDescription}>
+            <Lang id={selectedOption?.description} />
+          </span>
+        )}
+      </span>
+    </>
+  );
+}