Add comments pattern

[dromo77]

Create a pattern for comments, comments can be found on article pages.

[tylersticka]

These patterns are feeling kind of cramped in longer threads.

I also think we may have flipped the hierarchy the opposite of what it should be, where author/date might be more important up top. I think we were designing these as if they were tweet-length, but since then we've had some pretty long comments where it's unclear who is talking till you've finished reading.

[tylersticka]

The last week or two has been kind of interrupty for me, before the holiday I thought I'd share some of my progress.

Here's a chunk of the comment thread for one of our articles on our live site on a narrow screen:

I like how clean it is and how the threading is straightforward. I dislike that the name and info is below the comment… it nicely consolidates meta information to one line, but when comments get longer, it omits the context of who is actually speaking. I also think it ends up feeling more and more cluttered the longer the thread gets, as everything is quite condensed.

I've been experimenting with a layout more like this (same content but with random placeholder avatars):

Things I like:

• I think the avatars are fun and add visual interest. I could see us adding a little Cloud Four badge to team member avatars, for example.
• Having the commenter name first improves a lot of the issues I mentioned earlier.
• I like 💬 for reply versus ↪️, I think it feels more human.
• I dig having more whitespace.

Thing I'm not quite satisfied with:

• The date and reply links feel pretty floaty now. The darker "Reply" links on the right versus the muted dates cause an odd reading line. I originally had dates up near the author but moved them to accommodate longer names, but maybe they'd work better as a unified double-line element with space between that and the comment body?
• The threads feel visually busy. The avatars, body content indentation and thread lines are suggesting a lot of unresolved whitespace chunks, at least to my eye.

Anyway! There's a progress update.

[AriannaChau]

Here is the PR for the prototypes for this design: #1230