@automattic/jetpack-components 0.65.0 → 0.65.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,6 +2,14 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [0.65.2] - 2025-01-06
6
+ ### Changed
7
+ - Updated package dependencies. [#40797] [#40798] [#40835] [#40841]
8
+
9
+ ## [0.65.1] - 2024-12-23
10
+ ### Changed
11
+ - Internal updates.
12
+
5
13
  ## [0.65.0] - 2024-12-16
6
14
  ### Changed
7
15
  - Fixes ThreatsDataViews defaultLayouts. [#40598]
@@ -1251,6 +1259,8 @@
1251
1259
  ### Changed
1252
1260
  - Update node version requirement to 14.16.1
1253
1261
 
1262
+ [0.65.2]: https://github.com/Automattic/jetpack-components/compare/0.65.1...0.65.2
1263
+ [0.65.1]: https://github.com/Automattic/jetpack-components/compare/0.65.0...0.65.1
1254
1264
  [0.65.0]: https://github.com/Automattic/jetpack-components/compare/0.64.1...0.65.0
1255
1265
  [0.64.1]: https://github.com/Automattic/jetpack-components/compare/0.64.0...0.64.1
1256
1266
  [0.64.0]: https://github.com/Automattic/jetpack-components/compare/0.63.0...0.64.0
@@ -62,6 +62,12 @@
62
62
  display: flex;
63
63
  align-items: center;
64
64
  margin-top: 20px;
65
+ row-gap: 20px;
66
+ flex-wrap: wrap;
67
+
68
+ @media screen and ( max-width: 600px ) {
69
+ justify-content: center;
70
+ }
65
71
 
66
72
  a {
67
73
  &, &:hover, &:active, &:focus {
@@ -1,7 +1,8 @@
1
- import QRCodeLib from 'qrcode.react';
1
+ import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
2
2
  import type React from 'react';
3
3
 
4
- type QRCodeLibProps = React.ComponentProps< typeof QRCodeLib >;
4
+ type QRCodeCanvasProps = React.ComponentProps< typeof QRCodeCanvas >;
5
+ type QRCodeSVGProps = React.ComponentProps< typeof QRCodeSVG >;
5
6
 
6
7
  export type QRCodeProps = {
7
8
  /**
@@ -22,7 +23,7 @@ export type QRCodeProps = {
22
23
  /**
23
24
  * Error correction level of the QR code.
24
25
  */
25
- level?: QRCodeLibProps[ 'level' ];
26
+ level?: QRCodeCanvasProps[ 'level' ] | QRCodeSVGProps[ 'level' ];
26
27
 
27
28
  /**
28
29
  * Whether to include margin in the QR code.
@@ -32,7 +33,7 @@ export type QRCodeProps = {
32
33
  /**
33
34
  * Render the QR code as a `canvas` or `svg`.
34
35
  */
35
- renderAs?: QRCodeLibProps[ 'renderAs' ];
36
+ renderAs?: 'canvas' | 'svg';
36
37
 
37
38
  /**
38
39
  * Size of the QR code.
@@ -42,7 +43,7 @@ export type QRCodeProps = {
42
43
  /**
43
44
  * Image settings for the QR code.
44
45
  */
45
- imageSettings?: QRCodeLibProps[ 'imageSettings' ];
46
+ imageSettings?: QRCodeCanvasProps[ 'imageSettings' ] | QRCodeSVGProps[ 'imageSettings' ];
46
47
  };
47
48
 
48
49
  /**
@@ -53,25 +54,27 @@ export type QRCodeProps = {
53
54
  */
54
55
  const QRCode: React.FC< QRCodeProps > = ( {
55
56
  value = 'https://jetpack.com',
57
+ size = 248,
56
58
  bgColor,
57
59
  fgColor,
58
60
  level,
59
61
  includeMargin,
60
62
  imageSettings,
61
63
  renderAs = 'canvas',
62
- size = 248,
63
64
  } ) => {
64
- return (
65
- <QRCodeLib
66
- value={ value }
67
- size={ size }
68
- bgColor={ bgColor }
69
- fgColor={ fgColor }
70
- level={ level }
71
- includeMargin={ includeMargin }
72
- imageSettings={ imageSettings }
73
- renderAs={ renderAs }
74
- />
65
+ const commonProps = {
66
+ value,
67
+ size,
68
+ bgColor,
69
+ fgColor,
70
+ level,
71
+ includeMargin,
72
+ imageSettings,
73
+ };
74
+ return renderAs === 'svg' ? (
75
+ <QRCodeSVG { ...commonProps } />
76
+ ) : (
77
+ <QRCodeCanvas { ...commonProps } />
75
78
  );
76
79
  };
77
80
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "0.65.0",
3
+ "version": "0.65.2",
4
4
  "description": "Jetpack Components Package",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",
@@ -16,7 +16,7 @@
16
16
  "dependencies": {
17
17
  "@automattic/format-currency": "1.0.1",
18
18
  "@automattic/jetpack-boost-score-api": "^0.1.50",
19
- "@automattic/jetpack-scan": "^0.5.2",
19
+ "@automattic/jetpack-scan": "^0.5.3",
20
20
  "@babel/runtime": "^7",
21
21
  "@wordpress/browserslist-config": "6.14.0",
22
22
  "@wordpress/components": "29.0.0",
@@ -30,27 +30,26 @@
30
30
  "@wordpress/notices": "5.14.0",
31
31
  "clsx": "2.1.1",
32
32
  "prop-types": "^15.7.2",
33
- "qrcode.react": "3.1.0",
33
+ "qrcode.react": "4.2.0",
34
34
  "react-slider": "2.0.5",
35
- "social-logos": "^3.1.15",
35
+ "social-logos": "^3.1.16",
36
36
  "uplot": "1.6.31",
37
37
  "uplot-react": "1.1.4"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@automattic/jetpack-base-styles": "^0.6.39",
41
41
  "@babel/core": "7.26.0",
42
- "@babel/preset-react": "7.25.9",
42
+ "@babel/preset-react": "7.26.3",
43
43
  "@jest/globals": "29.4.3",
44
- "@storybook/addon-actions": "8.3.5",
45
- "@storybook/blocks": "8.3.5",
46
- "@storybook/react": "8.3.5",
44
+ "@storybook/addon-actions": "8.4.7",
45
+ "@storybook/blocks": "8.4.7",
46
+ "@storybook/react": "8.4.7",
47
47
  "@testing-library/dom": "10.4.0",
48
48
  "@testing-library/react": "16.0.1",
49
49
  "@testing-library/user-event": "14.5.2",
50
50
  "@types/jest": "29.5.12",
51
- "@types/qrcode.react": "1.0.5",
52
- "@types/react": "18.3.12",
53
- "@types/react-dom": "18.3.1",
51
+ "@types/react": "18.3.18",
52
+ "@types/react-dom": "18.3.5",
54
53
  "@types/react-slider": "1.3.6",
55
54
  "jest": "29.7.0",
56
55
  "jest-environment-jsdom": "29.7.0",
@@ -58,7 +57,7 @@
58
57
  "react-dom": "18.3.1",
59
58
  "require-from-string": "2.0.2",
60
59
  "resize-observer-polyfill": "1.5.1",
61
- "storybook": "8.3.5",
60
+ "storybook": "8.4.7",
62
61
  "ts-dedent": "2.2.0",
63
62
  "typescript": "5.0.4",
64
63
  "webpack": "5.94.0",