Merge pull request #226 from dlabaj/accordion

Accordion update for section support.

Author: jessiehuff

packages/dev/src/quickstarts-data/yaml/openshift-tabbed-copy.yaml

@@ -35,6 +35,9 @@ spec:
           ```{{copy}}
 
         2. In the main navigation menu, click **Add.**
+      
+          [This can be an accordion input, followed by another]{{accordion "testing with more text"}}
+          [This can be an accordion input, followed by another]{{accordion "testing with more some other text"}}
 
         3. Using the project dropdown menu, select the project you would like to
         deploy the image in.

packages/module/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionToggle,
+  AccordionContent,
+} from '@patternfly/react-core';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { removeTemplateWhitespace } from './utils';
+import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
+import './showdown-extension.scss';
+
+const useAccordionShowdownExtension = () => {
+  return React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+      replace: (
+        _text: string,
+        accordionContent: string,
+        _command: string,
+        accordionHeading: string,
+      ): string => {
+        const accordionId = new String(accordionHeading).replace(/\s/g, '-');
+
+        return removeTemplateWhitespace(
+          renderToStaticMarkup(
+            <Accordion asDefinitionList>
+              <AccordionItem>
+                <AccordionToggle
+                  isExpanded={false}
+                  id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}
+                >
+                  {accordionHeading}
+                </AccordionToggle>
+                <AccordionContent
+                  id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`}
+                  isHidden={!false}
+                >
+                  {accordionContent}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>,
+          ),
+        );
+      },
+    }),
+    [],
+  );
+};
+
+export default useAccordionShowdownExtension;

packages/module/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useEventListener } from '../../hooks';
+import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
+
+type AccordionShowdownComponentProps = {
+  buttonElement: HTMLElement;
+  contentElement: HTMLElement;
+};
+
+const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
+  buttonElement,
+  contentElement,
+}) => {
+  const [expanded, setExpanded] = React.useState<boolean>(false);
+
+  const handleClick = () => {
+    const expandedModifier = 'pf-m-expanded';
+
+    buttonElement.className = `pf-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
+    contentElement.hidden = expanded;
+    contentElement.className = `pf-c-accordion__expanded-content ${
+      !expanded ? expandedModifier : ''
+    }`;
+    setExpanded(!expanded);
+  };
+
+  useEventListener(buttonElement, 'click', handleClick);
+
+  return <></>;
+};
+
+type accordionRenderExtensionProps = {
+  docContext: HTMLDocument;
+};
+
+const AccordionRenderExtension: React.FC<accordionRenderExtensionProps> = ({ docContext }) => {
+  const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
+  const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
+
+  return buttonElements.length > 0 ? (
+    <>
+      {Array.from(buttonElements).map((elm) => {
+        const content = Array.from(contentElements).find((elm2) => {
+          const elmId = elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1];
+          const elm2Id = elm2.id.split(ACCORDION_MARKDOWN_CONTENT_ID)[1];
+          return elmId === elm2Id;
+        });
+        return (
+          <AccordionShowdownHandler
+            key={elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1]}
+            buttonElement={elm as HTMLElement}
+            contentElement={content as HTMLElement}
+          />
+        );
+      })}
+    </>
+  ) : null;
+};
+
+export default AccordionRenderExtension;

packages/module/src/ConsoleShared/src/components/markdown-extensions/const.ts

@@ -1,3 +1,5 @@
 export const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
 export const MARKDOWN_EXECUTE_BUTTON_ID = 'data-execute-for';
 export const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
+export const ACCORDION_MARKDOWN_BUTTON_ID = `accordion-markdown-button-id`;
+export const ACCORDION_MARKDOWN_CONTENT_ID = `accordion-markdown-content-id`;

packages/module/src/ConsoleShared/src/components/markdown-extensions/index.ts

@@ -3,3 +3,5 @@ export { default as useInlineCopyClipboardShowdownExtension } from './inline-cli
 export { default as useMultilineCopyClipboardShowdownExtension } from './multiline-clipboard-extension';
 export { default as useAdmonitionShowdownExtension } from './admonition-extension';
 export { default as useCodeShowdownExtension } from './code-extension';
+export { default as useAccordionShowdownExtension } from './accordion-extension';
+export { default as AccordionRenderExtension } from './accordion-render-extension';

packages/module/src/QuickStartMarkdownView.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { SyncMarkdownView } from '@console/internal/components/markdown-view';
 import {
+  AccordionRenderExtension,
   MarkdownCopyClipboard,
   MarkdownHighlightExtension,
   useInlineCopyClipboardShowdownExtension,
   useMultilineCopyClipboardShowdownExtension,
   useAdmonitionShowdownExtension,
   useCodeShowdownExtension,
+  useAccordionShowdownExtension,
 } from '@console/shared';
 import { HIGHLIGHT_REGEXP } from '@console/shared/src/components/markdown-highlight-extension/highlight-consts';
 import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
@@ -29,6 +31,7 @@ const QuickStartMarkdownView: React.FC<QuickStartMarkdownViewProps> = ({
   const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
   const admonitionShowdownExtension = useAdmonitionShowdownExtension();
   const codeShowdownExtension = useCodeShowdownExtension();
+  const accordionShowdownExtension = useAccordionShowdownExtension();
   return (
     <SyncMarkdownView
       inline
@@ -57,10 +60,12 @@ const QuickStartMarkdownView: React.FC<QuickStartMarkdownViewProps> = ({
         multilineCopyClipboardShowdownExtension,
         admonitionShowdownExtension,
         codeShowdownExtension,
+        accordionShowdownExtension,
         ...(markdown ? markdown.extensions : []),
       ]}
       renderExtension={(docContext, rootSelector) => (
         <>
+          <AccordionRenderExtension docContext={docContext} />
           <MarkdownHighlightExtension docContext={docContext} rootSelector={rootSelector} />
           <MarkdownCopyClipboard docContext={docContext} rootSelector={rootSelector} />
           {markdown &&