refactor(components): split Comment component into 3 components

* add ApprovedComment, PendingComment and ReplyCommentForm components
* let consumer handle reply form visibility
* move structured data into article page (each article already has the
comments data and already handle json ltd schema so I prefered to move
the schema in the final consumer instead of adding a script element
foreach comment)

1 files changed, 52 insertions, 0 deletions

diff --git a/src/components/organisms/comment/approved-comment/approved-comment.module.scss b/src/components/organisms/comment/approved-comment/approved-comment.module.scss
new file mode 100644
index 0000000..7906632
--- /dev/null
+++ b/src/components/organisms/comment/approved-comment/approved-comment.module.scss
@@ -0,0 +1,52 @@
+@use "../../../../styles/abstracts/placeholders";
+
+.author {
+  color: var(--color-primary-darker);
+  font-family: var(--font-family-regular);
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  text-shadow: none;
+}
+
+.body {
+  overflow-wrap: break-word;
+
+  :global {
+    a {
+      @extend %link;
+
+      &[hreflang],
+      &.download,
+      &.external {
+        @extend %link-with-icon;
+      }
+
+      &[hreflang] {
+        @extend %link-with-lang;
+      }
+
+      &[hreflang]:not(.download, .external) {
+        --is-icon-hidden: "";
+      }
+
+      &.download {
+        @extend %download-link;
+      }
+
+      &.external {
+        @extend %external-link;
+      }
+
+      &.download,
+      &.external {
+        &:not([hreflang]) {
+          --is-lang-hidden: "";
+        }
+      }
+
+      &.external.download {
+        @extend %external-download-link;
+      }
+    }
+  }
+}