Added additional props to mdx images

packages/website/ts/components/docs/mdx/image.tsx

@@ -1,20 +1,43 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-export interface IImageProps {
+interface IImageProps extends IImageWrapperProps {
     src: string;
     alt?: string;
     title?: string;
+    height?: number | string;
+    width?: number | string;
+}
+
+interface IImageWrapperProps {
+    align?: string;
+    justify?: string;
+    padding?: string;
+    margin?: string;
+    marginBottom?: string;
 }
 
 export const Image: React.FC<IImageProps> = props => (
-    <ImageWrapper>
+    <ImageWrapper {...props}>
         <img {...props} />
     </ImageWrapper>
 );
 
-const ImageWrapper = styled.span`
+const alignImage = ({ align, justify }: { align: string; justify: string }) => {
+    if (align === 'left' || justify === 'flex-start') {
+        return 'flex-start';
+    }
+    if (align === 'right' || justify === 'flex-end') {
+        return 'flex-end';
+    }
+    return 'center';
+};
+
+const ImageWrapper = styled.span<IImageWrapperProps>`
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: ${({ align, justify }) => alignImage({ align, justify })};
+    padding: ${props => props.padding};
+    margin: ${props => props.margin};
+    margin-bottom: ${props => props.marginBottom};
 `;

packages/website/ts/pages/docs/page.tsx

@@ -165,6 +165,7 @@ const mdxComponents = {
     ul: UnorderedList,
     Animation,
     CodeTabs,
+    Image,
     NewsletterWidget,
     Note,
     Notification,