@automattic/jetpack-components 0.50.2 → 0.50.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 +11 -0
- package/components/boost-score-graph/annotations-plugin.ts +4 -3
- package/components/boost-score-graph/style-annotation.scss +9 -4
- package/components/boost-score-graph/style-tooltip.scss +5 -0
- package/components/boost-score-graph/tooltips-plugin.ts +16 -5
- package/components/radio-control/README.md +5 -0
- package/components/radio-control/index.tsx +55 -0
- package/components/radio-control/styles.module.scss +22 -0
- package/index.ts +1 -0
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [0.50.4] - 2024-03-27
|
|
6
|
+
### Changed
|
|
7
|
+
- Updated package dependencies. [#36539, #36585]
|
|
8
|
+
|
|
9
|
+
## [0.50.3] - 2024-03-25
|
|
10
|
+
### Added
|
|
11
|
+
- Annotations: Make it possible to interact with them [#36453]
|
|
12
|
+
- Create RadioControl component [#36532]
|
|
13
|
+
|
|
5
14
|
## [0.50.2] - 2024-03-14
|
|
6
15
|
### Added
|
|
7
16
|
- Add Bluesky color [#36181]
|
|
@@ -982,6 +991,8 @@
|
|
|
982
991
|
### Changed
|
|
983
992
|
- Update node version requirement to 14.16.1
|
|
984
993
|
|
|
994
|
+
[0.50.4]: https://github.com/Automattic/jetpack-components/compare/0.50.3...0.50.4
|
|
995
|
+
[0.50.3]: https://github.com/Automattic/jetpack-components/compare/0.50.2...0.50.3
|
|
985
996
|
[0.50.2]: https://github.com/Automattic/jetpack-components/compare/0.50.1...0.50.2
|
|
986
997
|
[0.50.1]: https://github.com/Automattic/jetpack-components/compare/0.50.0...0.50.1
|
|
987
998
|
[0.50.0]: https://github.com/Automattic/jetpack-components/compare/0.49.2...0.50.0
|
|
@@ -35,14 +35,15 @@ export function annotationsPlugin( annotations: Annotation[] ) {
|
|
|
35
35
|
annotationEl.style.display = 'block';
|
|
36
36
|
annotationEl.style.left = u.valToPos( annotation.timestamp / 1000, 'x' ) + 'px';
|
|
37
37
|
} );
|
|
38
|
-
lineEl.addEventListener( 'mouseleave', () => {
|
|
39
|
-
annotationEl.style.display = 'none';
|
|
40
|
-
} );
|
|
41
38
|
|
|
42
39
|
annotation.line = lineEl;
|
|
43
40
|
annotationsContainer.appendChild( lineEl );
|
|
44
41
|
} );
|
|
45
42
|
|
|
43
|
+
annotationEl.addEventListener( 'mouseleave', () => {
|
|
44
|
+
annotationEl.style.display = 'none';
|
|
45
|
+
} );
|
|
46
|
+
|
|
46
47
|
containerEl.appendChild( annotationsContainer );
|
|
47
48
|
u.over.appendChild( annotationEl );
|
|
48
49
|
}
|
|
@@ -46,25 +46,30 @@ $white: #ffffff;
|
|
|
46
46
|
height: 0;
|
|
47
47
|
border-left: 8px solid transparent;
|
|
48
48
|
border-right: 8px solid transparent;
|
|
49
|
-
border-
|
|
49
|
+
border-top: 8px solid $black;
|
|
50
50
|
position: absolute;
|
|
51
|
-
|
|
51
|
+
bottom: -7px;
|
|
52
52
|
left: 50%;
|
|
53
53
|
transform: translateX(-50%);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
display: none;
|
|
57
|
-
|
|
57
|
+
bottom: 100%;
|
|
58
58
|
background-color: $black;
|
|
59
59
|
color: $white;
|
|
60
60
|
width: fit-content;
|
|
61
|
+
width: 20em;
|
|
61
62
|
padding: 16px 24px;
|
|
62
63
|
border-radius: 4px;
|
|
63
64
|
font-size: 14px;
|
|
64
|
-
position:
|
|
65
|
+
position: absolute;
|
|
65
66
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
66
67
|
text-align: center;
|
|
67
68
|
transform: translateX(-50%);
|
|
68
69
|
z-index: 2;
|
|
70
|
+
|
|
71
|
+
a {
|
|
72
|
+
color: $white !important;
|
|
73
|
+
}
|
|
69
74
|
}
|
|
70
75
|
}
|
|
@@ -11,6 +11,7 @@ import { Period } from '.';
|
|
|
11
11
|
*/
|
|
12
12
|
export function tooltipsPlugin( periods ) {
|
|
13
13
|
const reactRoot = document.createElement( 'div' );
|
|
14
|
+
const container = document.createElement( 'div' );
|
|
14
15
|
let reactDom;
|
|
15
16
|
|
|
16
17
|
/**
|
|
@@ -19,8 +20,9 @@ export function tooltipsPlugin( periods ) {
|
|
|
19
20
|
* @param {uPlot} u - The uPlot instance.
|
|
20
21
|
* @param {object} _opts - Options for the uPlot instance.
|
|
21
22
|
*/
|
|
22
|
-
function init( u, _opts ) {
|
|
23
|
-
|
|
23
|
+
function init( u: uPlot, _opts: object ) {
|
|
24
|
+
container.classList.add( 'jb-score-tooltips-container' );
|
|
25
|
+
|
|
24
26
|
reactDom = ReactDOM.createRoot( reactRoot );
|
|
25
27
|
reactRoot.style.position = 'absolute';
|
|
26
28
|
reactRoot.style.bottom = -20 + 'px';
|
|
@@ -29,6 +31,8 @@ export function tooltipsPlugin( periods ) {
|
|
|
29
31
|
|
|
30
32
|
container.appendChild( reactRoot );
|
|
31
33
|
|
|
34
|
+
u.over.appendChild( container );
|
|
35
|
+
|
|
32
36
|
/**
|
|
33
37
|
* Hides all tooltips.
|
|
34
38
|
*/
|
|
@@ -44,9 +48,7 @@ export function tooltipsPlugin( periods ) {
|
|
|
44
48
|
}
|
|
45
49
|
|
|
46
50
|
container.addEventListener( 'mouseleave', () => {
|
|
47
|
-
|
|
48
|
-
hideTips();
|
|
49
|
-
}
|
|
51
|
+
hideTips();
|
|
50
52
|
} );
|
|
51
53
|
|
|
52
54
|
container.addEventListener( 'mouseenter', () => {
|
|
@@ -54,6 +56,14 @@ export function tooltipsPlugin( periods ) {
|
|
|
54
56
|
} );
|
|
55
57
|
}
|
|
56
58
|
|
|
59
|
+
/**
|
|
60
|
+
* Called when the chart is resized.
|
|
61
|
+
* @param {uPlot} u - The uPlot instance.
|
|
62
|
+
*/
|
|
63
|
+
function setSize( u: uPlot ) {
|
|
64
|
+
container.style.height = u.over.clientHeight + 'px';
|
|
65
|
+
}
|
|
66
|
+
|
|
57
67
|
/**
|
|
58
68
|
* Sets the cursor for tooltips.
|
|
59
69
|
*
|
|
@@ -88,6 +98,7 @@ export function tooltipsPlugin( periods ) {
|
|
|
88
98
|
hooks: {
|
|
89
99
|
init,
|
|
90
100
|
setCursor,
|
|
101
|
+
setSize,
|
|
91
102
|
},
|
|
92
103
|
};
|
|
93
104
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
# RadioControl
|
|
2
|
+
|
|
3
|
+
A wrapper component for applying Jetpack Emerald styles to the [RadioControl](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/radio-control) component from `@wordpress/components`.
|
|
4
|
+
|
|
5
|
+
The documentation for the base `RadioControl` component can be found via the [Gutenberg Handbook](https://developer.wordpress.org/block-editor/reference-guides/components/radio-control/).
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { RadioControl as WPRadioControl } from '@wordpress/components';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import styles from './styles.module.scss';
|
|
4
|
+
|
|
5
|
+
interface RadioControlProps {
|
|
6
|
+
/** The current value. */
|
|
7
|
+
selected: string;
|
|
8
|
+
|
|
9
|
+
/** Custom class name to append to the component. */
|
|
10
|
+
className?: string;
|
|
11
|
+
|
|
12
|
+
/** Whether or not the radio control is currently disabled. */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
|
|
15
|
+
/** Additional information to display below the radio control. */
|
|
16
|
+
help?: React.ReactNode;
|
|
17
|
+
|
|
18
|
+
/** The label for the radio control. */
|
|
19
|
+
label?: React.ReactNode;
|
|
20
|
+
|
|
21
|
+
/** If true, the label will only be visible to screen readers. */
|
|
22
|
+
hideLabelFromVision?: boolean;
|
|
23
|
+
|
|
24
|
+
/** A list of options to show. */
|
|
25
|
+
options: { label: string; value: string }[];
|
|
26
|
+
|
|
27
|
+
/** A callback function invoked when the value is changed. */
|
|
28
|
+
onChange: ( value: string ) => void;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const RadioControl: React.FC< RadioControlProps > = ( {
|
|
32
|
+
selected,
|
|
33
|
+
className,
|
|
34
|
+
disabled,
|
|
35
|
+
help,
|
|
36
|
+
label,
|
|
37
|
+
hideLabelFromVision,
|
|
38
|
+
options,
|
|
39
|
+
onChange,
|
|
40
|
+
} ) => {
|
|
41
|
+
return (
|
|
42
|
+
<WPRadioControl
|
|
43
|
+
selected={ selected }
|
|
44
|
+
className={ classNames( styles.radio, className ) }
|
|
45
|
+
disabled={ disabled }
|
|
46
|
+
help={ help }
|
|
47
|
+
label={ label }
|
|
48
|
+
hideLabelFromVision={ hideLabelFromVision }
|
|
49
|
+
options={ options }
|
|
50
|
+
onChange={ onChange }
|
|
51
|
+
/>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export default RadioControl;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/// Radio Control
|
|
2
|
+
///
|
|
3
|
+
/// Overrides the @wordpress/components RadioControl component.
|
|
4
|
+
/// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/radio-control
|
|
5
|
+
|
|
6
|
+
.radio {
|
|
7
|
+
:global {
|
|
8
|
+
.components-radio-control {
|
|
9
|
+
&__input[type="radio"] {
|
|
10
|
+
&:checked {
|
|
11
|
+
background: var( --jp-green-40 );
|
|
12
|
+
border-color: var( --jp-green-40 );
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&:focus {
|
|
16
|
+
border-color: var( --jp-green-50 );
|
|
17
|
+
box-shadow: 0 0 0 2px var( --jp-white ), 0 0 0 4px var( --jp-green-50 );
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
package/index.ts
CHANGED
|
@@ -72,3 +72,4 @@ export { default as ZendeskChat } from './components/zendesk-chat';
|
|
|
72
72
|
export { default as ProgressBar } from './components/progress-bar';
|
|
73
73
|
export { default as UpsellBanner } from './components/upsell-banner';
|
|
74
74
|
export { getUserLocale, cleanLocale } from './lib/locale';
|
|
75
|
+
export { default as RadioControl } from './components/radio-control';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "0.50.
|
|
3
|
+
"version": "0.50.4",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@automattic/format-currency": "1.0.1",
|
|
18
|
-
"@automattic/jetpack-boost-score-api": "^0.1.
|
|
18
|
+
"@automattic/jetpack-boost-score-api": "^0.1.27",
|
|
19
19
|
"@babel/runtime": "^7",
|
|
20
|
-
"@wordpress/browserslist-config": "5.
|
|
21
|
-
"@wordpress/components": "27.
|
|
22
|
-
"@wordpress/compose": "6.
|
|
23
|
-
"@wordpress/data": "9.
|
|
24
|
-
"@wordpress/date": "4.
|
|
25
|
-
"@wordpress/element": "5.
|
|
26
|
-
"@wordpress/i18n": "4.
|
|
27
|
-
"@wordpress/icons": "9.
|
|
20
|
+
"@wordpress/browserslist-config": "5.37.0",
|
|
21
|
+
"@wordpress/components": "27.2.0",
|
|
22
|
+
"@wordpress/compose": "6.31.0",
|
|
23
|
+
"@wordpress/data": "9.24.0",
|
|
24
|
+
"@wordpress/date": "4.54.0",
|
|
25
|
+
"@wordpress/element": "5.31.0",
|
|
26
|
+
"@wordpress/i18n": "4.54.0",
|
|
27
|
+
"@wordpress/icons": "9.45.0",
|
|
28
28
|
"classnames": "2.3.2",
|
|
29
29
|
"prop-types": "^15.7.2",
|
|
30
30
|
"qrcode.react": "3.1.0",
|
|
@@ -34,13 +34,13 @@
|
|
|
34
34
|
"uplot-react": "1.1.4"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@automattic/jetpack-base-styles": "^0.6.
|
|
37
|
+
"@automattic/jetpack-base-styles": "^0.6.20",
|
|
38
38
|
"@babel/core": "7.24.0",
|
|
39
39
|
"@babel/preset-react": "7.23.3",
|
|
40
40
|
"@jest/globals": "29.4.3",
|
|
41
|
-
"@storybook/addon-actions": "
|
|
42
|
-
"@storybook/blocks": "
|
|
43
|
-
"@storybook/react": "
|
|
41
|
+
"@storybook/addon-actions": "8.0.4",
|
|
42
|
+
"@storybook/blocks": "8.0.4",
|
|
43
|
+
"@storybook/react": "8.0.4",
|
|
44
44
|
"@testing-library/dom": "9.3.4",
|
|
45
45
|
"@testing-library/react": "14.2.1",
|
|
46
46
|
"@testing-library/user-event": "14.5.2",
|