From e909d21039bc8aa0c07fda48e91c0f18fe091cfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 7 Sep 2018 10:23:29 -0300
Subject: [PATCH] Adding Message Matching the exact values

---
 .../client/ui/components/Message/Message.css  | 29 +++++++++
 .../client/ui/components/Message/Message.mdx  | 27 ++++++++
 .../ui/components/Message/Message.spec.tsx    | 15 +++++
 .../client/ui/components/Message/Message.tsx  | 61 +++++++++++++++++++
 .../client/ui/components/Message/index.ts     |  1 +
 src/core/client/ui/components/index.ts        |  1 +
 6 files changed, 134 insertions(+)
 create mode 100644 src/core/client/ui/components/Message/Message.css
 create mode 100644 src/core/client/ui/components/Message/Message.mdx
 create mode 100644 src/core/client/ui/components/Message/Message.spec.tsx
 create mode 100644 src/core/client/ui/components/Message/Message.tsx
 create mode 100644 src/core/client/ui/components/Message/index.ts

diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css
new file mode 100644
index 000000000..86c7f0129
--- /dev/null
+++ b/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);
+}
diff --git a/src/core/client/ui/components/Message/Message.mdx b/src/core/client/ui/components/Message/Message.mdx
new file mode 100644
index 000000000..9a876d76c
--- /dev/null
+++ b/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>
+
+
diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx
new file mode 100644
index 000000000..d1335f8d9
--- /dev/null
+++ b/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();
+});
diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx
new file mode 100644
index 000000000..19bb8ece5
--- /dev/null
+++ b/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;
diff --git a/src/core/client/ui/components/Message/index.ts b/src/core/client/ui/components/Message/index.ts
new file mode 100644
index 000000000..a6d22dd86
--- /dev/null
+++ b/src/core/client/ui/components/Message/index.ts
@@ -0,0 +1 @@
+export { default } from "./Message";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index f701660dd..61970ed25 100644
--- a/src/core/client/ui/components/index.ts
+++ b/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";