Mim 1753 highmap wrapper (#2514)

* Dont use relative imports to XP files

* fix factbox

* Make wrapper around highmap more like highchart

* Rename part class to wrapper

src/main/resources/assets/styles/_highchart.scss

@@ -1,4 +1,4 @@
-.part-highchart {
+.highchart-wrapper {
   .highcharts-credits {
     display: none;
   }

src/main/resources/site/macros/highmap/highmap.ts

@@ -1,12 +1,19 @@
 import { renderError } from '/lib/ssb/error/error'
+
 import { preview } from '/site/parts/highmap/highmap'
+import { preview as dividerControllerPreview } from '/site/parts/divider/divider'
 import { Highmap } from '.'
 
 export function macro(context: XP.MacroContext<Highmap>) {
   try {
+    const divider: XP.Response = dividerControllerPreview(context.request, {
+      dark: false,
+    })
+
     const highmap = preview(context.request, context.params.highmap)
 
     if (highmap.status && highmap.status !== 200) throw new Error(`Highmap with id ${context.params.highmap} missing`)
+    highmap.body = (divider.body as string) + highmap.body + divider.body
 
     return highmap
   } catch (e) {

src/main/resources/site/parts/highchart/highchart.html

@@ -1,4 +1,4 @@
-<section class="xp-part part-highchart" data-th-each="highchart: ${highcharts}">
+<section class="xp-part highchart-wrapper" data-th-each="highchart: ${highcharts}">
   <span data-th-utext="${dataScript}" data-th-remove="tag"></span>
   <div class="row position-relative">
     <div data-th-if="${highchart && highchart.config && highchart.config.draft}" class="alert alert-info mb-4" role="alert" data-th-text="${'Tallet i figuren nedenfor er upublisert'}"></div>

src/main/resources/site/parts/highchart/highchart.ts

@@ -107,7 +107,7 @@ function renderPart(req: XP.Request, highchartIds: Array<string>): XP.Response {
     if (req.mode === 'edit') _req.mode = 'preview'
 
     return r4XpRender('site/parts/highchart/Highchart', HighchartProps, _req, {
-      body: '<section class="xp-part part-highchart"></section>',
+      body: '<section class="xp-part highchart-wrapper"></section>',
     })
   } else {
     return {

src/main/resources/site/parts/highchartExpert/highchartExpert.ts

@@ -45,7 +45,7 @@ function renderPart(req: XP.Request): XP.Response {
   }
 
   return r4XpRender('site/parts/highchartExpert/HighchartExpert', { config: component.config.config }, _req, {
-    body: '<section class="xp-part part-highchart-expert"></section>',
+    body: '<section class="xp-part highchart-wrapper-expert"></section>',
   })
 }
 
@@ -60,7 +60,7 @@ function errorConfig(title = 'Feil i JSON konfigurasjon', message = '') {
     Det må begynne med <strong>{</strong> og slutte med <strong>}</strong>`
 
   return {
-    body: `<section class="xp-part part-highchart-expert part-config-error">
+    body: `<section class="xp-part highchart-wrapper-expert part-config-error">
     <h2>Highchart Ekspert - ${title}</h2>
     <p>
      ${_message}

src/main/resources/site/parts/highmap/Highmap.jsx

@@ -16,21 +16,6 @@ if (typeof Highcharts === 'object') {
   require('highcharts/modules/map')(Highcharts)
 }
 
-function renderFootnotes(footnotes) {
-  if (footnotes.length) {
-    return (
-      <Row>
-        {footnotes.map((footnote) => (
-          <Col className='col-12' key={`footnote-${footnote}`}>
-            {footnote && <Text>{footnote}</Text>}
-          </Col>
-        ))}
-      </Row>
-    )
-  }
-  return
-}
-
 function Highmap(props) {
   useEffect(() => {
     if (props.language !== 'en') {
@@ -168,13 +153,22 @@ function Highmap(props) {
   }
 
   return (
-    <section className='part-highmap container'>
+    <section className='xp-part highchart-wrapper'>
       <Row>
-        <Col className='col-12 p-lg-0'>
-          <HighchartsReact highcharts={Highcharts} constructorType={'mapChart'} options={mapOptions} />
+        <Col className='col-12'>
+          <figure className='highcharts-figure mb-0 hide-title'>
+            {mapOptions.title?.text && <figcaption className='figure-title'>{mapOptions.title.text}</figcaption>}
+            {mapOptions.subtitle?.text && <p className='figure-subtitle'>{mapOptions.subtitle.text}</p>}
+            <HighchartsReact highcharts={Highcharts} constructorType={'mapChart'} options={mapOptions} />
+          </figure>
+          {props.footnoteText &&
+            props.footnoteText.map((footnote) => (
+              <Col className='footnote col-12' key={`footnote-${footnote}`}>
+                {footnote && <Text>{footnote}</Text>}
+              </Col>
+            ))}
         </Col>
       </Row>
-      {renderFootnotes(props.footnoteText)}
     </section>
   )
 }