feat: style of sandbox note

[twjeffery]

Updated styling to the "note" in the sandbox

• Added properties and styling to sandbox note to be able to use a callout or basic text
• Added callout note to "Warn user of a deadline" example on Modal component page

Can now use type, heading, and content properties to add a note as a callout

<Sandbox
             note={{
               type: "important",
               heading: "AlertDialog Accessibility",
               content: "Do not make the modal closeable or add any focusable elements before the action button when using an AlertDialog. This ensures that the screen reader will announce the full content."
             }}>

Can still use default note styling without callout

<Sandbox
             note={
               "Do not make the modal closeable or add any focusable elements before the action button when using an AlertDialog. This ensures that the screen reader will announce the full content."
             }>

[netlify]

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

Name	Link
🔨 Latest commit	4777287
🔍 Latest deploy log	https://app.netlify.com/sites/abgov-ui-component-docs/deploys/681bca92b0cd010008fce426
😎 Deploy Preview	https://deploy-preview-351--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.

[bdfranck]

Looks good! Just one small suggestion for using a shared type.

[bdfranck]

Testing

✅ When I add a note as a string, I see it as text.

💹 When I add a note as an object with a type, heading, and content; I can see it as a callout.

✅ I can add a note without a heading.

✅ I can add a note without a type.

✅ I can add a note without content.

✅ I see an error when I add an invalid type to a note.

[bdfranck]

Looks good! 👍