Fix: Add 'bodyAfter' property for including text content after the li…

…st elements (fixes #60)

README.md

@@ -46,6 +46,9 @@ Controls the vertical alignment of the list item image or bullet alongside the t
 * `center`: Aligns the list item image or bullet to the center of the container vertically. If `_columns` is used then this setting aligns the list item image or bullet horizontally.
 * `end`: Aligns the list item image or bullet to the bottom of the container. If `_columns` is used then this setting aligns the list item image or bullet to the opposite side of the natural page direction. In a left-to-right course this is right by default.
 
+### bodyAfter (string):
+This is the body text that will appear after the list items.
+
 ### \_items (object):
 Multiple items may be created. Each item represents one list item for this component. It contains the following settings:
 

example.json

@@ -8,7 +8,8 @@
         "title": "List component",
         "displayTitle": "List component",
         "body": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.<br/><br/>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
-        "instruction": "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.",
+        "bodyAfter": "",
+        "instruction": "",
         "_columns": 0,
         "_orderedList": false,
         "_animateList": false,

less/list.less

@@ -51,6 +51,12 @@
   &.bullet-align-start &-item__inner { align-items: flex-start; }
   &.bullet-align-center &-item__inner { align-items: center; }
   &.bullet-align-end &-item__inner { align-items: flex-end; }
+
+  // Content after the widget
+  // --------------------------------------------------
+  &__body-after {
+    margin-top: @component-body-margin;
+  }
 }
 
 .list-item {

properties.schema

@@ -83,6 +83,16 @@
       "title": "Image or bullet alignment",
       "help": "Controls the vertical alignment of the list item image or bullet alongside the text content. If the `_columns` property has a value above `0` then this properties alignment switches from vertical to horizontal. Refer to the plugins readme for further info."
     },
+    "bodyAfter": {
+      "type": "string",
+      "required": false,
+      "default": "",
+      "inputType": "Text",
+      "validators": [],
+      "title": "Body text after list items",
+      "help": "This is the body text that will appear after the list items.",
+      "translatable": true
+    },
     "_items": {
       "type": "array",
       "required": true,

schema/component.schema.json

@@ -85,6 +85,15 @@
           ],
           "_backboneForms": "Select"
         },
+        "bodyAfter": {
+          "type": "string",
+          "title": "Body text after list items",
+          "description": "This is the body text that will appear after the list items.",
+          "default": "",
+          "_adapt": {
+            "translatable": true
+          }
+        },
         "_items": {
           "type": "array",
           "title": "List Items",

templates/list.jsx

@@ -7,7 +7,8 @@ export default function List({ _columns, _orderedList, _items, ...props }) {
   const hasColumns = _columns > 1;
   const {
     _id,
-    _ariaLevel
+    _ariaLevel,
+    bodyAfter
   } = props;
   const itemAriaLevel = _.isNumber(_ariaLevel) && _ariaLevel !== 0 ? _ariaLevel + 1 : _ariaLevel;
   return (
@@ -69,6 +70,11 @@ export default function List({ _columns, _orderedList, _items, ...props }) {
           )}
         </div>
       </div>
+      {bodyAfter &&
+        <div className="component__body-after list__body-after">
+          <div className="component__body-after-inner list__body-after-inner" dangerouslySetInnerHTML={{ __html: compile(bodyAfter, props) }} />
+        </div>
+      }
     </div>
   );
 }