chore(docs): added mobile jumplinks and example styling

packages/theme-patternfly-org/components/example/example.css

@@ -1,5 +1,4 @@
 .ws-example {
-  background-color: white;
   margin-top: 25px;
   margin-bottom: 25px;
 }
@@ -13,6 +12,21 @@
   margin-bottom: var(--pf-global--spacer--md);
 }
 
+.ws-code-editor:not(.ws-example-code-expanded) > .pf-c-code-editor__header::before {
+  --pf-c-code-editor__header--before--BorderBottomWidth: 0;
+}
+
+.ws-code-editor-control {
+  --pf-c-button--m-control--BackgroundColor: transparent;
+  --pf-c-button--m-control--active--BackgroundColor: transparent;
+  --pf-c-button--m-control--focus--BackgroundColor: transparent;
+  --pf-c-button--m-control--hover--BackgroundColor: transparent;
+}
+
+.ws-code-editor-control.pf-c-button {
+  --pf-c-button--after--BorderWidth: 0;
+}
+
 .ws-preview {
   padding: 1rem;
   background-color: white;

packages/theme-patternfly-org/components/example/exampleToolbar.js

@@ -38,22 +38,16 @@ export const ExampleToolbar = ({
   setCode
 }) => {
   const [isEditorOpen, setIsEditorOpen] = React.useState(false);
-  const [copied, setCopied] = React.useState(false);
-  let timer;
+  const [isCopied, setCopied] = React.useState(false);
 
   const copyCode = () => {
     copy(code);
 
-    if (timer) {
-      clearTimeout(timer);
+    setCopied(true);
+    // Reset isCopied after Tooltip fades out
+    setTimeout(() => {
       setCopied(false);
-    }
-    setCopied(true, () => {
-      timer = setTimeout(() => {
-        setCopied(false);
-        timer = null;
-      }, 2500);
-    });
+    }, 2500);
   };
 
   const copyLabel = 'Copy code to clipboard';
@@ -79,19 +73,20 @@ export const ExampleToolbar = ({
         aria-label={languageLabel}
         toolTipText={languageLabel}
         aria-expanded={isEditorOpen}
+        className="ws-code-editor-control"
       />
       <Tooltip
         trigger="mouseenter"
-        content={<div>{copied ? 'Code copied' : copyLabel}</div>}
-        exitDelay={copied ? 1600 : 300}
+        content={<div>{isCopied ? 'Code copied' : copyLabel}</div>}
+        exitDelay={isCopied ? 1600 : 300}
         entryDelay={300}
         maxWidth="100px"
         position="top"
       >
         <Button onClick={() => {
           copyCode();
           trackEvent('code_editor_control_click', 'click_event', 'COPY_CODE');
-        }} variant="control" aria-label={copyLabel}>
+        }} variant="control" aria-label={copyLabel} className="ws-code-editor-control">
           <CopyIcon />
         </Button>
       </Tooltip>
@@ -118,6 +113,7 @@ export const ExampleToolbar = ({
               onClick={() => {
                 trackEvent('code_editor_control_click', 'click_event', 'CODESANDBOX_LINK');
               }}
+              className="ws-code-editor-control"
             >
               <input type="hidden" name="parameters" value={codeBoxParams} />
               <CodepenIcon />
@@ -137,6 +133,7 @@ export const ExampleToolbar = ({
           onClick={() => {
             trackEvent('code_editor_control_click', 'click_event', 'FULLSCREEN_LINK');
           }}
+          className="ws-code-editor-control"
         />
       }
       {isEditorOpen && lang === 'ts' &&
@@ -152,6 +149,7 @@ export const ExampleToolbar = ({
             setCode(convertToJSX(code).code);
             trackEvent('code_editor_control_click', 'click_event', 'TS_TO_JS');
           }}
+          className="ws-code-editor-control"
         />
       }
       {code !== originalCode &&
@@ -163,6 +161,7 @@ export const ExampleToolbar = ({
             setCode(originalCode);
             trackEvent('code_editor_control_click', 'click_event', 'RESET_CODE');
           }}
+          className="ws-code-editor-control"
         />
       }
     </React.Fragment>
@@ -193,6 +192,7 @@ export const ExampleToolbar = ({
       onChange={newCode => setCode(newCode)}
       onEditorDidMount={onEditorDidMount}
       isReadOnly={isFullscreen}
+      className={`${isEditorOpen ? 'ws-example-code-expanded ' : ''}ws-code-editor`}
     />
   );
 }

packages/theme-patternfly-org/components/tableOfContents/tableOfContents.css

@@ -1,38 +1,43 @@
 .ws-toc {
   top: 0;
-  order: 1;
-  flex-grow: 1;
-  position: sticky;
-  padding: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--2xl);
   align-self: flex-start;
-  width: 280px;
-  max-height: calc(100vh - 76px);
-  overflow-y: auto;
-  /* Hide TOC scrollbar IE, Edge & Firefox */
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+  position: sticky;
+  width: calc(100% + var(--pf-c-page__main-section--PaddingLeft) + var(--pf-c-page__main-section--PaddingRight));
+  background-color: var(--pf-global--BackgroundColor--200);
+  z-index: 1;
+  margin: calc(var(--pf-c-page__main-section--PaddingTop) * -1) calc(var(--pf-c-page__main-section--PaddingRight) * -2) var(--pf-global--spacer--md) calc(var(--pf-c-page__main-section--PaddingLeft) * -1);
+  padding: var(--pf-global--spacer--md) 0 var(--pf-global--spacer--md) var(--pf-global--spacer--md);
+  box-shadow: var(--pf-global--BoxShadow--lg-bottom);
+}
+
+.ws-toc.pf-m-expanded {
+  box-shadow: var(--pf-global--BoxShadow--sm-bottom)
 }
 
 /* Hide TOC scrollbar Chrome, Safari & Opera */
 .ws-toc::-webkit-scrollbar {
   display: none;
 }
 
-@media (max-width: 1450px) {
+@media (min-width: 1451px) {
   .ws-toc {
-    display: none;
-    visibility: hidden;
+    width: 280px;
+    max-height: calc(100vh - 76px);
+    overflow-y: auto;
+    /* Hide TOC scrollbar IE, Edge & Firefox */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    order: 1;
+    padding: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--2xl);
+    flex-grow: 1;
+    background: none;
+    margin: 0;
   }
-}
 
-.ws-toc-list {
-  position: relative;
-  margin-top: var(--pf-global--spacer--sm);
-}
-
-.ws-toc-list .pf-c-jump-links__list {
-  padding-top: 0;
-  padding-bottom: 0;
+  .ws-toc,
+  .ws-toc.pf-m-expanded {
+    box-shadow: none;
+  }
 }
 
 /* .ws-toc-link { */

packages/theme-patternfly-org/components/tableOfContents/tableOfContents.js

@@ -1,31 +1,46 @@
 import React from 'react';
-import { Title, JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
+import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
 import './tableOfContents.css';
 import { trackEvent } from '../../helpers';
 
 export const TableOfContents = ({ items }) => {
-  function renderItem(item, index) {
+  // Used to recalculate JumpLinks offset if screen size changes
+  const [width, setWidth] = React.useState(window.innerWidth);
+  const updateWidth = () => {
+    const { innerWidth } = window;
+    innerWidth !== width && setWidth(innerWidth);
+  }
+
+  const renderItem = (item, index) => {
     return Array.isArray(item)
       ? (
         <JumpLinksList key={index} className="ws-toc-sublist">
           {item.map(renderItem)}
         </JumpLinksList>
       ) : (
-        <JumpLinksItem key={item.id} href={`#${item.id}`} className="ws-toc-item" onClick={() => trackEvent('jump_link_click', 'click_event', item.id.toUpperCase())
+        <JumpLinksItem
+          key={item.id}
+          href={`#${item.id}`}
+          className="ws-toc-item"
+          onKeyDown={updateWidth}
+          onMouseDown={updateWidth}
+          onClick={() => trackEvent('jump_link_click', 'click_event', item.id.toUpperCase())
         }>
           {item.text}
         </JumpLinksItem>
       )
-  }  
+  }
 
   return (
-    <nav className="ws-toc">
-      <Title headingLevel="h2" size="lg">
-        Table of contents
-      </Title>
-      <JumpLinks isVertical scrollableSelector="#ws-page-main" className="ws-toc-list" offset={92}>
-        {items.map(renderItem)}
-      </JumpLinks>
-    </nav>
+    <JumpLinks
+      label="Table of contents"
+      isVertical
+      scrollableSelector="#ws-page-main"
+      className="ws-toc"
+      offset={width > 1450 ? 92 : 148}
+      expandable={{ default: 'expandable', '2xl': 'nonExpandable' }}
+    >
+      {items.map(renderItem)}
+    </JumpLinks>
   );
 }

packages/theme-patternfly-org/templates/mdx.css

@@ -292,6 +292,12 @@
   border-width: 0;
 }
 
+@media screen and (max-width: 1450px) {
+  .ws-mdx-child-template {
+    flex-direction: column;
+  }
+}
+
 .ws-mdx-content {
   flex-grow: 1;
 }

packages/theme-patternfly-org/templates/mdx.js

@@ -67,7 +67,7 @@ const MDXChildTemplate = ({
   );
   // Create dynamic component for @reach/router
   const ChildComponent = () => (
-    <div className="pf-u-display-flex">
+    <div className="pf-u-display-flex ws-mdx-child-template">
       {toc.length > 1 && (
         <TableOfContents items={toc} />
       )}