New: Allow custom icon per prompt (fixes #19)

guywillis · web-flow · commit 771cc8b5fb19 · 2025-01-17T13:07:39.000Z
diff --git a/example.json b/example.json
@@ -1,6 +1,7 @@
   // Apply to course.json, contentObject.json, blocks.json or components.json
-  
+
   "_scrollPrompt": {
     "_isEnabled": true,
-    "instruction": "{{_globals._extensions._scrollPrompt.scrollDown}}"
+    "instruction": "{{_globals._extensions._scrollPrompt.scrollDown}}",
+    "_iconClass": "icon-controls-down"
   }
diff --git a/less/scrollPrompt.less b/less/scrollPrompt.less
@@ -6,15 +6,7 @@
     align-items: center;
   }
 
-  &__btn .icon {
-    .icon-controls-down;
-  }
-
   &__instruction {
-    margin-left: 1rem;
-    .dir-rtl & {
-      margin-left: inherit;
-      margin-right: 1rem;
-    }
+    margin-inline-start: 1rem;
   }
 }
diff --git a/properties.schema b/properties.schema
@@ -35,6 +35,15 @@
                   "inputType": "Text",
                   "validators": [],
                   "translatable": true
+                },
+                "_iconClass": {
+                  "type": "string",
+                  "required": false,
+                  "default": "icon-controls-down",
+                  "title": "Button icon class",
+                  "inputType": "Text",
+                  "validators": [],
+                  "help": "CSS class name to be applied to the scroll prompt button icon."
                 }
               }
             }
@@ -60,6 +69,15 @@
                   "inputType": "Text",
                   "validators": [],
                   "translatable": true
+                },
+                "_iconClass": {
+                  "type": "string",
+                  "required": false,
+                  "default": "icon-controls-down",
+                  "title": "Button icon class",
+                  "inputType": "Text",
+                  "validators": [],
+                  "help": "CSS class name to be applied to the scroll prompt button icon."
                 }
               }
             }
@@ -85,6 +103,15 @@
                   "inputType": "Text",
                   "validators": [],
                   "translatable": true
+                },
+                "_iconClass": {
+                  "type": "string",
+                  "required": false,
+                  "default": "icon-controls-down",
+                  "title": "Button icon class",
+                  "inputType": "Text",
+                  "validators": [],
+                  "help": "CSS class name to be applied to the scroll prompt button icon."
                 }
               }
             }
@@ -110,6 +137,15 @@
                   "inputType": "Text",
                   "validators": [],
                   "translatable": true
+                },
+                "_iconClass": {
+                  "type": "string",
+                  "required": false,
+                  "default": "icon-controls-down",
+                  "title": "Button icon class",
+                  "inputType": "Text",
+                  "validators": [],
+                  "help": "CSS class name to be applied to the scroll prompt button icon."
                 }
               }
             }
diff --git a/schema/block.schema.json b/schema/block.schema.json
@@ -24,6 +24,12 @@
               "type": "string",
               "title": "Instruction text",
               "default": "{{_globals._extensions._scrollPrompt.scrollDown}}"
+            },
+            "_iconClass": {
+              "type": "string",
+              "title": "Button icon class",
+              "description": "CSS class name to be applied to the scroll prompt button icon.",
+              "default": "icon-controls-down"
             }
           }
         }
diff --git a/schema/component.schema.json b/schema/component.schema.json
@@ -24,6 +24,12 @@
               "type": "string",
               "title": "Instruction text",
               "default": "{{_globals._extensions._scrollPrompt.scrollDown}}"
+            },
+            "_iconClass": {
+              "type": "string",
+              "title": "Button icon class",
+              "description": "CSS class name to be applied to the scroll prompt button icon.",
+              "default": "icon-controls-down"
             }
           }
         }
diff --git a/schema/contentobject.schema.json b/schema/contentobject.schema.json
@@ -24,6 +24,12 @@
               "type": "string",
               "title": "Instruction text",
               "default": "{{_globals._extensions._scrollPrompt.scrollDown}}"
+            },
+            "_iconClass": {
+              "type": "string",
+              "title": "Button icon class",
+              "description": "CSS class name to be applied to the scroll prompt button icon.",
+              "default": "icon-controls-down"
             }
           }
         }
diff --git a/schema/course.schema.json b/schema/course.schema.json
@@ -51,6 +51,12 @@
               "type": "string",
               "title": "Instruction text",
               "default": "{{_globals._extensions._scrollPrompt.scrollDown}}"
+            },
+            "_iconClass": {
+              "type": "string",
+              "title": "Button icon class",
+              "description": "CSS class name to be applied to the scroll prompt button icon.",
+              "default": "icon-controls-down"
             }
           }
         }
diff --git a/templates/scrollPrompt.jsx b/templates/scrollPrompt.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { compile } from 'core/js/reactHelpers';
+import { classes, compile } from 'core/js/reactHelpers';
 
 export default function ScrollPrompt (props) {
   const {
@@ -8,14 +8,33 @@ export default function ScrollPrompt (props) {
   } = props;
 
   return (
-    <div className="scrollPrompt__inner a11y-ignore" aria-hidden="true">
-      <button className="btn-icon scrollPrompt__btn" onClick={onScrollPromptClick}>
-        <span className="icon" />
+    <div
+      className='scrollPrompt__inner a11y-ignore'
+      aria-hidden='true'
+    >
+
+      <button
+        className='btn-icon scrollPrompt__btn'
+        onClick={onScrollPromptClick}
+      >
+        <span
+          className={classes([
+            'icon',
+            _scrollPrompt._iconClass
+              ? _scrollPrompt._iconClass
+              : 'icon-controls-down'
+          ])}
+          aria-hidden='true'
+        />
       </button>
 
       {_scrollPrompt.instruction &&
-      <div className="scrollPrompt__instruction" dangerouslySetInnerHTML={{ __html: compile(_scrollPrompt.instruction, props) }} />
+      <div
+        className='scrollPrompt__instruction'
+        dangerouslySetInnerHTML={{ __html: compile(_scrollPrompt.instruction, props) }}
+      />
       }
+
     </div>
   );
 }

Original file line number	Diff line number	Diff line change
`@@ -6,15 +6,7 @@`
`6`	`6`	`align-items: center;`
`7`	`7`	`}`
`8`	`8`
`9`		`- &__btn .icon {`
`10`		`- .icon-controls-down;`
`11`		`- }`
`12`		`-`
`13`	`9`	`&__instruction {`
`14`		`- margin-left: 1rem;`
`15`		`- .dir-rtl & {`
`16`		`- margin-left: inherit;`
`17`		`- margin-right: 1rem;`
`18`		`- }`
	`10`	`+ margin-inline-start: 1rem;`
`19`	`11`	`}`
`20`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,15 @@`
`35`	`35`	`"inputType": "Text",`
`36`	`36`	`"validators": [],`
`37`	`37`	`"translatable": true`
	`38`	`+ },`
	`39`	`+ "_iconClass": {`
	`40`	`+ "type": "string",`
	`41`	`+ "required": false,`
	`42`	`+ "default": "icon-controls-down",`
	`43`	`+ "title": "Button icon class",`
	`44`	`+ "inputType": "Text",`
	`45`	`+ "validators": [],`
	`46`	`+ "help": "CSS class name to be applied to the scroll prompt button icon."`
`38`	`47`	`}`
`39`	`48`	`}`
`40`	`49`	`}`
`@@ -60,6 +69,15 @@`
`60`	`69`	`"inputType": "Text",`
`61`	`70`	`"validators": [],`
`62`	`71`	`"translatable": true`
	`72`	`+ },`
	`73`	`+ "_iconClass": {`
	`74`	`+ "type": "string",`
	`75`	`+ "required": false,`
	`76`	`+ "default": "icon-controls-down",`
	`77`	`+ "title": "Button icon class",`
	`78`	`+ "inputType": "Text",`
	`79`	`+ "validators": [],`
	`80`	`+ "help": "CSS class name to be applied to the scroll prompt button icon."`
`63`	`81`	`}`
`64`	`82`	`}`
`65`	`83`	`}`
`@@ -85,6 +103,15 @@`
`85`	`103`	`"inputType": "Text",`
`86`	`104`	`"validators": [],`
`87`	`105`	`"translatable": true`
	`106`	`+ },`
	`107`	`+ "_iconClass": {`
	`108`	`+ "type": "string",`
	`109`	`+ "required": false,`
	`110`	`+ "default": "icon-controls-down",`
	`111`	`+ "title": "Button icon class",`
	`112`	`+ "inputType": "Text",`
	`113`	`+ "validators": [],`
	`114`	`+ "help": "CSS class name to be applied to the scroll prompt button icon."`
`88`	`115`	`}`
`89`	`116`	`}`
`90`	`117`	`}`
`@@ -110,6 +137,15 @@`
`110`	`137`	`"inputType": "Text",`
`111`	`138`	`"validators": [],`
`112`	`139`	`"translatable": true`
	`140`	`+ },`
	`141`	`+ "_iconClass": {`
	`142`	`+ "type": "string",`
	`143`	`+ "required": false,`
	`144`	`+ "default": "icon-controls-down",`
	`145`	`+ "title": "Button icon class",`
	`146`	`+ "inputType": "Text",`
	`147`	`+ "validators": [],`
	`148`	`+ "help": "CSS class name to be applied to the scroll prompt button icon."`
`113`	`149`	`}`
`114`	`150`	`}`
`115`	`151`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,12 @@`
`24`	`24`	`"type": "string",`
`25`	`25`	`"title": "Instruction text",`
`26`	`26`	`"default": "{{_globals._extensions._scrollPrompt.scrollDown}}"`
	`27`	`+ },`
	`28`	`+ "_iconClass": {`
	`29`	`+ "type": "string",`
	`30`	`+ "title": "Button icon class",`
	`31`	`+ "description": "CSS class name to be applied to the scroll prompt button icon.",`
	`32`	`+ "default": "icon-controls-down"`
`27`	`33`	`}`
`28`	`34`	`}`
`29`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,12 @@`
`51`	`51`	`"type": "string",`
`52`	`52`	`"title": "Instruction text",`
`53`	`53`	`"default": "{{_globals._extensions._scrollPrompt.scrollDown}}"`
	`54`	`+ },`
	`55`	`+ "_iconClass": {`
	`56`	`+ "type": "string",`
	`57`	`+ "title": "Button icon class",`
	`58`	`+ "description": "CSS class name to be applied to the scroll prompt button icon.",`
	`59`	`+ "default": "icon-controls-down"`
`54`	`60`	`}`
`55`	`61`	`}`
`56`	`62`	`}`