More Changes

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>

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;

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;

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>
+

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);
+}