From 25afe0e77f01f5e9e09a6344338077fcdfa0aa2c Mon Sep 17 00:00:00 2001
From: Ayush Rathi <ayushrathi982@gmail.com>
Date: Tue, 22 Dec 2020 20:40:28 +0530
Subject: [PATCH] Responsive image component

---
 .../src/ResponsiveImage/ResponsiveImage.js    | 52 +++++++++++++++++++
 packages/core/src/ResponsiveImage/index.js    |  1 +
 packages/core/src/index.js                    |  2 +-
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/src/ResponsiveImage/ResponsiveImage.js
 create mode 100644 packages/core/src/ResponsiveImage/index.js

diff --git a/packages/core/src/ResponsiveImage/ResponsiveImage.js b/packages/core/src/ResponsiveImage/ResponsiveImage.js
new file mode 100644
index 0000000000..ca3e23aa61
--- /dev/null
+++ b/packages/core/src/ResponsiveImage/ResponsiveImage.js
@@ -0,0 +1,52 @@
+//This component can be used as <ResponsiveImage props/>
+/* props consist of:
+    _______________________
+    | 1 | type   | ds, dr |
+    | 2 | small  | <url>  |
+    | 3 | medium | <url>  |
+    | 4 | large  | <url>  |
+    | 5 | xlarge | <url>  |
+    _______________________
+
+*/
+const ResponsiveImage = (props) => {
+
+    //this object comprises of css styles that can be used as an inline style object for 'img' tag
+    const mystyle = {
+        maxWidth: "100%", //when this component is used within a parent div, maxWidth as 100% will not allow the image to overflow
+        height: "auto" //height auto will make sure that the height of the image is automatically adjusted in accordance with the width of it
+    };
+
+    //there are two types, 'dr' and 'ds' which stands for different sizes and different resolutions, respectively.
+    if(props.type === "ds"){
+    
+        return (
+            //three different sizes are provided: 300w, 768w, 1280w and 3000w for 'small', 'medium', 'large' and 'xlarge' images respectively
+            //user needs to provide three types of images: small, medium and large which will be displayed depending on the size of the viewport
+            <div>
+                <img
+                src={props.small} 
+                srcSet={`${props.small} 300w, ${props.medium} 768w, ${props.large} 1280w, ${props.xlarge} 3000w`} 
+                style={mystyle}
+                />
+             </div>
+        );
+    }
+
+    //for using different resolutions
+    else if(props.type === "dr"){
+
+        return (
+            //similarly for different resolutions, there are three different scales: 1x, 1.5x,2x and 2.5x for 'small', 'medium', 'large' and 'xlarge' respectively
+            <div>
+                <img 
+                src={props.small} 
+                srcSet={`${props.small} 1x, ${props.medium} 1.5x, ${props.large} 2x, ${props.xlarge} 2.5x`} 
+                style={mystyle}
+                />
+            </div>
+        );
+    }
+}
+
+export default ResponsiveImage
\ No newline at end of file
diff --git a/packages/core/src/ResponsiveImage/index.js b/packages/core/src/ResponsiveImage/index.js
new file mode 100644
index 0000000000..e4aacf16c1
--- /dev/null
+++ b/packages/core/src/ResponsiveImage/index.js
@@ -0,0 +1 @@
+export { default as ResponsiveImage } from './ResponsiveImage'
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
index 0409cdd449..fdf2a112df 100644
--- a/packages/core/src/index.js
+++ b/packages/core/src/index.js
@@ -40,7 +40,7 @@ export { Tooltip } from './Tooltip'
 export { ToggleBadge } from './ToggleBadge'
 export { Truncate } from './Truncate'
 export { Checkbox } from './Checkbox'
-
+export { ResponsiveImage } from './ResponsiveImage'
 export { theme } from './theme'
 export { ThemeProvider } from './ThemeProvider'