Responsive Components <3

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

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import * as React from "react";
+import React from "react";
 import { ReactNode, StatelessComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";

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

@@ -0,0 +1,37 @@
+.root {
+}
+
+.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";
+}

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

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

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

@@ -0,0 +1,38 @@
+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";
+}
+
+const Flex: StatelessComponent<InnerProps> = props => {
+  const { justifyContent, alignItems } = props;
+
+  const classObject: Record<string, boolean> = {};
+
+  if (justifyContent) {
+    classObject[`justify${pascalCase(justifyContent)}`] = true;
+  }
+
+  if (alignItems) {
+    classObject[`align${pascalCase(alignItems)}`] = true;
+  }
+
+  const classNames: string = cn(styles.root, classObject);
+
+  return <div className={classNames} {...props} />;
+};
+
+export default Flex;

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

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

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.spec.tsx

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

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { ReactNode, StatelessComponent } from "react";
+import Responsive from "react-responsive";
+
+interface InnerProps {
+  minWidth?: string;
+  maxWidth?: string;
+  children: 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 => {
+  // TODO: Temporarily map newer speech to older aural type until
+  // react-responsive supports the speech prop.
+  const { speech, ...rest } = props;
+  return <Responsive {...rest} aural={speech} />;
+};
+
+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="sm"
+  minWidth="xs"
+  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/theme/variables.ts

@@ -68,6 +68,15 @@ const variables = {
   fontWeightLight: 300,
   fontWeightRegular: 400,
   fontWeightMedium: 550,
+  /* Breakpoints */
+  breakpoints: {
+    xs: 0,
+    sm: 320,
+    md: 640,
+    lg: 1024,
+    xl: 1400,
+    xxl: 1600,
+  },
 };
 
 module.exports = 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";
+/** pascalCase */
+export default function pascalCase(value: string) {
+  return value[0].toUpperCase() + camelCase(value).slice(1);
+}