@automattic/jetpack-components 0.53.9 → 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 +10 -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 +6 -6
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.54.0] - 2024-06-21
|
|
6
|
+
### Added
|
|
7
|
+
- Added Chip component [#37916]
|
|
8
|
+
|
|
9
|
+
## [0.53.10] - 2024-06-12
|
|
10
|
+
### Changed
|
|
11
|
+
- Updated package dependencies. [#37796]
|
|
12
|
+
|
|
5
13
|
## [0.53.9] - 2024-06-11
|
|
6
14
|
### Changed
|
|
7
15
|
- Updated package dependencies. [#37779]
|
|
@@ -1063,6 +1071,8 @@
|
|
|
1063
1071
|
### Changed
|
|
1064
1072
|
- Update node version requirement to 14.16.1
|
|
1065
1073
|
|
|
1074
|
+
[0.54.0]: https://github.com/Automattic/jetpack-components/compare/0.53.10...0.54.0
|
|
1075
|
+
[0.53.10]: https://github.com/Automattic/jetpack-components/compare/0.53.9...0.53.10
|
|
1066
1076
|
[0.53.9]: https://github.com/Automattic/jetpack-components/compare/0.53.8...0.53.9
|
|
1067
1077
|
[0.53.8]: https://github.com/Automattic/jetpack-components/compare/0.53.7...0.53.8
|
|
1068
1078
|
[0.53.7]: https://github.com/Automattic/jetpack-components/compare/0.53.6...0.53.7
|
|
@@ -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,14 +30,14 @@
|
|
|
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.
|
|
39
|
-
"@babel/core": "7.24.
|
|
40
|
-
"@babel/preset-react": "7.
|
|
38
|
+
"@automattic/jetpack-base-styles": "^0.6.27",
|
|
39
|
+
"@babel/core": "7.24.7",
|
|
40
|
+
"@babel/preset-react": "7.24.7",
|
|
41
41
|
"@jest/globals": "29.4.3",
|
|
42
42
|
"@storybook/addon-actions": "8.1.6",
|
|
43
43
|
"@storybook/blocks": "8.1.6",
|