PUPIL-442: Match question UI

[carlmw]

How to review this PR

Leave this text block for the reviewer

• Check component hierarchy is followed correctly
• Check the design Heuristics have been followed
• Check naming conventions have been applied
• Check for these gotchyas:
  • Missing exports for Oak components
  • Accidental export of Internal components
  • Snapshots of unexpected components have been modified
  • Circular dependencies
  • Code duplication (via not using base components)
  • Non-functional storybook for this or related components
  • Sensitve files changed eg. atoms, or style tokens
  • Relative imports
  • Default exports

Add your PR description below

Adds UI for drag and drop match questions.

Link to the design doc

https://www.figma.com/file/G7z5ufo2T0CHk14CkadeuB/Pupils-high-fidelity-designs?type=design&node-id=6942-85574&mode=dev

A link to the component in the deployment preview

OakQuizMatch https://deploy-preview-129--lively-meringue-8ebd43.netlify.app/?path=/docs/components-organisms-pupil-oakquizmatch--docs

Makes changes to the drag and drop components to support both order and match

OakDraggable https://deploy-preview-129--lively-meringue-8ebd43.netlify.app/?path=/docs/components-molecules-oakdraggable--docs
OakDroppable https://deploy-preview-129--lively-meringue-8ebd43.netlify.app/?path=/docs/components-molecules-oakdroppable--docs

Testing instructions

ACs

• Items can be dragged into slots
• Dragging an item onto an occupied slot the occupier is returned to the holding box
• Items can be dragged back into the holding box
• Items can be moved with similar keyboard controls to the option question UI

[notion-workspace]

✏️ Prototype Match Design with @dnd-kit

[netlify]

✅ Deploy Preview for lively-meringue-8ebd43 ready!

Name	Link
🔨 Latest commit	5d09e06
🔍 Latest deploy log	https://app.netlify.com/sites/lively-meringue-8ebd43/deploys/65f1841a8625d40008938953
😎 Deploy Preview	https://deploy-preview-129--lively-meringue-8ebd43.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[messmike]

@carlmw looking & working great!

[rightsaidjames]

Looks great! Tested on desktop and on mobile, with keyboard controls and with screen reader + keyboard. Hopefully minimal testing will be needed when integrated into OWA, but I might cast a slightly wider net for due diligence purposes.