feat(cxl-ui): add comment section elements

packages/cxl-lumo-styles/scss/global.scss

@@ -310,3 +310,7 @@ ul.courses-list {
   }
 
 }
+
+article.comment-body {
+  background-color: aqua;
+}

packages/cxl-ui/package.json

@@ -16,6 +16,7 @@
   "devDependencies": {
     "@conversionxl/normalize-wheel": "^1.0.1",
     "@vaadin/accordion": "^23.3.7",
+    "@vaadin/avatar": "23.3.7",
     "@vaadin/button": "^23.3.7",
     "@vaadin/checkbox": "^23.3.7",
     "@vaadin/component-base": "^23.3.7",

packages/cxl-ui/scss/cxl-comment-section.scss

@@ -0,0 +1,16 @@
+:host {
+  h1 {
+    margin-block: 0;
+    line-height: 1.25;
+  }
+
+  vaadin-details {
+    &::part(summary) {
+      padding: 0;
+    }
+
+    &::part(content) {
+      padding: var(--lumo-space-l) 0 var(--lumo-space-s);
+    }
+  }
+}

packages/cxl-ui/scss/cxl-comment.scss

@@ -0,0 +1,29 @@
+:host {
+  .comment-body {
+    display: flex;
+    gap: var(--lumo-space-m);
+    align-items: start;
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+
+    .author {
+      display: flex;
+      gap: var(--lumo-space-s);
+
+      .username {
+        font-weight: 600;
+      }
+
+      .name {
+        color: var(--lumo-shade-70pct);
+      }
+    }
+
+    cxl-time {
+      color: var(--lumo-shade-70pct);
+    }
+  }
+}

packages/cxl-ui/src/components/cxl-comment-section.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './cxl-section';
+import '@vaadin/details';
+import cxlCommentSectionStyles from '../styles/cxl-comment-section-css.js';
+
+@customElement('cxl-comment-section')
+export class CXLCommentSection extends LitElement {
+  static get styles() {
+    return [cxlCommentSectionStyles];
+  }
+
+  @property({ type: Number }) replies = 0;
+
+  render() {
+    return html`
+      <cxl-section>
+        <h1>Community discussion</h1>
+        <vaadin-details theme="reverse" ?empty=${!this._moreHasChildren}>
+          <div slot="summary">${this.replies} ${this.replies === 1 ? 'reply' : 'replies'}</div>
+          <div class="comment-list">
+            <slot></slot>
+          </div>
+        </vaadin-details>
+      </cxl-section>
+    `;
+  }
+}

packages/cxl-ui/src/components/cxl-comment.js

@@ -0,0 +1,43 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import cxlCommentStyles from '../styles/cxl-comment-css.js';
+import '@vaadin/details';
+import '@vaadin/avatar';
+
+@customElement('cxl-comment')
+export class CxlComment extends LitElement {
+  static get styles() {
+    return [cxlCommentStyles];
+  }
+
+  @property({ type: String }) author = '';
+
+  @property({ type: String }) username = '';
+
+  @property({ type: String }) avatar = '';
+
+  @property({ type: String }) comment = '';
+
+  @property({ type: String }) time = '';
+
+  render() {
+    return html`
+      <div class="comment-body">
+        <div class="comment-author vcard">
+          <vaadin-avatar .img=${this.avatar} .name=${this.author} theme="large"></vaadin-avatar>
+        </div>
+        <div>
+          <header>
+            <div class="author">
+              <span class="username">${this.username}</span>
+              <span class="name">${this.author}</span>
+            </div>
+            <cxl-time time=${this.time}></cxl-time>
+          </header>
+          <div class="comment-content">${this.comment}</div>
+        </div>
+      </div>
+    `;
+  }
+}

packages/storybook/cxl-ui/cxl-comments/cxl-comment-section.stories.js

@@ -0,0 +1,42 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-comment-section.js';
+import '@conversionxl/cxl-ui/src/components/cxl-comment.js';
+
+export default {
+  title: 'CXL UI/cxl-comment-section',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const CXLCommentSection = ({ comments }) => html`
+  <cxl-comment-section replies=${comments.length}>
+    ${comments.map(
+      (item) => html`
+        <cxl-comment
+          class="comment" 
+          author="${item.author}"
+          avatar="${item.avatar}"
+          comment=${item.comment}
+          time="${item.time}"
+          username="${item.username}"
+        ></cxl-comment>
+      `
+    )}
+  </cxl-comment-section>
+`;
+
+CXLCommentSection.storyName = 'cxl-comment-section';
+CXLCommentSection.args = {
+  comments: [
+    {
+      author: 'John Smith',
+      username: 'johhnysm',
+      time: '2d',
+      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.',
+      avatar:
+        'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+    },
+  ],
+};