New: Allow any component to use mobileBody for smaller devices (fixes #538)

[swashbuck]

Fix #538

New

• Introduces the mobileBody property for component headers

Testing

1. Add a body and mobileBody value to any component.
2. Switch to mobile view (less than medium breakpoint) and ensure that body text uses mobileBody instead of body.
3. Switch back to desktop view (medium breakpoint or higher) and ensure that body text uses body instead of mobileBody.

Future consideration

Add mobileBody and mobileInstruction to the core component schemas. Then, remove them from the schemas of components like Hot Graphic and Narrative. Would require migration scripts.

[cahirodoherty-learningpool]

👀

[kirsty-hames]

This works as expected thanks @swashbuck.

Should we do the same for component.hbs body? I think Core wise, Media is the only component still using hbs templates.

[kirsty-hames]

Add mobileBody and mobileInstruction to the core component schemas. Then, remove them from the schemas of components like Hot Graphic and Narrative. Would require migration scripts.

Does this need raising as a separate issue so it's not forgotten when the PR is merged?

[swashbuck]

Does this need raising as a separate issue so it's not forgotten when the PR is merged?

@kirsty-hames Great idea. I've created issues for these two plugins.

adaptlearning/adapt-contrib-hotgraphic#308
adaptlearning/adapt-contrib-narrative#302

[swashbuck]

Should we do the same for component.hbs body? I think Core wise, Media is the only component still using hbs templates.

@kirsty-hames I've added mobileBody to component.hbs. However, it appears that the expectation is for individual plugins to determine whether body or mobileBody would be used (same for instruction and mobileInstruction). This is different from the header.jsx template which determines the appropriate property to use within the template itself.

So, for this to work in Media and other plugins that still use the older template, updates to the Media plugin's JS would be needed. The change in 2b565d8 will help to facilitate this, though.

[oliverfoster]

🎉 This PR is included in version 6.48.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀