From 9dcf240dab4044e0139503fbf87f274d0abc6983 Mon Sep 17 00:00:00 2001
From: Ankit Kumar <abalyan@quotient.com>
Date: Fri, 10 Apr 2020 06:12:53 +0530
Subject: [PATCH 1/3] Mapping size array prop with components sizes + added
 example for avatar responsive size

---
 packages/docs/src/pages/components/avatar.js | 18 ++++++++++++++++++
 packages/react-ui/src/primitives/element.js  |  5 ++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/components/avatar.js b/packages/docs/src/pages/components/avatar.js
index 73e93d3..367baa1 100644
--- a/packages/docs/src/pages/components/avatar.js
+++ b/packages/docs/src/pages/components/avatar.js
@@ -70,6 +70,24 @@ const Documentation = () => {
             <Avatar size="large"  src="https://github.com/sameen-shi.png" />
           `}</Example.Code>
         </Example>
+
+        <Example title="Responsive Size">
+          <Para>
+            <Text variant="subtle" size={3}>
+              (Try resizing the browser window to see this in effect. If you're
+              on mobile, try switching to landscape mode)
+            </Text>
+          </Para>
+          <Example.Preview>
+            <Avatar
+              size={['small', 'medium', 'large']}
+              src="https://github.com/sameen-shi.png"
+            />
+          </Example.Preview>
+          <Example.Code>{`
+            <Avatar size={["small", "medium", "large"]} src="https://github.com/sameen-shi.png" />
+          `}</Example.Code>
+        </Example>
       </Section>
 
       <Section title="Customisation">
diff --git a/packages/react-ui/src/primitives/element.js b/packages/react-ui/src/primitives/element.js
index d45e125..e7c0f84 100644
--- a/packages/react-ui/src/primitives/element.js
+++ b/packages/react-ui/src/primitives/element.js
@@ -75,8 +75,11 @@ function Element(
     if (typeof theme.sizes[component] !== 'object') {
       // single value, attach to component
       value = theme.sizes[component]
+    } else if (Array.isArray(size)) {
+      // if its multiple values and size is array (responsive), attach the corresponding key
+      value = size.map(s => theme.sizes[component][s]);
     } else {
-      // if its multiple values, attach the corresponding key
+      // if its multiple values and size is single vlaue (non reponsive), attach the corresponding key
       value = theme.sizes[component][size]
     }
 

From 0851b628d039221fb13639a1d7dde13a4e15b76d Mon Sep 17 00:00:00 2001
From: Ankit Balyan <ankit.kr.balyan@gmail.com>
Date: Fri, 10 Apr 2020 10:38:14 +0530
Subject: [PATCH 2/3] added new prop for type validation

---
 packages/react-ui/src/components/avatar/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-ui/src/components/avatar/index.js b/packages/react-ui/src/components/avatar/index.js
index a70b00c..df3b9a8 100644
--- a/packages/react-ui/src/components/avatar/index.js
+++ b/packages/react-ui/src/components/avatar/index.js
@@ -17,7 +17,10 @@ Avatar.propTypes = {
   /** Image url for avatar */
   src: PropTypes.string.isRequired,
   /** size of avatar */
-  size: PropTypes.string
+  size: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ])
 }
 
 Avatar.defaultProps = {}

From 5d1393b20d5f4810598fcb8cf1ac80d1a4c0cfeb Mon Sep 17 00:00:00 2001
From: Ankit Kumar <abalyan@quotient.com>
Date: Tue, 14 Apr 2020 03:06:09 +0530
Subject: [PATCH 3/3] updated typo in comment

---
 packages/react-ui/src/primitives/element.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-ui/src/primitives/element.js b/packages/react-ui/src/primitives/element.js
index e7c0f84..9fd6aeb 100644
--- a/packages/react-ui/src/primitives/element.js
+++ b/packages/react-ui/src/primitives/element.js
@@ -79,7 +79,7 @@ function Element(
       // if its multiple values and size is array (responsive), attach the corresponding key
       value = size.map(s => theme.sizes[component][s]);
     } else {
-      // if its multiple values and size is single vlaue (non reponsive), attach the corresponding key
+      // if its multiple values and size is single value (non reponsive), attach the corresponding key
       value = theme.sizes[component][size]
     }