Adding Message Matching the exact values

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

@@ -0,0 +1,29 @@
+.root {
+  composes: alertMessage from "talk-ui/shared/typography.css";
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: calc(0.8 * var(--spacing-unit)) var(--spacing-unit);
+  box-sizing: border-box;
+  border-radius: var(--round-corners);
+  border-width: 1px;
+  border-left-width: calc(0.8 * var(--spacing-unit));
+  border-style: solid;
+}
+
+.color {
+  background-color: var(--palette-common-white);
+  border-color: var(--palette-grey-main);
+  color: var(--palette-grey-main);
+}
+
+.fullWidth {
+  display: flex;
+  width: 100%;
+}
+
+.icon {
+  margin-right: calc(0.8 * var(--spacing-unit));
+  color: var(--palette-grey-main);
+}

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

@@ -0,0 +1,27 @@
+---
+name: Message
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import Message from './Message'
+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 icon="alarm">Edit: 1 min 23 secs Remaining</Message>
+  </HorizontalGutter>
+</Playground>
+
+

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

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

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

@@ -0,0 +1,61 @@
+import cn from "classnames";
+import React, { ReactNode, StatelessComponent } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+
+import Icon from "../Icon";
+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 the icon, render if provided
+  */
+  icon?: string;
+}
+
+const Message: StatelessComponent<MessageProps> = props => {
+  const { className, classes, fullWidth, children, icon, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    classes.color,
+    {
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return (
+    <div className={rootClassName} {...rest}>
+      {icon && (
+        <Icon size="md" className={classes.icon}>
+          {icon}
+        </Icon>
+      )}
+      {children}
+    </div>
+  );
+};
+
+Message.defaultProps = {
+  fullWidth: false,
+};
+
+const enhanced = withStyles(styles)(Message);
+export default enhanced;

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

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

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

@@ -20,3 +20,4 @@ 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";