From e1d534391c9a30d88d8c2c0c98e14f5ccc164d86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 30 Jul 2018 06:50:47 -0300
Subject: [PATCH] More Changes

---
 .../components/Permalink/PermalinkView.tsx    | 26 ++++++-------------
 .../containers/PermalinkViewContainer.tsx     | 20 +++++++++++---
 .../ui/components/TextField/TextField.css     |  7 +----
 .../ui/components/TextField/TextField.mdx     | 17 ++++++++++++
 src/core/client/ui/shared/typography.css      |  9 +++++++
 5 files changed, 52 insertions(+), 27 deletions(-)
 create mode 100644 src/core/client/ui/components/TextField/TextField.mdx

diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index 81dbadb4f..2e693e56c 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -1,4 +1,3 @@
-import qs from "query-string";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
@@ -9,23 +8,14 @@ import * as styles from "./PermalinkView.css";
 
 export interface InnerProps {
   comment: {} | null;
+  assetURL: string | null;
 }
 
-const PermalinkView: StatelessComponent<InnerProps> = props => {
-  let assetURL: string = "";
-  const query = qs.parse(location.search);
-
-  if (!query.assetID && !query.commentID) {
-    return <div>Bad url: `assetID` and `commentID` params are needed</div>;
-  }
-
-  // TODO: (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
-  // returns the correct asset url
-  if (query.assetID) {
-    assetURL = `${location.origin}/?assetID=${query.assetID}`;
-  }
-
-  if (props.comment) {
+const PermalinkView: StatelessComponent<InnerProps> = ({
+  assetURL,
+  comment,
+}) => {
+  if (comment) {
     return (
       <div className={styles.root}>
         <Logo />
@@ -42,7 +32,7 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
           </Button>
         )}
         <Flex direction="column" className={styles.comment}>
-          <CommentContainer data={props.comment} />
+          <CommentContainer data={comment} />
         </Flex>
       </div>
     );
@@ -62,7 +52,7 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
             window.location.href = assetURL;
           }}
         >
-          Back to the Stream
+          Show all Comments
         </Button>
       )}
     </div>
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index a2c6216f8..e99578a9c 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -1,16 +1,22 @@
 import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
 import { withFragmentContainer } from "talk-framework/lib/relay";
+import { withLocalStateContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
+import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
 import PermalinkView from "../components/Permalink/PermalinkView";
 
 interface InnerProps {
   data: Data;
+  local: Local;
 }
 
-export const PermalinkViewContainer: StatelessComponent<InnerProps> = props => {
-  return <PermalinkView {...props.data} />;
+export const PermalinkViewContainer: StatelessComponent<InnerProps> = ({
+  local,
+  data,
+}) => {
+  return <PermalinkView {...data} assetURL={local.assetURL} />;
 };
 
 const enhanced = withFragmentContainer<{ data: Data }>({
@@ -22,7 +28,15 @@ const enhanced = withFragmentContainer<{ data: Data }>({
       }
     }
   `,
-})(PermalinkViewContainer);
+})(
+  withLocalStateContainer<Local>(
+    graphql`
+      fragment PermalinkViewContainerLocal on Local {
+        assetURL
+      }
+    `
+  )(PermalinkViewContainer)
+);
 
 export type PermalinkViewContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 3e8f769a9..ca9fc25cc 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -1,10 +1,5 @@
-// TODO: (bc) move this to typograhpy!
-
 .root {
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  font-size: 16px;
-  letter-spacing: calc(0.57em / 16);
+  composes: textField from "talk-ui/shared/typography.css";
   background: #ffffff;
   border: 1px solid #979797;
   box-sizing: border-box;
diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx
new file mode 100644
index 000000000..82f1c474d
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.mdx
@@ -0,0 +1,17 @@
+---
+name: TextField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import TextField from './TextField'
+
+# TextField
+
+`TextField`
+
+## Basic usage
+<Playground>
+  <TextField value="Hallo Talk" />
+</Playground>
+
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 9e52cfc89..518d0561f 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -126,3 +126,12 @@
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
 }
+
+.textField {
+  color: var(--palette-common-black);
+  font-family: "Source Sans Pro";
+  font-weight: var(--font-weight-regular);
+  font-size: 16px;
+  line-height: calc(18em / 16);
+  letter-spacing: calc(0.57em / 16);
+}