Replace Message with Alert, use in Comment

[tylersticka]

Overview

The Comment component introduced in #1370 lacked a message for communicating when a comment had been submitted but was still in moderation. The live version of this feature used a component we called Message, which had been recreated in #604. But this pattern's size made it appear more unwieldy in that context, and it didn't seem to respond to our themes. I also found its name somewhat confusing: A comment is a type of message, after all, so it felt a bit off to say "display a message inside of a comment."

So this PR removes Message, introduces a new Alert pattern, and integrates that into Comment for the moderation message feature.

Screenshots

Testing

On the deploy preview…

• Alert
• Comment ▸ Unapproved

---

• See Add comment thread pattern - dev. #1238

[changeset-bot]

🦋 Changeset detected

Latest commit: ced0f4f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Major

Not sure what this means? Click here to learn what changesets are.

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

[Paul-Hebert]

This looks good!

My one question is whether the alert component should support HTML being passed in instead of text? (So we could include a link, icon, etc.)

If we want to support that use case we may want to replace the message property with a content slot. If we don't want to support that use case then this looks good to go!

[tylersticka]

My one question is whether the alert component should support HTML being passed in instead of text? (So we could include a link, icon, etc.)

If we want to support that use case we may want to replace the message property with a content slot. If we don't want to support that use case then this looks good to go!

@Paul-Hebert Either is supported!

cloudfour.com-patterns/src/components/alert/alert.twig

Lines 5 to 11 in ced0f4f

	<div class="c-alert__content">
	{% block content %}
	<p>
	{{message|default('Hello world!')}}
	</p>
	{% endblock %}
	</div>

[Paul-Hebert]

Oh, got it. I'd missed that. Awesome! Looks good!