Skip to content

Commit

Permalink
Add new components: Cards, Audio and Video, and update new texts for …
Browse files Browse the repository at this point in the history
…Input
  • Loading branch information
standeren committed Jul 6, 2024
1 parent d3b425e commit d32a6a2
Show file tree
Hide file tree
Showing 12 changed files with 352 additions and 2 deletions.
7 changes: 7 additions & 0 deletions frontend/language/src/nb.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
3 changes: 3 additions & 0 deletions frontend/packages/shared/src/types/ComponentType.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -39,4 +41,5 @@ export enum ComponentType {
RepeatingGroup = 'RepeatingGroup',
Summary = 'Summary',
TextArea = 'TextArea',
Video = 'Video',
}
28 changes: 28 additions & 0 deletions frontend/packages/ux-editor/src/data/formItemConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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][] = [
Expand Down Expand Up @@ -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],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';

Expand All @@ -48,8 +51,10 @@ export const componentSchemaMocks: Record<ComponentType, JsonSchema> = {
[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,
Expand Down Expand Up @@ -82,4 +87,5 @@ export const componentSchemaMocks: Record<ComponentType, JsonSchema> = {
[ComponentType.RepeatingGroup]: RepeatingGroupSchema,
[ComponentType.Summary]: SummarySchema,
[ComponentType.TextArea]: TextAreaSchema,
[ComponentType.Video]: VideoSchema,
};
Original file line number Diff line number Diff line change
@@ -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 <dash><number>.",
"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"
}
Original file line number Diff line number Diff line change
@@ -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 <dash><number>.",
"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"
}
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down
Loading

0 comments on commit d32a6a2

Please sign in to comment.