Adding CallOut Component and tests

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

@@ -0,0 +1,35 @@
+.root {
+  composes: bodyCopy from "talk-ui/shared/typography.css";
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px;
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.colorRegular {
+  background-color: var(--palette-grey-lightest);
+  border-color: var(--palette-grey-light);
+  color: var(--palette-text-primary);
+}
+
+.colorPrimary {
+  background-color: var(--palette-primary-lightest);
+  border-color: var(--palette-primary-light);
+  color: var(--palette-text-primary);
+}
+
+.colorError {
+  background-color: var(--palette-error-lightest);
+  border-color: var(--palette-error-light);
+  color: var(--palette-text-primary);
+}
+
+.fullWidth {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,23 @@
+---
+name: CallOut
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import CallOut from './CallOut'
+import Flex from '../Flex'
+
+# CallOut
+
+## Basic Use
+<Playground>
+  <Flex itemGutter direction="column">
+    <CallOut>This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
+    <CallOut color="primary">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
+    <CallOut color="error">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
+    <CallOut color="error">The email address or password you entered is incorrect. Try again</CallOut>
+    <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
+  </Flex>
+</Playground>
+
+

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

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

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

@@ -0,0 +1,57 @@
+import cn from "classnames";
+import React from "react";
+import { ReactNode, StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./CallOut.css";
+
+export interface CallOutProps {
+  /**
+   * 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 CallOut
+   */
+  color?: "regular" | "primary" | "error";
+  /*
+  * If set renders a full width CallOut
+  */
+  fullWidth?: boolean;
+}
+
+const CallOut: StatelessComponent<CallOutProps> = props => {
+  const { className, classes, color, fullWidth, children, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.colorRegular]: color === "regular",
+      [classes.colorError]: color === "error",
+      [classes.colorPrimary]: color === "primary",
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return (
+    <div className={rootClassName} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+CallOut.defaultProps = {
+  color: "regular",
+  fullWidth: false,
+};
+
+const enhanced = withStyles(styles)(CallOut);
+export default enhanced;

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="CallOut-root CallOut-colorError custom"
+>
+  Hello World
+</div>
+`;

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

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

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

@@ -23,7 +23,7 @@ export interface ValidationMessageProps {
    */
   color?: "regular" | "error";
   /*
-  * If set renders a full width button
+  * If set renders a full width message
   */
   fullWidth?: boolean;
 }

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

@@ -9,3 +9,4 @@ export { default as TrapFocus } from "./TrapFocus";
 export { default as ValidationMessage } from "./ValidationMessage";
 export { default as InputLabel } from "./InputLabel";
 export { default as TextField } from "./TextField";
+export { default as CallOut } from "./CallOut";