diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index d3cfe6bd320..f44b4cfa0b4 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1763,8 +1763,10 @@ "ux_editor.component_title.AttachmentListOrPdf_error": "Du må velge minst ett vedlegg eller PDF", "ux_editor.component_title.AttachmentList_error": "Du må velge minst ett vedlegg", "ux_editor.component_title.AttachmentList_legend": "Vedleggsliste", + "ux_editor.component_title.Audio": "Lyd", "ux_editor.component_title.Button": "Knapp", "ux_editor.component_title.ButtonGroup": "Knappegruppe", + "ux_editor.component_title.Cards": "Kort", "ux_editor.component_title.Checkboxes": "Avkrysningsbokser", "ux_editor.component_title.Custom": "Egendefinert", "ux_editor.component_title.CustomButton": "Egendefinert knapp", @@ -1797,6 +1799,7 @@ "ux_editor.component_title.RepeatingGroup": "Repeterende gruppe", "ux_editor.component_title.Summary": "Oppsummering", "ux_editor.component_title.TextArea": "Langt svar", + "ux_editor.component_title.Video": "Video", "ux_editor.component_unknown": "Ukjent komponent", "ux_editor.conditional_rendering_connection_header": "Betingede renderingstilkoblinger", "ux_editor.config.warning_duplicates.heading": "Du har den samme ID-en på flere komponenter", @@ -1994,6 +1997,8 @@ "ux_editor.modal_properties_textResourceBindings_pagination_back_button": "Tilbakeknapp ved paginering", "ux_editor.modal_properties_textResourceBindings_pagination_next_button": "Nesteknapp ved paginering", "ux_editor.modal_properties_textResourceBindings_postPlaceTitle": "Tittel for poststed", + "ux_editor.modal_properties_textResourceBindings_prefix": "Prefiks", + "ux_editor.modal_properties_textResourceBindings_prefix_add": "Legg til prefiks", "ux_editor.modal_properties_textResourceBindings_questionDescriptions": "Beskrivelser av spørsmål", "ux_editor.modal_properties_textResourceBindings_questionDescriptions_add": "Legg til tekst for beskrivelser av spørsmål", "ux_editor.modal_properties_textResourceBindings_questionHelpTexts": "Hjelpetekster for spørsmål", @@ -2009,6 +2014,8 @@ "ux_editor.modal_properties_textResourceBindings_save_button_add": "'Legg til tekst for Lagre'-knapp", "ux_editor.modal_properties_textResourceBindings_shortName": "Kortnavn", "ux_editor.modal_properties_textResourceBindings_shortName_add": "Legg til kortnavn", + "ux_editor.modal_properties_textResourceBindings_suffix": "Suffiks", + "ux_editor.modal_properties_textResourceBindings_suffix_add": "Legg til suffiks", "ux_editor.modal_properties_textResourceBindings_summaryAccessibleTitle": "Egendefinert aria-label for redigeringsknapp på oppsummering", "ux_editor.modal_properties_textResourceBindings_summaryAccessibleTitle_add": "Legg til egendefinert aria-label for redigeringsknapp på oppsummering", "ux_editor.modal_properties_textResourceBindings_summaryTitle": "Ledetekst i oppsummeringen", diff --git a/frontend/packages/shared/src/types/ComponentType.ts b/frontend/packages/shared/src/types/ComponentType.ts index 1bcf039a935..f86d9d82c95 100644 --- a/frontend/packages/shared/src/types/ComponentType.ts +++ b/frontend/packages/shared/src/types/ComponentType.ts @@ -5,8 +5,10 @@ export enum ComponentType { Address = 'Address', Alert = 'Alert', AttachmentList = 'AttachmentList', + Audio = 'Audio', Button = 'Button', ButtonGroup = 'ButtonGroup', + Cards = 'Cards', Checkboxes = 'Checkboxes', Custom = 'Custom', CustomButton = 'CustomButton', @@ -39,4 +41,5 @@ export enum ComponentType { RepeatingGroup = 'RepeatingGroup', Summary = 'Summary', TextArea = 'TextArea', + Video = 'Video', } diff --git a/frontend/packages/ux-editor/src/data/formItemConfig.ts b/frontend/packages/ux-editor/src/data/formItemConfig.ts index 4651f695068..61808a75239 100644 --- a/frontend/packages/ux-editor/src/data/formItemConfig.ts +++ b/frontend/packages/ux-editor/src/data/formItemConfig.ts @@ -32,6 +32,9 @@ import { TasklistIcon, TitleIcon, WalletIcon, + Density1Icon, + VideoIcon, + SpeakerSoundWave2Icon, } from '@studio/icons'; import type { ContainerComponentType } from '../types/ContainerComponent'; import { LayoutItemType } from '../types/global'; @@ -105,6 +108,13 @@ export const formItemConfigs: FormItemConfigs = { propertyPath: 'definitions/attachmentListComponent', icon: PaperclipIcon, }, + [ComponentType.Audio]: { + name: ComponentType.Audio, + itemType: LayoutItemType.Component, + defaultProperties: {}, + propertyPath: 'definitions/audio', + icon: SpeakerSoundWave2Icon, + }, [ComponentType.Button]: { name: ComponentType.Button, itemType: LayoutItemType.Component, @@ -125,6 +135,14 @@ export const formItemConfigs: FormItemConfigs = { ComponentType.InstantiationButton, ], }, + [ComponentType.Cards]: { + name: ComponentType.Cards, + itemType: LayoutItemType.Container, + defaultProperties: {}, + propertyPath: 'definitions/cards', + icon: Density1Icon, + validChildTypes: Object.values(ComponentType), + }, [ComponentType.Checkboxes]: { name: ComponentType.Checkboxes, itemType: LayoutItemType.Component, @@ -443,6 +461,13 @@ export const formItemConfigs: FormItemConfigs = { propertyPath: 'definitions/textAreaComponent', icon: LongTextIcon, }, + [ComponentType.Video]: { + name: ComponentType.Video, + itemType: LayoutItemType.Component, + defaultProperties: {}, + propertyPath: 'definitions/video', + icon: VideoIcon, + }, }; export const advancedItems: FormItemConfigs[ComponentType][] = [ @@ -479,7 +504,10 @@ export const schemaComponents: FormItemConfigs[ComponentType][] = [ formItemConfigs[ComponentType.PrintButton], formItemConfigs[ComponentType.InstantiationButton], formItemConfigs[ComponentType.ActionButton], + formItemConfigs[ComponentType.Cards], formItemConfigs[ComponentType.Image], + formItemConfigs[ComponentType.Video], + formItemConfigs[ComponentType.Audio], formItemConfigs[ComponentType.Link], formItemConfigs[ComponentType.IFrame], formItemConfigs[ComponentType.InstanceInformation], diff --git a/frontend/packages/ux-editor/src/testing/componentSchemaMocks.ts b/frontend/packages/ux-editor/src/testing/componentSchemaMocks.ts index 93d345b342c..32471277121 100644 --- a/frontend/packages/ux-editor/src/testing/componentSchemaMocks.ts +++ b/frontend/packages/ux-editor/src/testing/componentSchemaMocks.ts @@ -4,8 +4,10 @@ import AccordionGroupSchema from './schemas/json/component/AccordionGroup.schema import ActionButtonSchema from './schemas/json/component/ActionButton.schema.v1.json'; import AddressSchema from './schemas/json/component/Address.schema.v1.json'; import AttachmentListSchema from './schemas/json/component/AttachmentList.schema.v1.json'; +import AudioSchema from './schemas/json/component/Audio.schema.v1.json'; import ButtonSchema from './schemas/json/component/Button.schema.v1.json'; import ButtonGroupSchema from './schemas/json/component/ButtonGroup.schema.v1.json'; +import CardsSchema from './schemas/json/component/Cards.schema.v1.json'; import CheckboxesSchema from './schemas/json/component/Checkboxes.schema.v1.json'; import CustomSchema from './schemas/json/component/Custom.schema.v1.json'; import CustomButtonSchema from './schemas/json/component/CustomButton.schema.v1.json'; @@ -38,6 +40,7 @@ import RadioButtonsSchema from './schemas/json/component/RadioButtons.schema.v1. import RepeatingGroupSchema from './schemas/json/component/RepeatingGroup.schema.v1.json'; import SummarySchema from './schemas/json/component/Summary.schema.v1.json'; import TextAreaSchema from './schemas/json/component/TextArea.schema.v1.json'; +import VideoSchema from './schemas/json/component/Video.schema.v1.json'; import { ComponentType } from 'app-shared/types/ComponentType'; import type { JsonSchema } from 'app-shared/types/JsonSchema'; @@ -48,8 +51,10 @@ export const componentSchemaMocks: Record = { [ComponentType.Address]: AddressSchema, [ComponentType.Alert]: AlertSchema, [ComponentType.AttachmentList]: AttachmentListSchema, + [ComponentType.Audio]: AudioSchema, [ComponentType.Button]: ButtonSchema, [ComponentType.ButtonGroup]: ButtonGroupSchema, + [ComponentType.Cards]: CardsSchema, [ComponentType.Checkboxes]: CheckboxesSchema, [ComponentType.Custom]: CustomSchema, [ComponentType.CustomButton]: CustomButtonSchema, @@ -82,4 +87,5 @@ export const componentSchemaMocks: Record = { [ComponentType.RepeatingGroup]: RepeatingGroupSchema, [ComponentType.Summary]: SummarySchema, [ComponentType.TextArea]: TextAreaSchema, + [ComponentType.Video]: VideoSchema, }; diff --git a/frontend/packages/ux-editor/src/testing/schemas/json/component/Audio.schema.v1.json b/frontend/packages/ux-editor/src/testing/schemas/json/component/Audio.schema.v1.json new file mode 100644 index 00000000000..96ce7ee32ff --- /dev/null +++ b/frontend/packages/ux-editor/src/testing/schemas/json/component/Audio.schema.v1.json @@ -0,0 +1,72 @@ +{ + "$id": "https://altinncdn.no/schemas/json/component/Audio.schema.v1.json", + "$schema": "http://json-schema.org/draft-07/schema#", + "properties": { + "id": { + "title": "ID", + "description": "The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with .", + "type": "string", + "pattern": "^[0-9a-zA-Z][0-9a-zA-Z-]*(-?[a-zA-Z]+|[a-zA-Z][0-9]+|-[0-9]{6,})$" + }, + "hidden": { + "title": "Hidden", + "description": "Boolean value or expression indicating if the component should be hidden. Defaults to false.", + "default": false, + "$ref": "expression.schema.v1.json#/definitions/boolean" + }, + "grid": { + "properties": { + "xs": { "$ref": "#/definitions/IGridSize" }, + "sm": { "$ref": "#/definitions/IGridSize" }, + "md": { "$ref": "#/definitions/IGridSize" }, + "lg": { "$ref": "#/definitions/IGridSize" }, + "xl": { "$ref": "#/definitions/IGridSize" }, + "labelGrid": { "$ref": "#/definitions/IGridStyling" }, + "innerGrid": { "$ref": "#/definitions/IGridStyling" } + } + }, + "pageBreak": { + "title": "Page break", + "description": "Optionally insert page-break before/after component when rendered in PDF", + "type": "object", + "properties": { + "breakBefore": { + "title": "Page break before", + "description": "PDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'.", + "examples": ["auto", "always", "avoid"], + "default": "auto", + "$ref": "expression.schema.v1.json#/definitions/string" + }, + "breakAfter": { + "title": "Page break after", + "description": "PDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'.", + "examples": ["auto", "always", "avoid"], + "default": "auto", + "$ref": "expression.schema.v1.json#/definitions/string" + } + }, + "additionalProperties": false + }, + "type": { "const": "Audio" }, + "textResourceBindings": { + "type": "object", + "properties": { + "altText": { + "title": "Alt text", + "description": "Alternative text for the audio (for screen readers).", + "$ref": "expression.schema.v1.json#/definitions/string" + } + }, + "additionalProperties": false + }, + "audio": { + "title": "IAudio", + "type": "object", + "properties": { "src": { "$ref": "#/definitions/AudioSrc" } }, + "required": ["src"], + "additionalProperties": false + } + }, + "required": ["id", "type"], + "title": "Audio component schema" +} diff --git a/frontend/packages/ux-editor/src/testing/schemas/json/component/Cards.schema.v1.json b/frontend/packages/ux-editor/src/testing/schemas/json/component/Cards.schema.v1.json new file mode 100644 index 00000000000..0f0fdace3a1 --- /dev/null +++ b/frontend/packages/ux-editor/src/testing/schemas/json/component/Cards.schema.v1.json @@ -0,0 +1,136 @@ +{ + "$id": "https://altinncdn.no/schemas/json/component/Cards.schema.v1.json", + "$schema": "http://json-schema.org/draft-07/schema#", + "properties": { + "id": { + "title": "ID", + "description": "The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with .", + "type": "string", + "pattern": "^[0-9a-zA-Z][0-9a-zA-Z-]*(-?[a-zA-Z]+|[a-zA-Z][0-9]+|-[0-9]{6,})$" + }, + "hidden": { + "title": "Hidden", + "description": "Boolean value or expression indicating if the component should be hidden. Defaults to false.", + "default": false, + "$ref": "expression.schema.v1.json#/definitions/boolean" + }, + "grid": { + "properties": { + "xs": { "$ref": "#/definitions/IGridSize" }, + "sm": { "$ref": "#/definitions/IGridSize" }, + "md": { "$ref": "#/definitions/IGridSize" }, + "lg": { "$ref": "#/definitions/IGridSize" }, + "xl": { "$ref": "#/definitions/IGridSize" }, + "labelGrid": { "$ref": "#/definitions/IGridStyling" }, + "innerGrid": { "$ref": "#/definitions/IGridStyling" } + } + }, + "pageBreak": { + "title": "Page break", + "description": "Optionally insert page-break before/after component when rendered in PDF", + "type": "object", + "properties": { + "breakBefore": { + "title": "Page break before", + "description": "PDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'.", + "examples": ["auto", "always", "avoid"], + "default": "auto", + "$ref": "expression.schema.v1.json#/definitions/string" + }, + "breakAfter": { + "title": "Page break after", + "description": "PDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'.", + "examples": ["auto", "always", "avoid"], + "default": "auto", + "$ref": "expression.schema.v1.json#/definitions/string" + } + }, + "additionalProperties": false + }, + "renderAsSummary": { + "title": "Render as summary", + "description": "Boolean value or expression indicating if the component should be rendered as a summary. Defaults to false.", + "default": false, + "$ref": "expression.schema.v1.json#/definitions/boolean" + }, + "type": { "const": "Cards" }, + "textResourceBindings": { + "title": "TRBSummarizable", + "type": "object", + "properties": { + "summaryTitle": { + "title": "Summary title", + "description": "Title used in the summary view (overrides the default title)", + "$ref": "expression.schema.v1.json#/definitions/string" + }, + "summaryAccessibleTitle": { + "title": "Accessible summary title", + "description": "Title used for aria-label on the edit button in the summary view (overrides the default and summary title)", + "$ref": "expression.schema.v1.json#/definitions/string" + } + } + }, + "mediaPosition": { + "title": "ImagePosition", + "description": "Position of the media (image/video/audio) in each card", + "default": "top", + "enum": ["top", "bottom"], + "type": "string" + }, + "minMediaHeight": { + "title": "minMediaHeight", + "description": "Fixed minimum height of media (if media is present)", + "examples": ["100px", "100%", "100rem"], + "default": "150px", + "type": "string" + }, + "minWidth": { + "title": "minWidth", + "description": "Fixed minimum width of the card", + "examples": ["100", "100px", "100%", "100rem"], + "default": "250px", + "type": "string", + "pattern": "^[0-9]+(px|rem|%)?$" + }, + "color": { + "title": "Card color", + "description": "The color style for these cards", + "enum": ["neutral", "subtle"], + "type": "string" + }, + "cards": { + "type": "array", + "items": { + "title": "CardConfigExternal", + "type": "object", + "properties": { + "media": { + "title": "Media", + "description": "Media to display on the top/bottom of the card (must reference an Image, Audio or Video component", + "type": "string" + }, + "title": { "title": "Title", "description": "Title of the card", "type": "string" }, + "description": { + "title": "Description/body text", + "description": "Full text displayed underneath the title, above any component children", + "type": "string" + }, + "footer": { + "title": "Footer", + "description": "Footer text of the card", + "type": "string" + }, + "children": { + "title": "Children", + "description": "Child component IDs to show inside the card", + "type": "array", + "items": { "type": "string" } + } + }, + "additionalProperties": false + } + } + }, + "required": ["id", "type", "color", "cards"], + "title": "Cards component schema" +} diff --git a/frontend/packages/ux-editor/src/testing/schemas/json/component/Dropdown.schema.v1.json b/frontend/packages/ux-editor/src/testing/schemas/json/component/Dropdown.schema.v1.json index 6112433c186..9e87a3f22d9 100644 --- a/frontend/packages/ux-editor/src/testing/schemas/json/component/Dropdown.schema.v1.json +++ b/frontend/packages/ux-editor/src/testing/schemas/json/component/Dropdown.schema.v1.json @@ -252,6 +252,13 @@ }, "required": ["simpleBinding"], "additionalProperties": false + }, + "alertOnChange": { + "title": "Alert on change", + "type": "boolean", + "description": "Boolean value indicating if the component should alert on change", + "default": false, + "$ref": "expression.schema.v1.json#/definitions/boolean" } }, "required": ["id", "type", "dataModelBindings"], diff --git a/frontend/packages/ux-editor/src/testing/schemas/json/component/Input.schema.v1.json b/frontend/packages/ux-editor/src/testing/schemas/json/component/Input.schema.v1.json index f004d94851a..6b603f6a491 100644 --- a/frontend/packages/ux-editor/src/testing/schemas/json/component/Input.schema.v1.json +++ b/frontend/packages/ux-editor/src/testing/schemas/json/component/Input.schema.v1.json @@ -136,6 +136,16 @@ "title": "Accessible summary title", "description": "Title used for aria-label on the edit button in the summary view (overrides the default and summary title)", "$ref": "expression.schema.v1.json#/definitions/string" + }, + "prefix": { + "title": "Prefix", + "description": "Prefix shown before the input field", + "$ref": "expression.schema.v1.json#/definitions/string" + }, + "suffix": { + "title": "Suffix", + "description": "Suffix shown after the input field", + "$ref": "expression.schema.v1.json#/definitions/string" } } }, @@ -170,7 +180,6 @@ "properties": { "currency": { "title": "Language-sensitive currency formatting", - "type": "string", "description": "Enables currency to be language sensitive based on selected app language. Note: parts that already exist in number property are not overridden by this prop.", "enum": [ "AED", diff --git a/frontend/packages/ux-editor/src/testing/schemas/json/component/MultipleSelect.schema.v1.json b/frontend/packages/ux-editor/src/testing/schemas/json/component/MultipleSelect.schema.v1.json index 82e6ee24a56..e24783a778a 100644 --- a/frontend/packages/ux-editor/src/testing/schemas/json/component/MultipleSelect.schema.v1.json +++ b/frontend/packages/ux-editor/src/testing/schemas/json/component/MultipleSelect.schema.v1.json @@ -252,6 +252,12 @@ }, "required": ["simpleBinding"], "additionalProperties": false + }, + "alertOnChange": { + "title": "Alert on change", + "description": "Boolean value indicating if the component should alert on change", + "default": false, + "$ref": "expression.schema.v1.json#/definitions/boolean" } }, "required": ["id", "type", "dataModelBindings"], diff --git a/frontend/packages/ux-editor/src/testing/schemas/json/component/Video.schema.v1.json b/frontend/packages/ux-editor/src/testing/schemas/json/component/Video.schema.v1.json new file mode 100644 index 00000000000..6302443a758 --- /dev/null +++ b/frontend/packages/ux-editor/src/testing/schemas/json/component/Video.schema.v1.json @@ -0,0 +1,72 @@ +{ + "$id": "https://altinncdn.no/schemas/json/component/Video.schema.v1.json", + "$schema": "http://json-schema.org/draft-07/schema#", + "properties": { + "id": { + "title": "ID", + "description": "The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with .", + "type": "string", + "pattern": "^[0-9a-zA-Z][0-9a-zA-Z-]*(-?[a-zA-Z]+|[a-zA-Z][0-9]+|-[0-9]{6,})$" + }, + "hidden": { + "title": "Hidden", + "description": "Boolean value or expression indicating if the component should be hidden. Defaults to false.", + "default": false, + "$ref": "expression.schema.v1.json#/definitions/boolean" + }, + "grid": { + "properties": { + "xs": { "$ref": "#/definitions/IGridSize" }, + "sm": { "$ref": "#/definitions/IGridSize" }, + "md": { "$ref": "#/definitions/IGridSize" }, + "lg": { "$ref": "#/definitions/IGridSize" }, + "xl": { "$ref": "#/definitions/IGridSize" }, + "labelGrid": { "$ref": "#/definitions/IGridStyling" }, + "innerGrid": { "$ref": "#/definitions/IGridStyling" } + } + }, + "pageBreak": { + "title": "Page break", + "description": "Optionally insert page-break before/after component when rendered in PDF", + "type": "object", + "properties": { + "breakBefore": { + "title": "Page break before", + "description": "PDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'.", + "examples": ["auto", "always", "avoid"], + "default": "auto", + "$ref": "expression.schema.v1.json#/definitions/string" + }, + "breakAfter": { + "title": "Page break after", + "description": "PDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'.", + "examples": ["auto", "always", "avoid"], + "default": "auto", + "$ref": "expression.schema.v1.json#/definitions/string" + } + }, + "additionalProperties": false + }, + "type": { "const": "Video" }, + "textResourceBindings": { + "type": "object", + "properties": { + "altText": { + "title": "Alt text", + "description": "Alternative text for the video (for screen readers).", + "$ref": "expression.schema.v1.json#/definitions/string" + } + }, + "additionalProperties": false + }, + "video": { + "title": "IVideo", + "type": "object", + "properties": { "src": { "$ref": "#/definitions/VideoSrc" } }, + "required": ["src"], + "additionalProperties": false + } + }, + "required": ["id", "type"], + "title": "Video component schema" +} diff --git a/frontend/packages/ux-editor/src/testing/schemas/json/component/component-list.json b/frontend/packages/ux-editor/src/testing/schemas/json/component/component-list.json index 3f2a8cb462a..3fd9e6ae26d 100644 --- a/frontend/packages/ux-editor/src/testing/schemas/json/component/component-list.json +++ b/frontend/packages/ux-editor/src/testing/schemas/json/component/component-list.json @@ -3,8 +3,10 @@ "ActionButton", "AddressComponent", "AttachmentList", + "Audio", "Button", "ButtonGroup", + "Cards", "Checkboxes", "Custom", "Datepicker", @@ -31,5 +33,6 @@ "PrintButton", "RadioButtons", "Summary", - "TextArea" + "TextArea", + "Video" ] diff --git a/frontend/packages/ux-editor/src/types/ContainerComponent.ts b/frontend/packages/ux-editor/src/types/ContainerComponent.ts index 811146a6e7e..dcd193db369 100644 --- a/frontend/packages/ux-editor/src/types/ContainerComponent.ts +++ b/frontend/packages/ux-editor/src/types/ContainerComponent.ts @@ -4,5 +4,6 @@ export type ContainerComponentType = | ComponentType.Accordion | ComponentType.AccordionGroup | ComponentType.ButtonGroup + | ComponentType.Cards | ComponentType.Group | ComponentType.RepeatingGroup;