From 3059bd24fc84e868948d6119af8faed1be34d3fe Mon Sep 17 00:00:00 2001 From: Gergely Juhasz Date: Mon, 13 May 2024 11:20:02 +0200 Subject: [PATCH 1/5] Add inline clarification for the admin page --- .../social/src/js/components/header/index.js | 13 +++++++++++++ .../src/js/components/header/styles.module.scss | 4 +++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/projects/plugins/social/src/js/components/header/index.js b/projects/plugins/social/src/js/components/header/index.js index 4dcd1c8d6a335..e326c9233834b 100644 --- a/projects/plugins/social/src/js/components/header/index.js +++ b/projects/plugins/social/src/js/components/header/index.js @@ -7,6 +7,7 @@ import { SocialIcon, getRedirectUrl, getUserLocale, + Text, } from '@automattic/jetpack-components'; import { ConnectionError, useConnectionErrorNotice } from '@automattic/jetpack-connection'; import { @@ -15,6 +16,7 @@ import { useShareLimits, } from '@automattic/jetpack-publicize-components'; import { useSelect } from '@wordpress/data'; +import { createInterpolateElement } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Icon, postList } from '@wordpress/icons'; import StatCards from '../stat-cards'; @@ -92,6 +94,17 @@ const Header = () => { noticeType={ noticeType } className={ styles[ 'bar-wrapper' ] } /> + + { createInterpolateElement( + __( + 'As a free Jetpack Social user, you get 30 shares within every rolling 30-day window.', + 'jetpack-social' + ), + { + i: , + } + ) } + Date: Mon, 13 May 2024 11:20:25 +0200 Subject: [PATCH 2/5] Add tooltip inside the editor --- .../src/components/form/share-count-info.tsx | 18 ++++++++++++++---- .../src/components/form/styles.module.scss | 5 +++++ 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/projects/js-packages/publicize-components/src/components/form/share-count-info.tsx b/projects/js-packages/publicize-components/src/components/form/share-count-info.tsx index 0446d83650b06..3bd24fc5011a8 100644 --- a/projects/js-packages/publicize-components/src/components/form/share-count-info.tsx +++ b/projects/js-packages/publicize-components/src/components/form/share-count-info.tsx @@ -1,4 +1,4 @@ -import { Text, ThemeProvider } from '@automattic/jetpack-components'; +import { IconTooltip, Text, ThemeProvider } from '@automattic/jetpack-components'; import { getRedirectUrl } from '@automattic/jetpack-components'; import { getSiteFragment } from '@automattic/jetpack-shared-extension-utils'; import { Button, PanelRow } from '@wordpress/components'; @@ -24,9 +24,19 @@ export const ShareCountInfo: React.FC = () => {
- - { __( 'Auto-share usage', 'jetpack' ) } - +
+ + { __( 'Auto-share usage', 'jetpack' ) } + + + + { __( + 'As a free Jetpack Social user, you get 30 shares within every rolling 30-day window.', + 'jetpack' + ) } + + +
Date: Mon, 13 May 2024 11:21:00 +0200 Subject: [PATCH 3/5] changelog --- .../changelog/add-social-limit-clarification | 4 ++++ .../plugins/social/changelog/add-social-limit-clarification | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 projects/js-packages/publicize-components/changelog/add-social-limit-clarification create mode 100644 projects/plugins/social/changelog/add-social-limit-clarification diff --git a/projects/js-packages/publicize-components/changelog/add-social-limit-clarification b/projects/js-packages/publicize-components/changelog/add-social-limit-clarification new file mode 100644 index 0000000000000..b179e31583b19 --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/add-social-limit-clarification @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Social Limits: Added clarification of cycle reset diff --git a/projects/plugins/social/changelog/add-social-limit-clarification b/projects/plugins/social/changelog/add-social-limit-clarification new file mode 100644 index 0000000000000..b179e31583b19 --- /dev/null +++ b/projects/plugins/social/changelog/add-social-limit-clarification @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Social Limits: Added clarification of cycle reset From 504f0f5295a00badb63bf709dfb6e785b6c86804 Mon Sep 17 00:00:00 2001 From: Gergely Juhasz Date: Mon, 13 May 2024 13:45:16 +0200 Subject: [PATCH 4/5] Mention cycle --- .../src/components/form/share-count-info.tsx | 2 +- .../src/components/share-limits-bar/index.tsx | 16 ++++++++++------ .../social/src/js/components/header/index.js | 1 + 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/projects/js-packages/publicize-components/src/components/form/share-count-info.tsx b/projects/js-packages/publicize-components/src/components/form/share-count-info.tsx index 3bd24fc5011a8..f911c6f4f84a3 100644 --- a/projects/js-packages/publicize-components/src/components/form/share-count-info.tsx +++ b/projects/js-packages/publicize-components/src/components/form/share-count-info.tsx @@ -26,7 +26,7 @@ export const ShareCountInfo: React.FC = () => {
- { __( 'Auto-share usage', 'jetpack' ) } + { __( 'Auto-shares this cycle', 'jetpack' ) } diff --git a/projects/js-packages/publicize-components/src/components/share-limits-bar/index.tsx b/projects/js-packages/publicize-components/src/components/share-limits-bar/index.tsx index cf72f5eb86bd5..d81379da570a0 100644 --- a/projects/js-packages/publicize-components/src/components/share-limits-bar/index.tsx +++ b/projects/js-packages/publicize-components/src/components/share-limits-bar/index.tsx @@ -11,6 +11,7 @@ export type ShareLimitsBarProps = { usedCount: number; scheduledCount: number; remainingCount?: number; + remainingLabel?: string; className?: string; noticeType?: NoticeType; legendCaption?: string; @@ -32,6 +33,7 @@ export const ShareLimitsBar = ( { usedCount, scheduledCount, remainingCount, + remainingLabel, className, noticeType = 'default', legendCaption, @@ -53,14 +55,16 @@ export const ShareLimitsBar = ( { { count: remainingCount, backgroundColor: 'var(--jp-gray-off)', - label: _x( - 'left', - 'Referring to the quantity remaning, not the direction - left/right.', - 'jetpack' - ), + label: + remainingLabel || + _x( + 'left', + 'Referring to the quantity remaning, not the direction - left/right.', + 'jetpack' + ), }, ].filter( Boolean ); - }, [ usedCount, noticeType, scheduledCount, remainingCount ] ); + }, [ noticeType, scheduledCount, usedCount, remainingCount, remainingLabel ] ); return (
diff --git a/projects/plugins/social/src/js/components/header/index.js b/projects/plugins/social/src/js/components/header/index.js index e326c9233834b..8a53e02f0317e 100644 --- a/projects/plugins/social/src/js/components/header/index.js +++ b/projects/plugins/social/src/js/components/header/index.js @@ -90,6 +90,7 @@ const Header = () => { usedCount={ usedCount } scheduledCount={ scheduledCount } remainingCount={ remainingCount } + remainingLabel={ __( 'left in this cycle', 'jetpack-social' ) } legendCaption={ __( 'Auto-share usage', 'jetpack-social' ) } noticeType={ noticeType } className={ styles[ 'bar-wrapper' ] } From 749967f50fbd8b2816e1a64da52eb2dfa9ca2942 Mon Sep 17 00:00:00 2001 From: Gergely Juhasz Date: Mon, 13 May 2024 14:11:50 +0200 Subject: [PATCH 5/5] Move italic out of element --- .../social/src/js/components/header/index.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/projects/plugins/social/src/js/components/header/index.js b/projects/plugins/social/src/js/components/header/index.js index 8a53e02f0317e..b88b88928ae64 100644 --- a/projects/plugins/social/src/js/components/header/index.js +++ b/projects/plugins/social/src/js/components/header/index.js @@ -16,7 +16,6 @@ import { useShareLimits, } from '@automattic/jetpack-publicize-components'; import { useSelect } from '@wordpress/data'; -import { createInterpolateElement } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Icon, postList } from '@wordpress/icons'; import StatCards from '../stat-cards'; @@ -96,15 +95,12 @@ const Header = () => { className={ styles[ 'bar-wrapper' ] } /> - { createInterpolateElement( - __( - 'As a free Jetpack Social user, you get 30 shares within every rolling 30-day window.', + + { __( + 'As a free Jetpack Social user, you get 30 shares within every rolling 30-day window.', 'jetpack-social' - ), - { - i: , - } - ) } + ) } +