@automattic/jetpack-components 1.1.14 → 1.1.15
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 +5 -0
- package/build/components/action-button/index.d.ts +2 -0
- package/build/components/action-button/index.js +5 -1
- package/build/components/layout/col/index.js +3 -3
- package/components/action-button/index.jsx +5 -1
- package/components/action-popover/styles.module.scss +1 -1
- package/components/boost-score-bar/style.scss +2 -2
- package/components/boost-score-graph/style-annotation.scss +3 -3
- package/components/contextual-upgrade-trigger/style.module.scss +2 -2
- package/components/decorative-card/style.scss +7 -7
- package/components/dot-pager/style.scss +2 -2
- package/components/global-notices/styles.module.scss +1 -1
- package/components/icon-tooltip/style.scss +1 -1
- package/components/icons/style.module.scss +1 -1
- package/components/indeterminate-progress-bar/style.module.scss +2 -2
- package/components/jetpack-footer/style.scss +4 -4
- package/components/layout/col/index.tsx +3 -3
- package/components/layout/col/style.module.scss +3 -3
- package/components/loading-placeholder/style.module.scss +2 -2
- package/components/number-slider/style.scss +1 -1
- package/components/pricing-card/style.scss +1 -1
- package/components/pricing-table/styles.module.scss +4 -3
- package/components/product-offer/style.module.scss +1 -1
- package/components/stat-card/style.module.scss +1 -1
- package/components/swipeable/style.scss +1 -1
- package/components/testimonials/style.scss +1 -1
- package/components/toggle-control/styles.module.scss +2 -2
- package/components/upsell-banner/style.scss +3 -3
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [1.1.15] - 2025-07-23
|
|
6
|
+
### Changed
|
|
7
|
+
- Internal updates.
|
|
8
|
+
|
|
5
9
|
## [1.1.14] - 2025-07-21
|
|
6
10
|
### Changed
|
|
7
11
|
- Update package dependencies. [#44356]
|
|
@@ -1481,6 +1485,7 @@
|
|
|
1481
1485
|
### Changed
|
|
1482
1486
|
- Update node version requirement to 14.16.1
|
|
1483
1487
|
|
|
1488
|
+
[1.1.15]: https://github.com/Automattic/jetpack-components/compare/1.1.14...1.1.15
|
|
1484
1489
|
[1.1.14]: https://github.com/Automattic/jetpack-components/compare/1.1.13...1.1.14
|
|
1485
1490
|
[1.1.13]: https://github.com/Automattic/jetpack-components/compare/1.1.12...1.1.13
|
|
1486
1491
|
[1.1.12]: https://github.com/Automattic/jetpack-components/compare/1.1.11...1.1.12
|
|
@@ -34,8 +34,12 @@ ActionButton.propTypes = {
|
|
|
34
34
|
/** The error message string */
|
|
35
35
|
errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
36
36
|
/** The type/variant of button */
|
|
37
|
-
variant: PropTypes.
|
|
37
|
+
variant: PropTypes.oneOf(['primary', 'secondary', 'link']),
|
|
38
38
|
/** Will display the button as a link with an external icon. */
|
|
39
39
|
isExternalLink: PropTypes.bool,
|
|
40
|
+
/** Custom CSS class to apply to the button */
|
|
41
|
+
customClass: PropTypes.string,
|
|
42
|
+
/** Text to display when loading */
|
|
43
|
+
loadingText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
40
44
|
};
|
|
41
45
|
export default ActionButton;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
2
|
import { createElement } from 'react';
|
|
3
3
|
import styles from './style.module.scss';
|
|
4
|
-
const smCols = Number(styles.
|
|
5
|
-
const mdCols = Number(styles.
|
|
6
|
-
const lgCols = Number(styles.
|
|
4
|
+
const smCols = Number(styles.smcols);
|
|
5
|
+
const mdCols = Number(styles.mdcols);
|
|
6
|
+
const lgCols = Number(styles.lgcols);
|
|
7
7
|
/**
|
|
8
8
|
* The basic Col component.
|
|
9
9
|
*
|
|
@@ -67,9 +67,13 @@ ActionButton.propTypes = {
|
|
|
67
67
|
/** The error message string */
|
|
68
68
|
errorMessage: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
|
|
69
69
|
/** The type/variant of button */
|
|
70
|
-
variant: PropTypes.
|
|
70
|
+
variant: PropTypes.oneOf( [ 'primary', 'secondary', 'link' ] ),
|
|
71
71
|
/** Will display the button as a link with an external icon. */
|
|
72
72
|
isExternalLink: PropTypes.bool,
|
|
73
|
+
/** Custom CSS class to apply to the button */
|
|
74
|
+
customClass: PropTypes.string,
|
|
75
|
+
/** Text to display when loading */
|
|
76
|
+
loadingText: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
|
|
73
77
|
};
|
|
74
78
|
|
|
75
79
|
export default ActionButton;
|
|
@@ -146,7 +146,7 @@ $no_boost_score_size: 28px;
|
|
|
146
146
|
top: -62px;
|
|
147
147
|
left: -10em;
|
|
148
148
|
width: 20em;
|
|
149
|
-
background: #
|
|
149
|
+
background: #fff;
|
|
150
150
|
padding: 16px;
|
|
151
151
|
border-radius: 4px;
|
|
152
152
|
margin: 0 16px;
|
|
@@ -163,7 +163,7 @@ $no_boost_score_size: 28px;
|
|
|
163
163
|
position: absolute;
|
|
164
164
|
bottom: -$score_pointer_size;
|
|
165
165
|
left: 10em;
|
|
166
|
-
margin: 0 -10px
|
|
166
|
+
margin: 0 -10px;
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
|
|
@@ -19,11 +19,11 @@ $white: #fff;
|
|
|
19
19
|
z-index: 1;
|
|
20
20
|
|
|
21
21
|
/*
|
|
22
|
-
* The actual line is a pseudo element
|
|
22
|
+
* The actual line is a pseudo element to create a bigger hover area.
|
|
23
23
|
*/
|
|
24
24
|
&::after {
|
|
25
25
|
position: absolute;
|
|
26
|
-
content:
|
|
26
|
+
content: "";
|
|
27
27
|
display: block;
|
|
28
28
|
width: 2px;
|
|
29
29
|
height: 100%;
|
|
@@ -42,7 +42,7 @@ $white: #fff;
|
|
|
42
42
|
&__annotation {
|
|
43
43
|
|
|
44
44
|
&::after {
|
|
45
|
-
content:
|
|
45
|
+
content: "";
|
|
46
46
|
width: 0;
|
|
47
47
|
height: 0;
|
|
48
48
|
border-left: 8px solid transparent;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
cursor: pointer;
|
|
20
20
|
|
|
21
21
|
&::after {
|
|
22
|
-
content:
|
|
22
|
+
content: "";
|
|
23
23
|
position: absolute;
|
|
24
24
|
top: 0;
|
|
25
25
|
left: 0;
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
margin: 0 0 0 calc(var(--spacing-base) / 3);
|
|
66
66
|
display: inline;
|
|
67
67
|
vertical-align: middle;
|
|
68
|
-
|
|
68
|
+
|
|
69
69
|
svg {
|
|
70
70
|
z-index: 10;
|
|
71
71
|
position: relative;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use "@automattic/jetpack-base-styles/style";
|
|
2
2
|
|
|
3
3
|
.jp-components__decorative-card {
|
|
4
4
|
display: flex;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
position: relative;
|
|
24
24
|
|
|
25
25
|
&::before {
|
|
26
|
-
content:
|
|
26
|
+
content: "";
|
|
27
27
|
display: block;
|
|
28
28
|
position: absolute;
|
|
29
29
|
top: 24px;
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&__content {
|
|
39
|
-
background: #
|
|
39
|
+
background: #fff;
|
|
40
40
|
padding: 2rem;
|
|
41
41
|
}
|
|
42
42
|
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
|
|
64
64
|
&--unlink {
|
|
65
65
|
// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
|
|
66
|
-
background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>')
|
|
66
|
+
background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>');
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -72,17 +72,17 @@
|
|
|
72
72
|
width: 100%;
|
|
73
73
|
height: 12px;
|
|
74
74
|
border-radius: 6px;
|
|
75
|
-
background: #
|
|
75
|
+
background: #e9eff5;
|
|
76
76
|
position: relative;
|
|
77
77
|
|
|
78
78
|
&::before,
|
|
79
79
|
&::after {
|
|
80
|
-
content:
|
|
80
|
+
content: "";
|
|
81
81
|
display: block;
|
|
82
82
|
width: 100%;
|
|
83
83
|
height: 12px;
|
|
84
84
|
border-radius: 6px;
|
|
85
|
-
background: #
|
|
85
|
+
background: #e9eff5;
|
|
86
86
|
position: relative;
|
|
87
87
|
top: calc(100% + 16px);
|
|
88
88
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
1
|
+
@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
|
|
2
|
+
@use "@automattic/jetpack-base-styles/root-variables";
|
|
3
3
|
|
|
4
4
|
.dot-pager {
|
|
5
5
|
width: 100%;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--jp-indeterminate-progress-bar__light-color: #
|
|
3
|
-
--jp-indeterminate-progress-bar__dark-color: #
|
|
2
|
+
--jp-indeterminate-progress-bar__light-color: #f6f7f7;
|
|
3
|
+
--jp-indeterminate-progress-bar__dark-color: #ededee;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.indeterminate-progress-bar {
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-wrap: wrap;
|
|
4
4
|
align-items: center;
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
max-width: 1128px;
|
|
7
7
|
width: 100%;
|
|
8
8
|
|
|
9
9
|
color: var(--jp-black);
|
|
10
|
-
|
|
10
|
+
|
|
11
11
|
font-size: var(--font-body-extra-small);
|
|
12
12
|
line-height: 1.333;
|
|
13
|
-
|
|
13
|
+
|
|
14
14
|
a {
|
|
15
15
|
text-decoration: none;
|
|
16
16
|
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
width: 100%;
|
|
61
61
|
margin: 0;
|
|
62
62
|
padding: 0;
|
|
63
|
-
|
|
63
|
+
|
|
64
64
|
list-style: none;
|
|
65
65
|
|
|
66
66
|
> li {
|
|
@@ -4,9 +4,9 @@ import { ColProps } from '../types.ts';
|
|
|
4
4
|
import styles from './style.module.scss';
|
|
5
5
|
import type { FC, ReactElement } from 'react';
|
|
6
6
|
|
|
7
|
-
const smCols = Number( styles.
|
|
8
|
-
const mdCols = Number( styles.
|
|
9
|
-
const lgCols = Number( styles.
|
|
7
|
+
const smCols = Number( styles.smcols );
|
|
8
|
+
const mdCols = Number( styles.mdcols );
|
|
9
|
+
const lgCols = Number( styles.lgcols );
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* The basic Col component.
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
@include cols("lg");
|
|
25
25
|
|
|
26
26
|
:export {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
smcols: map.get(breakpoints.$cols-sizes, "sm");
|
|
28
|
+
mdcols: map.get(breakpoints.$cols-sizes, "md");
|
|
29
|
+
lgcols: map.get(breakpoints.$cols-sizes, "lg");
|
|
30
30
|
}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
position: relative;
|
|
32
32
|
|
|
33
33
|
&::after {
|
|
34
|
-
content:
|
|
34
|
+
content: "";
|
|
35
35
|
position: absolute;
|
|
36
36
|
top: 0;
|
|
37
37
|
left: 0;
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
padding-top: calc(var(--spacing-base) * 2);
|
|
74
74
|
|
|
75
75
|
&::before {
|
|
76
|
-
content:
|
|
76
|
+
content: "";
|
|
77
77
|
position: absolute;
|
|
78
78
|
top: 0;
|
|
79
79
|
left: var(--padding);
|
|
@@ -88,7 +88,8 @@
|
|
|
88
88
|
z-index: 5;
|
|
89
89
|
background-color: var(--jp-gray);
|
|
90
90
|
|
|
91
|
-
// Last pricing column doesn't have any grid gap on the right
|
|
91
|
+
// Last pricing column doesn't have any grid gap on the right, so
|
|
92
|
+
// override the default width specified above.
|
|
92
93
|
.is-viewport-large .table > :last-child & {
|
|
93
94
|
width: 100%;
|
|
94
95
|
}
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
transform: translateX(calc(var(--base-width) * 3));
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
|
|
46
|
+
|
|
47
47
|
.components-toggle-control__help {
|
|
48
48
|
margin-inline-start: calc(var(--track-width) + var(--spacing-base));
|
|
49
49
|
}
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
:global {
|
|
56
56
|
|
|
57
57
|
.components-form-toggle {
|
|
58
|
-
opacity: .6;
|
|
58
|
+
opacity: 0.6;
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
background: rgb(249, 249, 246);
|
|
10
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
|
-
|
|
11
|
+
|
|
12
12
|
@media screen and (min-width: 660px) {
|
|
13
13
|
flex-direction: row;
|
|
14
14
|
}
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
p {
|
|
58
|
-
font-size:
|
|
58
|
+
font-size: 1rem;
|
|
59
59
|
margin: 8px 0 0 0;
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
box-shadow: inset 0 0 0 1.5px rgb(0, 0, 0);
|
|
78
78
|
font-weight: 400;
|
|
79
79
|
padding: 8px 16px;
|
|
80
|
-
|
|
80
|
+
|
|
81
81
|
&.secondary {
|
|
82
82
|
background-color: var(--jp-white);
|
|
83
83
|
color: var(--jp-black);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.15",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
"prop-types": "^15.7.2",
|
|
34
34
|
"qrcode.react": "4.2.0",
|
|
35
35
|
"react-slider": "2.0.5",
|
|
36
|
-
"social-logos": "^3.2.
|
|
36
|
+
"social-logos": "^3.2.7",
|
|
37
37
|
"uplot": "1.6.31",
|
|
38
38
|
"uplot-react": "1.1.4"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@automattic/jetpack-base-styles": "^1.0.
|
|
41
|
+
"@automattic/jetpack-base-styles": "^1.0.6",
|
|
42
42
|
"@babel/core": "7.28.0",
|
|
43
43
|
"@babel/preset-react": "7.27.1",
|
|
44
44
|
"@jest/globals": "30.0.4",
|