Merge branch 'next' into next-passport

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Center } from "talk-ui/components";
+import { Flex } from "talk-ui/components";
 
 import StreamContainer from "../containers/StreamContainer";
 
@@ -12,9 +12,9 @@ export interface AppProps {
 const App: StatelessComponent<AppProps> = props => {
   if (props.asset) {
     return (
-      <Center>
+      <Flex justifyContent="center">
         <StreamContainer asset={props.asset} />
-      </Center>
+      </Flex>
     );
   }
   return <div>Asset not found </div>;

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

@@ -1,11 +1,10 @@
 .root {
-  width: 400px;
 }
 
 .gutterBottom {
-  margin-bottom: calc(2px * $spacing-unit);
+  margin-bottom: calc(1px * var(--spacing-unit));
 }
 
 .topBar {
-  margin-bottom: calc(1px * $spacing-unit);
+  margin-bottom: calc(0.5px * var(--spacing-unit));
 }

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

@@ -1,8 +1,8 @@
 .root {
   border-left: 3px solid;
-  padding-left: calc(2px * $spacing-unit);
+  padding-left: calc(1px * var(--spacing-unit));
 }
 
 .level0 {
-  border-color: $palette-secondary-darkest;
+  border-color: var(--palette-secondary-darkest);
 }

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

@@ -3,11 +3,12 @@
 
   display: block;
   height: 100px;
-  width: 400px;
-  margin-bottom: calc(2px * $spacing-unit);
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: calc(1px * var(--spacing-unit));
 }
 
 .postButtonContainer {
   display: flex;
   justify-content: flex-end;
-}
+}

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

@@ -0,0 +1,4 @@
+.root {
+  width: 100%;
+  max-width: 400px;
+}

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

@@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
 import Logo from "./Logo";
+import * as styles from "./Stream.css";
 
 export interface StreamProps {
   assetID: string;
@@ -20,7 +21,7 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <div>
+    <div className={styles.root}>
       <Logo gutterBottom />
       <PostCommentFormContainer assetID={props.assetID} />
       <div id="talk-comments-stream-log" role="log" aria-live="polite">

src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div>
+<div
+  className="Stream-root"
+>
   <Logo
     gutterBottom={true}
   />
@@ -56,7 +58,9 @@ exports[`renders correctly 1`] = `
 `;
 
 exports[`when there is more disables load more button 1`] = `
-<div>
+<div
+  className="Stream-root"
+>
   <Logo
     gutterBottom={true}
   />
@@ -126,7 +130,9 @@ exports[`when there is more disables load more button 1`] = `
 `;
 
 exports[`when there is more renders a load more button 1`] = `
-<div>
+<div
+  className="Stream-root"
+>
   <Logo
     gutterBottom={true}
   />

src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap

@@ -2,9 +2,11 @@
 
 exports[`loads more comments 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
-  <div>
+  <div
+    className="Stream-root"
+  >
     <h1
       className="Typography-root Typography-heading1 Typography-gutterBottom"
     >
@@ -111,9 +113,11 @@ exports[`loads more comments 1`] = `
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
-  <div>
+  <div
+    className="Stream-root"
+  >
     <h1
       className="Typography-root Typography-heading1 Typography-gutterBottom"
     >

src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap

@@ -2,9 +2,11 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
-  <div>
+  <div
+    className="Stream-root"
+  >
     <h1
       className="Typography-root Typography-heading1 Typography-gutterBottom"
     >

src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap

@@ -2,9 +2,11 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
-  <div>
+  <div
+    className="Stream-root"
+  >
     <h1
       className="Typography-root Typography-heading1 Typography-gutterBottom"
     >

src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap

@@ -2,9 +2,11 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
-  <div>
+  <div
+    className="Stream-root"
+  >
     <h1
       className="Typography-root Typography-heading1 Typography-gutterBottom"
     >
@@ -109,9 +111,11 @@ exports[`renders comment stream 1`] = `
 
 exports[`show all replies 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
-  <div>
+  <div
+    className="Stream-root"
+  >
     <h1
       className="Typography-root Typography-heading1 Typography-gutterBottom"
     >

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

@@ -4,7 +4,7 @@
   &:enabled,
   &:disabled {
     padding: 5px 20px;
-    border-radius: $round-corners;
+    border-radius: var(--round-corners);
     background-color: transparent;
     /* TODO: hover styles for the default button */
   }
@@ -24,70 +24,70 @@
 
 .primary:enabled,
 .primary:disabled {
-  background-color: $palette-primary-main;
+  background-color: var(--palette-primary-main);
   color: #fff;
 }
 
 .primary:enabled {
   &:hover {
-    background-color: $palette-primary-light;
+    background-color: var(--palette-primary-light);
   }
 
   &:active {
-    background-color: $palette-primary-lighter;
+    background-color: var(--palette-primary-lighter);
   }
 }
 
 .primary:enabled.invert,
 .primary:disabled.invert {
   background-color: transparent;
-  border: 1px solid $palette-primary-main;
-  color: $palette-primary-main;
+  border: 1px solid var(--palette-primary-main);
+  color: var(--palette-primary-main);
 }
 
 .primary:enabled.invert {
   &:hover {
-    border-color: $palette-primary-light;
-    color: $palette-primary-light;
+    border-color: var(--palette-primary-light);
+    color: var(--palette-primary-light);
   }
 
   &:active {
-    border-color: $palette-primary-lighter;
-    color: $palette-primary-lighter;
+    border-color: var(--palette-primary-lighter);
+    color: var(--palette-primary-lighter);
   }
 }
 
 .secondary:enabled,
 .secondary:disabled {
-  background-color: $palette-secondary-main;
+  background-color: var(--palette-secondary-main);
   color: #fff;
 }
 
 .secondary:enabled {
   &:hover {
-    background-color: $palette-secondary-light;
+    background-color: var(--palette-secondary-light);
   }
   &:active {
-    background-color: $palette-secondary-lighter;
+    background-color: var(--palette-secondary-lighter);
   }
 }
 
 .secondary:enabled.invert,
 .secondary:disabled.invert {
   background-color: transparent;
-  border: 1px solid $palette-secondary-main;
-  color: $palette-secondary-main;
+  border: 1px solid var(--palette-secondary-main);
+  color: var(--palette-secondary-main);
 }
 
 .secondary:enabled.invert {
   &:hover {
-    border-color: $palette-secondary-light;
-    color: $palette-secondary-light;
+    border-color: var(--palette-secondary-light);
+    color: var(--palette-secondary-light);
   }
 
   &:active {
-    border-color: $palette-secondary-lighter;
-    color: $palette-secondary-lighter;
+    border-color: var(--palette-secondary-lighter);
+    color: var(--palette-secondary-lighter);
   }
 }
 

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

@@ -1,6 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-

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

@@ -1,30 +0,0 @@
-import cn from "classnames";
-import * as React from "react";
-import { ReactNode, StatelessComponent } from "react";
-
-import { withStyles } from "talk-ui/hocs";
-import { PropTypesOf } from "talk-ui/types";
-
-import * as styles from "./Center.css";
-
-interface InnerProps {
-  /**
-   * This prop can be used to add custom classnames.
-   * It is handled by the `withStyles `HOC.
-   */
-  classes: Partial<typeof styles>;
-  className?: string;
-  children: ReactNode;
-}
-
-const Center: StatelessComponent<InnerProps> = props => {
-  return (
-    <div className={cn(props.className, props.classes.root)}>
-      {props.children}
-    </div>
-  );
-};
-
-const enhanced = withStyles(styles)(Center);
-export type CenterProps = PropTypesOf<typeof enhanced>;
-export default enhanced;

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

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

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

@@ -0,0 +1,51 @@
+.root {
+  display: flex;
+}
+
+.justifyFlexStart {
+  justify-content: flex-start;
+}
+.justifyFlexEnd {
+  justify-content: flex-end;
+}
+.justifyCenter {
+  justify-content: center;
+}
+.justifySpaceBetween {
+  justify-content: space-between;
+}
+.justifySpaceAround {
+  justify-content: space-around;
+}
+.justifySpaceEvenly {
+  justify-content: space-evenly;
+}
+
+.alignFlexStart {
+  align-items: flex-start;
+}
+.alignFlexEnd {
+  align-items: flex-end;
+}
+.alignCenter {
+  align-items: center;
+}
+.alignBaseline {
+  align-items: baseline;
+}
+.alignStretch {
+  align-items: stretch;
+}
+
+.directionRow {
+  flex-direction: row;
+}
+.directionColumn {
+  flex-direction: column;
+}
+.directionRowReverse {
+  flex-direction: row-reverse;
+}
+.directionColumnReverse {
+  flex-direction: column-reverse;
+}

src/core/client/ui/components/Flex/Flex.mdx

@@ -0,0 +1,16 @@
+---
+name: Flex
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import Flex from './Flex'
+
+# Flex
+
+`Flex` is a wrapper around `flexbox`.
+
+## Basic usage
+<Playground>
+  <Flex justifyContent="center">I'm centered</Flex>
+</Playground>

src/core/client/ui/components/Flex/Flex.spec.tsx

@@ -0,0 +1,20 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import Flex from "./Flex";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    justifyContent: "center",
+    alignItems: "center",
+    direction: "row",
+  };
+  const wrapper = shallow(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -0,0 +1,43 @@
+import cn from "classnames";
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { pascalCase } from "talk-common/utils";
+
+import * as styles from "./Flex.css";
+
+interface InnerProps {
+  justifyContent?:
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-around"
+    | "space-between"
+    | "space-evenly";
+  alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
+}
+
+const Flex: StatelessComponent<InnerProps> = props => {
+  const { justifyContent, alignItems, direction, ...rest } = props;
+
+  const classObject: Record<string, boolean> = {};
+
+  if (justifyContent) {
+    classObject[(styles as any)[`justify${pascalCase(justifyContent)}`]] = true;
+  }
+
+  if (alignItems) {
+    classObject[(styles as any)[`align${pascalCase(alignItems)}`]] = true;
+  }
+
+  if (direction) {
+    classObject[(styles as any)[`direction${pascalCase(direction)}`]] = true;
+  }
+
+  const classNames: string = cn(styles.root, classObject);
+
+  return <div className={classNames} {...rest} />;
+};
+
+export default Flex;

src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Flex-root Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;

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

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

src/core/client/ui/components/MatchMedia/MatchMedia.mdx

@@ -0,0 +1,40 @@
+---
+name: MatchMedia
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import MatchMedia from './MatchMedia'
+
+# MatchMedia
+
+`MatchMedia` uses media queries to provide responsive rendering.
+
+## Basic usage
+<Playground>
+  <MatchMedia maxWidth="xs">
+    I'm a very small screen
+  </MatchMedia>
+  <MatchMedia minWidth="xs" maxWidth="sm">
+    I'm a small screen
+  </MatchMedia>
+  <MatchMedia minWidth="sm" maxWidth="md">
+    I'm a medium screen
+  </MatchMedia>
+  <MatchMedia minWidth="md" maxWidth="lg">
+    I'm a large screen
+  </MatchMedia>
+  <MatchMedia minWidth="lg" maxWidth="xl">
+    I'm a very large screen
+  </MatchMedia>
+  <MatchMedia minWidth="xl">
+    I'm a super large screen
+  </MatchMedia>
+</Playground>
+
+## Using render props
+<Playground>
+  <MatchMedia minWidth="lg">
+    {matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
+  </MatchMedia>
+</Playground>

src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx

@@ -0,0 +1,27 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import MatchMedia from "./MatchMedia";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof MatchMedia> = {
+    minWidth: "xs",
+    maxWidth: "sm",
+    component: "div",
+    screen: true,
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<MatchMedia {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("map new speech prop to older aural prop", () => {
+  const props: PropTypesOf<typeof MatchMedia> = {
+    speech: true,
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<MatchMedia {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { ReactNode, StatelessComponent } from "react";
+import Responsive from "react-responsive";
+
+import theme from "../../theme/variables";
+
+type Breakpoints = keyof typeof theme.breakpoints;
+
+interface InnerProps {
+  minWidth?: Breakpoints;
+  maxWidth?: Breakpoints;
+  children: ReactNode | ((matches: boolean) => React.ReactNode);
+  className?: string;
+  component?:
+    | string
+    | React.SFC<any>
+    | React.ClassType<any, any, any>
+    | React.ComponentClass<any>;
+  all?: boolean;
+  print?: boolean;
+  screen?: boolean;
+  speech?: boolean;
+}
+
+const MatchMedia: StatelessComponent<InnerProps> = props => {
+  const { speech, minWidth, maxWidth, ...rest } = props;
+  const mapped = {
+    // TODO: Temporarily map newer speech to older aural type until
+    // react-responsive supports the speech prop.
+    aural: speech,
+    minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
+    maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
+  };
+  return <Responsive {...rest} {...mapped} />;
+};
+
+export default MatchMedia;

src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`map new speech prop to older aural prop 1`] = `
+<MediaQuery
+  aural={true}
+  values={Object {}}
+>
+  <div>
+    Hello World
+  </div>
+</MediaQuery>
+`;
+
+exports[`renders correctly 1`] = `
+<MediaQuery
+  component="div"
+  maxWidth={640}
+  minWidth={321}
+  screen={true}
+  values={Object {}}
+>
+  <div>
+    Hello World
+  </div>
+</MediaQuery>
+`;

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

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

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

@@ -11,19 +11,19 @@
   composes: heading2 from "talk-ui/shared/typography.css";
 }
 
-.heading3  {
+.heading3 {
   composes: heading3 from "talk-ui/shared/typography.css";
 }
 
-.heading4  {
+.heading4 {
   composes: heading4 from "talk-ui/shared/typography.css";
 }
 
-.subtitle1  {
+.subtitle1 {
   composes: subtitle1 from "talk-ui/shared/typography.css";
 }
 
-.subtitle2  {
+.subtitle2 {
   composes: subtitle2 from "talk-ui/shared/typography.css";
 }
 
@@ -31,7 +31,7 @@
   composes: body1 from "talk-ui/shared/typography.css";
 }
 
-.body2  {
+.body2 {
   composes: body2 from "talk-ui/shared/typography.css";
 }
 
@@ -70,7 +70,7 @@
 }
 
 .paragraph {
-  margin-bottom: calc(2px * $spacing-unit);
+  margin-bottom: calc(1px * var(--spacing-unit));
 }
 
 .colorInherit {
@@ -78,17 +78,17 @@
 }
 
 .colorPrimary {
-  color: $palette-primary-main;
+  color: var(--palette-primary-main);
 }
 
 .colorSecondary {
-  color: $palette-secondary-main;
+  color: var(--palette-secondary-main);
 }
 
 .colorTextSecondary {
-  color: $palette-text-secondary;
+  color: var(--palette-text-secondary);
 }
 
 .colorError {
-  color: $palette-error-main;
+  color: var(--palette-error-main);
 }

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

@@ -1,4 +1,5 @@
 export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
-export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
+export { default as Flex } from "./Flex";
+export { default as MatchMedia } from "./MatchMedia";

src/core/client/ui/shared/typography.css

@@ -1,59 +1,63 @@
 .heading1 {
-  font-size: calc(24rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(24rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(32em / 24);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .heading2 {
-  font-size: calc(20rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(20rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(24em / 20);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .heading3 {
-  font-size: calc(18rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(18rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(20em / 18);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .heading4 {
-  font-size: calc(16rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(16rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
-.subtitle1 {}
+.subtitle1 {
+}
 
-.subtitle2 {}
+.subtitle2 {
+}
 
-.body2 {}
+.body2 {
+}
 
 .body1 {
-  font-size: calc(16rem / $rem-base);
-  font-weight: $font-weight-regular;
+  font-size: calc(16rem / var(--rem-base));
+  font-weight: var(--font-weight-regular);
   font-family: "Source Sans Pro";
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .button {
-  color: $palette-text-secondary;
+  color: var(--palette-text-secondary);
   font-family: "Source Sans Pro";
-  font-weight: $font-weight-medium;
+  font-weight: var(--font-weight-medium);
   font-size: 16px;
   letter-spacing: calc(0.57em / 16);
 }
 
-.overline {}
+.overline {
+}

src/core/client/ui/theme/variables.css

@@ -0,0 +1,16 @@
+/*
+  Variables defined in `variables.ts` are already available
+  flattened and in kebab case.
+
+  These are additionally variables we define.
+*/
+
+:root {
+  --spacing-unit: var(--spacing-unit-small);
+}
+
+@media (min-width: $breakpoints-xs) {
+  :root {
+    --spacing-unit: var(--spacing-unit-large);
+  }
+}

src/core/client/ui/theme/variables.ts

@@ -58,7 +58,8 @@ const variables = {
     },
   },
   /* gitter and spacing */
-  spacingUnit: 5,
+  spacingUnitSmall: 5,
+  spacingUnitLarge: 10,
   /* Borders */
   roundCorners: "2px",
   /* Typography */
@@ -68,6 +69,14 @@ const variables = {
   fontWeightLight: 300,
   fontWeightRegular: 400,
   fontWeightMedium: 550,
+  /* Breakpoints */
+  breakpoints: {
+    xs: 320,
+    sm: 640,
+    md: 1024,
+    lg: 1400,
+    xl: 1600,
+  },
 };
 
-module.exports = variables;
+export default variables;

src/core/common/utils/index.ts

@@ -1 +1,2 @@
 export { default as timeout } from "./timeout";
+export { default as pascalCase } from "./pascalCase";

src/core/common/utils/pascalCase.ts

@@ -0,0 +1,5 @@
+import { camelCase } from "lodash";
+
+export default function pascalCase(value: string) {
+  return value[0].toUpperCase() + camelCase(value).slice(1);
+}