wip

src/core/client/stream/components/Comment.css

@@ -9,11 +9,3 @@
 .author {
   font-weight: $font-weight-medium;
 }
-
-.shareButton {
-  padding: 10px 0;
-}
-
-.input {
-  margin-right: 5px;
-}

src/core/client/stream/components/Comment.tsx

@@ -28,7 +28,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </Typography>
       <Typography>{props.body}</Typography>
       <div className={cn("talk-comment-footer")}>
-        <PermalinkPopover />
+        <PermalinkPopover commentId={props.id} />
       </div>
     </div>
   );

src/core/client/stream/components/PermalinkPopover.css

@@ -0,0 +1,13 @@
+.shareButton {
+  composes: button from "talk-ui/shared/typography.css";
+  composes: buttonReset from "talk-ui/shared/buttonReset.css";
+  padding: 10px 0;
+}
+
+.textField {
+  margin-right: 5px;
+}
+
+.root {
+  background-color: #fff;
+}

src/core/client/stream/components/PermalinkPopover.tsx

@@ -1,22 +1,27 @@
 import React from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { Button, Input, Popover } from "talk-ui/components";
+import { Button, Popover, TextField } from "talk-ui/components";
+import * as styles from "./PermalinkPopover.css";
 
-class PermalinkPopover extends React.Component {
+interface InnerProps {
+  commentId: string;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
   public render() {
-    const props = this.props;
+    const { commentId } = this.props;
     return (
       <Popover
         body={
-          <div>
-            <Input defaultValue={props.id} className={styles.input} />
-            <CopyToClipboard text={props.id}>
+          <div className={styles.root}>
+            <TextField defaultValue={commentId} className={styles.textField} />
+            <CopyToClipboard text={commentId}>
               <Button primary>Copy</Button>
             </CopyToClipboard>
           </div>
         }
       >
-        <button>Reference element</button>
+        <button className={styles.shareButton}>Share</button>
       </Popover>
     );
   }

src/core/client/ui/components/Input/Input.css

@@ -1,11 +0,0 @@
-.root {
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  font-size: 16px;
-  letter-spacing: calc(0.57em / 16);
-  background: #ffffff;
-  border: 1px solid #979797;
-  box-sizing: border-box;
-  border-radius: 1px;
-  padding: 5px 20px;
-}

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

@@ -1,14 +0,0 @@
-import cn from "classnames";
-import React, { InputHTMLAttributes, StatelessComponent } from "react";
-
-import * as styles from "./Input.css";
-
-interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
-  classes?: typeof styles;
-}
-
-const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
-  return <input {...rest} className={cn(styles.root, className)} />;
-};
-
-export default Input;

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

@@ -1,2 +0,0 @@
-export * from "./Input";
-export { default } from "./Input";

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

@@ -3,4 +3,4 @@ export { default as Button } from "./Button";
 export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
 export { default as Popover } from "./Popover";
-export { default as Input } from "./Input";
+export { default as TextField } from "./TextField";

src/core/client/ui/hocs/withFowardedRefs.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-
-export function forwardRef(
-  WrappedComponent: React.ComponentType
-): React.RefForwardingComponent<any, any> {
-  return React.forwardRef((props, ref) => {
-    return <WrappedComponent {...props} forwardedRef={ref} />;
-  });
-}