[next] Permalink View (#1987)

* feat: Implement converation thread

* Update unit tests

* test: adapt integration tests

* test: refactor denormalization helpers

* test: Include multiple parents in permalink View

* test: add integration test for loading previous parent comments

* feat: use dashed & solid time line

* feat: use new conversation thread design

* feat: add header from new design

* test: update snapshots

* fix: better scrolling behavior

* feat: add user box

* fix: add translations

* fix: typo

* fix: plural translation

* fix: paddings

* feat: better styling for level 0 comments

* fix: gutter size

* fix: update iframe url with new comment id

* test: add unit tests

src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx

@@ -20,16 +20,37 @@ interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLDivElement>;
+
+  /**
+   * The container used for the root node.
+   * Either a string to use a DOM element, a component, or an element.
+   * By default, it maps the variant to a good default headline component.
+   */
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
 }
 
 const HorizontalGutter: StatelessComponent<InnerProps> = props => {
-  const { classes, className, size, forwardRef, ...rest } = props;
+  const { classes, className, size, forwardRef, container, ...rest } = props;
   const rootClassName = cn(classes.root, className, classes[size!]);
-  return <div className={rootClassName} {...rest} ref={forwardRef} />;
+
+  const innerProps = {
+    className: rootClassName,
+    ref: forwardRef,
+    ...rest,
+  };
+
+  const Container = container!;
+
+  if (React.isValidElement<any>(Container)) {
+    return React.cloneElement(Container, innerProps);
+  } else {
+    return <Container {...innerProps} />;
+  }
 };
 
 HorizontalGutter.defaultProps = {
   size: "full",
+  container: "div",
 } as Partial<InnerProps>;
 
 const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter));