From e4f518868ee363021b6a8556b291c8e9f48ee1c9 Mon Sep 17 00:00:00 2001 From: Djordje Vlaisavljevic Date: Thu, 28 Sep 2023 15:22:00 +0100 Subject: [PATCH] Updated Recommendations design (#18390) refs https://github.com/TryGhost/Product/issues/3938 - Updated "Recommendation received" email design - Slightly improved how dark favicons show in dark mode - Added TabView with counter variant to Storybook --- .../src/admin-x-ds/global/TabView.stories.tsx | 12 + .../AddRecommendationModal.tsx | 2 +- .../recommendations/RecommendationIcon.tsx | 2 +- .../recommendation-emails.test.js.snap | 257 +----------------- .../IncomingRecommendationEmailRenderer.ts | 2 +- .../recommendation-received.hbs | 16 +- 6 files changed, 34 insertions(+), 257 deletions(-) diff --git a/apps/admin-x-settings/src/admin-x-ds/global/TabView.stories.tsx b/apps/admin-x-settings/src/admin-x-ds/global/TabView.stories.tsx index 0beaaca7b6..62ab492694 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/TabView.stories.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/global/TabView.stories.tsx @@ -29,6 +29,12 @@ const tabs = [ {id: 'tab-6', title: 'Backstreet boys', contents:
Contents three
} ]; +const tabsWithCounters = [ + {id: 'tab-1', title: 'Some items', counter: 4, contents:
Contents one
}, + {id: 'tab-2', title: 'Lots of items', counter: 12, contents:
Contents two
}, + {id: 'tab-3', title: 'No items', counter: 0, contents:
Contents three
} +]; + export const Default: Story = { args: { tabs: tabs, @@ -42,3 +48,9 @@ export const NoBorder: Story = { border: false } }; + +export const WithCounter: Story = { + args: { + tabs: tabsWithCounters + } +}; diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModal.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModal.tsx index 8549a43c02..f9b33f880a 100644 --- a/apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModal.tsx +++ b/apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModal.tsx @@ -209,7 +209,7 @@ const AddRecommendationModal: React.FC -

You can recommend any site your audience will find valuable, not just those published on Ghost.

+

You can recommend any site your audience will find valuable, not just those published on Ghost.

= ({title, favicon, featured_image, is const hint = isGhostSite ? 'This is a Ghost site that supports one-click subscribe' : ''; return ( -
+
{title} {isGhostSite && Ghost Logo}
diff --git a/ghost/core/test/e2e-server/services/__snapshots__/recommendation-emails.test.js.snap b/ghost/core/test/e2e-server/services/__snapshots__/recommendation-emails.test.js.snap index 95ffc8e9b6..42cb8ceeef 100644 --- a/ghost/core/test/e2e-server/services/__snapshots__/recommendation-emails.test.js.snap +++ b/ghost/core/test/e2e-server/services/__snapshots__/recommendation-emails.test.js.snap @@ -1,227 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Incoming Recommendation Emails Sends a different email if we receive a recommendation back 1: [html 1] 1`] = ` -" - - - - - πŸ’Œ New recommenation - - - - - - - - - - -
  -
- - - - - - - - - - -
- - - - - - - - - - - - - - -
-

Good news!

- -

One of the sites you're recommending is now recommending you back:

- -
- -
-
Other Ghost Site
-
-
- - Other Ghost Site -
-
- -
- - - - - - - -
- - - - - - -
View recommendations
-
-
-

You can also copy & paste this URL into your browser:

-

http://127.0.0.1:2369/ghost/#/settings-x/recommendations

-
-

This message was sent from 127.0.0.1 to jbloggs@example.com

-
-

Don’t want to receive these emails? Manage your preferences here.

-
-
- - - -
- 		 
- - -" -`; - -exports[`Incoming Recommendation Emails Sends a different email if we receive a recommendation back 2: [text 1] 1`] = ` -" -You have been recommended by Other Ghost Site. - ---- - -Sent to jbloggs@example.com from 127.0.0.1. -If you would no longer like to receive these notifications you can adjust your settings at http://127.0.0.1:2369/ghost/#/settings-x/users/show/joe-bloggs. - " -`; - -exports[`Incoming Recommendation Emails Sends a different email if we receive a recommendation back 3: [metadata 1] 1`] = ` -Object { - "subject": "Other Ghost Site recommended you", - "to": "jbloggs@example.com", -} -`; - exports[`Incoming Recommendation Emails Sends an email if we receive a recommendation 1: [html 1] 1`] = ` " - πŸ’Œ New recommenation + πŸ‘ New recommendation