Add Badge component, pencil icon, demo roles to Comment (#1379)

* Add Badge component

* Add pencil icon

* Integrate role Badge into Comment

Author: tylersticka

.changeset/kind-beans-fry.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add 'pencil' icon

.changeset/loud-ligers-remember.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add Badge component

src/assets/icons/pencil.svg

@@ -0,0 +1,44 @@
+@use "../../compiled/tokens/scss/font-weight";
+@use "../../compiled/tokens/scss/line-height";
+@use "../../compiled/tokens/scss/size";
+@use '../../mixins/ms';
+@use 'sass:math';
+
+.c-badge {
+  align-items: center;
+  background: var(--theme-color-background-secondary);
+  border-radius: size.$border-radius-medium;
+  color: var(--theme-color-text-muted);
+  display: inline-flex;
+  font-size: ms.step(-1);
+  font-weight: font-weight.$medium;
+  // Because the text in a badge does not wrap, we can avoid icons accidentally
+  // increasing the height as often by setting this here instead of relying on
+  // vertical padding.
+  height: ms.step(2);
+  line-height: line-height.$tighter;
+  // We only apply half padding because the padding feels too tight around icons
+  // but not around the label content. We'll apply the other half of padding on
+  // the content element itself.
+  padding: 0 math.div(size.$padding-cell-horizontal, 2);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.c-badge__content {
+  &:first-child {
+    padding-left: math.div(size.$padding-cell-horizontal, 2);
+  }
+
+  &:last-child {
+    padding-right: math.div(size.$padding-cell-horizontal, 2);
+  }
+}
+
+.c-badge__extra {
+  align-items: center;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  min-width: ms.step(2);
+}

src/components/badge/badge.scss

@@ -0,0 +1,46 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+import template from './badge.twig';
+
+<Meta
+  title="Components/Badge"
+  argTypes={{
+    label: { type: { name: 'string' } },
+    icon: {
+      type: { name: 'string' },
+      control: {
+        type: 'select',
+        options: ['', 'check', 'heart', 'pencil'],
+      },
+      defaultValue: '',
+    },
+  }}
+/>
+
+# Badge
+
+Badges help provide just a smidge more context to repetitive or serialized content. For example, a badge can help the reader identify when [a comment on an article is by the author of that article](/docs/components-comment--role-author#role-badges).
+
+<Canvas>
+  <Story name="Basic" args={{ label: 'Hello' }}>
+    {(args) => template(args)}
+  </Story>
+</Canvas>
+
+## With icon
+
+<Canvas>
+  <Story name="With icon" args={{ icon: 'check', label: 'Verified' }}>
+    {(args) => template(args)}
+  </Story>
+</Canvas>
+
+## Template Properties
+
+- `class` (string)
+- `icon` (string): The name of one of [our icons](/docs/design-icons--page) to display.
+- `message` (string, default `'Label'`)
+
+## Template Blocks
+
+- `content`: The main label content, typically the value of `message`.
+- `extra`: A visual extra preceding the content, typically populated by an icon if `icon` is set.

src/components/badge/badge.stories.mdx

@@ -0,0 +1,23 @@
+{% set _extra_content %}
+  {% block extra %}
+    {% if icon %}
+      {% include '@cloudfour/components/icon/icon.twig' with {
+        name: icon,
+        aria_hidden: 'true',
+      } only %}
+    {% endif %}
+  {% endblock %}
+{% endset %}
+
+<span class="c-badge{% if class %} {{class}}{% endif %}">
+  {% if _extra_content|trim %}
+    <span class="c-badge__extra">
+      {{_extra_content}}
+    </span>
+  {% endif %}
+  <span class="c-badge__content">
+    {% block content %}
+      {{label|default('Label')}}
+    {% endblock %}
+  </span>
+</span>

src/components/badge/badge.twig

@@ -12,9 +12,8 @@ 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.
 - Integrating the comment reply form.
-- Adding blocks to the template to allow for more customization.
+- Finalizing this pattern's blocks and properties for theme integration.
 
 ## Single
 
@@ -32,6 +31,22 @@ This information may be passed to the component as a `comment` object matching t
   <Story name="Single">{template({ comment: makeComment() })}</Story>
 </Canvas>
 
+## Role badges
+
+It is helpful for context within a discussion to know when a commentor is the original post author or a Cloud Four team member. The mechanics of this feature are still in development, but these stories show how these roles should appear using [the Badge component](/docs/components-badge--basic).
+
+<Canvas>
+  <Story name="Role: Author">
+    {template({ comment: makeComment(), demo_post_author: true })}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story name="Role: Cloud Four">
+    {template({ comment: makeComment(), demo_cloud_four_member: true })}
+  </Story>
+</Canvas>
+
 ## Unapproved
 
 If `comment.approved` is not `true`, an [Alert](/docs/components-alert--basic) will indicate that the comment is not yet approved.

src/components/comment/comment.stories.mdx

@@ -4,6 +4,33 @@
   <header class="c-comment__header">
     <h{{_heading_depth}} class="c-comment__heading">
       {{comment.author.name}}
+      {#
+        TODO: Replace `demo_post_author` and `demo_cloud_four_member` with
+        more meaningful blocks or properties once we have a better idea of how
+        we'll integrate role badging based on actual comment data.
+      #}
+      {% if demo_post_author %}
+        <span class="u-hidden-visually">(Article</span>
+        {% embed '@cloudfour/components/badge/badge.twig' with {
+          label: 'Author',
+          icon: 'pencil',
+        } only %}
+        {% endembed %}
+        <span class="u-hidden-visually">)</span>
+      {% elseif demo_cloud_four_member %}
+        <span class="u-hidden-visually">(Cloud Four</span>
+        {% embed '@cloudfour/components/badge/badge.twig' with {
+          label: 'Team'
+        } only %}
+          {% block extra %}
+            {% include '@cloudfour/assets/brand/logo.svg.twig' with {
+              class: 'c-icon',
+              aria_hidden: 'true',
+            } only %}
+          {% endblock %}
+        {% endembed %}
+        <span class="u-hidden-visually">Member)</span>
+      {% endif %}
       <span class="u-hidden-visually">
         {% if comment.is_child %}replied{% else %}said{% endif %}:
       </span>