From 5cd9cd7110bce8ed4b23b2c6421702411db92446 Mon Sep 17 00:00:00 2001
From: Amin Mahboubi <amin@getstream.io>
Date: Tue, 19 Jan 2021 17:25:36 +0100
Subject: [PATCH] Feat/classname support (#39)

* feat: Text component accepts className

* feat: Image component accepts className
---
 src/components/Image.tsx |  6 ++++--
 src/components/Text.tsx  | 11 ++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Image.tsx b/src/components/Image.tsx
index 222b99da..c191f29f 100644
--- a/src/components/Image.tsx
+++ b/src/components/Image.tsx
@@ -7,8 +7,10 @@ export type ImageProps = {
   alt?: string;
   /** The title tag for the image */
   title?: string;
+  /** Additional class name */
+  className?: string;
 };
 
-export const Image: FC<ImageProps> = ({ src, alt = '', title = '' }) => {
-  return <img className="mml-image" src={src} alt={alt} title={title} />;
+export const Image: FC<ImageProps> = ({ src, alt = '', title = '', className = '' }) => {
+  return <img className={`mml-image ${className}`.trim()} src={src} alt={alt} title={title} />;
 };
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index 1c11b87a..9deb4ed1 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -1,10 +1,15 @@
 import React, { FC } from 'react';
 
-export type TextProps = { text: string };
+export type TextProps = {
+  /** Text to render */
+  text: string;
+  /** Additional class name */
+  className?: string;
+};
 
 /**
  * Simple paragraph text element
  */
-export const Text: FC<TextProps> = ({ text }) => {
-  return <div className="mml-text">{text}</div>;
+export const Text: FC<TextProps> = ({ text, className = '' }) => {
+  return <div className={`mml-text ${className}`.trim()}>{text}</div>;
 };