ENG-692 Add OakModal

[carlmw]

How to review this PR

• 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

Screen.Recording.2024-03-27.at.12.19.54.mov

Link to the design doc

https://www.figma.com/file/8uwqYUIpTpyqdpSAVVV0g9/Oak-DS-Components?type=design&node-id=847-918612&mode=dev

A link to the component in the deployment preview

https://deploy-preview-137--lively-meringue-8ebd43.netlify.app/?path=/docs/components-molecules-oakmodal--docs

Testing instructions

ACs

• Takes a11y cues from https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/
  • Keyboard support
  • Focus locked within the modal when open
  • Relevant aria roles applied
• Responsive at the 3 Oak breakpoints, mobile, tablet and desktop
• Exported from oak-components as a molecule
• Animates in from the left?
• Footer sticks to the bottom of the viewport
  • Body can scroll
  • “Background” page cannot be scrolled while modal is active

[notion-workspace]

🛝 Slide out modal component

[netlify]

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

Name	Link
🔨 Latest commit	5ca3942
🔍 Latest deploy log	https://app.netlify.com/sites/lively-meringue-8ebd43/deploys/6605421cbfb58b0008086158
😎 Deploy Preview	https://deploy-preview-137--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.

[kimon-satan]

No blockers from me .