Fix: Set default for _imageAlignment for popup images (fixes #301)

[kirsty-hames]

Fixes #301

Fix

• Provide a default display of _imageAlignment: "right" in the instance _imageAlignment isn't set. The schemas already define a default value of right.

Testing

1. In component.json, include a Hotgraphic instance containing items with _imageAlignment left, right and blank values. For example:

  {
    "_id": "c-130",
    "_parentId": "b-120",
    "_type": "component",
    "_component": "hotgraphic",
    "_classes": "",
    "_layout": "full",
    "title": "Hot Graphic",
    "displayTitle": "Hot Graphic",
    "body": "You can add interactivity to an image by using the <b>Hot Graphic</b>. This component allows you to position icons over an image. When an icon is selected, content associated with its corresponding location is displayed in a window over the image. This component will fall back to a <b>Narrative</b> when viewed on mobile.<br><br>This component is always spanned.",
    "instruction": "Select the icons to find out more.",
    "mobileBody": "This is optional body text that will be shown when viewed on mobile.",
    "mobileInstruction": "Select the plus icon followed by the next arrow to find out more.",
    "_comment": "setCompletionOn = inview | allItems",
    "_setCompletionOn": "allItems",
    "_canCycleThroughPagination": false,
    "_hidePagination": false,
    "_isNarrativeOnMobile": true,
    "_useNumberedPins": false,
    "_useGraphicsAsPins": false,
    "_isRound": false,
    "_graphic": {
      "src": "course/en/images/hotgraphic.png",
      "alt": "",
      "attribution": "Copyright © 2024"
    },
    "_items": [
      {
        "_top": 42,
        "_left": 8.5,
        "title": "Hot Graphic item 1",
        "body": "This is display text associated with item 1.",
        "strapline": "Hot Graphic strapline 1",
        "_imageAlignment": "right",
        "_comment": "Supported classes = 'hide-desktop-image' | 'hide-popup-image'. Additional classes can be used but they must be predefined in one of the Less files",
        "_classes": "",
        "_graphic": {
          "src": "course/en/images/single-width.png",
          "alt": "",
          "_classes": ""
        },
        "_tooltip": {
          "_isEnabled": false,
          "text": "{{ariaLabel}}"
        }
      },
      {
        "_top": 62,
        "_left": 26.5,
        "title": "Hot Graphic item 2",
        "body": "This is display text associated with item 2.",
        "strapline": "Hot Graphic strapline 2",
        "_imageAlignment": "left",
        "_classes": "",
        "_graphic": {
          "src": "course/en/images/single-width.png",
          "alt": "",
          "_classes": ""
        },
        "_tooltip": {
          "_isEnabled": false,
          "text": "{{ariaLabel}}"
        }
      },
      {
        "_top": 62,
        "_left": 49,
        "title": "Hot Graphic item 3",
        "body": "This is display text associated with item 3.",
        "strapline": "Hot Graphic strapline 3",
        "_imageAlignment": "",
        "_classes": "",
        "_graphic": {
          "src": "course/en/images/single-width.png",
          "alt": "",
          "_classes": ""
        },
        "_tooltip": {
          "_isEnabled": false,
          "text": "{{ariaLabel}}"
        }
      }
    ],
    "_pageLevelProgress": {
      "_isEnabled": true,
      "_isCompletionIndicatorEnabled": true
    }
  },

2. Review the Hotgraphic in your course and ensure the item popup display matches the _imageAlignment value set. The blank value should default to right aligned display.

[cahirodoherty-learningpool]

👀

[joe-allen-89]

👍

[github-actions]

🎉 This PR is included in version 6.11.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀