Validation Message

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";