resolve theopenconversationkit#149: remove margin on paragraphs (theopenconversationkit#150)

Author: Fabilin

src/components/MessageBot/MessageBot.stories.tsx

@@ -5,22 +5,16 @@ import MessageBot from './MessageBot';
 
 const message = 'A bot message';
 
+const simpleHtml = '<p>A <b>formatted</b> bot message</p>';
+
 const html = `
 <b>Hello user!</b>
 <p>This is how I display:</p>
 <ul>
-  <li>
-    a html link to the <a href="https://doc.tock.ai">Tock Documentation Page</a>
-  </li>
-  <li>
-    a clickable string url to github.com/theopenconversationkit/tock-react-kit
-  </li>
-  <li>
-    a phone number link <a href="tel:0612345678">0612345678</a>, but not a number string link +33612345678
-  </li>
-  <li>
-    an e-mail link to a <a href="mailto:tock@yopmail.com">tock contact</a> and a string email link to tock@yopmail.com
-  </li>
+  <li>a html link to the <a href="https://doc.tock.ai">Tock Documentation Page</a></li>
+  <li>a clickable string url to github.com/theopenconversationkit/tock-react-kit</li>
+  <li>a phone number link <a href="tel:0612345678">0612345678</a>, but not a number string link +33612345678</li>
+  <li>an e-mail link to a <a href="mailto:tock@yopmail.com">tock contact</a> and a string email link to tock@yopmail.com</li>
 </ul>`;
 
 const meta: Meta<typeof MessageBot> = {
@@ -43,6 +37,19 @@ export const Default: Story = {
   },
 };
 
+export const WithBasicFormatting: Story = {
+  name: 'With basic formatting',
+  args: {
+    message: {
+      author: 'bot',
+      message: simpleHtml,
+      type: MessageType.message,
+      buttons: [],
+    },
+    onAction: Function.bind(null),
+  },
+};
+
 export const WithHtmlContent: Story = {
   name: 'With HTML content',
   args: {

src/components/MessageBot/MessageBot.tsx

@@ -15,6 +15,10 @@ export const MessageContainer: StyledComponent<{}> = styled.li`
   max-width: ${theme('sizing.conversation.width')};
   margin: 0.5em auto;
   list-style: none;
+
+  p {
+    margin: 0;
+  }
 `;
 
 export const Message: StyledComponent<{}> = styled.div`