Fix: Add missing properties to schemas and documentation (fixes #305)

README.md

@@ -74,6 +74,12 @@ When set to `true`, hides the "previous" and "next" icons and progress indicator
 ### \_isNarrativeOnMobile (boolean):
 When set to `false` the Hotgraphic will render a scaled down 'desktop' version (pins over image / tiles) of the component in mobile view instead of being replaced by a Narrative interaction. The default is `true`.
 
+### \_isMobileTextBelowImage (boolean):
+If enabled, on mobile, the text area drops below the image instead of being behind the strapline button. When using `_isStackedOnMobile: true` or `_isNarrativeOnMobile: false`, this attribute will be ignored. The default value is `false`
+
+### \_isStackedOnMobile (boolean):
+If enabled, on mobile, text and images will be stacked vertically. No interaction will be required to view all items as the user will simply scroll down. `_isNarrativeOnMobile` must be set to `true`. The default value is `false`
+
 ### \_useNumberedPins (boolean):
 If set to `true`, the pin icons will be replaced with the item number. Useful if you want pins to be visited in a set order or show steps in a process. The default is `false`.
 

example.json

@@ -18,6 +18,8 @@
         "_canCycleThroughPagination": false,
         "_hidePagination": false,
         "_isNarrativeOnMobile": true,
+        "_isMobileTextBelowImage": false,
+        "_isStackedOnMobile": false,
         "_useNumberedPins": false,
         "_useGraphicsAsPins": false,
         "_isRound": false,

properties.schema

@@ -129,14 +129,32 @@
       "help": "This instruction text is displayed on mobile devices when this component turns into a Narrative",
       "translatable": true
     },
+    "_isNarrativeOnMobile": {
+      "type": "boolean",
+      "required": true,
+      "default": true,
+      "title": "Render as Narrative on mobile?",
+      "inputType": "Checkbox",
+      "validators": [],
+      "help": "If disabled, the Hotgraphic will render a scaled down 'desktop' version (pins over image / tiles) of the component in 'mobile' view instead of being replaced by a Narrative interaction."
+    },
     "_isMobileTextBelowImage": {
       "type": "boolean",
       "required": false,
       "default": false,
       "title": "Move text area below image on mobile device",
       "inputType": "Checkbox",
       "validators": [],
-      "help": "When Hot Graphic is displayed on a mobile device, it turns into a Narrative. If you check this box, the text content of each stage is positioned below the image. The Narrative will not use the default \"strapline\" layout."
+      "help": "If enabled, on mobile, the text area drops below the image instead of being behind the strapline button. Only applies when the Hot Graphic is configured to render as a Narrative on mobile"
+    },
+    "_isStackedOnMobile": {
+      "type": "boolean",
+      "required": true,
+      "default": false,
+      "title": "Stack images and text on mobile",
+      "inputType": "Checkbox",
+      "validators": [],
+      "help": "If enabled, on mobile, text and images will be stacked vertically. No interaction will be required to view all items as the user will simply scroll down. Only applies when the Hot Graphic is configured to render as a Narrative on mobile"
     },
     "_hidePagination": {
       "type": "boolean",
@@ -156,15 +174,6 @@
       "validators": [],
       "help": "If enabled, the popup navigation buttons will cycle continuously through the popup items (i.e. clicking next whilst on the last item will cause the first item to be shown."
     },
-    "_isNarrativeOnMobile": {
-      "type": "boolean",
-      "required": true,
-      "default": true,
-      "title": "Render as Narrative on mobile?",
-      "inputType": "Checkbox",
-      "validators": [],
-      "help": "If disabled, the Hotgraphic will render a scaled down 'desktop' version (pins over image / tiles) of the component in 'mobile' view instead of being replaced by a Narrative interaction."
-    },
     "_useNumberedPins": {
       "type": "boolean",
       "required": true,

schema/component.schema.json

@@ -113,6 +113,18 @@
           "description": "If disabled, the Hotgraphic will render a scaled down 'desktop' version (pins over image / tiles) of the component in 'mobile' view instead of being replaced by a Narrative interaction",
           "default": true
         },
+        "_isMobileTextBelowImage": {
+          "type": "boolean",
+          "title": "Move text area below image on mobile device",
+          "description": "If enabled, on mobile, the text area drops below the image instead of being behind the strapline button. Only applies when the Hot Graphic is configured to render as a Narrative on mobile",
+          "default": false
+        },
+        "_isStackedOnMobile": {
+          "type": "boolean",
+          "title": "Stack images and text on mobile",
+          "description": "If enabled, on mobile, text and images will be stacked vertically. No interaction will be required to view all items as the user will simply scroll down. Only applies when the Hot Graphic is configured to render as a Narrative on mobile",
+          "default": false
+        },
         "_useNumberedPins": {
           "type": "boolean",
           "title": "Use numbered pins",