Add Callout component

[SerhiiTsybulskyi]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #50

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Variants

Custom Icon

Custom Text

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
reablocks-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 11, 2024 6:25am

[netlify]

✅ Deploy Preview for reablocks-storybook ready!

Name	Link
🔨 Latest commit	f5a37a8
🔍 Latest deploy log	https://app.netlify.com/sites/reablocks-storybook/deploys/6667ed9a72b5410008729390
😎 Deploy Preview	https://deploy-preview-225--reablocks-storybook.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.

[amcdnl]

Need to add docs once we release

[ghsteff]

an alternative to making a separate component for each variant could be to map the variants to their default icons and also give the ability to override that with the icon prop.

// Callout.tsx

const icons = {
  default: null,
  success: <SuccessIcon />,
  error: <ErrorIcon />,
  warning: <WarningIcon />,
  info: <InfoIcon />
}

and then render the icon like

 {icon ?? icons[variant]}

[SerhiiTsybulskyi]

an alternative to making a separate component for each variant could be to map the variants to their default icons and also give the ability to override that with the icon prop.

// Callout.tsx

const icons = {
  default: null,
  success: <SuccessIcon />,
  error: <ErrorIcon />,
  warning: <WarningIcon />,
  info: <InfoIcon />
}

and then render the icon like

 {icon ?? icons[variant]}

I've made solution which you described (but with switch/case for icon) first time, but Austin ask to extract it on several component to make it cleaner, that why I updated it to have several components