@automattic/jetpack-components 1.3.0 → 1.3.2

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,9 +2,17 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [1.3.2] - 2025-09-08
6
+ ### Changed
7
+ - Update package dependencies. [#45027] [#45097]
8
+
9
+ ## [1.3.1] - 2025-09-01
10
+ ### Changed
11
+ - My Jetpack: Add product interstitials state management. [#44772]
12
+
5
13
  ## [1.3.0] - 2025-08-25
6
14
  ### Changed
7
- - Start using the improved PricingTable component for product interstitials. [#44801]
15
+ - Use PricingTable component for product interstitials. [#44801]
8
16
 
9
17
  ## [1.2.2] - 2025-08-25
10
18
  ### Changed
@@ -1520,6 +1528,8 @@
1520
1528
  ### Changed
1521
1529
  - Update node version requirement to 14.16.1
1522
1530
 
1531
+ [1.3.2]: https://github.com/Automattic/jetpack-components/compare/1.3.1...1.3.2
1532
+ [1.3.1]: https://github.com/Automattic/jetpack-components/compare/1.3.0...1.3.1
1523
1533
  [1.3.0]: https://github.com/Automattic/jetpack-components/compare/1.2.2...1.3.0
1524
1534
  [1.2.2]: https://github.com/Automattic/jetpack-components/compare/1.2.1...1.2.2
1525
1535
  [1.2.1]: https://github.com/Automattic/jetpack-components/compare/1.2.0...1.2.1
@@ -1,6 +1,6 @@
1
1
  import uPlot from 'uplot';
2
2
  import { type Annotation, Period } from './index.tsx';
3
- import './style-uplot.scss';
3
+ import 'uplot/dist/uPlot.min.css';
4
4
  import type { RefObject } from 'react';
5
5
  interface UplotChartProps {
6
6
  periods: Period[];
@@ -11,7 +11,7 @@ import getDateFormat from "./get-date-format.js";
11
11
  import { tooltipsPlugin } from "./tooltips-plugin.js";
12
12
  import { useBoostScoreTransform } from "./use-boost-score-transform.js";
13
13
  import useResize from "./use-resize.js";
14
- import './style-uplot.scss';
14
+ import 'uplot/dist/uPlot.min.css';
15
15
  const DEFAULT_DIMENSIONS = {
16
16
  height: 300,
17
17
  width: 600,
@@ -11,7 +11,7 @@ import { type Annotation, Period } from './index.tsx';
11
11
  import { tooltipsPlugin } from './tooltips-plugin.ts';
12
12
  import { useBoostScoreTransform } from './use-boost-score-transform.ts';
13
13
  import useResize from './use-resize.ts';
14
- import './style-uplot.scss';
14
+ import 'uplot/dist/uPlot.min.css';
15
15
  import type { ReactElement, RefObject, ComponentType } from 'react';
16
16
 
17
17
  const DEFAULT_DIMENSIONS = {
@@ -2,6 +2,9 @@
2
2
 
3
3
  .container {
4
4
  --padding: calc(var(--spacing-base) * 4);
5
+ --padding-horizontal: calc(var(--spacing-base) * 3);
6
+ --padding-vertical: var(--spacing-base);
7
+ --item-border-color: #f0f0f0;
5
8
  color: var(--jp-black);
6
9
  }
7
10
 
@@ -45,7 +48,7 @@
45
48
  // Border styles for all columns (default gray borders)
46
49
  > :first-child {
47
50
  border-style: solid;
48
- border-color: var(--jp-gray-10);
51
+ border-color: var(--item-border-color);
49
52
  border-width: 1.5px 1.5px 0;
50
53
  border-start-start-radius: 8px;
51
54
  border-start-end-radius: 8px;
@@ -53,14 +56,14 @@
53
56
 
54
57
  > :last-child {
55
58
  border-style: solid;
56
- border-color: var(--jp-gray-10);
59
+ border-color: var(--item-border-color);
57
60
  border-width: 0 1.5px 1.5px;
58
61
  border-end-start-radius: 8px;
59
62
  border-end-end-radius: 8px;
60
63
  }
61
64
 
62
65
  > :not(:first-child):not(:last-child) {
63
- border-inline: 1.5px solid var(--jp-gray-10);
66
+ border-inline: 1.5px solid var(--item-border-color);
64
67
  }
65
68
 
66
69
  > * {
@@ -136,18 +139,19 @@
136
139
  .item {
137
140
  display: flex;
138
141
  align-items: center;
139
- padding-bottom: calc(var(--spacing-base) * 2);
142
+ padding-bottom: var(--padding-vertical);
140
143
  position: relative;
144
+ line-height: 20px;
141
145
 
142
146
  &:not(:nth-child(2)):not(.empty) {
143
- padding-top: calc(var(--spacing-base) * 2);
147
+ padding-top: var(--padding-vertical);
144
148
 
145
149
  &::before {
146
150
  content: "";
147
151
  position: absolute;
148
152
  top: 0;
149
- inset-inline-start: var(--padding);
150
- inset-inline-end: var(--padding);
153
+ inset-inline-start: var(--padding-horizontal);
154
+ inset-inline-end: var(--padding-horizontal);
151
155
  height: 1px;
152
156
 
153
157
  z-index: 5;
@@ -165,7 +169,7 @@
165
169
  }
166
170
 
167
171
  &:last-of-type {
168
- padding-bottom: var(--padding);
172
+ padding-bottom: var(--padding-vertical);
169
173
  }
170
174
  }
171
175
 
@@ -174,8 +178,8 @@
174
178
  }
175
179
 
176
180
  .value {
177
- padding-left: var(--padding);
178
- padding-right: var(--padding);
181
+ padding-left: var(--padding-horizontal);
182
+ padding-right: var(--padding-horizontal);
179
183
  }
180
184
 
181
185
  .icon {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "1.3.0",
3
+ "version": "1.3.2",
4
4
  "description": "Jetpack Components Package",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
6
6
  "bugs": {
@@ -41,30 +41,30 @@
41
41
  ],
42
42
  "dependencies": {
43
43
  "@automattic/format-currency": "1.0.1",
44
- "@automattic/jetpack-api": "^1.0.8",
45
- "@automattic/jetpack-boost-score-api": "^1.0.12",
46
- "@automattic/jetpack-script-data": "^0.5.2",
47
- "@automattic/number-formatters": "^1.0.10",
44
+ "@automattic/jetpack-api": "^1.0.9",
45
+ "@automattic/jetpack-boost-score-api": "^1.0.13",
46
+ "@automattic/jetpack-script-data": "^0.5.3",
47
+ "@automattic/number-formatters": "^1.0.11",
48
48
  "@babel/runtime": "^7",
49
- "@wordpress/browserslist-config": "6.28.0",
50
- "@wordpress/components": "30.1.0",
51
- "@wordpress/compose": "7.28.0",
52
- "@wordpress/data": "10.28.0",
53
- "@wordpress/date": "5.28.0",
54
- "@wordpress/element": "6.28.0",
55
- "@wordpress/i18n": "6.1.0",
56
- "@wordpress/icons": "10.28.0",
57
- "@wordpress/notices": "5.28.0",
49
+ "@wordpress/browserslist-config": "6.30.0",
50
+ "@wordpress/components": "30.3.0",
51
+ "@wordpress/compose": "7.30.0",
52
+ "@wordpress/data": "10.30.0",
53
+ "@wordpress/date": "5.30.0",
54
+ "@wordpress/element": "6.30.0",
55
+ "@wordpress/i18n": "6.3.0",
56
+ "@wordpress/icons": "10.30.0",
57
+ "@wordpress/notices": "5.30.0",
58
58
  "clsx": "2.1.1",
59
59
  "prop-types": "^15.7.2",
60
60
  "qrcode.react": "4.2.0",
61
61
  "react-slider": "2.0.5",
62
- "social-logos": "^3.2.9",
62
+ "social-logos": "^3.2.10",
63
63
  "uplot": "1.6.31",
64
64
  "uplot-react": "1.1.4"
65
65
  },
66
66
  "devDependencies": {
67
- "@automattic/jetpack-base-styles": "^1.0.8",
67
+ "@automattic/jetpack-base-styles": "^1.0.9",
68
68
  "@babel/core": "7.28.0",
69
69
  "@babel/preset-react": "7.27.1",
70
70
  "@jest/globals": "30.0.4",
@@ -84,7 +84,7 @@
84
84
  "require-from-string": "2.0.2",
85
85
  "storybook": "9.0.15",
86
86
  "ts-dedent": "2.2.0",
87
- "typescript": "5.8.3",
87
+ "typescript": "5.9.2",
88
88
  "webpack": "5.94.0",
89
89
  "webpack-cli": "6.0.1"
90
90
  },
@@ -1,5 +0,0 @@
1
- /*
2
- This is a bit of a cheating. The content are copied from node_modules/uplot/dist/uPlot.min.css.
3
- This is because if the css file imports directly from the css file sass-loader is not loading it. And if we import it from the js file, it breaks jest.
4
- */
5
- .uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;z-index: 100;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;z-index: 100;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}