Tabs POC work

advocacy_docs/playground/1/summary.mdx

@@ -0,0 +1,12 @@
+---
+title: Summary Test
+---
+
+<Details summary="Testing Details">
+
+```html
+The <details> element is used to create a disclosure widget from which the user can retrieve additional information.
+```
+
+</Details>
+

advocacy_docs/playground/1/tabs.mdx

@@ -0,0 +1,47 @@
+---
+title: Tabs Tester
+---
+
+
+<div class="tabs">
+  <ul class="tabs__list">
+  <li class="tabs__tab">
+  <input class="tabs__input" type="radio" name="tab-group" id="tab1" defaultChecked />
+  <label for="tab1" class="tabs__label" role="button">Tab One</label>
+  <div class="tabs__content">
+
+## Tab One Content
+
+Here is where there is [markdown](https://www.markdownguide.org/cheat-sheet/) content.
+
+  </div>
+  </li>
+  <li class="tabs__tab">
+  <input class="tabs__input" type="radio" name="tab-group" id="tab2"/>
+  <label for="tab2" class="tabs__label" role="button">Tab Two</label>
+  <div class="tabs__content">
+
+## Tab Two Content
+
+![Image](https://placehold.co/600x400)
+
+  </div>
+  </li>
+  <li class="tabs__tab">
+  <input class="tabs__input" type="radio" name="tab-group" id="tab3"/>
+  <label for="tab3" class="tabs__label" role="button">Tab Three</label>
+  <div class="tabs__content">
+
+## Tab Three Content
+
+```html
+<div class="tabs">
+  Hello Tabs
+</div>
+```
+
+  </div>
+  </li>
+  </ul>
+</div>
+

src/components/details.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Details = ({ summary, children, ...props }) => {
+  return (
+    <details {...props}>
+      <summary>{summary}</summary>
+      {children}
+    </details>
+  );
+};
+
+export default Details;

src/components/index.js

@@ -34,3 +34,4 @@ export { default as TopBar } from "./top-bar";
 export { default as TreeNode } from "./tree-node";
 export { default as VersionDropdown } from "./version-dropdown";
 export { IconList } from "./icon/iconList";
+export { default as Details } from "./details";

src/components/layout.js

@@ -13,6 +13,7 @@ import {
   StubCards,
   IconList,
   PurlAnchor,
+  Details,
 } from "../components";
 import { MDXProvider } from "@mdx-js/react";
 import Icon from "../components/icon/";
@@ -139,6 +140,7 @@ const Layout = ({
       Archive,
       AuthenticatedContentPlaceholder,
       PurlAnchor,
+      Details,
     }),
     [katacodaPanelData, meta.path, meta.isIndexPage, meta.productVersions],
   );

src/styles/_docs.scss

@@ -66,6 +66,61 @@ label.link-label {
   /* Scrollable contents if viewport is shorter than content. */
 }
 
+.tabs {
+}
+
+.tabs__list {
+  border-bottom: 1px solid black;
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.tabs__tab {
+  padding: 0.5rem;
+}
+
+.tabs__content {
+  display: none;
+  left: 0;
+  padding: 0.5rem;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+}
+
+.tabs__input {
+  position: fixed;
+  top:-100px;
+}
+
+.tabs__input+label {
+  cursor: pointer;
+}
+
+.tabs__label:hover {
+  background-color: #ccc;
+}
+
+.tabs__input:focus + label {
+  outline: 2px solid #333;
+}
+
+
+.tabs__input:checked+label {
+  color: red;
+}
+
+.tabs__input:checked~.tabs__content {
+  display: block;
+}
+
+
+
+
 @supports ((position: -webkit-sticky) or (position: sticky)) {
   .sidebar-sticky {
     position: -webkit-sticky;

src/templates/learn-doc.js

@@ -19,6 +19,7 @@ import {
   TableOfContents,
   Tiles,
   TileModes,
+  Details,
 } from "../components";
 import GithubSlugger from "github-slugger";