Feat/classname support (#39)

* feat: Text component accepts className

* feat: Image component accepts className

Author: Amin Mahboubi

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} />;
 };

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>;
 };