From 3620beef35537afe5290387fe77e5b849873c7be Mon Sep 17 00:00:00 2001
From: Joe Motacek <cleanshooter@gmail.com>
Date: Fri, 2 Jul 2021 12:34:39 -0500
Subject: [PATCH 1/3] add support for all img tag attributes

---
 .eslintrc                     |  7 ++++-
 src/components/image/image.js | 52 +++++++++++++++++++++++++++++++----
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 7402bf12..1a3afc33 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -27,7 +27,12 @@
     }
   },
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
     "arrow-body-style": [2, "always"],
     "no-console": 0,
     "no-param-reassign": 0,
diff --git a/src/components/image/image.js b/src/components/image/image.js
index a7f2f05c..3c4c7a66 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -5,13 +5,28 @@ import classnames from 'classnames';
 import Element from '../element';
 
 const Image = ({
+  // figure tag props
   className,
+  fullwidth,
+  // img tag props
   alt,
+  crossOrigin,
+  height,
+  ismap,
+  loading,
+  longdesc,
+  referrerpolicy,
+  sizes,
+  src,
+  srcSet,
+  useMap,
+  width,
+  // component props
   size,
   fallback,
   rounded,
-  src,
-  fullwidth,
+  imageClassName,
+  // leftovers
   ...props
 }) => {
   const [state, setState] = useState({ src });
@@ -32,7 +47,7 @@ const Image = ({
       })}
     >
       <img
-        className={classnames({
+        className={classnames(imageClassName, {
           'is-rounded': rounded,
         })}
         onError={() => {
@@ -40,14 +55,41 @@ const Image = ({
         }}
         src={state.src}
         alt={alt}
+        crossOrigin={crossOrigin}
+        height={height ? `${height}px` : null}
+        ismap={ismap}
+        loading={loading}
+        longdesc={longdesc}
+        referrerpolicy={referrerpolicy}
+        sizes={sizes}
+        srcSet={srcSet}
+        useMap={useMap}
+        width={width ? `${width}px` : null}
       />
     </Element>
   );
 };
 
 Image.propTypes = {
-  src: PropTypes.string.isRequired,
+  fullwidth: PropTypes.bool,
   alt: PropTypes.string,
+  crossOrigin: PropTypes.oneOf(['anonymous', 'use-credentials']),
+  height: PropTypes.number,
+  ismap: PropTypes.bool,
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  longdesc: PropTypes.string,
+  referrerpolicy: PropTypes.oneOf([
+    'no-referrer',
+    'no-referrer-when-downgrade',
+    'origin',
+    'origin-when-cross-origin',
+    'unsafe-url',
+  ]),
+  sizes: PropTypes.string,
+  src: PropTypes.string.isRequired,
+  srcSet: PropTypes.string,
+  useMap: PropTypes.string,
+  width: PropTypes.number,
   rounded: PropTypes.bool,
   size: PropTypes.oneOfType([
     PropTypes.oneOf([
@@ -79,7 +121,7 @@ Image.propTypes = {
     PropTypes.string,
   ]),
   fallback: PropTypes.string,
-  fullwidth: PropTypes.bool,
+  imageClassName: PropTypes.string,
   renderAs: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.string,

From 22adf680d1c05ed59ddccb7e4b96021f6704396e Mon Sep 17 00:00:00 2001
From: Joe Motacek <cleanshooter@gmail.com>
Date: Fri, 2 Jul 2021 12:38:47 -0500
Subject: [PATCH 2/3] add docs for imageClassName

---
 src/components/image/image.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/image/image.js b/src/components/image/image.js
index 3c4c7a66..3e23095f 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -121,6 +121,9 @@ Image.propTypes = {
     PropTypes.string,
   ]),
   fallback: PropTypes.string,
+  /**
+   * Applies additional classes to the `img` tag (standard `className` applies to root element)
+   */
   imageClassName: PropTypes.string,
   renderAs: PropTypes.oneOfType([
     PropTypes.func,

From 253ebcf36940b9c7fefaaba40eb3f18b0af4b5c2 Mon Sep 17 00:00:00 2001
From: Joe Motacek <cleanshooter@gmail.com>
Date: Fri, 2 Jul 2021 13:02:44 -0500
Subject: [PATCH 3/3] fix test issues

---
 src/components/image/image.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/image/image.js b/src/components/image/image.js
index 3e23095f..6f8966fd 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -56,7 +56,7 @@ const Image = ({
         src={state.src}
         alt={alt}
         crossOrigin={crossOrigin}
-        height={height ? `${height}px` : null}
+        height={height}
         ismap={ismap}
         loading={loading}
         longdesc={longdesc}
@@ -64,7 +64,7 @@ const Image = ({
         sizes={sizes}
         srcSet={srcSet}
         useMap={useMap}
-        width={width ? `${width}px` : null}
+        width={width}
       />
     </Element>
   );
@@ -74,7 +74,7 @@ Image.propTypes = {
   fullwidth: PropTypes.bool,
   alt: PropTypes.string,
   crossOrigin: PropTypes.oneOf(['anonymous', 'use-credentials']),
-  height: PropTypes.number,
+  height: PropTypes.string,
   ismap: PropTypes.bool,
   loading: PropTypes.oneOf(['eager', 'lazy']),
   longdesc: PropTypes.string,
@@ -89,7 +89,7 @@ Image.propTypes = {
   src: PropTypes.string.isRequired,
   srcSet: PropTypes.string,
   useMap: PropTypes.string,
-  width: PropTypes.number,
+  width: PropTypes.string,
   rounded: PropTypes.bool,
   size: PropTypes.oneOfType([
     PropTypes.oneOf([