@beinformed/ui 1.11.0 → 1.13.0

package/lib/redux/reducers/NotificationReducer.js

@@ -19,9 +19,9 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // REDUCER
 var initialState = {

package/lib/redux/reducers/PreferencesReducer.js

@@ -19,9 +19,9 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var initialState = {};
 /**

package/lib/redux/reducers/ProgressIndicatorReducer.js

@@ -19,9 +19,9 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // REDUCER
 var initialState = {

package/lib/redux/store/configureStore.js

@@ -31,9 +31,9 @@ var _createReducer = require("../reducers/createReducer");
 
 var _actions = require("../_router/actions");
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  */

package/lib/utils/fetch/xhr.js

@@ -45,9 +45,9 @@ var _Cache = _interopRequireDefault(require("../browser/Cache"));
 
 var _Constants = require("../../constants/Constants");
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var NETWORK_ERROR_CODE = 0;
 var SUCCESS_CODE = 200;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beinformed/ui",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "Toolbox for be informed javascript layouts",
   "license": "SEE LICENSE IN LICENSE.md",
   "bugs": "http://support.beinformed.com",
@@ -78,9 +78,9 @@
     "styled-components": "^5.2.0"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.15.4",
+    "@babel/runtime-corejs3": "^7.16.5",
     "big.js": "^6.1.1",
-    "date-fns": "^2.25.0",
+    "date-fns": "^2.27.0",
     "deepmerge": "^4.2.2",
     "dequal": "^2.0.2",
     "element-closest": "^3.0.2",
@@ -90,23 +90,23 @@
     "he": "^1.2.0",
     "iban": "^0.0.14",
     "lodash": "^4.17.21",
-    "reselect": "^4.0.0",
+    "reselect": "^4.1.5",
     "setimmediate": "^1.0.5"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.8",
-    "@babel/eslint-parser": "^7.15.8",
-    "@babel/eslint-plugin": "^7.14.5",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.5",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/eslint-plugin": "^7.16.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-flow": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
-    "@commitlint/cli": "^13.2.1",
-    "@commitlint/config-conventional": "^13.2.0",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-flow": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
     "@testing-library/react-hooks": "^7.0.2",
-    "babel-jest": "^27.3.1",
+    "babel-jest": "^27.4.5",
     "babel-plugin-styled-components": "^1.13.3",
     "cherry-pick": "^0.5.0",
     "cross-env": "^7.0.3",
@@ -115,33 +115,33 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-flowtype": "^6.1.1",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jest": "^25.2.2",
-    "eslint-plugin-jsdoc": "^37.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-jsdoc": "^37.2.2",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "flow-bin": "0.152.0",
     "flow-copy-source": "^2.0.9",
-    "flow-typed": "^3.4.0",
+    "flow-typed": "^3.5.0",
     "glob": "^7.2.0",
     "history": "^4.0.0",
     "husky": "^7.0.4",
-    "jest": "^27.3.1",
+    "jest": "^27.4.5",
     "jest-junit": "^13.0.0",
     "jest-sonar-reporter": "^2.0.0",
     "jscodeshift": "^0.13.0",
-    "lint-staged": "^11.2.4",
+    "lint-staged": "^12.1.2",
     "polished": "^4.1.3",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet-async": "^1.1.2",
-    "react-redux": "^7.2.5",
+    "react-helmet-async": "^1.2.2",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-test-renderer": "^17.0.2",
-    "redux": "^4.1.1",
+    "redux": "^4.1.2",
     "redux-mock-store": "^1.5.4",
-    "redux-thunk": "^2.3.0",
+    "redux-thunk": "^2.4.1",
     "rimraf": "^3.0.2",
     "standard-version": "^9.3.2",
     "styled-components": "^5.3.3",

package/src/i18n/Locale.js

@@ -15,6 +15,7 @@ class Locale {
   _code: string;
   _messages: { [string]: string };
   _errors: { [string]: string };
+  _nativeName: ?string;
 
   constructor(locale: LocaleConfiguration) {
     this._code = locale.code;
@@ -22,6 +23,8 @@ class Locale {
     this._messages = this.fixPlaceHoldersInObject(locale.messages);
     this._errors = this.fixPlaceHoldersInObject(locale.errors);
 
+    this._nativeName = locale.nativeName;
+
     formatMessage.setup({
       missingTranslation: "ignore",
     });
@@ -38,6 +41,10 @@ class Locale {
    * Retrieve nativeName
    */
   get nativeName(): string {
+    if (this._nativeName) {
+      return this._nativeName;
+    }
+
     const aLocale = this.code.split("-");
 
     if (aLocale.length > 0) {

package/src/i18n/__tests__/Locale.spec.js

@@ -39,6 +39,20 @@ describe("locale", () => {
     expect(locale.getMessage("testMessage")).toBe("Updated message");
   });
 
+  it("can handle languages without iso-639-2 code", () => {
+    const locale = new Locale({
+      code: "pap",
+      nativeName: "Papiamento",
+      messages: {
+        descr: "Papiamento",
+      },
+      errors: {},
+    });
+
+    expect(locale.code).toBe("pap");
+    expect(locale.nativeName).toBe("Papiamento");
+  });
+
   it("throws on non exising locale", () => {
     const locale = new Locale({
       code: "NONEXISTING",

package/src/i18n/languages.js

@@ -200,6 +200,7 @@ const languages = {
     za: ["Zhuang", "Cuengh / Tôô / 壮语"],
     zh: ["Chinese", "中文"],
     zu: ["Zulu", "isiZulu"],
+    pap: ["Papiamento", "Papiamento"],
   },
 };
 

package/src/i18n/types.js

@@ -19,4 +19,5 @@ export type LocaleConfiguration = {
   code: string,
   messages: Object,
   errors?: Object,
+  nativeName?: string,
 };

package/src/models/attributes/AttributeContent.js

@@ -3,15 +3,19 @@ import { retrieveText } from "../../utils/helpers/text";
 import { hasAllContentInData } from "../../constants/Settings";
 import SectionModel from "../content/SectionModel";
 
+import LayoutHintCollection from "../layouthint/LayoutHintCollection";
+import { isPlainObject } from "../../utils";
+
 import type {
   ContentData,
+  ContentElementMapped,
   PropertyData,
+  PropertyElementMapped,
   TextFragmentData,
+  TextFragmentElementMapped,
   ContentAll,
 } from "../types";
 import type SubSectionModel from "../content/SubSectionModel";
-import LayoutHintCollection from "../layouthint/LayoutHintCollection";
-import { isPlainObject } from "../../utils";
 
 class AttributeContent {
   _content: ?ContentData;
@@ -116,51 +120,84 @@ class AttributeContent {
 
   /**
    */
-  getContentElements<T>(elementName: string, collectionName: string): Array<T> {
-    return this.elements
-      .filter((element) => elementName in element)
+  getContentElements<T>(elementName: string): Array<T> {
+    // $FlowIssue incompatible-return
+    return this.elements.filter((element) => elementName in element);
+  }
+
+  /**
+   */
+  getContentElementCollections<T>(
+    elementName: string,
+    collectionName: string
+  ): Array<T> {
+    return this.getContentElements(elementName)
       .map((element) => element[elementName][collectionName])
       .flat();
   }
 
+  /**
+   */
+  getContentElementCollectionByLabels<T, U>(
+    elementName: string,
+    collectionName: string,
+    labels: Array<string>
+  ): Array<U> {
+    return (
+      this.getContentElements<T>(elementName)
+        // $FlowIssue incompatible-use
+        .filter((element) => labels.includes(element[elementName].label))
+        // $FlowIssue incompatible-use
+        .map((element) => element[elementName][collectionName])
+        .flat()
+    );
+  }
+
   /**
    */
   get properties(): Array<PropertyData> {
-    return this.getContentElements<PropertyData>(
+    return this.getContentElementCollections<PropertyData>(
       "propertyElement",
       "properties"
     );
   }
 
   /**
-   * Get concept properties by id
+   * Get concept properties by property element label
    */
-  getConceptPropertiesByIds(ids: Array<string>): Array<PropertyData> {
-    return this.properties.filter((property) => ids.includes(property.type));
+  getConceptPropertiesByLabels(labels: Array<string>): Array<PropertyData> {
+    return this.getContentElementCollectionByLabels<
+      PropertyElementMapped,
+      PropertyData
+    >("propertyElement", "properties", labels);
   }
 
   /**
    */
   get textfragments(): Array<TextFragmentData> {
-    return this.getContentElements<TextFragmentData>(
+    return this.getContentElementCollections<TextFragmentData>(
       "textFragmentElement",
       "textfragments"
     );
   }
 
   /**
-   * Get concept text fragments by type
+   * Get concept text fragments by text fragment element label
    */
-  getTextFragmentByKeys(keys: Array<string>): Array<TextFragmentData> {
-    return this.textfragments.filter((textfragment) =>
-      keys.includes(textfragment.type)
-    );
+  getTextFragmentsByLabels(labels: Array<string>): Array<TextFragmentData> {
+    return this.getContentElementCollectionByLabels<
+      TextFragmentElementMapped,
+      TextFragmentData
+    >("textFragmentElement", "textfragments", labels);
   }
 
   /**
    */
   get sections(): Array<SectionModel> {
-    return this.getContentElements<SectionModel>("contentElement", "sections");
+    return this.getContentElementCollections<SectionModel>(
+      "contentElement",
+      "sections"
+    );
   }
 
   /**
@@ -169,6 +206,16 @@ class AttributeContent {
     return this.sections.filter((section) => types.includes(section.type));
   }
 
+  /**
+   * Get concept text fragments by text fragment element label
+   */
+  getSectionsByLabels(labels: Array<string>): Array<SectionModel> {
+    return this.getContentElementCollectionByLabels<
+      ContentElementMapped,
+      SectionModel
+    >("contentElement", "sections", labels);
+  }
+
   /**
    */
   getReferredSections(): Array<SectionModel | SubSectionModel> {

package/src/models/attributes/AttributeDataHelper.js

@@ -269,6 +269,7 @@ class AttributeDataHelper {
         "label",
         "elements",
         "layouthint",
+        "text",
       ]);
 
       if (Object.keys(pickedContent).length > 0) {

package/src/models/attributes/HelptextAttributeModel.js

@@ -1,12 +1,12 @@
 // @flow
 import { has } from "../../utils/helpers/objects";
 
-import LabelAttributeModel from "./LabelAttributeModel";
+import AttributeModel from "./AttributeModel";
 
 /**
  * Helptext attribute
  */
-export default class HelptextAttributeModel extends LabelAttributeModel {
+export default class HelptextAttributeModel extends AttributeModel {
   /**
    */
   static isApplicableModel(contributions: Object): boolean {
@@ -26,9 +26,9 @@ export default class HelptextAttributeModel extends LabelAttributeModel {
    * Get helptext text
    */
   get text(): string | null {
-    const dataText = this.getData("value");
-    if (dataText) {
-      return dataText.message ?? dataText;
+    const dataContent = this.getData("content");
+    if (dataContent?.text) {
+      return dataContent.text.message;
     }
 
     const contributionText = this.getContribution("text");
@@ -38,4 +38,17 @@ export default class HelptextAttributeModel extends LabelAttributeModel {
 
     return null;
   }
+
+  /**
+   */
+  // eslint-disable-next-line no-unused-vars
+  update(value: string): HelptextAttributeModel {
+    return this;
+  }
+
+  /**
+   */
+  getFormData(): null {
+    return null;
+  }
 }

package/src/models/attributes/__mock__/_FormCollectionContribution.json

@@ -215,6 +215,15 @@
       "readonly": true
     }
   },
+  {
+    "HelpText2": {
+      "label": "Help text 2",
+      "type": "string",
+      "mandatory": false,
+      "text": "<p>Tekst met placeholder, caseid: ${CASE.ID}</p>",
+      "readonly": true
+    }
+  },
   {
     "Label1": {
       "label": "Label 1",

package/src/models/attributes/__mock__/_FormCollectionData.json

@@ -51,13 +51,22 @@
   },
   {
     "elementid": "HelpText1",
+    "static": true
+  },
+  {
+    "elementid": "HelpText2",
     "static": true,
-    "value": "<p>Dit is <strike>een</strike> helptekst!<br />Hallo <em>daar</em>.<br />Even <u>wat</u> meer <strong>regels.</strong></p>"
+    "content": {
+      "id": "TextID",
+      "text": "<p>Tekst met placeholder, caseid: 12</p>",
+      "properties": {
+        "CASE.ID": 12
+      }
+    }
   },
   {
     "elementid": "Label1",
-    "static": true,
-    "value": "Label 1"
+    "static": true
   },
   {
     "elementid": "Memo"

package/src/models/attributes/__tests__/AttributeCollection.spec.js

@@ -32,9 +32,9 @@ describe("attributeCollection", () => {
     );
 
     expect(attributeCollection).toBeInstanceOf(AttributeCollection);
-    expect(attributeCollection.size).toBe(31);
-    expect(attributeCollection).toHaveLength(31);
-    expect(attributeCollection.visible).toHaveLength(31);
+    expect(attributeCollection.size).toBe(32);
+    expect(attributeCollection).toHaveLength(32);
+    expect(attributeCollection.visible).toHaveLength(32);
     expect(attributeCollection.hasAttributeByKey("Address")).toBeTruthy();
     expect(
       attributeCollection.getAttributesByLayoutHint("zipcode")
@@ -118,7 +118,7 @@ describe("attributeCollection", () => {
 
     const attributeCollection = new AttributeCollection(data, contributions);
 
-    expect(attributeCollection).toHaveLength(31);
+    expect(attributeCollection).toHaveLength(32);
 
     const contributions2 = [
       {

package/src/models/attributes/__tests__/AttributeContent.spec.js

@@ -13,10 +13,8 @@ const json = {
     {
       propertyElement: {
         label: "Properties",
-        id: "properties",
         properties: [
           {
-            type: "Gemiddelde",
             label: "Gemiddelde",
             value: "80%",
           },
@@ -26,10 +24,8 @@ const json = {
     {
       propertyElement: {
         label: "Second Properties",
-        id: "secondProperties",
         properties: [
           {
-            type: "SecondGemiddelde",
             label: "Second Gemiddelde",
             value: "20%",
           },
@@ -38,20 +34,15 @@ const json = {
     },
     {
       textFragmentElement: {
-        label: "Description",
-        id: "Description",
+        label: "Description TextFragment",
         textfragments: [
-          {
-            type: "Description",
-            label: "Description",
-            text: { message: "Dit is een text fragment" },
-          },
+          { id: "Description", text: { message: "Dit is een text fragment" } },
         ],
       },
     },
     {
       contentElement: {
-        label: "Description",
+        label: "Description Content",
         sections: [
           {
             id: "Alert",
@@ -160,26 +151,29 @@ describe("AttributeContent", () => {
     expect(content.sections).toHaveLength(1);
 
     const firstProperty = content.properties[0];
-    expect(firstProperty.type).toBe("Gemiddelde");
     expect(firstProperty.label).toBe("Gemiddelde");
     expect(firstProperty.value).toBe("80%");
 
     const firstTextFragment = content.textfragments[0];
-    expect(firstTextFragment.type).toBe("Description");
-    expect(firstTextFragment.label).toBe("Description");
     expect(firstTextFragment.text).toBe("Dit is een text fragment");
   });
 
   it("Can ask for elements by type", () => {
     const content = new AttributeContent(json);
 
-    expect(content.getConceptPropertiesByIds("not-existing")).toHaveLength(0);
-    expect(content.getTextFragmentByKeys("not-existing")).toHaveLength(0);
+    expect(content.getConceptPropertiesByLabels("not-existing")).toHaveLength(
+      0
+    );
+    expect(content.getTextFragmentsByLabels("not-existing")).toHaveLength(0);
     expect(content.getSectionsByType("not-existing")).toHaveLength(0);
+    expect(content.getSectionsByLabels("not-existing")).toHaveLength(0);
 
-    expect(content.getConceptPropertiesByIds("Gemiddelde")).toHaveLength(1);
-    expect(content.getTextFragmentByKeys("Description")).toHaveLength(1);
+    expect(content.getConceptPropertiesByLabels("Properties")).toHaveLength(1);
+    expect(
+      content.getTextFragmentsByLabels("Description TextFragment")
+    ).toHaveLength(1);
     expect(content.getSectionsByType("Reference")).toHaveLength(1);
+    expect(content.getSectionsByLabels("Description Content")).toHaveLength(1);
   });
 
   it("Creates ContentModel when sections available", () => {

package/src/models/attributes/__tests__/HelptextAttributeModel.spec.js

@@ -9,7 +9,14 @@ describe("helptextAttributeModel", () => {
     expect(attribute.text).toBeNull();
 
     const attributeWithText = new HelptextAttributeModel(
-      {},
+      {
+        key: "CarDetails",
+        content: null,
+        static: true,
+        dynamicschemaId: "CarDetails",
+        isResult: false,
+        children: [],
+      },
       { text: "Example helptext text" }
     );
 
@@ -20,21 +27,22 @@ describe("helptextAttributeModel", () => {
     const attributeWithText = new HelptextAttributeModel(
       {
         key: "CarDetails",
-        value: {
-          id: "CarDetails.text",
-          properties: {
-            PersonPrivateCar: "Ferrari GTO",
-            PersonLessFavoriteCars: "Mercedes",
-            PersonFavoriteCars: "BMW 5 Series, Fiat Panda",
+        content: {
+          text: {
+            id: "CarDetails.text",
+            properties: {
+              PersonPrivateCar: "Ferrari GTO",
+              PersonLessFavoriteCars: "Mercedes",
+              PersonFavoriteCars: "BMW 5 Series, Fiat Panda",
+            },
+            message:
+              "<p>Currently the person drives in a Ferrari GTO, although his favorite cars are BMW 5 Series, Fiat Panda. Less favorite cars of the person are Mercedes.</p>",
           },
-          message:
-            "<p>Currently the person drives in a Ferrari GTO, although his favorite cars are BMW 5 Series, Fiat Panda. Less favorite cars of the person are Mercedes.</p>",
         },
         static: true,
         dynamicschemaId: "CarDetails",
         isResult: false,
         children: [],
-        content: null,
       },
       {
         type: "string",

package/src/models/caseview/CaseViewModel.js

@@ -100,8 +100,8 @@ export default class CaseViewModel extends DetailModel {
    * Getting the introduction text configured on the case view
    */
   get introtext(): string {
-    if (this.data._text) {
-      return this.data._text.message ?? this.data._text;
+    if (this.data._content) {
+      return this.data._content.text.message;
     }
 
     if (this.contributions.text) {