@automattic/jetpack-components 1.1.13 → 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.
Files changed (53) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/build/components/action-button/index.d.ts +2 -0
  3. package/build/components/action-button/index.js +5 -1
  4. package/build/components/layout/col/index.js +3 -3
  5. package/components/action-button/index.jsx +5 -1
  6. package/components/action-button/style.module.scss +1 -1
  7. package/components/action-popover/styles.module.scss +11 -11
  8. package/components/admin-page/style.module.scss +1 -1
  9. package/components/admin-section/hero/style.module.scss +1 -1
  10. package/components/alert/style.module.scss +16 -16
  11. package/components/badge/style.module.scss +2 -2
  12. package/components/boost-score-bar/style.scss +5 -5
  13. package/components/boost-score-graph/style-annotation.scss +4 -4
  14. package/components/boost-score-graph/style-tooltip.scss +55 -54
  15. package/components/boost-score-graph/style.scss +15 -15
  16. package/components/button/style.module.scss +12 -12
  17. package/components/contextual-upgrade-trigger/style.module.scss +10 -10
  18. package/components/decorative-card/style.scss +10 -10
  19. package/components/details-viewer/styles.module.scss +6 -6
  20. package/components/dialog/style.module.scss +5 -5
  21. package/components/diff-viewer/styles.module.scss +12 -12
  22. package/components/donut-meter/style.scss +9 -9
  23. package/components/dot-pager/style.scss +2 -2
  24. package/components/global-notices/styles.module.scss +1 -1
  25. package/components/gridicon/style.scss +3 -3
  26. package/components/icon-tooltip/style.scss +4 -4
  27. package/components/icons/style.module.scss +12 -12
  28. package/components/indeterminate-progress-bar/style.module.scss +3 -9
  29. package/components/jetpack-footer/style.scss +17 -17
  30. package/components/layout/col/index.tsx +3 -3
  31. package/components/layout/col/style.module.scss +3 -3
  32. package/components/layout/container/style.module.scss +1 -1
  33. package/components/loading-placeholder/style.module.scss +13 -13
  34. package/components/marked-lines/styles.module.scss +12 -12
  35. package/components/notice/style.module.scss +19 -16
  36. package/components/number-slider/style.scss +1 -1
  37. package/components/popover/style.scss +1 -1
  38. package/components/pricing-card/style.scss +15 -15
  39. package/components/pricing-table/styles.module.scss +4 -3
  40. package/components/product-offer/style.module.scss +20 -20
  41. package/components/product-price/style.module.scss +11 -11
  42. package/components/progress-bar/style.module.scss +3 -3
  43. package/components/radio-control/styles.module.scss +5 -5
  44. package/components/spinner/style.scss +3 -2
  45. package/components/split-button/style.module.scss +10 -10
  46. package/components/stat-card/style.module.scss +11 -11
  47. package/components/status/style.module.scss +54 -49
  48. package/components/swipeable/style.scss +1 -1
  49. package/components/testimonials/style.scss +113 -113
  50. package/components/text/style.module.scss +6 -6
  51. package/components/toggle-control/styles.module.scss +11 -11
  52. package/components/upsell-banner/style.scss +12 -12
  53. package/package.json +6 -6
package/components/pricing-table/styles.module.scss CHANGED
@@ -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. So override the default width specified above.
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
  }
package/components/product-offer/style.module.scss CHANGED
@@ -1,26 +1,26 @@
1
1
  .wrapper {
2
- padding: calc( var( --spacing-base ) * 8 );
2
+ padding: calc(var(--spacing-base) * 8);
3
3
  position: relative;
4
4
  }
5
5
 
6
6
  .is-card {
7
- background-color: var( --jp-white );
8
- border: 1px solid var( --jp-gray );
9
- border-radius: var( --jp-border-radius );
10
- box-shadow: 0 2px 6px var( --product-card-shadow ), 0 1px 2px var( --product-card-shadow );
7
+ background-color: var(--jp-white);
8
+ border: 1px solid var(--jp-gray);
9
+ border-radius: var(--jp-border-radius);
10
+ box-shadow: 0 2px 6px var(--product-card-shadow), 0 1px 2px var(--product-card-shadow);
11
11
 
12
12
  .card-header {
13
- border-radius: var( --jp-border-radius ) var( --jp-border-radius ) 0 0;
13
+ border-radius: var(--jp-border-radius) var(--jp-border-radius) 0 0;
14
14
  }
15
15
  }
16
16
 
17
17
  .card-header {
18
18
  display: flex;
19
19
  align-items: center;
20
- background: var( --jp-black );
21
- color: var( --jp-white );
22
- padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base );
23
- line-height: calc( var( --spacing-base ) * 3 );
20
+ background: var(--jp-black);
21
+ color: var(--jp-white);
22
+ padding: calc(var(--spacing-base) / 2) var(--spacing-base);
23
+ line-height: calc(var(--spacing-base) * 3);
24
24
  position: absolute;
25
25
  top: 0;
26
26
  left: 0;
@@ -35,15 +35,15 @@
35
35
  }
36
36
 
37
37
  .product-bundle-icon {
38
- fill: var( --jp-white );
39
- margin-right: var( --spacing-base );
38
+ fill: var(--jp-white);
39
+ margin-right: var(--spacing-base);
40
40
  }
41
41
 
42
42
  .product-bundle-icons,
43
43
  .product-icon {
44
44
  display: flex;
45
45
  align-items: center;
46
- margin-bottom: calc( var( --spacing-base ) * 4 );
46
+ margin-bottom: calc(var(--spacing-base) * 4);
47
47
  }
48
48
 
49
49
  .plus-icon {
@@ -56,18 +56,18 @@
56
56
  margin: 0;
57
57
  padding: 0;
58
58
  flex-grow: 1;
59
- margin-bottom: calc( var( --spacing-base ) * 2 );
59
+ margin-bottom: calc(var(--spacing-base) * 2);
60
60
 
61
61
  li {
62
62
  list-style: none;
63
63
  display: flex;
64
64
  align-items: flex-start;
65
- margin-bottom: var( --spacing-base );
65
+ margin-bottom: var(--spacing-base);
66
66
  }
67
67
 
68
68
  .check {
69
- fill: var( --jp-green-primary );
70
- margin-right: var( --spacing-base );
69
+ fill: var(--jp-green-primary);
70
+ margin-right: var(--spacing-base);
71
71
  flex-shrink: 0;
72
72
  }
73
73
  }
@@ -78,16 +78,16 @@
78
78
  align-items: center;
79
79
 
80
80
  svg {
81
- margin-right: var( --spacing-base );
81
+ margin-right: var(--spacing-base);
82
82
  }
83
83
  }
84
84
 
85
85
  .add-button {
86
86
  width: 100%;
87
87
  justify-content: center;
88
-
88
+
89
89
  &:global(.is-primary):disabled {
90
90
  opacity: 1;
91
- background-color: var( --jp-black );
91
+ background-color: var(--jp-black);
92
92
  }
93
93
  }
package/components/product-price/style.module.scss CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  .price-container {
9
9
  display: flex;
10
- align-items: flex-start;
10
+ align-items: flex-start;
11
11
  flex-grow: 2;
12
12
  flex-basis: 0;
13
13
 
@@ -23,19 +23,19 @@
23
23
  flex: 0 0 auto;
24
24
 
25
25
  &:first-child {
26
- margin-right: calc( var( --spacing-base ) * 2 );
26
+ margin-right: calc(var(--spacing-base) * 2);
27
27
  }
28
28
 
29
29
  &.is-not-off-price {
30
- color: var( --jp-gray-20);
30
+ color: var(--jp-gray-20);
31
31
 
32
32
  &::after {
33
33
  content: " ";
34
34
  display: block;
35
35
  width: 100%;
36
36
  height: 3px;
37
- background: var( --jp-red);
38
- border-radius: var( --jp-border-radius );
37
+ background: var(--jp-red);
38
+ border-radius: var(--jp-border-radius);
39
39
  position: absolute;
40
40
  top: 50%;
41
41
  margin-top: -2px;
@@ -49,11 +49,11 @@
49
49
  flex-wrap: wrap;
50
50
  align-items: flex-start;
51
51
  justify-content: flex-start;
52
- margin-bottom: calc( var( --spacing-base ) * 3 );
52
+ margin-bottom: calc(var(--spacing-base) * 3);
53
53
  }
54
54
 
55
55
  .legend {
56
- color: var( --jp-gray-40 );
56
+ color: var(--jp-gray-40);
57
57
  font-size: var(--font-body-small);
58
58
  line-height: 20px;
59
59
 
@@ -63,13 +63,13 @@
63
63
  }
64
64
 
65
65
  .promo-label {
66
- background-color: var( --jp-yellow-10);
66
+ background-color: var(--jp-yellow-10);
67
67
  border-radius: 4px;
68
- padding-left: var( --spacing-base );
69
- padding-right: var( --spacing-base );
68
+ padding-left: var(--spacing-base);
69
+ padding-right: var(--spacing-base);
70
70
  font-weight: 600;
71
71
  font-size: 13px;
72
- margin-left: var( --spacing-base );
72
+ margin-left: var(--spacing-base);
73
73
  }
74
74
 
75
75
  .symbol {
package/components/progress-bar/style.module.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  width: 100%;
3
3
  height: 12px;
4
4
  background-color: var(--jp-gray-5);
5
- border-radius: calc( var( --spacing-base ) * 3 );
5
+ border-radius: calc(var(--spacing-base) * 3);
6
6
  overflow: hidden;
7
7
 
8
8
  &.small {
@@ -11,8 +11,8 @@
11
11
 
12
12
  .progress {
13
13
  height: 100%;
14
- border-radius: calc( var( --spacing-base ) * 3 );
15
- background-color: var( --jp-black );
14
+ border-radius: calc(var(--spacing-base) * 3);
15
+ background-color: var(--jp-black);
16
16
  min-width: 12px;
17
17
  }
18
18
  }
package/components/radio-control/styles.module.scss CHANGED
@@ -12,15 +12,15 @@
12
12
  &__input[type="radio"] {
13
13
 
14
14
  &:checked {
15
- background: var( --jp-green-40 );
16
- border-color: var( --jp-green-40 );
15
+ background: var(--jp-green-40);
16
+ border-color: var(--jp-green-40);
17
17
  }
18
18
 
19
19
  &:focus {
20
- border-color: var( --jp-green-50 );
21
- box-shadow: 0 0 0 2px var( --jp-white ), 0 0 0 4px var( --jp-green-50 );
20
+ border-color: var(--jp-green-50);
21
+ box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
22
22
  }
23
23
  }
24
24
  }
25
25
  }
26
- }
26
+ }
package/components/spinner/style.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @keyframes rotate-spinner {
2
2
 
3
3
  100% {
4
- transform: rotate( 360deg );
4
+ transform: rotate(360deg);
5
5
  }
6
6
  }
7
7
 
@@ -10,7 +10,8 @@
10
10
  align-items: center;
11
11
  }
12
12
 
13
- .jp-components-spinner__outer, .jp-components-spinner__inner {
13
+ .jp-components-spinner__outer,
14
+ .jp-components-spinner__inner {
14
15
  margin: auto;
15
16
  box-sizing: border-box;
16
17
  border: 0.1em solid transparent;
package/components/split-button/style.module.scss CHANGED
@@ -1,21 +1,21 @@
1
1
  .split-button {
2
- --actions-size: 28px;
3
- display: flex;
4
- height: var(--actions-size);
5
- border-radius: var(--jp-border-radius);
2
+ --actions-size: 28px;
3
+ display: flex;
4
+ height: var(--actions-size);
5
+ border-radius: var(--jp-border-radius);
6
6
 
7
7
  :global(.components-button-group) {
8
8
  display: flex;
9
9
  height: 100%;
10
10
  }
11
11
 
12
- > .button:first-child {
13
- border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
14
- }
12
+ > .button:first-child {
13
+ border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
14
+ }
15
15
 
16
- > :global(.components-dropdown) > .button {
17
- border-radius: 0 var(--jp-border-radius) var(--jp-border-radius) 0;
18
- }
16
+ > :global(.components-dropdown) > .button {
17
+ border-radius: 0 var(--jp-border-radius) var(--jp-border-radius) 0;
18
+ }
19
19
  }
20
20
 
21
21
  .button {
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/swipeable/style.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
1
+ @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
2
2
 
3
3
  .swipeable__container {
4
4
  width: 100%;