feat(#2278): add modal drawer doc

[vanessatran-ddi]

Modal drawer document.

Already handled the lts version page of drawer.

[netlify]

✅ Deploy Preview for abgov-ui-component-docs ready!

Name	Link
🔨 Latest commit	3cf52fd
🔍 Latest deploy log	https://app.netlify.com/sites/abgov-ui-component-docs/deploys/6810fb2d212ef90008d911bd
😎 Deploy Preview	https://deploy-preview-331--abgov-ui-component-docs.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.

[vanessatran-ddi]

Hi @syedszeeshan and @twjeffery can you help me review this PR whenever you have time? Thank you!

[syedszeeshan]

Hi @syedszeeshan and @twjeffery can you help me review this PR whenever you have time? Thank you!

Sure I will do this ASAP.

[syedszeeshan]

Tested locally, working good.

Code Review done.

[twjeffery]

@vanessatran-ddi

A couple content changes:

Badge label

• on LTS: badge (type=important) in side menu on drawer should say "V6" in React, "V4" in Angular

• on latest version: badge (type=success) in side menu on drawer should say "New"

Content in callout on Drawer page

• use callout (size=medium)
• callout heading should say: "Drawer component not available in this version"
• callout content should say: "This component is only available in V4 of the design system components. View upgrade guide" 
(V6 for React)

[vanessatran-ddi]

Thank you @twjeffery I will work on your feedback. Also @chrisolsen noticed that the slide animation when drawer opened seems not smooth. I doubt it is because the drawer is inside the Sandbox. I will draft this PR and will move it out from the sandbox. Once I finished I will ping you and @syedszeeshan too.

[vanessatran-ddi]

Hi @twjeffery I addressed the comment above. Please help me review again whenever you have time.
@syedszeeshan I rebased vs alpha, so if you have a chance to look at the code and review again.
@chrisolsen I moved the drawer out of the sandbox and the animation when we open/close the drawer is back as expected.

[twjeffery]

@vanessatran-ddi

Max size property

The max size does not seem to be working when max-size > 100vw (left and right drawer) or 100vh (bottom drawer). Drawer will still overflow screen width.

Screen.Recording.2025-04-28.at.9.19.55.PM.mov

Animation on drawer close

Did we lose the animation of the drawer animating out when closing? It now just disappears when it's closed, I thought we had it animating back out the side it came in.

[vanessatran-ddi]

@vanessatran-ddi

Max size property

The max size does not seem to be working when max-size > 100vw (left and right drawer) or 100vh (bottom drawer). Drawer will still overflow screen width.

Screen.Recording.2025-04-28.at.9.19.55.PM.mov

Animation on drawer close

Hi @twjeffery I created an issue so we can follow up GovAlta/ui-components#2677
Unfortunately the maxsize comment can be addressed only on ui-components side.

Did we lose the animation of the drawer animating out when closing? It now just disappears when it's closed, I thought we had it animating back out the side it came in.
I created an example on stackblitz and looks like this is something I missed on ui-components side. I will create an issue for it. So sorry about that.

https://stackblitz.com/edit/vitejs-vite-cl2dvhee?file=src%2Fcomponents%2Fmodal-drawer%2FSimpleModalDrawer.tsx