SONAR-11014 Create a collapsible component

2 files changed, 88 insertions, 34 deletions

diff --git a/server/sonar-docs/src/templates/page.css b/server/sonar-docs/src/templates/page.css
index cf8ff3dd405..1e6c4dd8de5 100644
--- a/server/sonar-docs/src/templates/page.css
+++ b/server/sonar-docs/src/templates/page.css
@@ -32,3 +32,43 @@
   background-color: #dff0d8;
   color: #3c763d;
 }
+
+.collapse {
+  border: 1px solid #e6e6e6;
+  border-radius: 2px;
+  background-color: #f3f3f3;
+  padding: 8px;
+  margin: 0 -1em 1.5rem;
+}
+
+.collapse > a:first-child {
+  background: url(../images/open.svg) no-repeat 0 50%;
+  padding-left: 20px;
+  display: block;
+  color: #236a97;
+  display: block;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+  text-decoration: none;
+}
+
+.collapse.close > a:first-child {
+  background: url(../images/close.svg) no-repeat 0 50%;
+}
+
+.collapse.close > * {
+  display: none;
+}
+
+.collapse.close > a:first-child {
+  margin: 0;
+}
+
+.collapse *:last-child {
+  margin-bottom: 0;
+}
+
+.collapse .alert {
+  margin: 0 0.5em 1.5rem;
+}
diff --git a/server/sonar-docs/src/templates/page.js b/server/sonar-docs/src/templates/page.js
index 45040ee4807..2c04417fe55 100644
--- a/server/sonar-docs/src/templates/page.js
+++ b/server/sonar-docs/src/templates/page.js
@@ -21,43 +21,57 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import './page.css';
 
-export default ({ data }) => {
-  const page = data.markdownRemark;
-  let htmlWithInclusions = cutSonarCloudContent(page.html).replace(
-    /\<p\>@include (.*)\<\/p\>/,
-    (_, path) => {
-      const chunk = data.allMarkdownRemark.edges.find(
-        edge => edge.node.fields && edge.node.fields.slug === path
-      );
-      return chunk ? chunk.node.html : '';
+export default class Page extends React.PureComponent {
+  componentDidMount() {
+    const collaspables = document.getElementsByClassName('collapse');
+    for (let i = 0; i < collaspables.length; i++) {
+      collaspables[i].classList.add('close');
+      collaspables[i].firstChild.outerHTML = collaspables[i].firstChild.outerHTML
+        .replace(/\<h2/gi, '<a href="#"')
+        .replace(/\<\/h2\>/gi, '</a>');
+      collaspables[i].firstChild.addEventListener('click', e => {
+        e.currentTarget.parentNode.classList.toggle('close');
+        e.preventDefault();
+      });
     }
-  );
-
-  if (
-    page.headings &&
-    page.headings.length > 0 &&
-    page.html.match(/<h[1-9]>Table Of Contents<\/h[1-9]>/i)
-  ) {
-    htmlWithInclusions = generateTableOfContents(htmlWithInclusions, page.headings);
   }
 
-  return (
-    <div css={{ paddingTop: 24, paddingBottom: 24 }}>
-      <Helmet title={page.frontmatter.title} />
-      <h1>{page.frontmatter.title}</h1>
-      <div
-        css={{
-          '& img[src$=".svg"]': {
-            position: 'relative',
-            top: '-2px',
-            verticalAlign: 'text-bottom'
-          }
-        }}
-        dangerouslySetInnerHTML={{ __html: htmlWithInclusions }}
-      />
-    </div>
-  );
-};
+  render() {
+    const page = this.props.data.markdownRemark;
+    let htmlWithInclusions = cutSonarCloudContent(page.html).replace(
+      /\<p\>@include (.*)\<\/p\>/,
+      (_, path) => {
+        const chunk = data.allMarkdownRemark.edges.find(edge => edge.node.fields.slug === path);
+        return chunk ? chunk.node.html : '';
+      }
+    );
+
+    if (
+      page.headings &&
+      page.headings.length > 0 &&
+      page.html.match(/<h[1-9]>Table Of Contents<\/h[1-9]>/i)
+    ) {
+      htmlWithInclusions = generateTableOfContents(htmlWithInclusions, page.headings);
+    }
+
+    return (
+      <div css={{ paddingTop: 24, paddingBottom: 24 }}>
+        <Helmet title={page.frontmatter.title} />
+        <h1>{page.frontmatter.title}</h1>
+        <div
+          css={{
+            '& img[src$=".svg"]': {
+              position: 'relative',
+              top: '-2px',
+              verticalAlign: 'text-bottom'
+            }
+          }}
+          dangerouslySetInnerHTML={{ __html: htmlWithInclusions }}
+        />
+      </div>
+    );
+  }
+}
 
 export const query = graphql`
   query PageQuery($slug: String!) {