Add integration docs

conf.yaml

@@ -55,6 +55,7 @@ repos:
     guide:                https://github.com/elastic/elasticsearch-definitive-guide.git
     guide-cn:             https://github.com/elasticsearch-cn/elasticsearch-definitive-guide.git
     ingest-docs:          https://github.com/elastic/ingest-docs.git
+    integration-docs:     https://github.com/elastic/integration-docs.git
     kibana:               https://github.com/elastic/kibana.git
     kibana-cn:            https://github.com/elasticsearch-cn/kibana.git
     logstash:             https://github.com/elastic/logstash.git
@@ -125,6 +126,22 @@ variables:
 
 toc_extra: extra/docs_landing.html
 contents:
+    -   title:          Integrations
+        sections:
+          - title:      Integrations
+            prefix:     en/integrations
+            current:    pre-mdx-to-asciidoc
+            branches:   [ pre-mdx-to-asciidoc ]
+            live:       [ pre-mdx-to-asciidoc ]
+            index:      dist/index.asciidoc
+            chunk:      2
+            private:    1
+            tags:       Integrations/Reference
+            subject:    Integrations
+            sources:
+              -
+                repo:   integration-docs
+                path:   dist
     -   title:      Serverless
         sections:
           - title:      Serverless

doc_build_aliases.sh

@@ -12,6 +12,9 @@
 # Serverless
 alias docbldserverless='$GIT_HOME/docs/build_docs --doc $GIT_HOME/docs-content/serverless/index.asciidoc --chunk 5 --resource $GIT_HOME/observability-docs/docs/en/serverless --resource $GIT_HOME/security-docs/docs/serverless --resource $GIT_HOME/docs-content/serverless'
 
+# Integrations
+alias docbldintegration='$GIT_HOME/docs/build_docs --doc $GIT_HOME/integration-docs/dist/index.asciidoc --chunk 2 --open'
+
 # Elasticsearch
 alias docbldesx='$GIT_HOME/docs/build_docs --doc $GIT_HOME/elasticsearch/docs/reference/index.asciidoc --chunk 1'
 

resources/web/style/base_styles.pcss

@@ -28,7 +28,38 @@
   }
 
   details {
+    /* background-color: #F1F4FA; */
     margin-bottom: 1.15em;
+    border: 1px #D3DAE6 solid;
+    border-radius: 3px;
+    summary {
+      list-style-type: none;
+      display: inline-block;
+      width: 100%;
+      padding: 10px;
+      &:before {
+        content: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.14898 5.10103C5.81704 4.76909 5.81704 4.2309 6.14898 3.89895C6.48093 3.56701 7.01912 3.56701 7.35107 3.89895L11.8511 8.39895C12.183 8.7309 12.183 9.26909 11.8511 9.60103L7.35107 14.101C7.01912 14.433 6.48093 14.433 6.14898 14.101C5.81704 13.7691 5.81704 13.2309 6.14898 12.899L10.0479 8.99999L6.14898 5.10103Z" fill="black"/></svg>');
+        display: inline-block;
+        transform: translate(0px, 3.5px) rotate(0deg);
+        transition: .1s ease-in-out;
+        margin-right: 8px;
+      }
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+    .content {
+      padding: 5px 20px 0px 36px;
+    }
+  }
+
+  details[open] {
+    summary {
+      &:before {
+        transform: translate(-3.5px, 0px) rotate(90deg);
+        transition: .1s ease-in-out;
+      }
+    }
   }
 
   .container-fluid {

resources/web/style/icons.pcss

@@ -0,0 +1,14 @@
+#guide {
+  .eui-icon {
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    background-size: contain;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    &.icon-bug { background-image: inline("img/icons/bug.svg"); }
+    &.icon-checkInCircleFilled { background-image: inline("img/icons/checkInCircleFilled.svg"); }
+    &.icon-warningFilled { background-image: inline("img/icons/warningFilled.svg"); }
+  }
+}

resources/web/style/table.pcss

@@ -45,13 +45,16 @@
       padding-left: 0.15em;
     }
   }
-  tr:last-child {
-    th, td {
-      border: none;
+
+  tr {
+    &:last-child {
+      th, td {
+        border: none;
+      }
     }
   }
 
-  .monospaced { 
+  .monospaced {
     td p, th {
       font-family: Consolas, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Lucida Console", monospace;
     }
@@ -93,4 +96,25 @@
       vertical-align: middle;
     }
   }
+
+  /** Used in integration docs */
+  .condensed-table {
+    table {
+      tbody {
+        tr {
+          border-bottom: 1px solid #e5eae4;
+          &:first-child {
+            border-top: 1px solid #e5eae4!important;
+          }
+          td {
+            vertical-align: top;
+            padding: 0.6em;
+          }
+          p {
+            margin-bottom: 0px!important;
+          }
+        }
+      }
+    }
+  }
 }

resources/web/styles-v1.pcss

@@ -16,6 +16,7 @@
 @import './style/example.pcss';
 @import './style/feedback.pcss';
 @import './style/heading.pcss';
+@import './style/icons.pcss';
 @import './style/img.pcss';
 @import './style/layout.pcss';
 @import './style/link.pcss';

shared/attributes.asciidoc

@@ -569,3 +569,10 @@ Legacy definitions
 :apm-overview-ref-m:   https://www.elastic.co/guide/en/apm/get-started/master
 :infra-guide:          https://www.elastic.co/guide/en/infrastructure/guide/{branch}
 :a-data-source:        a data view
+
+////
+UI icons and logos from EUI
+////
+:icon-bug: pass:[<span class="eui-icon icon-bug"></span>]
+:icon-checkInCircleFilled: pass:[<span class="eui-icon icon-checkInCircleFilled"></span>]
+:icon-warningFilled: pass:[<span class="eui-icon icon-warningFilled"></span>]