Alert (Page) and Alert (Inline)

[amyrlam]

📌 Summary

Add Alert Page implementation (right now as the base Alert) with styling

📸 Screenshots

See https://hds-components-git-amy-alert-page-hashicorp.vercel.app/components/alert

🔗 External links

https://app.asana.com/0/1201630204387510/1201994286157139/f

---

👀 How to review

👉 Review by files changed

Reviewer's checklist:

• +1 Percy if applicable
• [N/A, merging into another branch] Confirm that PR has a changelog update via Changesets if needed

💬 Please consider using conventional comments when reviewing this PR.

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1201994286157143
  • https://app.asana.com/0/0/1201994286157139

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

hds-components – ./

🔍 Inspect: https://vercel.com/hashicorp/hds-components/8Ra9anNWnPASWrTJWrL4qtXKnYMS
✅ Preview: https://hds-components-git-amy-alert-page-hashicorp.vercel.app

hds-flight-website – ./

🔍 Inspect: https://vercel.com/hashicorp/hds-flight-website/2BezfVQMtMcBtJqDe5xP4wjh23u3
✅ Preview: https://hds-flight-website-git-amy-alert-page-hashicorp.vercel.app

[changeset-bot]

⚠️ No Changeset found

Latest commit: e01372d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[amyrlam]

@didoo @cveigt ready for another look, please LMK what you think: https://hds-components-git-amy-alert-page-hashicorp.vercel.app/components/alert

If you have code changes, feel free to suggest, commit to the branch, or make a new branch, whatever is easiest for you

I was thinking we could sync later this week once Alert (Compact), isDismissible, and some light testing in cloud-ui is done. I'll set it up, I made a ticket for me to set that up

[didoo]

@amyrlam in general the code is OK for me, I have left only a few comments.
don't know if you want to already merge this (in which case let me know and I'll approve) and continue to work in a new branch, or instead continue directly on this

[didoo]

@amyrlam notice: for now this works perfectly, but I've just realized that these icons can be filled or not depending if they are in the "compact" alert or not, so it's likely we'll have to move this mapping logic inside the get icon() method directly, and use the @type/this.type as an extra condition to determine which icon to use

@amyrlam @Dhaulagiri @MelSumner can you see now the power of moving the logic in the "right" place? can you imagine doing all these conditionals only at template level?

see how it was before

design-system/packages/components/addon/components/hds/alert/index.hbs

Lines 2 to 14 in dc93906

	{{#if (or @icon @color)}}
	<div class="hds-alert__icon">
	{{#if @icon}}
	<FlightIcon @name={{@icon}} @size="24" @isInlineBlock={{false}} />
	{{else if (or (eq @color "neutral") (eq @color "highlight"))}}
	<FlightIcon @name="info" @size="24" @isInlineBlock={{false}} />
	{{else if (eq @color "success")}}
	<FlightIcon @name="check-circle" @size="24" @isInlineBlock={{false}} />
	{{else if (eq @color "warning")}}
	<FlightIcon @name="alert-triangle" @size="24" @isInlineBlock={{false}} />
	{{else if (eq @color "critical")}}
	<FlightIcon @name="alert-octagon" @size="24" @isInlineBlock={{false}} />
	{{/if}}

[amyrlam]

We talked about ^^ in a meeting, I'll address the compact type shortly. I get what you're saying now. Compact type has a different mapping of which default icon it informs. It will have some .hbs logic as well, as certain elements will be hidden, but can discuss when up soon

[amyrlam]

@didoo let's merge this in to limit unnecessary branching? also for ease of code review

• please +1 code and percy, and feel free to merge it in
• or if you have other edits, feel free to make them to the branch directly and merge as not going to main?

[didoo]

As suggested by @amyrlam merging this in to limit unnecessary branching