asciidoctor tab extension (#25)

* integrate Asciidoctor Tabs

* add tabs styles

* update asciidoctor-tabs dependency

---------

Co-authored-by: Dan Allen <[email protected]>

package.json

@@ -19,6 +19,7 @@
     "@fontsource/material-icons-outlined": "~5.0",
     "@fontsource/roboto-flex": "~5.0",
     "@fontsource/roboto-mono": "~5.0",
+    "@asciidoctor/tabs": "1.0.0-beta.6",
     "autoprefixer": "~9.7",
     "browser-pack-flat": "~3.4",
     "browserify": "~16.5",

preview-src/index.adoc

@@ -455,7 +455,24 @@ Contains more than one block.
 
 === Example: Overflow tabset
 
-[tabs]
+[tabs.overflow]
+======
+Tab Name:: Contents of Tab.
+
+Longer Tab Name::
++
+Contents of Longer Tab.
+
+An Even Longer Tab Name::
++
+Contents of Even Longer Tab.
+
+This Is The Longest Tab Name::
++
+Contents of The Longest Tab.
+======
+
+[tabs.wrapping]
 ======
 Tab Name:: Contents of Tab.
 

preview-src/ui-model.yml

@@ -1,4 +1,7 @@
 antoraVersion: '1.0.0'
+asciidoc:
+  extensions:
+  - '@asciidoctor/tabs'
 site:
   url: http://localhost:5252
   title: Brand Docs

src/css/vendor/tabs.css

@@ -0,0 +1,56 @@
+@import "@asciidoctor/tabs";
+
+/* Datastax styles */
+
+.tabpanel {
+  padding: var(--ds-space-2) 0;
+  border: none;
+  border-top: 1px solid var(--ds-divider);
+}
+
+.tablist > ul li {
+  background-color: transparent;
+  border: none;
+  font-weight: normal;
+  color: var(--ds-text-primary);
+  padding: var(--ds-space-1) var(--ds-space-1h);
+}
+
+.tablist.ulist > ul li + li {
+  margin: 0;
+}
+
+.tabs .tablist li::after {
+  height: calc(2 / var(--rem-base) * 1rem);
+}
+
+.tabs.is-loading .tablist li:not(:first-child),
+.tabs:not(.is-loading) .tablist li:not(.is-selected) {
+  color: var(--ds-text-tertiary);
+  background-color: transparent;
+}
+
+.tabs.is-loading .tablist li:first-child::after,
+.tabs:not(.is-loading) .tablist li.is-selected::after {
+  background-color: var(--ds-text-primary);
+}
+
+/* overflow tab title */
+.tabs.overflow .tablist > ul li p {
+  max-width: var(--ds-space-15);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+/* wrapping tab title */
+.tabs.wrapping .tablist > ul li p {
+  max-width: var(--ds-space-15);
+  display: flex;
+}
+
+.tabs.overflow .tablist > ul,
+.tabs.wrapping .tablist > ul {
+  flex-wrap: nowrap;
+}

src/js/vendor/tabs.bundle.js

@@ -0,0 +1 @@
+require('@asciidoctor/tabs')

src/partials/footer-scripts.hbs

@@ -1,4 +1,5 @@
 <script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/tabs.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 
 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

src/partials/head-styles.hbs

@@ -1 +1,2 @@
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
+    <link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/tabs.css">