Update: Set item title as strapline default (fixes #251) (#285)

* set item title as strapline default * remove example strapline * Update README strapline instruction * add strapline schema help text and remove required * add strapline schema description
adaptlearning · Nov 22, 2023 · 60b9907 · 60b9907
1 parent 2b31480
commit 60b9907
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ The attributes listed below are used in *components.json* to configure **Narrati
 
 >>**attribution** (string): Optional text to be displayed as an [attribution](https://wiki.creativecommons.org/Best_practices_for_attribution). By default it is displayed below the image. Adjust positioning by modifying CSS. Text can contain HTML tags, e.g., `Copyright © 2015 by Lukasz 'Severiaan' Grela`.
 
->**strapline** (string): This text is displayed as a title above the image when `device.screenSize` is `small` (i.e., when viewed on mobile devices). When using `_isStackedOnMobile: true`, this attribute will be ignored.
+>**strapline** (string): Optional if a succinct title is required for strapline mobile layout. The title is displayed above the image in the strapline button. Leave empty to default to **title** text. When using `_isStackedOnMobile: true`, this attribute will be ignored.
 
 ### Accessibility
 

diff --git a/example.json b/example.json
@@ -25,7 +25,7 @@
                     "alt": "",
                     "attribution": "Copyright © 2019"
                 },
-                "strapline": "Narrative item 1 strapline"
+                "strapline": ""
             },
             {
                 "title": "Narrative item 2 title",
@@ -35,7 +35,7 @@
                     "alt": "",
                     "attribution": ""
                 },
-                "strapline": "Narrative item 2 strapline"
+                "strapline": ""
             },
             {
                 "title": "Narrative item 3 title",
@@ -45,7 +45,7 @@
                     "alt": "",
                     "attribution": ""
                 },
-                "strapline": "Narrative item 3 strapline"
+                "strapline": ""
             }
         ],
         "_pageLevelProgress": {

diff --git a/properties.schema b/properties.schema
@@ -169,12 +169,12 @@
           },
           "strapline": {
             "type": "string",
-            "required": true,
+            "required": false,
             "default": "",
             "title": "Narrative strapline",
             "inputType": "Text",
-            "validators": ["required"],
-            "help": "",
+            "validators": [],
+            "help": "Optional if a succinct title is required for the strapline mobile layout. Leave empty to default to title text",
             "translatable": true
           }
         }

diff --git a/schema/component.schema.json b/schema/component.schema.json
@@ -140,6 +140,7 @@
               "strapline": {
                 "type": "string",
                 "title": "Strapline",
+                "description": "Optional if a succinct title is required for the strapline mobile layout. Leave empty to default to title text",
                 "default": "",
                 "_adapt": {
                   "translatable": true

diff --git a/templates/narrativeStrapline.jsx b/templates/narrativeStrapline.jsx
@@ -29,7 +29,7 @@ export default function NarrativeStrapline(props) {
           }}
         >
 
-          {_items.map(({ _index, _isActive, _isVisited, strapline }) =>
+          {_items.map(({ _index, _isActive, _isVisited, strapline, title }) =>
 
             <button
               className={classes([
@@ -48,7 +48,7 @@ export default function NarrativeStrapline(props) {
               <span className="narrative__strapline-title">
                 <span
                   className="narrative__strapline-title-inner"
-                  dangerouslySetInnerHTML={{ __html: compile(strapline, props) }}
+                  dangerouslySetInnerHTML={{ __html: compile(strapline || title, props) }}
                 />
               </span>