@automattic/jetpack-components 0.47.0 → 0.48.0
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
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [0.48.0] - 2024-01-29
|
|
6
|
+
### Changed
|
|
7
|
+
- Move the UpsellBanner component to js-packages/components [#35228]
|
|
8
|
+
|
|
9
|
+
### Fixed
|
|
10
|
+
- Fix TypeScript type for a Boost Score prop [#35273]
|
|
11
|
+
|
|
5
12
|
## [0.47.0] - 2024-01-18
|
|
6
13
|
### Added
|
|
7
14
|
- My Jetpack: add a Jetpack Manage banner. [#35078]
|
|
@@ -925,6 +932,7 @@
|
|
|
925
932
|
### Changed
|
|
926
933
|
- Update node version requirement to 14.16.1
|
|
927
934
|
|
|
935
|
+
[0.48.0]: https://github.com/Automattic/jetpack-components/compare/0.47.0...0.48.0
|
|
928
936
|
[0.47.0]: https://github.com/Automattic/jetpack-components/compare/0.46.0...0.47.0
|
|
929
937
|
[0.46.0]: https://github.com/Automattic/jetpack-components/compare/0.45.10...0.46.0
|
|
930
938
|
[0.45.10]: https://github.com/Automattic/jetpack-components/compare/0.45.9...0.45.10
|
|
@@ -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.0",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -15,7 +15,7 @@
|
|
|
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.20",
|
|
19
19
|
"@babel/runtime": "^7",
|
|
20
20
|
"@wordpress/browserslist-config": "5.31.0",
|
|
21
21
|
"@wordpress/components": "25.14.0",
|