@automattic/jetpack-components 0.73.2 → 0.73.4

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,17 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [0.73.4] - 2025-06-02
6
+ ### Added
7
+ - Added className prop to AdminPage component. [#43592]
8
+
9
+ ### Changed
10
+ - sass: `@use` rather than `@import` for `@automattic/jetpack-base-styles/gutenberg-base-styles`. [#43607]
11
+
12
+ ## [0.73.3] - 2025-05-26
13
+ ### Changed
14
+ - Update package dependencies. [#43578]
15
+
5
16
  ## [0.73.2] - 2025-05-22
6
17
  ### Fixed
7
18
  - Fixed Swipeable width being stale on window resize. [#43510]
@@ -1400,6 +1411,8 @@
1400
1411
  ### Changed
1401
1412
  - Update node version requirement to 14.16.1
1402
1413
 
1414
+ [0.73.4]: https://github.com/Automattic/jetpack-components/compare/0.73.3...0.73.4
1415
+ [0.73.3]: https://github.com/Automattic/jetpack-components/compare/0.73.2...0.73.3
1403
1416
  [0.73.2]: https://github.com/Automattic/jetpack-components/compare/0.73.1...0.73.2
1404
1417
  [0.73.1]: https://github.com/Automattic/jetpack-components/compare/0.73.0...0.73.1
1405
1418
  [0.73.0]: https://github.com/Automattic/jetpack-components/compare/0.72.6...0.73.0
@@ -16,12 +16,12 @@ import styles from './style.module.scss';
16
16
  * @param {AdminPageProps} props - Component properties.
17
17
  * @return {React.ReactNode} AdminPage component.
18
18
  */
19
- const AdminPage = ({ children, moduleName = __('Jetpack', 'jetpack-components'), moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, }) => {
19
+ const AdminPage = ({ children, className, moduleName = __('Jetpack', 'jetpack-components'), moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, }) => {
20
20
  useEffect(() => {
21
21
  restApi.setApiRoot(apiRoot);
22
22
  restApi.setApiNonce(apiNonce);
23
23
  }, [apiRoot, apiNonce]);
24
- const rootClassName = clsx(styles['admin-page'], {
24
+ const rootClassName = clsx(styles['admin-page'], className, {
25
25
  [styles.background]: showBackground,
26
26
  });
27
27
  const testConnection = useCallback(async () => {
@@ -52,4 +52,8 @@ export type AdminPageProps = {
52
52
  * Optional menu items to be displayed
53
53
  */
54
54
  optionalMenuItems?: JetpackFooterMenuItem[];
55
+ /**
56
+ * Class name to be applied to the root element of the component.
57
+ */
58
+ className?: string;
55
59
  };
@@ -20,6 +20,7 @@ import type React from 'react';
20
20
  */
21
21
  const AdminPage: React.FC< AdminPageProps > = ( {
22
22
  children,
23
+ className,
23
24
  moduleName = __( 'Jetpack', 'jetpack-components' ),
24
25
  moduleNameHref,
25
26
  showHeader = true,
@@ -37,7 +38,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
37
38
  restApi.setApiNonce( apiNonce );
38
39
  }, [ apiRoot, apiNonce ] );
39
40
 
40
- const rootClassName = clsx( styles[ 'admin-page' ], {
41
+ const rootClassName = clsx( styles[ 'admin-page' ], className, {
41
42
  [ styles.background ]: showBackground,
42
43
  } );
43
44
 
@@ -65,4 +65,9 @@ export type AdminPageProps = {
65
65
  * Optional menu items to be displayed
66
66
  */
67
67
  optionalMenuItems?: JetpackFooterMenuItem[];
68
+
69
+ /**
70
+ * Class name to be applied to the root element of the component.
71
+ */
72
+ className?: string;
68
73
  };
@@ -1,4 +1,4 @@
1
- @import '@automattic/jetpack-base-styles/style';
1
+ @use '@automattic/jetpack-base-styles/style';
2
2
 
3
3
  .jp-components__decorative-card {
4
4
  display: flex;
@@ -1,5 +1,5 @@
1
- @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
2
- @import '@automattic/jetpack-base-styles/root-variables';
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%;
@@ -10,10 +10,10 @@
10
10
  .dot-pager__page {
11
11
  height: 100%;
12
12
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
13
-
14
- @include reduce-motion( "transition" );
15
13
  opacity: 1;
16
14
  visibility: visible;
15
+
16
+ @include gb.reduce-motion( "transition" );
17
17
  }
18
18
 
19
19
  .dot-pager__controls {
@@ -1,4 +1,4 @@
1
- @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
1
+ @use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
2
2
 
3
3
  .global-notices {
4
4
 
@@ -10,14 +10,14 @@
10
10
  // Modals have 100000, so this needs to be above them
11
11
  z-index: 100001;
12
12
 
13
- @include break-small {
13
+ @include gb.break-small {
14
14
  width: auto;
15
15
  inset-inline: unset; // left and right
16
16
  inset-block-start: 4rem;
17
17
  inset-inline-end: 1rem;
18
18
  }
19
19
 
20
- @include break-medium {
20
+ @include gb.break-medium {
21
21
  inset-block-start: 3rem;
22
22
  }
23
23
  }
@@ -1,4 +1,4 @@
1
- @import '@automattic/jetpack-base-styles/style';
1
+ @use '@automattic/jetpack-base-styles/style';
2
2
 
3
3
  $arrow-color: var( --jp-gray );
4
4
 
@@ -1,4 +1,4 @@
1
- @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
1
+ @use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
2
2
 
3
3
  .star-icon {
4
4
  fill: #000;
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  .socialIcon {
13
- fill: $gray-700;
13
+ fill: gb.$gray-700;
14
14
 
15
15
  &.bluesky {
16
16
  fill: var( --color-bluesky );
@@ -1,9 +1,9 @@
1
1
  @use "sass:map";
2
- @import "../breakpoints.module";
2
+ @use "../breakpoints.module" as breakpoints;
3
3
 
4
4
  @mixin cols($size) {
5
5
 
6
- @include media($size) using ($columns) {
6
+ @include breakpoints.media($size) using ($columns) {
7
7
 
8
8
  @for $i from 1 through $columns {
9
9
  .col-#{$size}-#{$i} {
@@ -24,7 +24,7 @@
24
24
  @include cols("lg");
25
25
 
26
26
  :export {
27
- smCols: map.get($cols-sizes, "sm");
28
- mdCols: map.get($cols-sizes, "md");
29
- lgCols: map.get($cols-sizes, "lg");
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
  }
@@ -1,11 +1,11 @@
1
1
  @use "sass:map";
2
- @import "../breakpoints.module";
2
+ @use "../breakpoints.module" as breakpoints;
3
3
 
4
4
  @mixin container($size) {
5
5
  $paddings: ("sm": "16px", "md": "18px", "lg": "24px");
6
6
  $padding: map.get($paddings, #{$size});
7
7
 
8
- @include media(#{$size}) using ($columns) {
8
+ @include breakpoints.media(#{$size}) using ($columns) {
9
9
  padding: 0 #{$padding};
10
10
  grid-template-columns: repeat( #{$columns}, minmax(0, 1fr) );
11
11
  }
@@ -1,4 +1,4 @@
1
- @import '@automattic/jetpack-base-styles/style';
1
+ @use '@automattic/jetpack-base-styles/style';
2
2
 
3
3
  $thumb-height: 40px;
4
4
  $track-height: 8px;
@@ -1,4 +1,4 @@
1
- @import '@automattic/jetpack-base-styles/style';
1
+ @use '@automattic/jetpack-base-styles/style';
2
2
 
3
3
  .jp-components__pricing-card {
4
4
  width: -moz-fit-content;
@@ -1,4 +1,4 @@
1
- @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
1
+ @use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
2
2
 
3
3
  .swipeable__container {
4
4
  width: 100%;
@@ -19,7 +19,7 @@
19
19
  transition: all 0.5s ease-in-out;
20
20
  transition-property: transform, height;
21
21
 
22
- @include reduce-motion( "transition" );
22
+ @include gb.reduce-motion( "transition" );
23
23
  }
24
24
 
25
25
  .swipeable__page {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "0.73.2",
3
+ "version": "0.73.4",
4
4
  "description": "Jetpack Components Package",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",
@@ -15,20 +15,20 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@automattic/format-currency": "1.0.1",
18
- "@automattic/jetpack-boost-score-api": "^0.1.65",
19
- "@automattic/jetpack-api": "^0.20.2",
20
- "@automattic/jetpack-script-data": "^0.4.1",
18
+ "@automattic/jetpack-boost-score-api": "^0.1.67",
19
+ "@automattic/jetpack-api": "^0.20.3",
20
+ "@automattic/jetpack-script-data": "^0.4.2",
21
21
  "@automattic/number-formatters": "^1.0.2",
22
22
  "@babel/runtime": "^7",
23
- "@wordpress/browserslist-config": "6.22.0",
24
- "@wordpress/components": "29.8.0",
25
- "@wordpress/compose": "7.22.0",
26
- "@wordpress/data": "10.22.0",
27
- "@wordpress/date": "5.22.0",
28
- "@wordpress/element": "6.22.0",
29
- "@wordpress/i18n": "5.22.0",
30
- "@wordpress/icons": "10.22.0",
31
- "@wordpress/notices": "5.22.0",
23
+ "@wordpress/browserslist-config": "6.24.0",
24
+ "@wordpress/components": "29.10.0",
25
+ "@wordpress/compose": "7.24.0",
26
+ "@wordpress/data": "10.24.0",
27
+ "@wordpress/date": "5.24.0",
28
+ "@wordpress/element": "6.24.0",
29
+ "@wordpress/i18n": "5.24.0",
30
+ "@wordpress/icons": "10.24.0",
31
+ "@wordpress/notices": "5.24.0",
32
32
  "clsx": "2.1.1",
33
33
  "prop-types": "^15.7.2",
34
34
  "qrcode.react": "4.2.0",
@@ -38,7 +38,7 @@
38
38
  "uplot-react": "1.1.4"
39
39
  },
40
40
  "devDependencies": {
41
- "@automattic/jetpack-base-styles": "^0.7.4",
41
+ "@automattic/jetpack-base-styles": "^0.8.0",
42
42
  "@babel/core": "7.26.10",
43
43
  "@babel/preset-react": "7.26.3",
44
44
  "@jest/globals": "29.7.0",