Merge branch 'next' of github.com:coralproject/talk into ui-tab

* 'next' of github.com:coralproject/talk:
  new snapshots after rebuilding the schema
  new snapshots after rebuilding the schema
  updated status
  changes
  Updated tests
  Updated tests
  Updated tests
  Adding MessageIcon
  Updated colors
  Updated snapshots
  Supporting icons with ValidationMessages
  Updated API
  Adding Message Matching the exact values

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

@@ -7,8 +7,15 @@
   padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
   box-sizing: border-box;
   border-radius: var(--round-corners);
+  border-width: 1px;
+  border-style: solid;
   border-left-width: calc(0.5 * var(--spacing-unit));
-  border-left-style: solid;
+}
+
+.colorGrey {
+  background-color: var(--palette-common-white);
+  border-color: var(--palette-grey-main);
+  color: var(--palette-grey-main);
 }
 
 .colorError {
@@ -21,7 +28,3 @@
   display: flex;
   width: 100%;
 }
-
-.icon {
-  margin-right: var(--spacing-unit);
-}

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

@@ -0,0 +1,28 @@
+---
+name: Message
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import Message from './Message'
+import MessageIcon from './MessageIcon'
+import HorizontalGutter from '../HorizontalGutter'
+
+# Message
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <Message>This is a message</Message>
+    <Message fullWidth>Contrary to popular belief, Lorem Ipsum is not simply random text.</Message>
+  </HorizontalGutter>
+</Playground>
+
+## Usage with icon
+<Playground>
+  <HorizontalGutter>
+    <Message><MessageIcon size="sm">alarm</MessageIcon>Edit: 1 min 23 secs Remaining</Message>
+  </HorizontalGutter>
+</Playground>
+
+

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

@@ -0,0 +1,25 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import Message from "./Message";
+import MessageIcon from "./MessageIcon";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Message> = {
+    className: "custom",
+    children: "Hello World",
+  };
+  const renderer = TestRenderer.create(<Message {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders icon", () => {
+  const renderer = TestRenderer.create(
+    <Message>
+      <MessageIcon>alert</MessageIcon>Alert Message
+    </Message>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

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

@@ -0,0 +1,55 @@
+import cn from "classnames";
+import React, { ReactNode, StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./Message.css";
+
+export interface MessageProps {
+  /**
+   * The content of the component.
+   */
+  children: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /*
+  * If set renders a full width message
+  */
+  fullWidth?: boolean;
+  /*
+  * Name of color, "grey" stays by default - common gray one
+  */
+  color?: "error" | "grey";
+}
+
+const Message: StatelessComponent<MessageProps> = props => {
+  const { className, classes, fullWidth, children, color, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.colorGrey]: color === "grey",
+      [classes.colorError]: color === "error",
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return (
+    <div className={rootClassName} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+Message.defaultProps = {
+  color: "grey",
+  fullWidth: false,
+};
+
+const enhanced = withStyles(styles)(Message);
+export default enhanced;

src/core/client/ui/components/Message/MessageIcon.css

@@ -0,0 +1,5 @@
+.root {
+  &:first-child {
+    margin-right: calc(0.5 * var(--spacing-unit));
+  }
+}

src/core/client/ui/components/Message/MessageIcon.tsx

@@ -0,0 +1,36 @@
+import cn from "classnames";
+import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+
+import Icon, { IconProps } from "talk-ui/components/Icon";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+
+import * as styles from "./MessageIcon.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 & IconProps["classes"];
+
+  size?: IconProps["size"];
+
+  /** The name of the icon to render */
+  children: string;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLSpanElement>;
+}
+
+export const MessageIcon: StatelessComponent<InnerProps> = props => {
+  const { classes, className, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <Icon className={rootClassName} {...rest} forwardRef={forwardRef} />;
+};
+
+MessageIcon.defaultProps = {
+  size: "sm",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(MessageIcon));
+export default enhanced;

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Message-root Message-colorGrey custom"
+>
+  Hello World
+</div>
+`;
+
+exports[`renders icon 1`] = `
+<div
+  className="Message-root Message-colorGrey"
+>
+  <span
+    aria-hidden="true"
+    className="Icon-root MessageIcon-root Icon-sm"
+  >
+    alert
+  </span>
+  Alert Message
+</div>
+`;

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

@@ -0,0 +1 @@
+export { default } from "./Message";

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

@@ -4,7 +4,7 @@ menu: UI Kit
 ---
 
 import { Playground } from 'docz'
-import ValidationMessage from './ValidationMessage.tsx'
+import ValidationMessage from './ValidationMessage'
 import HorizontalGutter from '../HorizontalGutter'
 
 # ValidationMessage

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

@@ -1,10 +1,6 @@
-import cn from "classnames";
 import React, { ReactNode, StatelessComponent } from "react";
-
-import { withStyles } from "talk-ui/hocs";
-
-import Icon from "../Icon";
-import * as styles from "./ValidationMessage.css";
+import Message from "../Message";
+import MessageIcon from "../Message/MessageIcon";
 
 export interface ValidationMessageProps {
   /**
@@ -16,34 +12,24 @@ export interface ValidationMessageProps {
    */
   className?: string;
   /**
-   * Override or extend the styles applied to the component.
+   * If set renders a full width message
    */
-  classes: typeof styles;
-  /*
-  * If set renders a full width message
-  */
   fullWidth?: boolean;
 }
 
 const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
-  const { className, classes, fullWidth, children, ...rest } = props;
-
-  const rootClassName = cn(
-    classes.root,
-    classes.colorError,
-    {
-      [classes.fullWidth]: fullWidth,
-    },
-    className
-  );
+  const { className, fullWidth, children, ...rest } = props;
 
   return (
-    <div className={rootClassName} {...rest}>
-      <Icon size="sm" className={classes.icon}>
-        warning
-      </Icon>
+    <Message
+      color="error"
+      className={className}
+      fullWidth={fullWidth}
+      {...rest}
+    >
+      <MessageIcon>warning</MessageIcon>
       {children}
-    </div>
+    </Message>
   );
 };
 
@@ -51,5 +37,4 @@ ValidationMessage.defaultProps = {
   fullWidth: false,
 };
 
-const enhanced = withStyles(styles)(ValidationMessage);
-export default enhanced;
+export default ValidationMessage;

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

@@ -2,11 +2,11 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="ValidationMessage-root ValidationMessage-colorError custom"
+  className="Message-root Message-colorError custom"
 >
   <span
     aria-hidden="true"
-    className="Icon-root ValidationMessage-icon Icon-sm"
+    className="Icon-root MessageIcon-root Icon-sm"
   >
     warning
   </span>

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

@@ -20,4 +20,5 @@ export { default as Spinner } from "./Spinner";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";
 export { default as AriaInfo } from "./AriaInfo";
+export { default as Message } from "./Message";
 export { Tab, TabBar, TabContent, TabPane } from "./Tabs";