(#5090) Adds legacy-highcharts

docroot/modules/custom/ncids_html_transformer/src/Services/NcidsEmbeddedEntitiesTransformer.php

@@ -19,6 +19,28 @@ class NcidsEmbeddedEntitiesTransformer extends NcidsHtmlTransformerBase {
     'drupal-entity',
   ];
 
+  /**
+   * {@inheritdoc}
+   */
+  private const HIGHCHART_UUIDS = [
+    '2eb6563f-ca7f-4e80-a6a2-ff7d86cddfde',
+    '8f8303e3-7107-4ce6-924a-d424a804c50e',
+    'a516f1f6-3d1f-497a-ab89-c5632b6a9c7a',
+    '9dbe5458-6cbe-418c-968c-859d76e05118',
+    '8198eb3c-a21c-4f31-8cdf-7aa8e4be0e53',
+    '1d03e058-f5a9-45fa-acbc-5aef8854d4e1',
+    '8adc95ce-5899-4a96-95bf-26970ec97ca3',
+    'ef5d5ba9-f42a-4781-90c1-e378989f24a1',
+    'e8605510-59ec-4282-a1bd-d1fbf433557a',
+    'badec603-f877-4691-b0c5-f75111e1b7f2',
+    'ad87f1da-cfeb-4821-ab85-da4d602afe81',
+    '2c3f7767-96d0-4c46-9bef-c3e00bbb6f29',
+    'fd13d6a6-b04d-4220-b53c-c7aad8ae52f3',
+    '9834f764-171d-4f70-a272-0fcce37a93ae',
+    'abf2776a-70f8-40de-b550-e9d01c2f9c24',
+    // Add more UUIDs if needed (it's not).
+  ];
+
   /**
    * The logger interface service.
    *
@@ -71,6 +93,12 @@ public function transform(string $html): string {
 
           case 'view_mode:block_content.full':
             $drupal_embed->setAttribute('data-embed-button', 'insert_content_block_content');
+            // If the uuid is in the list of highchart uuids, set the
+            // data-entity-embed-display attribute on the embedded entity
+            // to the right view_mode for highcharts.
+            if (in_array($uuid, self::HIGHCHART_UUIDS)) {
+              $drupal_embed->setAttribute('data-entity-embed-display', 'view_mode:block_content.legacy_highchart');
+            }
             break;
 
           default:

docroot/modules/custom/ncids_html_transformer/tests/src/Unit/NcidsEmbeddedEntitiesTransformerTest.php

@@ -212,4 +212,32 @@ public function testContentBlock() {
     $this->assertEquals($expected_html, $post_processed, 'Should transform content block.');
   }
 
+  /**
+   * Test content block migration with block_content.full.
+   *
+   * @covers ::transform
+   */
+  public function testContentBlockHighChart() {
+    $original_html =
+      '<drupal-entity ' .
+        'data-entity-uuid="2eb6563f-ca7f-4e80-a6a2-ff7d86cddfde" ' .
+        'data-embed-button="insert_block_content" ' .
+        'data-entity-embed-display="view_mode:block_content.full" ' .
+        'data-entity-type="block_content"' .
+      '></drupal-entity>';
+    $expected_html =
+      '<drupal-entity ' .
+        'data-entity-uuid="2eb6563f-ca7f-4e80-a6a2-ff7d86cddfde" ' .
+        'data-embed-button="insert_content_block_content" ' .
+        'data-entity-embed-display="view_mode:block_content.legacy_highchart" ' .
+        'data-entity-type="block_content"' .
+      '></drupal-entity>';
+
+    // Simulate full transformation process.
+    $pre_processed = $this->transformer->preProcessHtml($original_html);
+    $transformed = $this->transformer->transform($pre_processed);
+    $post_processed = $this->transformer->postProcessHtml($transformed);
+    $this->assertEquals($expected_html, $post_processed, 'Should transform content block to have a legacy-highchart view mode.');
+  }
+
 }

docroot/profiles/custom/cgov_site/modules/custom/cgov_embedded_block/config/install/core.entity_view_mode.block_content.legacy_highchart.yml

@@ -0,0 +1,10 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - block_content
+id: block_content.legacy_highchart
+label: 'Legacy Highchart'
+description: ''
+targetEntityType: block_content
+cache: true

docroot/profiles/custom/cgov_site/modules/custom/cgov_embedded_block/config/install/embed.button.insert_content_block_content.yml

@@ -15,6 +15,7 @@ type_settings:
   bundles: {  }
   display_plugins:
     - 'view_mode:block_content.full'
+    - 'view_mode:block_content.legacy_highchart'
   entity_browser: content_block_raw_html_browser
   entity_browser_settings:
     display_review: false

docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/entrypoints/legacy-highcharts/legacy-highcharts.scss

@@ -0,0 +1,126 @@
+// This contains the NCIDS Settings and required items. Nothing in this
+// file should generate markup.
+@forward '../cgdp-required';
+
+@use 'uswds-core' as *;
+
+/** Legacy mixin things **/
+@import '~Core/styles/environments/percussion';
+@import '../../legacy/styles/variables';
+@import '~Core/styles/mixins';
+@import '~Core/styles/fonts';
+@import '../../legacy/styles/breakpoint-mixins';
+@import '~Core/styles/placeholders';
+@import '~Styles/sprites/svg-sprite'; //sprites are sometimes used in *_overrides files
+/** Legacy mixin things END **/
+
+// We are moving foundation outside of legacy
+@import '../../legacy/styles/nci-foundation';
+
+@import '../../legacy/styles/jqueryui_overrides';
+@import '../../legacy/styles/jqueryui';
+
+// Highcharts override for popup styles
+// This is only ever used on article pages since factbook pages are
+// the only pages that use highcharts.
+// Most highcharts styles come from charts.scss and are already imported
+// via index.ts
+.highcharts-label {
+	table {
+		@include table();
+	}
+}
+
+// Styles for setting the font family in jQuery UI dialogs
+// specifically for Highcharts popups.
+.ui-dialog {
+	.ui-dialog-title {
+		@include typeset(
+			'heading',
+			$theme-h5-font-size,
+			$theme-heading-line-height
+		);
+	}
+	.no-results-message {
+		@include typeset(
+			$theme-body-font-family,
+			$theme-body-font-size,
+			$theme-body-line-height
+		);
+	}
+}
+
+// Styles from cgov/src/styles/_tables.scss that are needed for
+// Highcharts data table popups.
+[class^='flexTable'] {
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0;
+	padding: 0;
+	min-width: 170px;
+	> div {
+		box-sizing: border-box;
+		flex-grow: 1;
+		width: 100%; // Default to full width
+		padding: 0.4em 0.8em;
+		overflow: hidden; // Or flex might break
+		list-style: none;
+		white-space: normal;
+		> h1,
+		> h2,
+		> h3,
+		> h4,
+		> h5,
+		> h6 {
+			margin: 0;
+		}
+	}
+}
+.flexTable--2cols > div {
+	width: 50%;
+}
+.flexTable--3cols > div {
+	width: 33.33%;
+}
+.flexTable--4cols > div {
+	width: 25%;
+}
+.flexTable--5cols > div {
+	width: 20%;
+}
+.flexTable--6cols > div {
+	width: 16.6%;
+}
+
+.highcharts-tooltip .flexTable--2cols {
+	> div:nth-child(odd) {
+		position: relative;
+		width: 60%;
+		span {
+			position: absolute;
+			top: 4px;
+			left: 0;
+		}
+	}
+	> div:nth-child(even) {
+		width: 40%;
+	}
+}
+// Horray for one-off cases!
+.highcharts-tooltip .flexTable--2cols.cellWidths-45-55 {
+	> div:nth-child(odd) {
+		width: 45%;
+	}
+	> div:nth-child(even) {
+		width: 55%;
+	}
+}
+
+.highcharts-tooltip .flexTable--2cols.cellWidths-50-50 {
+	> div:nth-child(odd) {
+		width: 50%;
+	}
+	> div:nth-child(even) {
+		width: 50%;
+	}
+}

docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/entrypoints/legacy-highcharts/legacy-highcharts.ts

@@ -0,0 +1,8 @@
+import './legacy-highcharts.scss';
+import charts from 'Libraries/charts';
+
+const onDOMContentLoaded = () => {
+	charts();
+};
+
+window.addEventListener('DOMContentLoaded', onDOMContentLoaded);

docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/webpack.entries.js

@@ -99,4 +99,8 @@ module.exports = {
 		'src/entrypoints/infographic/infographic.ts'
 	),
 	video: path.resolve(__dirname, 'src/entrypoints/video/video.ts'),
+	'legacy-highcharts': path.resolve(
+		__dirname,
+		'src/entrypoints/legacy-highcharts/legacy-highcharts.ts'
+	),
 };

docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/ncids_trans.libraries.yml

@@ -241,3 +241,12 @@ video:
     dist/js/video.js: { preprocess: false }
   dependencies:
     - ncids_trans/ncids-trans-common
+
+legacy-highcharts:
+  css:
+    theme:
+      dist/css/legacy-highcharts.css: { preprocess: true }
+  js:
+    dist/js/legacy-highcharts.js: { preprocess: true }
+  dependencies:
+    - ncids_trans/jqueryandui

docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/block_content/block-content--raw-html-block--legacy-highchart.html.twig

@@ -0,0 +1,3 @@
+{{ attach_library('ncids_trans/legacy-highcharts') }}
+
+{{ content }}