From 5455b608d481a7e43b2205518c083481ed635bda Mon Sep 17 00:00:00 2001
From: Brad Simpson <brad.simpson@kineo.com>
Date: Mon, 29 Jan 2024 10:33:35 -0700
Subject: [PATCH] New: Add _isRound option for images (fixes #174)

---
 README.md                    | 2 ++
 example.json                 | 1 +
 less/gmcq.less               | 7 +++++++
 properties.schema            | 9 +++++++++
 schema/component.schema.json | 6 ++++++
 templates/gmcq.jsx           | 2 ++
 6 files changed, 27 insertions(+)

diff --git a/README.md b/README.md
index e55db30..a7b8cb1 100644
--- a/README.md
+++ b/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.
diff --git a/example.json b/example.json
index 9a5f75a..9b56fb1 100644
--- a/example.json
+++ b/example.json
@@ -21,6 +21,7 @@
         "_canShowMarking": true,
         "_recordInteraction": true,
         "_columns": 3,
+        "_isRound": false,
         "_items": [
             {
                 "text": "This is option 1.",
diff --git a/less/gmcq.less b/less/gmcq.less
index 4434dc7..5cad793 100644
--- a/less/gmcq.less
+++ b/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 {
diff --git a/properties.schema b/properties.schema
index e0c4dbf..2878e1d 100644
--- a/properties.schema
+++ b/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,
diff --git a/schema/component.schema.json b/schema/component.schema.json
index 39b2073..7c13f8d 100644
--- a/schema/component.schema.json
+++ b/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",
diff --git a/templates/gmcq.jsx b/templates/gmcq.jsx
index ce91319..8aaedd6 100644
--- a/templates/gmcq.jsx
+++ b/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
             ])}