Validation Message

package.json

@@ -171,4 +171,4 @@
     "webpack-hot-client": "^4.1.1",
     "webpack-manifest-plugin": "^2.0.3"
   }
-}
+}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StatelessComponent } from "react";
 
-import { Typography } from "talk-ui/components";
+import { Typography, ValidationMessage } from "talk-ui/components";
 
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
@@ -23,6 +23,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
         <Timestamp>{props.createdAt}</Timestamp>
       </TopBar>
       <Typography>{props.body}</Typography>
+      <ValidationMessage color="error">Hello</ValidationMessage>
     </div>
   );
 };

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

@@ -0,0 +1,23 @@
+.root {
+  composes: validationMessage from "talk-ui/shared/typography.css";
+  padding: 4px;
+}
+
+.colorRegular {
+  background-color: transparent;
+  border: none;
+  color: var(--palette-common-black);
+}
+
+.colorError {
+  background-color: var(--palette-error-light);
+  border-radius: 1px;
+  border-color: var(--palette-error-darkest);
+  border-left-width: 8px;
+  border-left-style: solid;
+  color: var(--palette-common-white);
+}
+
+.icon {
+  margin-right: 8px;
+}

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

@@ -0,0 +1,20 @@
+---
+name: ValidationMessage
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import ValidationMessage from './ValidationMessage'
+import
+# ValidationMessage
+
+## Basic Use
+<Playground>
+  <Flex itemGutter direction="column">
+    <ValidationMessage>Account with this email address already exists. Try another email</ValidationMessage>
+    <ValidationMessage>Please enter a valid email address</ValidationMessage>
+    <ValidationMessage>Invalid characters. Try again</ValidationMessage>
+  </Flex>
+</Playground>
+
+

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

@@ -0,0 +1,56 @@
+import cn from "classnames";
+import React from "react";
+import { ReactNode, StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import Icon from "../Icon";
+import * as styles from "./ValidationMessage.css";
+
+interface InnerProps {
+  /**
+   * The content of the component.
+   */
+  children: string | ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * Color of the ValidationMessage
+   */
+  color?: "regular" | "error";
+}
+
+const ValidationMessage: StatelessComponent<InnerProps> = props => {
+  const { className, classes, color, children, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.colorRegular]: color === "regular",
+      [classes.colorError]: color === "error",
+    },
+    className
+  );
+
+  return (
+    <div className={rootClassName} {...rest}>
+      {color === "error" && (
+        <Icon size="sm" className={classes.icon}>
+          face
+        </Icon>
+      )}
+      {children}
+    </div>
+  );
+};
+
+ValidationMessage.defaultProps = {
+  color: "regular",
+};
+
+const enhanced = withStyles(styles)(ValidationMessage);
+export default enhanced;

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

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

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

@@ -6,3 +6,4 @@ export { default as UIContext, UIContextProps } from "./UIContext";
 export { default as Flex } from "./Flex";
 export { default as MatchMedia } from "./MatchMedia";
 export { default as TrapFocus } from "./TrapFocus";
+export { default as ValidationMessage } from "./ValidationMessage";

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

@@ -126,3 +126,12 @@
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
 }
+
+.validationMessage {
+  color: var(--palette-common-black);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 16px;
+  line-height: normal;
+  letter-spacing: calc(0.2em / 16);
+}