Integrate reply Comment Form into Comment pattern

src/components/comment-form/comment-form.stories.mdx

@@ -51,12 +51,13 @@ The form used to add a comment to an article.
         logged_in_user: isLoggedIn ? tyler : undefined,
         log_out_url: '/logout',
         is_reply: isReply,
+        heading_id: 'leave-a-comment',
       });
     }}
   </Story>
 </Canvas>
 
-There is also a reply version of this component (`is_reply: true`), used to reply to an existing comment:
+There is also a reply version of this component (`is_reply: true`), used to reply to an existing comment. (You'll also want to modify `heading_tag`, `heading_id`, `heading_class`, and `heading_text`. When using the [Comment pattern](/docs/components-comment--with-reply-button) this will be done automatically.)
 
 <Canvas>
   <Story
@@ -84,6 +85,9 @@ There is also a reply version of this component (`is_reply: true`), used to repl
         logged_in_user: isLoggedIn ? tyler : undefined,
         log_out_url: '/logout',
         is_reply: isReply,
+        heading_id: 'reply-to-comment-100',
+        heading_tag: 'h4',
+        heading_text: 'Reply to John Doe',
       });
     }}
   </Story>
@@ -92,6 +96,10 @@ There is also a reply version of this component (`is_reply: true`), used to repl
 ## Template Properties
 
 - `class`: Append a class to the root element.
+- `heading_id`: A unique ID for your heading element. This will be used as the accessible name for the form.
+- `heading_tag`: The tag for your heading (defaults to `h2`).
+- `heading_text`: The text for your heading.
+- `heading_class`: An optional class for your heading.
 - `logged_in_user`: [user object](https://timber.github.io/docs/reference/timber-user/#properties) of the type:
 
   ```ts

src/components/comment-form/comment-form.twig

@@ -1,11 +1,18 @@
 <form
   class="c-comment-form{% if class %} {{class}}{% endif %}"
+  {% if heading_id %}aria-labelledby="{{ heading_id }}"{% endif %}
   {%- if action %}action="{{ action }}"{% endif -%}
   {%- if method %}method="{{ method }}"{% endif -%}
 >
   {% block prompt %}
-  <h2>Leave a Comment</h2>
-  <p>Please be kind, courteous and constructive. You may use simple HTML or <a href="https://en.support.wordpress.com/markdown-quick-reference">Markdown</a> in your comments. All fields are required.</p>
+    {% set _heading_tag = heading_tag|default('h2') %}
+    <{{_heading_tag}}
+      {% if heading_id %}id="{{ heading_id }}"{% endif %}
+      {% if heading_class %}class="{{ heading_class }}"{% endif %}
+    >
+      {{ heading_text|default("Leave a Comment") }}
+    </{{_heading_tag}}>
+    <p>Please be kind, courteous and constructive. You may use simple HTML or <a href="https://en.support.wordpress.com/markdown-quick-reference">Markdown</a> in your comments. All fields are required.</p>
   {% endblock %}
   {% embed '@cloudfour/objects/form-group/form-group.twig' with { label: 'Message' } only %}
     {% block control %}
@@ -34,10 +41,10 @@
     {% embed '@cloudfour/objects/button-group/button-group.twig' only %}
       {% block content %}
         {% include '@cloudfour/components/button/button.twig' with { label: 'Submit Reply' } only %}
-        {% include '@cloudfour/components/button/button.twig' with { label: 'Cancel', class: 'c-button--secondary' } only %}
+        {% include '@cloudfour/components/button/button.twig' with { label: 'Cancel', class: 'c-button--secondary js-cancel-reply' } only %}
       {% endblock %}
     {% endembed %}
   {% else %}
     {% include '@cloudfour/components/button/button.twig' with { label: 'Submit Comment' } only %}
   {% endif %}
-</div>
+</form>

src/components/comment/comment.scss

@@ -23,6 +23,7 @@
 
 /// Display a vertical line if the comment contains a reply thread to connect
 /// those comments visually with their parent.
+.c-comment.is-replying::after,
 .c-comment--thread::after {
   border-radius: size.$border-radius-full;
   content: '';
@@ -124,6 +125,10 @@
   // Visually centers the child avatars with the indentation of the parent
   // comment. Without this, the replies feel nested too far to the right.
   margin-left: math.div(size.$square-avatar-small, -2);
+}
+
+.c-comment__replies,
+.c-comment__reply-form {
   // Since the replies are likely wrapped in a Rhythm object intended to inherit
   // the parent rhythm, we can use that custom property to inherit that same
   // spacing between the meta and replies.