@automattic/jetpack-components 0.47.0 → 0.48.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/components/boost-score-bar/types.ts +1 -1
- package/components/icon-tooltip/index.tsx +8 -2
- package/components/upsell-banner/index.tsx +78 -0
- package/components/upsell-banner/style.scss +91 -0
- package/components/upsell-banner/types.ts +13 -0
- package/index.ts +1 -0
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [0.48.1] - 2024-02-05
|
|
6
|
+
### Changed
|
|
7
|
+
- Update clicking an icon tooltip to cause the tooltip to show/hide instead of always showing. [#35312]
|
|
8
|
+
- Updated package dependencies.
|
|
9
|
+
|
|
10
|
+
## [0.48.0] - 2024-01-29
|
|
11
|
+
### Changed
|
|
12
|
+
- Move the UpsellBanner component to js-packages/components [#35228]
|
|
13
|
+
|
|
14
|
+
### Fixed
|
|
15
|
+
- Fix TypeScript type for a Boost Score prop [#35273]
|
|
16
|
+
|
|
5
17
|
## [0.47.0] - 2024-01-18
|
|
6
18
|
### Added
|
|
7
19
|
- My Jetpack: add a Jetpack Manage banner. [#35078]
|
|
@@ -925,6 +937,8 @@
|
|
|
925
937
|
### Changed
|
|
926
938
|
- Update node version requirement to 14.16.1
|
|
927
939
|
|
|
940
|
+
[0.48.1]: https://github.com/Automattic/jetpack-components/compare/0.48.0...0.48.1
|
|
941
|
+
[0.48.0]: https://github.com/Automattic/jetpack-components/compare/0.47.0...0.48.0
|
|
928
942
|
[0.47.0]: https://github.com/Automattic/jetpack-components/compare/0.46.0...0.47.0
|
|
929
943
|
[0.46.0]: https://github.com/Automattic/jetpack-components/compare/0.45.10...0.46.0
|
|
930
944
|
[0.45.10]: https://github.com/Automattic/jetpack-components/compare/0.45.9...0.45.10
|
|
@@ -44,8 +44,14 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
|
|
|
44
44
|
} ) => {
|
|
45
45
|
const POPOVER_HELPER_WIDTH = 124;
|
|
46
46
|
const [ isVisible, setIsVisible ] = useState( false );
|
|
47
|
-
const showTooltip = useCallback( () => setIsVisible( true ), [ setIsVisible ] );
|
|
48
47
|
const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
|
|
48
|
+
const toggleTooltip = useCallback(
|
|
49
|
+
e => {
|
|
50
|
+
e.preventDefault();
|
|
51
|
+
setIsVisible( ! isVisible );
|
|
52
|
+
},
|
|
53
|
+
[ isVisible, setIsVisible ]
|
|
54
|
+
);
|
|
49
55
|
|
|
50
56
|
const args = {
|
|
51
57
|
// To be compatible with deprecating prop `position`.
|
|
@@ -75,7 +81,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
|
|
|
75
81
|
return (
|
|
76
82
|
<div className={ wrapperClassNames } data-testid="icon-tooltip_wrapper">
|
|
77
83
|
{ ! isAnchorWrapper && (
|
|
78
|
-
<Button variant="link"
|
|
84
|
+
<Button variant="link" onMouseDown={ toggleTooltip }>
|
|
79
85
|
<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
|
|
80
86
|
</Button>
|
|
81
87
|
) }
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { Button } from '@automattic/jetpack-components';
|
|
2
|
+
import { Card, CardBody } from '@wordpress/components';
|
|
3
|
+
import { createInterpolateElement } from '@wordpress/element';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { UpsellBannerProps } from './types';
|
|
6
|
+
|
|
7
|
+
import './style.scss';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Upsell banner component.
|
|
11
|
+
*
|
|
12
|
+
* - The primary CTA is the second button, at the right position.
|
|
13
|
+
* - The secondary CTA is the first button, at the left position.
|
|
14
|
+
*
|
|
15
|
+
* @param {UpsellBannerProps} props - Component props.
|
|
16
|
+
* @returns {React.ReactNode} - UpsellBanner component.
|
|
17
|
+
*/
|
|
18
|
+
const UpsellBanner: React.FC< UpsellBannerProps > = props => {
|
|
19
|
+
const {
|
|
20
|
+
icon,
|
|
21
|
+
title,
|
|
22
|
+
description,
|
|
23
|
+
primaryCtaLabel,
|
|
24
|
+
primaryCtaURL,
|
|
25
|
+
primaryCtaIsExternalLink,
|
|
26
|
+
primaryCtaOnClick,
|
|
27
|
+
secondaryCtaLabel,
|
|
28
|
+
secondaryCtaURL,
|
|
29
|
+
secondaryCtaIsExternalLink,
|
|
30
|
+
secondaryCtaOnClick,
|
|
31
|
+
} = props;
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<Card isRounded={ true } size="large">
|
|
35
|
+
<CardBody className="upsell-banner" size="large">
|
|
36
|
+
{ icon && (
|
|
37
|
+
<div className="upsell-banner--icon">
|
|
38
|
+
<img src={ icon } alt="" />
|
|
39
|
+
</div>
|
|
40
|
+
) }
|
|
41
|
+
<div className="upsell-banner--content">
|
|
42
|
+
<div className="upsell-banner--content-info">
|
|
43
|
+
<h3>{ title }</h3>
|
|
44
|
+
<p>
|
|
45
|
+
{ createInterpolateElement( description, {
|
|
46
|
+
br: <br />,
|
|
47
|
+
} ) }
|
|
48
|
+
</p>
|
|
49
|
+
</div>
|
|
50
|
+
<div className="upsell-banner--content-cta">
|
|
51
|
+
{ secondaryCtaLabel && secondaryCtaURL && (
|
|
52
|
+
<Button
|
|
53
|
+
className="upsell-banner--content-cta-button secondary"
|
|
54
|
+
href={ secondaryCtaURL }
|
|
55
|
+
onClick={ secondaryCtaOnClick ?? undefined }
|
|
56
|
+
isExternalLink={ secondaryCtaIsExternalLink }
|
|
57
|
+
>
|
|
58
|
+
{ secondaryCtaLabel }
|
|
59
|
+
</Button>
|
|
60
|
+
) }
|
|
61
|
+
{ primaryCtaLabel && primaryCtaURL && (
|
|
62
|
+
<Button
|
|
63
|
+
className="upsell-banner--content-cta-button primary"
|
|
64
|
+
href={ primaryCtaURL }
|
|
65
|
+
onClick={ primaryCtaOnClick ?? undefined }
|
|
66
|
+
isExternalLink={ primaryCtaIsExternalLink }
|
|
67
|
+
>
|
|
68
|
+
{ primaryCtaLabel }
|
|
69
|
+
</Button>
|
|
70
|
+
) }
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</CardBody>
|
|
74
|
+
</Card>
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export default UpsellBanner;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
.components-surface.components-card {
|
|
2
|
+
border-radius: var(--jp-border-radius-rna);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.upsell-banner {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
|
|
9
|
+
background: rgb(249, 249, 246);
|
|
10
|
+
background: linear-gradient(133deg, rgb(206, 217, 242) 0%, rgb(249, 249, 246) 10%, rgb(249, 249, 246) 80%, rgb(245, 230, 179) 100%);
|
|
11
|
+
|
|
12
|
+
@media screen and (min-width: 660px) {
|
|
13
|
+
flex-direction: row;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&.components-card__body.components-card-body {
|
|
17
|
+
border-radius: var(--jp-border-radius-rna);
|
|
18
|
+
padding: 36px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.upsell-banner--icon {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: flex-start;
|
|
24
|
+
margin-bottom: 16px;
|
|
25
|
+
margin-right: 0;
|
|
26
|
+
margin-top: 16px;
|
|
27
|
+
|
|
28
|
+
@media screen and (min-width: 660px) {
|
|
29
|
+
align-items: center;
|
|
30
|
+
margin-bottom: 0;
|
|
31
|
+
margin-right: 28px;
|
|
32
|
+
margin-top: 0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.upsell-banner--content {
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
flex: 1;
|
|
40
|
+
justify-content: space-between;
|
|
41
|
+
|
|
42
|
+
@media screen and (min-width: 660px) {
|
|
43
|
+
flex-direction: row;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.upsell-banner--content-info {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
|
|
50
|
+
h3 {
|
|
51
|
+
font-size: 1.5rem;
|
|
52
|
+
line-height: 32px;
|
|
53
|
+
font-weight: 500;
|
|
54
|
+
margin: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
p {
|
|
58
|
+
font-size: 1.0rem;
|
|
59
|
+
margin: 8px 0 0 0;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.upsell-banner--content-cta {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: row;
|
|
66
|
+
align-items: center;
|
|
67
|
+
margin-top: 16px;
|
|
68
|
+
margin-left: 0;
|
|
69
|
+
|
|
70
|
+
@media screen and (min-width: 660px) {
|
|
71
|
+
margin-top: 0;
|
|
72
|
+
margin-left: 16px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.upsell-banner--content-cta-button {
|
|
76
|
+
white-space: nowrap;
|
|
77
|
+
box-shadow: inset 0 0 0 1.5px rgb(0, 0, 0);
|
|
78
|
+
font-weight: normal;
|
|
79
|
+
padding: 8px 16px;
|
|
80
|
+
|
|
81
|
+
&.secondary {
|
|
82
|
+
background-color: var( --jp-white );
|
|
83
|
+
color: var( --jp-black );
|
|
84
|
+
}
|
|
85
|
+
&.primary {
|
|
86
|
+
margin-left: 8px;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export type UpsellBannerProps = {
|
|
2
|
+
icon?: string;
|
|
3
|
+
title: string;
|
|
4
|
+
description: string;
|
|
5
|
+
primaryCtaLabel?: string;
|
|
6
|
+
primaryCtaURL?: string;
|
|
7
|
+
primaryCtaIsExternalLink?: boolean;
|
|
8
|
+
primaryCtaOnClick?: () => void;
|
|
9
|
+
secondaryCtaLabel?: string;
|
|
10
|
+
secondaryCtaURL?: string;
|
|
11
|
+
secondaryCtaIsExternalLink?: boolean;
|
|
12
|
+
secondaryCtaOnClick?: () => void;
|
|
13
|
+
};
|
package/index.ts
CHANGED
|
@@ -70,4 +70,5 @@ export { default as IndeterminateProgressBar } from './components/indeterminate-
|
|
|
70
70
|
export { default as ActionPopover } from './components/action-popover';
|
|
71
71
|
export { default as ZendeskChat } from './components/zendesk-chat';
|
|
72
72
|
export { default as ProgressBar } from './components/progress-bar';
|
|
73
|
+
export { default as UpsellBanner } from './components/upsell-banner';
|
|
73
74
|
export { getUserLocale, cleanLocale } from './lib/locale';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.48.1",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@automattic/format-currency": "1.0.1",
|
|
18
|
-
"@automattic/jetpack-boost-score-api": "^0.1.
|
|
18
|
+
"@automattic/jetpack-boost-score-api": "^0.1.21",
|
|
19
19
|
"@babel/runtime": "^7",
|
|
20
|
-
"@wordpress/browserslist-config": "5.
|
|
21
|
-
"@wordpress/components": "25.
|
|
22
|
-
"@wordpress/compose": "6.
|
|
23
|
-
"@wordpress/data": "9.
|
|
24
|
-
"@wordpress/date": "4.
|
|
25
|
-
"@wordpress/element": "5.
|
|
26
|
-
"@wordpress/i18n": "4.
|
|
27
|
-
"@wordpress/icons": "9.
|
|
20
|
+
"@wordpress/browserslist-config": "5.33.0",
|
|
21
|
+
"@wordpress/components": "25.16.0",
|
|
22
|
+
"@wordpress/compose": "6.27.0",
|
|
23
|
+
"@wordpress/data": "9.20.0",
|
|
24
|
+
"@wordpress/date": "4.50.0",
|
|
25
|
+
"@wordpress/element": "5.27.0",
|
|
26
|
+
"@wordpress/i18n": "4.50.0",
|
|
27
|
+
"@wordpress/icons": "9.41.0",
|
|
28
28
|
"classnames": "2.3.2",
|
|
29
29
|
"prop-types": "^15.7.2",
|
|
30
30
|
"qrcode.react": "3.1.0",
|
|
@@ -34,17 +34,17 @@
|
|
|
34
34
|
"uplot-react": "1.1.4"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@automattic/jetpack-base-styles": "^0.6.
|
|
37
|
+
"@automattic/jetpack-base-styles": "^0.6.16",
|
|
38
38
|
"@babel/core": "7.23.5",
|
|
39
39
|
"@babel/preset-react": "7.23.3",
|
|
40
40
|
"@jest/globals": "29.4.3",
|
|
41
41
|
"@storybook/addon-actions": "7.6.5",
|
|
42
42
|
"@storybook/blocks": "7.6.5",
|
|
43
43
|
"@storybook/react": "7.6.5",
|
|
44
|
-
"@testing-library/dom": "9.3.
|
|
45
|
-
"@testing-library/react": "14.
|
|
44
|
+
"@testing-library/dom": "9.3.4",
|
|
45
|
+
"@testing-library/react": "14.2.0",
|
|
46
46
|
"@testing-library/user-event": "14.5.2",
|
|
47
|
-
"@types/jest": "29.5.
|
|
47
|
+
"@types/jest": "29.5.12",
|
|
48
48
|
"@types/qrcode.react": "1.0.4",
|
|
49
49
|
"@types/react": "18.2.33",
|
|
50
50
|
"@types/react-dom": "18.2.14",
|