@automattic/jetpack-components 0.73.2 → 1.0.0

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,21 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [1.0.0] - 2025-06-03
6
+ ### Changed
7
+ - Update package dependencies. [#43718] [#43734]
8
+
9
+ ## [0.73.4] - 2025-06-02
10
+ ### Added
11
+ - Added className prop to AdminPage component. [#43592]
12
+
13
+ ### Changed
14
+ - sass: `@use` rather than `@import` for `@automattic/jetpack-base-styles/gutenberg-base-styles`. [#43607]
15
+
16
+ ## [0.73.3] - 2025-05-26
17
+ ### Changed
18
+ - Update package dependencies. [#43578]
19
+
5
20
  ## [0.73.2] - 2025-05-22
6
21
  ### Fixed
7
22
  - Fixed Swipeable width being stale on window resize. [#43510]
@@ -1400,6 +1415,9 @@
1400
1415
  ### Changed
1401
1416
  - Update node version requirement to 14.16.1
1402
1417
 
1418
+ [1.0.0]: https://github.com/Automattic/jetpack-components/compare/0.73.4...1.0.0
1419
+ [0.73.4]: https://github.com/Automattic/jetpack-components/compare/0.73.3...0.73.4
1420
+ [0.73.3]: https://github.com/Automattic/jetpack-components/compare/0.73.2...0.73.3
1403
1421
  [0.73.2]: https://github.com/Automattic/jetpack-components/compare/0.73.1...0.73.2
1404
1422
  [0.73.1]: https://github.com/Automattic/jetpack-components/compare/0.73.0...0.73.1
1405
1423
  [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": "1.0.0",
4
4
  "description": "Jetpack Components Package",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",
@@ -15,32 +15,32 @@
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",
21
- "@automattic/number-formatters": "^1.0.2",
18
+ "@automattic/jetpack-boost-score-api": "^1.0.0",
19
+ "@automattic/jetpack-api": "^1.0.0",
20
+ "@automattic/jetpack-script-data": "^0.4.2",
21
+ "@automattic/number-formatters": "^1.0.3",
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",
35
35
  "react-slider": "2.0.5",
36
- "social-logos": "^3.2.0",
36
+ "social-logos": "^3.2.1",
37
37
  "uplot": "1.6.31",
38
38
  "uplot-react": "1.1.4"
39
39
  },
40
40
  "devDependencies": {
41
- "@automattic/jetpack-base-styles": "^0.7.4",
42
- "@babel/core": "7.26.10",
43
- "@babel/preset-react": "7.26.3",
41
+ "@automattic/jetpack-base-styles": "^1.0.0",
42
+ "@babel/core": "7.27.4",
43
+ "@babel/preset-react": "7.27.1",
44
44
  "@jest/globals": "29.7.0",
45
45
  "@storybook/addon-actions": "8.6.7",
46
46
  "@storybook/blocks": "8.6.7",
@@ -49,8 +49,8 @@
49
49
  "@testing-library/react": "16.2.0",
50
50
  "@testing-library/user-event": "14.6.1",
51
51
  "@types/jest": "29.5.14",
52
- "@types/react": "18.3.18",
53
- "@types/react-dom": "18.3.5",
52
+ "@types/react": "18.3.23",
53
+ "@types/react-dom": "18.3.7",
54
54
  "@types/react-slider": "1.3.6",
55
55
  "jest": "29.7.0",
56
56
  "jest-environment-jsdom": "29.7.0",