@automattic/jetpack-components 1.1.13 → 1.1.14

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.
Files changed (42) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/components/action-button/style.module.scss +1 -1
  3. package/components/action-popover/styles.module.scss +10 -10
  4. package/components/admin-page/style.module.scss +1 -1
  5. package/components/admin-section/hero/style.module.scss +1 -1
  6. package/components/alert/style.module.scss +16 -16
  7. package/components/badge/style.module.scss +2 -2
  8. package/components/boost-score-bar/style.scss +3 -3
  9. package/components/boost-score-graph/style-annotation.scss +1 -1
  10. package/components/boost-score-graph/style-tooltip.scss +55 -54
  11. package/components/boost-score-graph/style.scss +15 -15
  12. package/components/button/style.module.scss +12 -12
  13. package/components/contextual-upgrade-trigger/style.module.scss +8 -8
  14. package/components/decorative-card/style.scss +3 -3
  15. package/components/details-viewer/styles.module.scss +6 -6
  16. package/components/dialog/style.module.scss +5 -5
  17. package/components/diff-viewer/styles.module.scss +12 -12
  18. package/components/donut-meter/style.scss +9 -9
  19. package/components/gridicon/style.scss +3 -3
  20. package/components/icon-tooltip/style.scss +3 -3
  21. package/components/icons/style.module.scss +11 -11
  22. package/components/indeterminate-progress-bar/style.module.scss +1 -7
  23. package/components/jetpack-footer/style.scss +13 -13
  24. package/components/layout/container/style.module.scss +1 -1
  25. package/components/loading-placeholder/style.module.scss +13 -13
  26. package/components/marked-lines/styles.module.scss +12 -12
  27. package/components/notice/style.module.scss +19 -16
  28. package/components/popover/style.scss +1 -1
  29. package/components/pricing-card/style.scss +14 -14
  30. package/components/product-offer/style.module.scss +19 -19
  31. package/components/product-price/style.module.scss +11 -11
  32. package/components/progress-bar/style.module.scss +3 -3
  33. package/components/radio-control/styles.module.scss +5 -5
  34. package/components/spinner/style.scss +3 -2
  35. package/components/split-button/style.module.scss +10 -10
  36. package/components/stat-card/style.module.scss +10 -10
  37. package/components/status/style.module.scss +54 -49
  38. package/components/testimonials/style.scss +112 -112
  39. package/components/text/style.module.scss +6 -6
  40. package/components/toggle-control/styles.module.scss +9 -9
  41. package/components/upsell-banner/style.scss +9 -9
  42. package/package.json +6 -6
package/components/stat-card/style.module.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  .wrapper {
2
- background-color: var( --jp-white );
2
+ background-color: var(--jp-white);
3
3
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
4
- border-radius: calc( var( --jp-border-radius ) * 2 ); // 8px;
4
+ border-radius: calc(var(--jp-border-radius) * 2); // 8px;
5
5
  display: flex;
6
6
 
7
7
  &.horizontal {
8
8
  align-items: center;
9
- padding: calc( var( --spacing-base ) * 2 ); // 16px;
9
+ padding: calc(var(--spacing-base) * 2); // 16px;
10
10
  width: 358px;
11
11
 
12
12
  .info {
@@ -17,22 +17,22 @@
17
17
  }
18
18
 
19
19
  .label {
20
- margin: 0 calc( var( --spacing-base ) * 2 ); // 16px;
20
+ margin: 0 calc(var(--spacing-base) * 2); // 16px;
21
21
  flex-grow: 1;
22
22
  }
23
23
  }
24
24
 
25
25
  &.square {
26
- --square-stat-vertical-spacing: calc( var( --spacing-base ) * 2 ); // 16px;
27
- --square-stat-horizontal-spacing: calc( var( --spacing-base ) * 3 ); // 24px;
26
+ --square-stat-vertical-spacing: calc(var(--spacing-base) * 2); // 16px;
27
+ --square-stat-horizontal-spacing: calc(var(--spacing-base) * 3); // 24px;
28
28
  flex-direction: column;
29
29
  justify-content: space-between;
30
30
  height: 168px;
31
31
  width: 168px;
32
- padding: var( --square-stat-vertical-spacing ) var( --square-stat-horizontal-spacing );
32
+ padding: var(--square-stat-vertical-spacing) var(--square-stat-horizontal-spacing);
33
33
 
34
34
  .label {
35
- margin-bottom: calc( var( --spacing-base ) / 2 ); // 4px;
35
+ margin-bottom: calc(var(--spacing-base) / 2); // 4px;
36
36
  }
37
37
  }
38
38
 
@@ -43,7 +43,7 @@
43
43
 
44
44
  .icon {
45
45
  display: flex;
46
- color: var( --jp-green-40 );
47
- fill: var( --jp-green-40 );
46
+ color: var(--jp-green-40);
47
+ fill: var(--jp-green-40);
48
48
  }
49
49
  }
package/components/status/style.module.scss CHANGED
@@ -2,76 +2,81 @@
2
2
  --spacing-base: 8px;
3
3
  --wp-admin-border-width-focus: 1.5px;
4
4
 
5
- align-items: center;
6
- display: flex;
7
- white-space: nowrap;
8
-
9
- &__indicator {
10
- background-color: var( --jp-gray-50 );
11
- border-radius: 50%;
12
- flex-shrink: 0;
13
- height: 0.666em;
14
- width: 0.666em;
15
- }
16
-
17
- &__label {
18
- font-weight: 600;
19
- line-height: 1.666;
20
- margin-left: calc( var( --spacing-base ) / 2 ); // 4px
21
- }
22
-
23
- &.is-active {
24
-
25
- span, a {
5
+ align-items: center;
6
+ display: flex;
7
+ white-space: nowrap;
8
+
9
+ &__indicator {
10
+ background-color: var(--jp-gray-50);
11
+ border-radius: 50%;
12
+ flex-shrink: 0;
13
+ height: 0.666em;
14
+ width: 0.666em;
15
+ }
16
+
17
+ &__label {
18
+ font-weight: 600;
19
+ line-height: 1.666;
20
+ margin-left: calc(var(--spacing-base) / 2); // 4px
21
+ }
22
+
23
+ &.is-active {
24
+
25
+ span,
26
+ a {
26
27
  color: var(--jp-green-50);
27
28
  }
28
29
 
29
- .status__indicator {
30
- background-color: var( --jp-green-50 );
31
- }
32
- }
30
+ .status__indicator {
31
+ background-color: var(--jp-green-50);
32
+ }
33
+ }
33
34
 
34
- &.is-inactive {
35
+ &.is-inactive {
35
36
 
36
- span, a {
37
+ span,
38
+ a {
37
39
  color: var(--jp-gray-50);
38
40
  }
39
41
 
40
- .status__indicator {
41
- background-color: var( --jp-gray-50 );
42
- }
43
- }
42
+ .status__indicator {
43
+ background-color: var(--jp-gray-50);
44
+ }
45
+ }
44
46
 
45
- &.is-error {
47
+ &.is-error {
46
48
 
47
- span, a {
49
+ span,
50
+ a {
48
51
  color: var(--jp-red-50);
49
52
  }
50
53
 
51
- .status__indicator {
52
- background-color: var( --jp-red-50 );
53
- }
54
- }
54
+ .status__indicator {
55
+ background-color: var(--jp-red-50);
56
+ }
57
+ }
55
58
 
56
- &.is-action {
59
+ &.is-action {
57
60
 
58
- span, a {
61
+ span,
62
+ a {
59
63
  color: var(--jp-yellow-30);
60
64
  }
61
65
 
62
- .status__indicator {
63
- background-color: var( --jp-yellow-30 );
64
- }
65
- }
66
+ .status__indicator {
67
+ background-color: var(--jp-yellow-30);
68
+ }
69
+ }
66
70
 
67
- &.is-initializing {
71
+ &.is-initializing {
68
72
 
69
- span, a {
73
+ span,
74
+ a {
70
75
  color: var(--jp-blue-40);
71
76
  }
72
77
 
73
- .status__indicator {
74
- background-color: var( --jp-blue-40 );
75
- }
76
- }
78
+ .status__indicator {
79
+ background-color: var(--jp-blue-40);
80
+ }
81
+ }
77
82
  }
package/components/testimonials/style.scss CHANGED
@@ -1,128 +1,128 @@
1
1
  .testimonials {
2
- position: relative;
3
-
4
- margin-top: 1.5rem;
5
- padding: calc(var(--spacing-base) * 3);
6
- padding-bottom: 0;
7
-
8
- color: var(--jp-black);
9
- background-color: var(--jp-white);
10
- border-radius: var(--jp-border-radius);
11
- box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
12
-
13
- &__left-arrow,
14
- &__right-arrow {
15
- position: absolute;
16
- top: 50%;
17
- transform: translateY(-50%);
18
-
19
- background: none;
20
- border: none;
21
-
22
- svg {
23
- color: #1e1e1e;
24
- }
25
-
26
- &:hover {
27
- cursor: pointer;
28
-
29
- svg {
30
- color: var(--jp-gray-20);
31
- }
32
- }
33
- }
34
-
35
- &__left-arrow {
36
- left: 0;
37
- }
38
-
39
- &__right-arrow {
40
- right: 0;
41
- }
2
+ position: relative;
3
+
4
+ margin-top: 1.5rem;
5
+ padding: calc(var(--spacing-base) * 3);
6
+ padding-bottom: 0;
7
+
8
+ color: var(--jp-black);
9
+ background-color: var(--jp-white);
10
+ border-radius: var(--jp-border-radius);
11
+ box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
12
+
13
+ &__left-arrow,
14
+ &__right-arrow {
15
+ position: absolute;
16
+ top: 50%;
17
+ transform: translateY(-50%);
18
+
19
+ background: none;
20
+ border: none;
21
+
22
+ svg {
23
+ color: #1e1e1e;
24
+ }
25
+
26
+ &:hover {
27
+ cursor: pointer;
28
+
29
+ svg {
30
+ color: var(--jp-gray-20);
31
+ }
32
+ }
33
+ }
34
+
35
+ &__left-arrow {
36
+ left: 0;
37
+ }
38
+
39
+ &__right-arrow {
40
+ right: 0;
41
+ }
42
42
  }
43
43
 
44
44
  .testimonial {
45
- display: flex;
46
- flex-direction: column-reverse;
47
- align-items: center;
48
-
49
- &__author-img {
50
- min-width: 325px;
51
- width: 365px;
52
- max-width: 100%;
53
- margin-top: 3rem;
54
- }
45
+ display: flex;
46
+ flex-direction: column-reverse;
47
+ align-items: center;
48
+
49
+ &__author-img {
50
+ min-width: 325px;
51
+ width: 365px;
52
+ max-width: 100%;
53
+ margin-top: 3rem;
54
+ }
55
55
 
56
- &__content {
57
- display: flex;
58
- gap: 1rem;
59
- }
60
-
61
- &__quote-icon {
62
- min-width: 32px;
63
- }
64
-
65
- &__quote,
66
- &__author {
67
- font-size: var(--font-title-medium);
68
- font-weight: 500;
69
- line-height: 1.3;
70
- }
71
-
72
- &__quote {
73
- margin: 0;
74
- }
75
-
76
- &__author {
77
- display: block;
78
- margin-top: 2rem;
79
- }
80
-
81
- &__profession {
82
- display: block;
83
- margin-top: 0.5rem;
84
- }
85
-
86
- @media (min-width: 600px) {
87
- padding: calc(var(--spacing-base) * 8);
88
- padding-bottom: 0;
89
- }
90
-
91
- @media (min-width: 1080px) {
92
- flex-direction: row;
93
- align-items: flex-end;
94
- gap: 3rem;
95
-
96
- padding-top: 0;
97
-
98
- &__content {
99
- align-self: center;
100
-
101
- min-width: 350px;
102
- max-width: 550px;
103
- }
104
-
105
- &__text-block {
106
- padding-bottom: calc(var(--spacing-base) * 3);
107
- }
108
- }
56
+ &__content {
57
+ display: flex;
58
+ gap: 1rem;
59
+ }
60
+
61
+ &__quote-icon {
62
+ min-width: 32px;
63
+ }
64
+
65
+ &__quote,
66
+ &__author {
67
+ font-size: var(--font-title-medium);
68
+ font-weight: 500;
69
+ line-height: 1.3;
70
+ }
71
+
72
+ &__quote {
73
+ margin: 0;
74
+ }
75
+
76
+ &__author {
77
+ display: block;
78
+ margin-top: 2rem;
79
+ }
80
+
81
+ &__profession {
82
+ display: block;
83
+ margin-top: 0.5rem;
84
+ }
85
+
86
+ @media (min-width: 600px) {
87
+ padding: calc(var(--spacing-base) * 8);
88
+ padding-bottom: 0;
89
+ }
90
+
91
+ @media (min-width: 1080px) {
92
+ flex-direction: row;
93
+ align-items: flex-end;
94
+ gap: 3rem;
95
+
96
+ padding-top: 0;
97
+
98
+ &__content {
99
+ align-self: center;
100
+
101
+ min-width: 350px;
102
+ max-width: 550px;
103
+ }
104
+
105
+ &__text-block {
106
+ padding-bottom: calc(var(--spacing-base) * 3);
107
+ }
108
+ }
109
109
  }
110
110
 
111
111
  .show {
112
- animation: showTestimonial 500ms ease-in-out forwards;
112
+ animation: showTestimonial 500ms ease-in-out forwards;
113
113
  }
114
114
 
115
115
  .hidden {
116
- display: none;
116
+ display: none;
117
117
  }
118
118
 
119
119
  @keyframes showTestimonial {
120
120
 
121
- 0% {
122
- opacity: 0;
123
- }
121
+ 0% {
122
+ opacity: 0;
123
+ }
124
124
 
125
- 100% {
126
- opacity: 1;
127
- }
128
- }
125
+ 100% {
126
+ opacity: 1;
127
+ }
128
+ }
package/components/text/style.module.scss CHANGED
@@ -101,18 +101,18 @@ $sides: (
101
101
 
102
102
  /* m, p */
103
103
  .#{$p}-#{$size} {
104
- #{$prop}: calc( var( --spacing-base ) * #{$size} );
104
+ #{$prop}: calc(var(--spacing-base) * #{$size});
105
105
  }
106
106
 
107
107
  /* mx, px */
108
108
  .#{$p}x-#{$size} {
109
- #{$prop}-left: calc( var( --spacing-base ) * #{$size} );
110
- #{$prop}-right: calc( var( --spacing-base ) * #{$size} );
109
+ #{$prop}-left: calc(var(--spacing-base) * #{$size});
110
+ #{$prop}-right: calc(var(--spacing-base) * #{$size});
111
111
  }
112
112
 
113
113
  .#{$p}y-#{$size} {
114
- #{$prop}-top: calc( var( --spacing-base ) * #{$size} );
115
- #{$prop}-bottom: calc( var( --spacing-base ) * #{$size} );
114
+ #{$prop}-top: calc(var(--spacing-base) * #{$size});
115
+ #{$prop}-bottom: calc(var(--spacing-base) * #{$size});
116
116
  }
117
117
 
118
118
  /* mt, mr, mb, ml */
@@ -120,7 +120,7 @@ $sides: (
120
120
  /* pt, pr, pb, pl */
121
121
  @each $side, $s in $sides {
122
122
  .#{$p}#{$s}-#{$size} {
123
- #{$prop}-#{$side}: calc( var( --spacing-base ) * #{$size} );
123
+ #{$prop}-#{$side}: calc(var(--spacing-base) * #{$size});
124
124
  }
125
125
  }
126
126
  }
package/components/toggle-control/styles.module.scss CHANGED
@@ -4,30 +4,30 @@
4
4
  /// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle
5
5
  .toggle {
6
6
  --base-width: 8px;
7
- --track-width: calc( var(--base-width) * 6 );
7
+ --track-width: calc(var(--base-width) * 6);
8
8
 
9
9
  &.is-small {
10
10
  --base-width: 6px;
11
11
  }
12
12
 
13
13
  &.no-label :global(.components-toggle-control__label) {
14
- display: none;
14
+ display: none;
15
15
  }
16
16
 
17
17
  :global {
18
18
 
19
19
  .components-form-toggle {
20
- --wp-admin-theme-color: var( --jp-green-40 );
21
- height: calc( var(--base-width) * 3 );
20
+ --wp-admin-theme-color: var(--jp-green-40);
21
+ height: calc(var(--base-width) * 3);
22
22
 
23
23
 
24
24
  &__input:focus + .components-form-toggle__track {
25
- box-shadow: 0 0 0 2px var( --jp-white ), 0 0 0 4px var( --jp-green-50 );
25
+ box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
26
26
  }
27
27
 
28
28
  .components-form-toggle__track {
29
- width: var( --track-width );
30
- height: calc( var(--base-width) * 3 );
29
+ width: var(--track-width);
30
+ height: calc(var(--base-width) * 3);
31
31
  border-radius: 12px;
32
32
  border-width: 2px;
33
33
  }
@@ -40,12 +40,12 @@
40
40
  }
41
41
 
42
42
  &.is-checked .components-form-toggle__thumb {
43
- transform: translateX( calc( var(--base-width) * 3 ) );
43
+ transform: translateX(calc(var(--base-width) * 3));
44
44
  }
45
45
  }
46
46
 
47
47
  .components-toggle-control__help {
48
- margin-inline-start: calc( var( --track-width ) + var( --spacing-base ) );
48
+ margin-inline-start: calc(var(--track-width) + var(--spacing-base));
49
49
  }
50
50
  }
51
51
  }
package/components/upsell-banner/style.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  .components-surface.components-card {
2
- border-radius: var(--jp-border-radius-rna);
2
+ border-radius: var(--jp-border-radius-rna);
3
3
  }
4
4
 
5
5
  .upsell-banner {
@@ -9,11 +9,11 @@
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
- @media screen and (min-width: 660px) {
12
+ @media screen and (min-width: 660px) {
13
13
  flex-direction: row;
14
14
  }
15
15
 
16
- &.components-card__body.components-card-body {
16
+ &.components-card__body.components-card-body {
17
17
  border-radius: var(--jp-border-radius-rna);
18
18
  padding: 36px;
19
19
  }
@@ -25,7 +25,7 @@
25
25
  margin-right: 0;
26
26
  margin-top: 16px;
27
27
 
28
- @media screen and (min-width: 660px) {
28
+ @media screen and (min-width: 660px) {
29
29
  align-items: center;
30
30
  margin-bottom: 0;
31
31
  margin-right: 28px;
@@ -39,7 +39,7 @@
39
39
  flex: 1;
40
40
  justify-content: space-between;
41
41
 
42
- @media screen and (min-width: 660px) {
42
+ @media screen and (min-width: 660px) {
43
43
  flex-direction: row;
44
44
  }
45
45
 
@@ -67,7 +67,7 @@
67
67
  margin-top: 16px;
68
68
  margin-left: 0;
69
69
 
70
- @media screen and (min-width: 660px) {
70
+ @media screen and (min-width: 660px) {
71
71
  margin-top: 0;
72
72
  margin-left: 16px;
73
73
  }
@@ -78,9 +78,9 @@
78
78
  font-weight: 400;
79
79
  padding: 8px 16px;
80
80
 
81
- &.secondary {
82
- background-color: var( --jp-white );
83
- color: var( --jp-black );
81
+ &.secondary {
82
+ background-color: var(--jp-white);
83
+ color: var(--jp-black);
84
84
  }
85
85
 
86
86
  &.primary {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "1.1.13",
3
+ "version": "1.1.14",
4
4
  "description": "Jetpack Components Package",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",
@@ -16,9 +16,9 @@
16
16
  "dependencies": {
17
17
  "@automattic/format-currency": "1.0.1",
18
18
  "@automattic/jetpack-api": "^1.0.5",
19
- "@automattic/jetpack-boost-score-api": "^1.0.6",
19
+ "@automattic/jetpack-boost-score-api": "^1.0.7",
20
20
  "@automattic/jetpack-script-data": "^0.5.0",
21
- "@automattic/number-formatters": "^1.0.8",
21
+ "@automattic/number-formatters": "^1.0.9",
22
22
  "@babel/runtime": "^7",
23
23
  "@wordpress/browserslist-config": "6.26.0",
24
24
  "@wordpress/components": "29.12.0",
@@ -33,13 +33,13 @@
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.5",
36
+ "social-logos": "^3.2.6",
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.4",
42
- "@babel/core": "7.27.7",
41
+ "@automattic/jetpack-base-styles": "^1.0.5",
42
+ "@babel/core": "7.28.0",
43
43
  "@babel/preset-react": "7.27.1",
44
44
  "@jest/globals": "30.0.4",
45
45
  "@storybook/addon-docs": "9.0.15",