Components: Migrate MarkedLines component from Jetpack Protect (#39674)

Automattic · Oct 13, 2024 · 8af02a6 · 8af02a6
1 parent 2761a42
commit 8af02a6
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 7 deletions.
diff --git a/projects/js-packages/components/changelog/add-components-marked-lines b/projects/js-packages/components/changelog/add-components-marked-lines
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add MarkedLines component
diff --git a/.../src/js/components/marked-lines/README.md → ...ponents/components/marked-lines/README.md b/.../src/js/components/marked-lines/README.md → ...ponents/components/marked-lines/README.md
@@ -1,6 +1,6 @@
 # Marked Lines viewer
 
-Forked over from [Calypso](https://github.com/Automattic/wp-calypso/tree/b7a4a07/client/components/marked-lines).
+Originally forked over from [Calypso](https://github.com/Automattic/wp-calypso/tree/b7a4a07/client/components/marked-lines).
 
 This component is designed to show contextualized lines from a file with
 optional highlighting or marks to point out specific parts of one or more lines.

diff --git a/.../src/js/components/marked-lines/index.jsx → ...ponents/components/marked-lines/index.tsx b/.../src/js/components/marked-lines/index.jsx → ...ponents/components/marked-lines/index.tsx
diff --git a/...ts/marked-lines/stories/index.stories.jsx → ...ts/marked-lines/stories/index.stories.tsx b/...ts/marked-lines/stories/index.stories.jsx → ...ts/marked-lines/stories/index.stories.tsx
@@ -1,9 +1,7 @@
-/* eslint-disable react/react-in-jsx-scope */
-import React from 'react';
-import MarkedLines from '../index.jsx';
+import MarkedLines from '../index.js';
 
 export default {
-	title: 'Plugins/Protect/Marked Lines',
+	title: 'JS Packages/Components/Marked Lines',
 	component: MarkedLines,
 };
 
@@ -15,6 +13,7 @@ export const Default = args => (
 		} }
 	/>
 );
+
 Default.args = {
 	lines: {
 		10: 'add :: Num a => a -> a -> a',

diff --git a/...omponents/marked-lines/styles.module.scss → ...omponents/marked-lines/styles.module.scss b/...omponents/marked-lines/styles.module.scss → ...omponents/marked-lines/styles.module.scss
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
@@ -79,4 +79,5 @@ export { default as UpsellBanner } from './components/upsell-banner';
 export { getUserLocale, cleanLocale } from './lib/locale';
 export { default as RadioControl } from './components/radio-control';
 export { default as StatCard } from './components/stat-card';
+export { default as MarkedLines } from './components/marked-lines';
 export * from './components/global-notices';
diff --git a/projects/plugins/protect/changelog/add-components-marked-lines b/projects/plugins/protect/changelog/add-components-marked-lines
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Use MarkedLines component from package
diff --git a/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx b/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
@@ -1,11 +1,10 @@
-import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Text, Button, MarkedLines, useBreakpointMatch } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import React, { useCallback } from 'react';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import useFixers from '../../hooks/use-fixers';
 import useModal from '../../hooks/use-modal';
 import DiffViewer from '../diff-viewer';
-import MarkedLines from '../marked-lines';
 import PaidAccordion, { PaidAccordionItem } from '../paid-accordion';
 import Pagination from './pagination';
 import styles from './styles.module.scss';