@automattic/jetpack-components 0.53.10 → 0.54.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 +5 -0
- package/components/chip/README.md +19 -0
- package/components/chip/index.tsx +23 -0
- package/components/chip/style.module.scss +18 -0
- package/index.ts +1 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [0.54.0] - 2024-06-21
|
|
6
|
+
### Added
|
|
7
|
+
- Added Chip component [#37916]
|
|
8
|
+
|
|
5
9
|
## [0.53.10] - 2024-06-12
|
|
6
10
|
### Changed
|
|
7
11
|
- Updated package dependencies. [#37796]
|
|
@@ -1067,6 +1071,7 @@
|
|
|
1067
1071
|
### Changed
|
|
1068
1072
|
- Update node version requirement to 14.16.1
|
|
1069
1073
|
|
|
1074
|
+
[0.54.0]: https://github.com/Automattic/jetpack-components/compare/0.53.10...0.54.0
|
|
1070
1075
|
[0.53.10]: https://github.com/Automattic/jetpack-components/compare/0.53.9...0.53.10
|
|
1071
1076
|
[0.53.9]: https://github.com/Automattic/jetpack-components/compare/0.53.8...0.53.9
|
|
1072
1077
|
[0.53.8]: https://github.com/Automattic/jetpack-components/compare/0.53.7...0.53.8
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
Chip
|
|
2
|
+
=========
|
|
3
|
+
|
|
4
|
+
This component is useful to indicate something is new.
|
|
5
|
+
|
|
6
|
+
## General Usage:
|
|
7
|
+
|
|
8
|
+
```js
|
|
9
|
+
import { Chip } from '@automattic/jetpack-components';
|
|
10
|
+
render() {
|
|
11
|
+
return (
|
|
12
|
+
<Chip type="new" text="New" />
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Props
|
|
18
|
+
|
|
19
|
+
- `className`: an optional class name.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import styles from './style.module.scss';
|
|
4
|
+
|
|
5
|
+
type ChipProps = {
|
|
6
|
+
text?: string;
|
|
7
|
+
type?: 'new' | 'info';
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Chip component
|
|
12
|
+
*
|
|
13
|
+
* @param {object} props - The component properties.
|
|
14
|
+
* @param {string} props.type - The type new or info
|
|
15
|
+
* @param {string} props.text - Chip text
|
|
16
|
+
* @returns {React.ReactElement} The `Chip` component.
|
|
17
|
+
*/
|
|
18
|
+
const Chip: React.FC< ChipProps > = ( { type = 'info', text } ) => {
|
|
19
|
+
const classes = clsx( styles.chip, styles[ `is-${ type }` ] );
|
|
20
|
+
return <span className={ classes }>{ text }</span>;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export default Chip;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.chip {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
border-radius: 3px;
|
|
4
|
+
background-color: var(--jp-gray-5);
|
|
5
|
+
color: var(--jp-gray-50);
|
|
6
|
+
padding: 0 6px;
|
|
7
|
+
margin: 0 8px;
|
|
8
|
+
text-transform: uppercase;
|
|
9
|
+
font-size: 10px;
|
|
10
|
+
font-weight: 700;
|
|
11
|
+
line-height: 20px;
|
|
12
|
+
font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
13
|
+
|
|
14
|
+
&.is-new {
|
|
15
|
+
background-color: var(--jp-green-5);
|
|
16
|
+
color: var(--jp-green-50);
|
|
17
|
+
}
|
|
18
|
+
}
|
package/index.ts
CHANGED
|
@@ -50,6 +50,7 @@ export { default as QRCode } from './components/qr-code';
|
|
|
50
50
|
export { default as Button } from './components/button';
|
|
51
51
|
export { default as LoadingPlaceholder } from './components/loading-placeholder';
|
|
52
52
|
export { default as TermsOfService } from './components/terms-of-service';
|
|
53
|
+
export { default as Chip } from './components/chip';
|
|
53
54
|
export {
|
|
54
55
|
default as PricingTable,
|
|
55
56
|
PricingTableColumn,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.54.0",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -15,7 +15,7 @@
|
|
|
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.32",
|
|
19
19
|
"@babel/runtime": "^7",
|
|
20
20
|
"@wordpress/browserslist-config": "6.0.0",
|
|
21
21
|
"@wordpress/components": "28.0.0",
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"prop-types": "^15.7.2",
|
|
31
31
|
"qrcode.react": "3.1.0",
|
|
32
32
|
"react-slider": "2.0.5",
|
|
33
|
-
"social-logos": "^3.
|
|
33
|
+
"social-logos": "^3.1.1",
|
|
34
34
|
"uplot": "1.6.24",
|
|
35
35
|
"uplot-react": "1.1.4"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@automattic/jetpack-base-styles": "^0.6.
|
|
38
|
+
"@automattic/jetpack-base-styles": "^0.6.27",
|
|
39
39
|
"@babel/core": "7.24.7",
|
|
40
40
|
"@babel/preset-react": "7.24.7",
|
|
41
41
|
"@jest/globals": "29.4.3",
|