New: Add _isRound option for images (fixes #174)

README.md

@@ -69,6 +69,8 @@ guide the learner’s interaction with the component.
 
 **\_columns** (number): Defines the number of columns wide the **\_items** are displayed in. If the value of **\_columns** is `2`, each **\_items** will be 50% wide. Similarly, if the value of **\_columns** is `3`, each **\_items** will be 33.3% wide. In mobile view, the width of each **\_items** is 50%.
 
+**\_isRound** (boolean): If set to `true`, the item images will inherit a 50% border radius. Ideal for use with images that are square that are required to be round. The default is `false`.
+
 **\_items** (array): Each *item* represents one choice for the multiple choice question and contains values for **text**, **\_shouldBeSelected**, **feedback**, and **\_graphic**.
 
 >**text** (string): Optional text that is displayed as part of the multiple choice option.

example.json

@@ -21,6 +21,7 @@
         "_canShowMarking": true,
         "_recordInteraction": true,
         "_columns": 3,
+        "_isRound": false,
         "_items": [
             {
                 "text": "This is option 1.",

less/gmcq.less

@@ -65,6 +65,13 @@
     display: none;
   }
 
+  // Round image option
+  &.is-round &__image-container {
+    display: block;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
   // GMCQ item icons
   // --------------------------------------------------
   &__answer-icon.is-radio .icon {

properties.schema

@@ -267,6 +267,15 @@
       "validators": ["number"],
       "help": "Set the number of columns. If value is '0', component uses the default layout."
     },
+    "_isRound": {
+      "type": "boolean",
+      "required": false,
+      "default": false,
+      "title": "Use circular item images",
+      "inputType": "Checkbox",
+      "validators": [],
+      "help": "If enabled, a 50% border radius will be applied to the item images, making them round."
+    },
     "_selectable": {
       "type": "number",
       "required": true,

schema/component.schema.json

@@ -195,6 +195,12 @@
           "description": "Set the number of columns. If value is '0', component uses the default layout",
           "default": 0
         },
+        "_isRound": {
+          "type": "boolean",
+          "title": "Use circular item images",
+          "description": "If enabled, a 50% border radius will be applied to the item images, making them round.",
+          "default": false
+        },
         "_selectable": {
           "type": "number",
           "title": "Selectable items",

templates/gmcq.jsx

@@ -16,6 +16,7 @@ export default function Gmcq(props) {
     _shouldShowMarking,
     _isRadio,
     _columns,
+    _isRound,
     displayTitle,
     body,
     instruction,
@@ -52,6 +53,7 @@ export default function Gmcq(props) {
           <div
             className={classes([
               `gmcq-item item-${index}`,
+              _isRound && 'is-round',
               (_shouldShowMarking && _shouldBeSelected) ? 'is-correct' : null,
               (_shouldShowMarking && !_shouldBeSelected) ? 'is-incorrect' : null
             ])}