Replace Message with Alert, use in Comment (#1373)

* Convert container padding values to tokens

* Add Alert component

* Remove Message component

* Integrate alert into comment

.changeset/neat-stingrays-fry.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Show alert in unapproved comments

.changeset/tender-seas-film.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': major
+---
+
+Replace Message component with Alert component that takes into account inline and full-width use cases and responds to themes

src/components/alert/alert.scss

@@ -0,0 +1,91 @@
+@use '../../compiled/tokens/scss/color';
+@use '../../compiled/tokens/scss/ease';
+@use '../../compiled/tokens/scss/scale';
+@use '../../compiled/tokens/scss/size';
+@use '../../compiled/tokens/scss/transition';
+@use '../../mixins/focus';
+@use '../../mixins/ms';
+
+.c-alert {
+  background: var(--theme-color-background-secondary);
+  border-radius: size.$border-radius-medium;
+  color: var(--theme-color-text-emphasis);
+}
+
+/// When alert is meant to span the full viewport width, we omit its rounded
+/// corners to avoid awkward counter spaces where the background shows through
+/// those corners.
+.c-alert--full-width {
+  border-radius: 0;
+}
+
+/// We use a separate inner element so we can constrain it when the alert is
+/// full-width without having to factor in the size of the optional dismissal
+/// control.
+///
+/// We lay out elements using CSS Grid to avoid relying on negative margins
+/// so that the dismissal control's interactive area will reach the element's
+/// edges.
+///
+/// The spacing here involves more "magic" numbers than I wanted it to, but
+/// since the default container is pretty subtle neither the standard container
+/// padding nor control padding felt quite right. We may want to revisit that
+/// in the future.
+.c-alert__inner {
+  display: grid;
+  grid-column-gap: ms.step(1);
+  grid-template-areas:
+    '. . dismiss'
+    '. content dismiss'
+    '. . dismiss';
+  grid-template-columns: 0 1fr minmax(0, auto);
+  grid-template-rows: ms.step(-1) minmax(0, auto) ms.step(-1);
+
+  /// We only bother constraining this element when it's full-width.
+  .c-alert--full-width & {
+    margin: 0 auto;
+    max-width: size.$max-width-spread;
+  }
+}
+
+.c-alert__content {
+  grid-area: content;
+}
+
+/// Reset the dismissal button's appearance and center-align its content
+.c-alert__dismiss {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: size.$border-radius-medium;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  grid-area: dismiss;
+  justify-content: center;
+  margin: 0;
+  // This is a magic number but it just feels right, y'know?
+  min-width: ms.step(5);
+  padding: 0;
+
+  @include focus.focus-visible {
+    box-shadow: 0 0 0 size.$edge-large color.$brand-primary-lighter;
+  }
+}
+
+/// We apply the transition effects to the icon so the button itself won't break
+/// outside of the alert, which is particularly important when it's full-width.
+.c-alert__dismiss-icon {
+  transition: filter transition.$slow ease.$out,
+    transform transition.$quick ease.$out;
+
+  .c-alert__dismiss:hover & {
+    transform: scale(scale.$effect-grow);
+  }
+
+  .c-alert__dismiss:active & {
+    transform: scale(scale.$effect-shrink);
+  }
+}

src/components/alert/alert.stories.mdx

@@ -0,0 +1,81 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+import template from './alert.twig';
+
+<Meta
+  title="Components/Alert"
+  argTypes={{
+    message: { type: { name: 'string' } },
+    dismissable: { type: { name: 'boolean' } },
+    full_width: { type: { name: 'boolean' } },
+  }}
+/>
+
+# Alert
+
+A simple container for displaying important messages to the user such as errors, changes in state or confirmation of actions taken.
+
+## Status
+
+This component is still a work in progress. The following features are not yet implemented:
+
+- The dismissal control does not actually dismiss the alert.
+
+## Basic usage
+
+<Canvas>
+  <Story
+    name="Basic"
+    args={{ message: 'Your comment is awaiting moderation.' }}
+  >
+    {(args) => template(args)}
+  </Story>
+</Canvas>
+
+## Dismissable
+
+When `dismissable` is `true`, a close button will display to the right of the message.
+
+<Canvas>
+  <Story
+    name="Dismissable"
+    args={{
+      message: 'Your action was completed successfully! 🎉',
+      dismissable: true,
+    }}
+  >
+    {(args) => template(args)}
+  </Story>
+</Canvas>
+
+## Full width
+
+By default, alerts assume they'll display within page content. For alerts meant to fill the full browser width, use the `c-alert--full-width` modifier class or set the `full_width` template property to `true`. This removes the rounded corners (which would awkwardly interact with viewport edges) and constrains the content to the value of [our `size.$max-width-spread` token](/docs/design-tokens-layout--page).
+
+<Canvas>
+  <Story
+    name="Full width"
+    parameters={{
+      layout: 'fullscreen',
+      paddings: { disable: true },
+    }}
+    args={{
+      message: 'You appear to be offline. 🤔',
+      full_width: true,
+      dismissable: true,
+    }}
+  >
+    {(args) => template(args)}
+  </Story>
+</Canvas>
+
+## Template Properties
+
+- `class` (string)
+- `dismissable` (boolean, default `false`)
+- `full_width` (boolean, default `false`)
+- `message` (string, default `'Hello world!'`)
+- `tag_name` (string, default `'div'`)
+
+## Template Blocks
+
+- `content`

src/components/alert/alert.twig

@@ -0,0 +1,23 @@
+{% set tag_name = tag_name|default('div') %}
+
+<{{ tag_name }} class="c-alert{% if full_width %} c-alert--full-width{% endif %}{% if class %} {{ class }}{% endif %}">
+  <div class="c-alert__inner">
+    <div class="c-alert__content">
+      {% block content %}
+        <p>
+          {{message|default('Hello world!')}}
+        </p>
+      {% endblock %}
+    </div>
+    {% if dismissable %}
+      <button class="c-alert__dismiss" type="button">
+        {% include '@cloudfour/components/icon/icon.twig' with {
+          class: 'c-alert__dismiss-icon',
+          name: 'x',
+          aria_hidden: true,
+        } %}
+        <span class="u-hidden-visually">Dismiss alert</span>
+      </button>
+    {% endif %}
+  </div>
+</{{ tag_name }}>

src/components/comment/comment.stories.mdx

@@ -13,7 +13,6 @@ Displays a single comment in a comment thread, optionally with replies. Multiple
 This component is still a work in progress. The following features are still in development:
 
 - Indicating when a comment's author is a Cloud Four team member.
-- Displaying a message when a comment is not yet approved.
 - Integrating the comment reply form.
 - Adding blocks to the template to allow for more customization.
 
@@ -33,6 +32,16 @@ This information may be passed to the component as a `comment` object matching t
   <Story name="Single">{template({ comment: makeComment() })}</Story>
 </Canvas>
 
+## Unapproved
+
+If `comment.approved` is not `true`, an [Alert](/docs/components-alert--basic) will indicate that the comment is not yet approved.
+
+<Canvas>
+  <Story name="Unapproved">
+    {template({ comment: makeComment({ approved: false }) })}
+  </Story>
+</Canvas>
+
 ## With source
 
 Additionally, a `source` object may be passed to the template consisting of a `url` and `name`. This is helpful if integrating [webmentions](https://indieweb.org/Webmention) into comment threads.

src/components/comment/comment.twig

@@ -19,6 +19,11 @@
     class: 'c-comment__content o-rhythm--condensed'
   } %}
     {% block content %}
+      {% if not comment.approved %}
+        {% include '@cloudfour/components/alert/alert.twig' with {
+          message: 'This comment is awaiting moderation.'
+        } only %}
+      {% endif %}
       {{comment.comment_content|raw}}
     {% endblock %}
   {% endembed %}

src/components/comment/demo/data.ts

@@ -75,7 +75,11 @@ const placeImgCategories = ['animals', 'arch', 'nature', 'people', 'tech'];
 
 const jabber = new Jabber(themeWords, 1.5);
 
-export const makeComment = ({ isChild = false, replies = 0 } = {}) => {
+export const makeComment = ({
+  isChild = false,
+  replies = 0,
+  approved = true,
+} = {}) => {
   const id = uniqueId();
   const paragraphs = [];
   const paragraphCount = random(1, 2);
@@ -95,6 +99,7 @@ export const makeComment = ({ isChild = false, replies = 0 } = {}) => {
     comment_content: content,
     is_child: isChild,
     children: [] as any,
+    approved,
   };
 
   if (replies > 0) {