Support Material Icons + bugfixes

package-lock.json

@@ -14289,6 +14289,12 @@
         "css-mediaquery": "^0.1.2"
       }
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78=",
+      "dev": true
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",

package.json

@@ -115,6 +115,7 @@
     "jest": "^23.4.1",
     "jsdom": "^11.11.0",
     "loader-utils": "^1.1.0",
+    "material-design-icons": "^3.0.1",
     "npm-run-all": "^4.1.3",
     "postcss-advanced-variables": "^2.3.3",
     "postcss-css-variables": "^0.9.0",

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

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<Flex
+<withPropsOnChange(Flex)
   className="App-root"
   justifyContent="center"
 >
   <Relay(StreamContainer)
     asset={Object {}}
   />
-</Flex>
+</withPropsOnChange(Flex)>
 `;
 
 exports[`renders correctly when asset is null 1`] = `

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

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <Indent>
-  <Flex
+  <withPropsOnChange(Flex)
     direction="column"
     id="talk-comments-replyList-log--comment-id"
     itemGutter={true}
@@ -24,13 +24,13 @@ exports[`renders correctly 1`] = `
       }
       key="comment-2"
     />
-  </Flex>
+  </withPropsOnChange(Flex)>
 </Indent>
 `;
 
 exports[`when there is more disables load more button 1`] = `
 <Indent>
-  <Flex
+  <withPropsOnChange(Flex)
     direction="column"
     id="talk-comments-replyList-log--comment-id"
     itemGutter={true}
@@ -67,13 +67,13 @@ exports[`when there is more disables load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </Flex>
+  </withPropsOnChange(Flex)>
 </Indent>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
 <Indent>
-  <Flex
+  <withPropsOnChange(Flex)
     direction="column"
     id="talk-comments-replyList-log--comment-id"
     itemGutter={true}
@@ -110,6 +110,6 @@ exports[`when there is more renders a load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </Flex>
+  </withPropsOnChange(Flex)>
 </Indent>
 `;

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

@@ -10,14 +10,14 @@ exports[`renders correctly 1`] = `
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
-  <Flex
+  <withPropsOnChange(Flex)
     aria-live="polite"
     direction="column"
     id="talk-comments-stream-log"
     itemGutter={true}
     role="log"
   >
-    <Flex
+    <withPropsOnChange(Flex)
       direction="column"
       itemGutter={true}
       key="comment-1"
@@ -36,8 +36,8 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </Flex>
-    <Flex
+    </withPropsOnChange(Flex)>
+    <withPropsOnChange(Flex)
       direction="column"
       itemGutter={true}
       key="comment-2"
@@ -56,8 +56,8 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </Flex>
-  </Flex>
+    </withPropsOnChange(Flex)>
+  </withPropsOnChange(Flex)>
 </div>
 `;
 
@@ -71,14 +71,14 @@ exports[`when there is more disables load more button 1`] = `
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
-  <Flex
+  <withPropsOnChange(Flex)
     aria-live="polite"
     direction="column"
     id="talk-comments-stream-log"
     itemGutter={true}
     role="log"
   >
-    <Flex
+    <withPropsOnChange(Flex)
       direction="column"
       itemGutter={true}
       key="comment-1"
@@ -97,8 +97,8 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </Flex>
-    <Flex
+    </withPropsOnChange(Flex)>
+    <withPropsOnChange(Flex)
       direction="column"
       itemGutter={true}
       key="comment-2"
@@ -117,7 +117,7 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </Flex>
+    </withPropsOnChange(Flex)>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -133,7 +133,7 @@ exports[`when there is more disables load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </Flex>
+  </withPropsOnChange(Flex)>
 </div>
 `;
 
@@ -147,14 +147,14 @@ exports[`when there is more renders a load more button 1`] = `
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
-  <Flex
+  <withPropsOnChange(Flex)
     aria-live="polite"
     direction="column"
     id="talk-comments-stream-log"
     itemGutter={true}
     role="log"
   >
-    <Flex
+    <withPropsOnChange(Flex)
       direction="column"
       itemGutter={true}
       key="comment-1"
@@ -173,8 +173,8 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </Flex>
-    <Flex
+    </withPropsOnChange(Flex)>
+    <withPropsOnChange(Flex)
       direction="column"
       itemGutter={true}
       key="comment-2"
@@ -193,7 +193,7 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </Flex>
+    </withPropsOnChange(Flex)>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -209,6 +209,6 @@ exports[`when there is more renders a load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </Flex>
+  </withPropsOnChange(Flex)>
 </div>
 `;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import BaseButton from "./BaseButton";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof BaseButton> = {
+    className: "my-class",
+    children: "Push Me",
+  };
+  const renderer = TestRenderer.create(<BaseButton {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders as anchor", () => {
+  const props: PropTypesOf<typeof BaseButton> = {
+    anchor: true,
+    children: "Push Me",
+  };
+  const renderer = TestRenderer.create(<BaseButton {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders as anchor 1`] = `
+<a
+  className="BaseButton-root"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseDown={[Function]}
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+>
+  Push Me
+</a>
+`;
+
+exports[`renders correctly 1`] = `
+<button
+  className="BaseButton-root my-class"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseDown={[Function]}
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+>
+  Push Me
+</button>
+`;

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

@@ -1,9 +1,20 @@
 .root {
   composes: button from "talk-ui/shared/typography.css";
 
-  padding: 5px 20px;
+  padding: 5px 15px;
   border-radius: var(--round-corners);
   background-color: transparent;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > * {
+    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
+  }
+  & > *:last-child {
+    margin: 0;
+  }
 }
 
 .root.disabled {

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

@@ -5,6 +5,7 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import Button from './Button'
+import Icon from '../Icon'
 import Flex from '../Flex'
 
 # Button
@@ -28,3 +29,14 @@ import Flex from '../Flex'
   </Flex>
 </Playground>
 
+
+## Button with Icon
+<Playground>
+  <Flex itemGutter>
+    <Button><Icon>face</Icon><span>Push Me</span></Button>
+    <Button primary><Icon>bookmark</Icon><span>Push Me</span></Button>
+    <Button primary><span>Push Me</span><Icon>build</Icon></Button>
+  </Flex>
+</Playground>
+
+

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

@@ -64,7 +64,7 @@ class Button extends React.Component<InnerProps> {
         className={rootClassName}
         classes={pick(classes, "keyboardFocus", "mouseHover")}
         disabled={disabled}
-        ref={forwardRef}
+        forwardRef={forwardRef}
         {...rest}
       />
     );

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

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import TestRenderer from "react-test-renderer";
 
 import { PropTypesOf } from "talk-ui/types";
 
@@ -11,10 +11,58 @@ it("renders correctly", () => {
     alignItems: "center",
     direction: "row",
   };
-  const wrapper = shallow(
+  const renderer = TestRenderer.create(
     <Flex {...props}>
       <div>Hello World</div>
     </Flex>
   );
-  expect(wrapper).toMatchSnapshot();
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders with wrap", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    wrap: true,
+  };
+  const renderer = TestRenderer.create(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders with wrap reverse", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    wrap: "reverse",
+  };
+  const renderer = TestRenderer.create(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders with item gutter", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    itemGutter: true,
+  };
+  const renderer = TestRenderer.create(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders with halfe item gutter", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    itemGutter: "half",
+  };
+  const renderer = TestRenderer.create(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
 });

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

@@ -3,11 +3,16 @@ import React, { Ref } from "react";
 import { StatelessComponent } from "react";
 
 import { pascalCase } from "talk-common/utils";
-import { withForwardRef } from "talk-ui/hocs";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
 
 import * as styles from "./Flex.css";
 
 interface InnerProps {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
   id?: string;
   role?: string;
   justifyContent?:
@@ -32,6 +37,7 @@ interface InnerProps {
 
 const Flex: StatelessComponent<InnerProps> = props => {
   const {
+    classes,
     className,
     justifyContent,
     alignItems,
@@ -43,27 +49,29 @@ const Flex: StatelessComponent<InnerProps> = props => {
   } = props;
 
   const classObject: Record<string, boolean> = {
-    [styles.itemGutter]: itemGutter === true,
-    [styles.halfItemGutter]: itemGutter === "half",
-    [styles.wrap]: wrap === true,
-    [styles.wrapReverse]: wrap === "reverse",
+    [classes.itemGutter]: itemGutter === true,
+    [classes.halfItemGutter]: itemGutter === "half",
+    [classes.wrap]: wrap === true,
+    [classes.wrapReverse]: wrap === "reverse",
   };
 
   if (justifyContent) {
-    classObject[(styles as any)[`justify${pascalCase(justifyContent)}`]] = true;
+    classObject[
+      (classes as any)[`justify${pascalCase(justifyContent)}`]
+    ] = true;
   }
 
   if (alignItems) {
-    classObject[(styles as any)[`align${pascalCase(alignItems)}`]] = true;
+    classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
   }
 
   if (direction) {
-    classObject[(styles as any)[`direction${pascalCase(direction)}`]] = true;
+    classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const classNames: string = cn(styles.root, className, classObject);
+  const classNames: string = cn(classes.root, className, classObject);
 
   return <div ref={forwardRef} className={classNames} {...rest} />;
 };
 
-export default withForwardRef(Flex);
+export default withForwardRef(withStyles(styles)(Flex));

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

@@ -9,3 +9,43 @@ exports[`renders correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders with halfe item gutter 1`] = `
+<div
+  className="Flex-root Flex-halfItemGutter"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders with item gutter 1`] = `
+<div
+  className="Flex-root Flex-itemGutter"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders with wrap 1`] = `
+<div
+  className="Flex-root Flex-wrap"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders with wrap reverse 1`] = `
+<div
+  className="Flex-root Flex-wrapReverse"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;

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

@@ -0,0 +1,53 @@
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Material Icons"), local("MaterialIcons-Regular"),
+    url(material-design-icons/iconfont/MaterialIcons-Regular.woff2)
+      format("woff2"),
+    url(material-design-icons/iconfont/MaterialIcons-Regular.woff)
+      format("woff"),
+    url(material-design-icons/iconfont/MaterialIcons-Regular.ttf)
+      format("truetype");
+}
+
+.root {
+  font-family: "Material Icons";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  overflow: hidden;
+  vertical-align: middle;
+  display: inline-block;
+
+  /* Enable Ligatures */
+  font-feature-settings: "liga";
+  font-variant-ligatures: "discretionary-ligatures";
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sm {
+  font-size: 18px;
+  width: 18px;
+}
+.md {
+  font-size: 24px;
+  width: 24px;
+}
+.lg {
+  font-size: 36px;
+  width: 36px;
+}
+.xl {
+  font-size: 48px;
+  width: 48px;
+}

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

@@ -0,0 +1,21 @@
+---
+name: Icon
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import Icon from './Icon'
+
+# Icon
+
+Renders an icon.
+
+Checkout available icons https://material.io/tools/icons/
+
+## Basic usage
+<Playground>
+  <Icon size="sm">face</Icon>
+  <Icon size="md">face</Icon>
+  <Icon size="lg">face</Icon>
+  <Icon size="xl">face</Icon>
+</Playground>

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

@@ -0,0 +1,23 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Icon from "./Icon";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Icon> = {
+    children: "face",
+  };
+  const renderer = TestRenderer.create(<Icon {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly with specified size", () => {
+  const props: PropTypesOf<typeof Icon> = {
+    size: "lg",
+    children: "bookmark",
+  };
+  const renderer = TestRenderer.create(<Icon {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

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

@@ -0,0 +1,37 @@
+import cn from "classnames";
+import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./Icon.css";
+
+interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+
+  size?: "sm" | "md" | "lg" | "xl";
+
+  /** ref to the HTMLIconElement */
+  ref?: Ref<HTMLSpanElement>;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLSpanElement>;
+}
+
+const Icon: StatelessComponent<InnerProps> = props => {
+  const { classes, className, size, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className, classes[size!]);
+  return <span className={rootClassName} {...rest} ref={forwardRef} />;
+};
+
+Icon.defaultProps = {
+  size: "sm",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(Icon));
+export type IconProps = PropTypesOf<typeof enhanced>;
+export default enhanced;

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<span
+  className="Icon-root Icon-sm"
+>
+  face
+</span>
+`;
+
+exports[`renders correctly with specified size 1`] = `
+<span
+  className="Icon-root Icon-lg"
+>
+  bookmark
+</span>
+`;

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

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