[CORL-916] conversation view (#2850)

* show comment counts for stories in story table

* remove debug code

* add modal to view comment

* load converasation view into modal

* style modal header

* style conversation view modal

* style conversation thread in conversation modal

* styles conversation view comments

* show replies to replies on click

* update snaps

* update snap

* pass settings prop through to comment content, set default replies to 5

src/core/client/ui/components/v2/Button/Button.css

@@ -490,3 +490,7 @@ $button-text-dark-foreground-active: var(--v2-colors-blue-700);
 .linkButton {
   text-decoration: none;
 }
+
+.underline {
+  text-decoration: underline;
+}

src/core/client/ui/components/v2/Button/Button.tsx

@@ -55,6 +55,9 @@ interface Props extends Omit<BaseButtonProps, "ref"> {
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
+
+  /* if true adds a link-style underline */
+  underline?: boolean;
 }
 
 export class Button extends React.Component<Props> {
@@ -82,6 +85,7 @@ export class Button extends React.Component<Props> {
       iconRight,
       adornmentLeft,
       adornmentRight,
+      underline,
       to,
       ...rest
     } = this.props;
@@ -108,6 +112,7 @@ export class Button extends React.Component<Props> {
         [classes.iconRight]: iconRight,
         [classes.adornmentLeft]: adornmentLeft,
         [classes.adornmentRight]: adornmentRight,
+        [classes.underline]: underline,
       },
       className
     );

src/core/client/ui/components/v2/Modal/ModalHeader.css

@@ -0,0 +1,6 @@
+$modal-header-background: var(--v2-colors-white-500);
+
+.root {
+  background-color: $modal-header-background;
+  padding: var(--v2-spacing-4);
+}

src/core/client/ui/components/v2/Modal/ModalHeader.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent, RefObject } from "react";
+
+import { CardCloseButton, Flex } from "coral-ui/components/v2";
+
+import styles from "./ModalHeader.css";
+
+interface Props {
+  onClose: () => void;
+  focusableRef: RefObject<any>;
+}
+
+const ModalHeader: FunctionComponent<Props> = ({
+  onClose,
+  focusableRef,
+  children,
+}) => {
+  return (
+    <div className={styles.root}>
+      <Flex justifyContent="space-between" alignItems="flex-start">
+        {children}
+        <CardCloseButton onClick={onClose} ref={focusableRef} />
+      </Flex>
+    </div>
+  );
+};
+
+export default ModalHeader;

src/core/client/ui/components/v2/Modal/index.ts

@@ -1 +1,2 @@
 export { default, ModalProps } from "./Modal";
+export { default as ModalHeader } from "./ModalHeader";

src/core/client/ui/components/v2/index.ts

@@ -39,7 +39,7 @@ export { default as Label } from "./Label";
 export { ListGroup, ListGroupRow } from "./ListGroup";
 export { Marker, Count as MarkerCount } from "./Marker";
 export { default as Message, MessageIcon } from "./Message";
-export { default as Modal, ModalProps } from "./Modal";
+export { default as Modal, ModalProps, ModalHeader } from "./Modal";
 export { default as PasswordField } from "./PasswordField";
 export { default as Popover } from "./Popover";
 export { default as RadioButton } from "./RadioButton";