Add prototype for comment threads (#1230)

* Add prototype for comment threads

* Add dark theme compatibility

* Add dark mode compatibility for logo

src/prototypes/comment-thread/example/example.scss

@@ -0,0 +1,173 @@
+@use "../../../compiled/tokens/scss/breakpoint";
+@use "../../../mixins/ms";
+
+:root {
+  --timestamp-color: #485968;
+  --reply-link: #215cca;
+  --speech-balloon: url(../images/speech-balloon.svg);
+  --logo-icon: url(../images/logo.svg);
+}
+
+.t-dark {
+  --timestamp-color: #F2F5F7;
+  --reply-link: #fff;
+  --speech-balloon: url(../images/speech-balloon-dark.svg);
+  --logo-icon: url(../images/logo-dark.svg);
+}
+
+#prototype-thread {
+
+  .grid {
+    display: grid;
+    grid-template-columns: 1;
+    grid-template-rows: 5;
+    grid-gap: 2em;
+  }
+
+  h2 {
+    font-weight: 600;
+
+    @media (min-width: 40em) {
+    font-size: 1.25em;
+    }
+  }
+
+  .first-comment {
+    grid-row-start: 1;
+    grid-row-end: 4;
+    position: relative;
+
+    .thread-line {
+      width: 2.5px;
+      height: 88%;
+      background-color: #c0cfd8;
+      position: absolute;
+      left: 16px;
+      top: 38px;
+      border-radius: 99em;
+
+      @media only screen and (min-width: 40em) {
+        height: 88%;
+        left: 17px;
+        top: 40px;
+      }
+
+      @media only screen and (min-width: 60em) {
+        height: 86%;
+        left: 24px;
+        top: 56px;
+      }
+    }
+  }
+
+  .name {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  .avatar {
+    width: 2em;
+    height: 2em;
+    background-color: mistyrose;
+    border-radius: 99em;
+
+    @media only screen and (min-width: 60em) {
+      width: 2.5em;
+      height: 2.5em;
+    }
+  }
+
+  .username {
+    margin-left: 1rem;
+  }
+
+  .timestamp {
+    padding-top: 1rem;
+    display: flex;
+    color: var(--timestamp-color);
+    justify-content: space-between;
+    width: 9rem;
+  }
+
+  .reply {
+    display: flex;
+    font-weight: 600;
+    align-items: center;
+    color: var(--reply-link);
+    text-decoration: none;
+
+    .reply-icon {
+      margin-right: .25em;
+      width: 1em;
+      height: 1em;
+      background-image: var(--speech-balloon);
+      background-size: contain;
+      background-repeat: no-repeat;
+      @media only screen and (min-width: 60em) {
+        margin-bottom: .1em;
+      }
+    }
+  }
+
+  .comment-content {
+    margin-left: 3.15em;
+
+    @media only screen and (min-width: 60em) {
+      margin-left: 3.55em;
+    }
+  }
+
+  .avatar-username {
+    display: flex;
+    align-items: center;
+    width: 15em;
+    padding-top: 2em;
+    margin-left: 2.5em;
+  }
+
+  .logo-icon {
+    margin-top: .1em;
+    margin-left: .5em;
+    width: 1.25em;
+    height: 1em;
+    background-image: var(--logo-icon);
+    background-size: contain;
+    background-repeat: no-repeat;
+    @media only screen and (min-width: 60em) {
+      margin-top: .2em;
+    }
+  }
+
+  .threaded-avatar {
+    width: 2em;
+    height: 2em;
+    background-color: sienna;
+    border-radius: 99em;
+    position: relative;
+    @media only screen and (min-width: 60em) {
+      width: 2.5em;
+      height: 2.5em;
+    }
+  }
+
+  .threaded-comment-content {
+    margin-left: 5.5em;
+    @media only screen and (min-width: 60em) {
+      margin-left: 6.1em;
+    }
+  }
+
+  .second-comment {
+    grid-row-start: 4;
+    grid-row-end: 5;
+
+    .avatar {
+      background-color: steelblue;
+    }
+
+    .timestamp {
+      width: 100%;
+    }
+  }
+}

src/prototypes/comment-thread/example/example.twig

@@ -0,0 +1,49 @@
+<div id="prototype-thread">
+  <div class="o-container--prose o-container">
+    <div class="grid o-container__content">
+      <div class="first-comment">
+        <div class="thread-line"></div>
+        <div class="initial-comment">
+          <div class="name">
+            <div class="avatar"></div>
+            <h2 class="username">Kurtis Conner</h2>
+          </div>
+          <div class="comment-content">
+            <p>I’m an example of a longer comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<p>
+            <div class="timestamp">
+              <span>2hrs ago</span>
+              <a href="#" class="reply">
+                <div class="reply-icon"></div>Reply</a>
+            </div>
+          </div>
+        </div>
+        <div class="threaded-comment">
+          <div class="avatar-username">
+            <div class="threaded-avatar"></div>
+            <h2 class="username">Paul Hebert</h2>
+            <div class="logo-icon"></div>
+          </div>
+          <div class="threaded-comment-content">
+            <p>Thanks for your response!<p>
+            <div class="timestamp">
+              <span>2hrs ago</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="second-comment">
+        <div class="name">
+          <div class="avatar"></div>
+          <h2 class="username">Firstname Lastname-Lastname</h2>
+        </div>
+        <div class="comment-content">
+          <p>I am the start of a new comment.<p>
+          <div class="timestamp">
+            <span>Feb 16, 2020 via css-tricks.com</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

src/prototypes/comment-thread/thread.stories.js

@@ -0,0 +1,12 @@
+import examplePrototype from './example/example.twig';
+import './example/example.scss';
+
+export default {
+  title: 'Prototypes/Comment Thread',
+  parameters: {
+    docs: { page: null },
+    paddings: { disabled: true },
+  },
+};
+
+export const Example = () => examplePrototype({});