From d2098a783ed8382dbadffb43860fedbc0eb7a1ed Mon Sep 17 00:00:00 2001
From: Rish <zrishabhgarg@gmail.com>
Date: Fri, 1 May 2020 12:35:51 +0530
Subject: [PATCH] Added common members avatar component

refs https://github.com/TryGhost/members.js/issues/20

- Adds a common component to render member gravatar with backup of user icon where gravatar is not available or is blank.
- Used in both Trigger component for logged in member as well as account areas.
---
 .../src/components/common/MemberGravatar.js   | 38 +++++++++++++++++++
 .../components/common/MemberGravatar.test.js  | 31 +++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 ghost/portal/src/components/common/MemberGravatar.js
 create mode 100644 ghost/portal/src/components/common/MemberGravatar.test.js

diff --git a/ghost/portal/src/components/common/MemberGravatar.js b/ghost/portal/src/components/common/MemberGravatar.js
new file mode 100644
index 0000000000..135f9113b4
--- /dev/null
+++ b/ghost/portal/src/components/common/MemberGravatar.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import {ReactComponent as UserIcon} from '../../images/icons/user.svg';
+
+const Styles = ({style = {}}) => {
+    return {
+        userIcon: {
+            width: '20px',
+            height: '20px',
+            color: '#fff',
+            ...(style.userIcon || {}) // Override any custom style
+        },
+        gravatar: {
+            display: 'block',
+            position: 'absolute',
+            top: '-1px',
+            right: '-1px',
+            bottom: '-1px',
+            left: '-1px',
+            width: 'calc(100% + 2px)',
+            height: 'calc(100% + 2px)',
+            opacity: '1',
+            maxWidth: 'unset',
+            ...(style.gravatar || {}) // Override any custom style
+        }
+    };
+};
+
+function MemberGravatar({gravatar, style}) {
+    let Style = Styles({style});
+    return (
+        <figure>
+            <UserIcon style={Style.userIcon} />
+            {gravatar ? <img src={gravatar} alt="Gravatar" style={Style.gravatar} /> : null}
+        </figure>
+    );
+}
+
+export default MemberGravatar;
diff --git a/ghost/portal/src/components/common/MemberGravatar.test.js b/ghost/portal/src/components/common/MemberGravatar.test.js
new file mode 100644
index 0000000000..d0f9dcfc0a
--- /dev/null
+++ b/ghost/portal/src/components/common/MemberGravatar.test.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import MemberGravatar from './MemberGravatar';
+
+const setup = (overrides = {}) => {
+    const props = {
+        gravatar: 'https://gravatar.com/avatar/76a4c5450dbb6fde8a293a811622aa6f?s=250&d=blank'
+    };
+    const utils = render(
+        <MemberGravatar {...props} />
+    );
+
+    const figureEl = utils.container.querySelector('figure');
+    const userIconEl = utils.container.querySelector('svg');
+    const imgEl = utils.container.querySelector('img');
+    return {
+        figureEl,
+        userIconEl,
+        imgEl,
+        ...utils
+    };
+};
+
+describe('MemberGravatar', () => {
+    test('renders', () => {
+        const {figureEl, userIconEl, imgEl} = setup();
+        expect(figureEl).toBeInTheDocument();
+        expect(userIconEl).toBeInTheDocument();
+        expect(imgEl).toBeInTheDocument();
+    });
+});