@patternfly/quickstarts 2.4.2 → 5.0.0-prerelease.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "2.4.2",
+  "version": "5.0.0-prerelease.0",
   "description": "PatternFly quick starts",
   "files": [
     "src",
@@ -51,18 +51,22 @@
     "showdown": ">=1.8.6"
   },
   "dependencies": {
-    "@patternfly/react-catalog-view-extension": "^4.93.15",
+    "@patternfly/react-catalog-view-extension": "^5.0.0-prerelease.1",
     "dompurify": "^2.2.6",
     "history": "^5.0.0",
     "showdown": "1.8.6"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^1.8.0",
-    "@patternfly/patternfly": "^4.222.4",
-    "@patternfly/react-core": "^4.267.6",
-    "@patternfly/react-icons": "4.93.6",
-    "@patternfly/react-styles": "4.92.6",
-    "@patternfly/react-tokens": "4.94.6",
+    "@patternfly/documentation-framework": "^2.0.0-alpha.73",
+    "@patternfly/patternfly": "^5.0.0-prerelease.10",
+    "@patternfly/react-core": "^5.0.0-prerelease.13",
+    "@patternfly/react-icons": "^5.0.0-prerelease.7",
+    "@patternfly/react-styles": "^5.0.0-prerelease.5",
+    "@patternfly/react-tokens": "^5.0.0-prerelease.5",
+    "@patternfly/react-table": "^5.0.0-prerelease.13",
+    "@patternfly/react-code-editor": "^5.0.0-prerelease.13",
+    "react-monaco-editor": "0.51.0",
+    "monaco-editor": "0.34.1",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
@@ -72,8 +76,8 @@
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/history": "^4.7.8",
     "@types/node": "^14.14.35",
-    "@types/react": "^16.8.0",
-    "@types/react-dom": "^16.8.0",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
     "clean-css-cli": "^4.3.0",
     "concat-files": "^0.1.1",
     "dart-sass": "^1.25.0",
@@ -81,12 +85,12 @@
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
     "node-sass-glob-importer": "^5.3.2",
-    "prettier": "^2.1.2",
+    "prettier": "^2.8.8",
     "purgecss": "^4.0.0",
-    "react": "^16.8.0",
+    "react": "^18.2.0",
     "react-axe": "^3.5.4",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^16.8.0",
+    "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
     "rollup": "^2.37.0",

package/src/ConsoleInternal/components/_icon-and-text.scss

@@ -2,8 +2,8 @@
   align-items: baseline;
   display: flex;
 
-  // fix bug where concurrent .pf-c-label are misaligned vertically
-  .pf-c-label__icon & {
+  // fix bug where concurrent .pf-v5-c-label are misaligned vertically
+  .pf-v5-c-label__icon & {
     display: block;
   }
 }

package/src/ConsoleInternal/components/catalog/_catalog.scss

@@ -7,7 +7,7 @@ $pfext-m-catalog-tile-width: 260px;
 
 $catalog-capability-level-icon-left: -20px;
 $catalog-capability-level-icon-top: 4px;
-$catalog-capability-level-inactive-color: var(--pf-global--Color--400);
+$catalog-capability-level-inactive-color: var(--pf-v5-global--Color--400);
 $catalog-item-icon-size-lg: 40px;
 $catalog-item-icon-size-sm: 24px;
 $pfext-modal-ignore-warning-icon-width: 30px;
@@ -32,7 +32,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 .pfext-catalog-tile-view {
   display: flex;
   flex-wrap: wrap;
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, 260px) !important;
+  --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, 260px) !important;
 }
 
 .pfext-catalog__body {
@@ -51,7 +51,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   }
 
   &__kind-label {
-    font-weight: var(--pf-global--FontWeight--bold);
+    font-weight: var(--pf-v5-global--FontWeight--bold);
   }
 
   &__name {
@@ -103,7 +103,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 
 .pfext-catalog-page {
   background: $color-pf-white;
-  border: 1px solid var(--pf-global--BorderColor--300);
+  border: 1px solid var(--pf-v5-global--BorderColor--300);
   display: flex;
   flex: 1;
   padding-top: math.div($grid-gutter-width, 2);
@@ -115,7 +115,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 
   &__btn-group__group-by {
     display: inline;
-    margin-left: var(--pf-global--spacer--md);
+    margin-left: var(--pf-v5-global--spacer--md);
   }
 
   &__content {
@@ -146,11 +146,11 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   }
 
   &__grouped-items {
-    margin-bottom: var(--pf-global--spacer--md);
+    margin-bottom: var(--pf-v5-global--spacer--md);
   }
 
   &__group-title {
-    margin-bottom: var(--pf-global--spacer--sm);
+    margin-bottom: var(--pf-v5-global--spacer--sm);
   }
 
   &__header {
@@ -163,7 +163,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   }
 
   &__hint {
-    margin: 0 0 var(--pf-global--spacer--md) 0;
+    margin: 0 0 var(--pf-v5-global--spacer--md) 0;
   }
 
   &__input {
@@ -174,11 +174,11 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 
   &__sort {
     display: inline;
-    margin-left: var(--pf-global--spacer--md);
+    margin-left: var(--pf-v5-global--spacer--md);
   }
 
   &__num-items {
-    font-weight: var(--pf-global--FontWeight--bold);
+    font-weight: var(--pf-v5-global--FontWeight--bold);
     padding: 0 0 20px;
   }
 
@@ -207,9 +207,9 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
     bottom: 0;
     padding: 0 !important;
     right: 0;
-    top: 4.75rem; // --pf-c-page__header--MinHeight
+    top: 4.75rem; // --pf-v5-c-page__header--MinHeight
 
-    .pf-c-modal-box__body {
+    .pf-v5-c-modal-box__body {
       // Required to position scroll shadows correctly on Chrome
       display: flex;
       flex-direction: column;
@@ -230,7 +230,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   &__overlay-action {
     align-items: baseline;
     display: inline-flex !important;
-    margin: var(--pf-global--spacer--sm) var(--pf-global--spacer--sm) 0 0;
+    margin: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--sm) 0 0;
     overflow-x: hidden;
   }
 
@@ -248,19 +248,19 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   &__overlay-actions {
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: var(--pf-global--spacer--md);
+    margin-bottom: var(--pf-v5-global--spacer--md);
     white-space: normal;
   }
 
   &__overlay-header {
-    margin-bottom: var(--pf-global--spacer--md);
+    margin-bottom: var(--pf-v5-global--spacer--md);
   }
 
   &__overlay-body {
     margin: 0;
-    padding-left: var(--pf-global--spacer--lg);
-    padding-right: var(--pf-global--spacer--lg);
-    padding-top: var(--pf-global--spacer--md);
+    padding-left: var(--pf-v5-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--lg);
+    padding-top: var(--pf-v5-global--spacer--md);
     @media (min-width: $screen-sm-min) {
       display: flex;
     }
@@ -303,13 +303,13 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 }
 
 @media screen and (min-width: $screen-sm) {
-  .pf-c-modal-box.pfext-catalog-page__overlay {
+  .pf-v5-c-modal-box.pfext-catalog-page__overlay {
     width: 600px;
   }
 }
 
 @media screen and (min-width: $screen-md) {
-  .pf-c-modal-box.pfext-catalog-page__overlay {
+  .pf-v5-c-modal-box.pfext-catalog-page__overlay {
     width: 900px;
   }
 }

package/src/ConsoleInternal/components/markdown-view.tsx

@@ -10,11 +10,11 @@ const DOMPurify = require('dompurify');
 
 // const tableTags = ['table', 'thead', 'tbody', 'tr', 'th', 'td'];
 
-type ShowdownExtension = {
+interface ShowdownExtension {
   type: string;
   regex?: RegExp;
   replace?: (...args: any[]) => string;
-};
+}
 
 export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
   const converter = new Converter({
@@ -28,7 +28,7 @@ export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
     converter.addExtension(extensions);
   }
 
-  DOMPurify.addHook('beforeSanitizeElements', function(node) {
+  DOMPurify.addHook('beforeSanitizeElements', function (node) {
     // nodeType 1 = element type
 
     // transform anchor tags
@@ -42,13 +42,13 @@ export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
       node.nodeType === 1 &&
       (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')
     ) {
-      node.setAttribute('class', 'pf-c-list');
+      node.setAttribute('class', 'pf-v5-c-list');
       return node;
     }
   });
 
   // Add a hook to make all links open a new window
-  DOMPurify.addHook('afterSanitizeAttributes', function(node) {
+  DOMPurify.addHook('afterSanitizeAttributes', function (node) {
     // set all elements owning target to target=_blank
     if ('target' in node) {
       node.setAttribute('target', '_blank');
@@ -67,47 +67,18 @@ export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
       html: true,
       svg: true,
     },
-    // ALLOWED_TAGS: [
-    //   'b',
-    //   'i',
-    //   'strike',
-    //   's',
-    //   'del',
-    //   'em',
-    //   'strong',
-    //   'a',
-    //   'p',
-    //   'h1',
-    //   'h2',
-    //   'h3',
-    //   'h4',
-    //   'ul',
-    //   'ol',
-    //   'li',
-    //   'code',
-    //   'pre',
-    //   'button',
-    //   ...tableTags,
-    //   'div',
-    //   'img',
-    //   'span',
-    //   'svg',
-    // ],
-    // ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'src', 'alt', 'id'],
-    // ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|didact):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
   });
 };
 
-type SyncMarkdownProps = {
+interface SyncMarkdownProps {
   content?: string;
   emptyMsg?: string;
   exactHeight?: boolean;
-  /* truncateContent?: boolean; */
   extensions?: ShowdownExtension[];
-  renderExtension?: (contentDocument: HTMLDocument, rootSelector: string) => React.ReactNode;
+  renderExtension?: (contentDocument: Document, rootSelector: string) => React.ReactNode;
   inline?: boolean;
   className?: string;
-};
+}
 
 type InnerSyncMarkdownProps = Pick<SyncMarkdownProps, 'renderExtension' | 'exactHeight'> & {
   markup: string;
@@ -116,7 +87,6 @@ type InnerSyncMarkdownProps = Pick<SyncMarkdownProps, 'renderExtension' | 'exact
 };
 
 export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
-  // truncateContent,
   content,
   emptyMsg,
   extensions,
@@ -126,9 +96,10 @@ export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
   className,
 }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const markup = React.useMemo(() => {
-    return markdownConvert(content || emptyMsg || getResource('Not available'), extensions);
-  }, [content, emptyMsg, extensions, getResource]);
+  const markup = React.useMemo(
+    () => markdownConvert(content || emptyMsg || getResource('Not available'), extensions),
+    [content, emptyMsg, extensions, getResource],
+  );
   const innerProps: InnerSyncMarkdownProps = {
     renderExtension: extensions?.length > 0 ? renderExtension : undefined,
     exactHeight,
@@ -139,21 +110,21 @@ export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
   return inline ? <InlineMarkdownView {...innerProps} /> : <IFrameMarkdownView {...innerProps} />;
 };
 
-const uniqueId = (function() {
+const uniqueId = (function () {
   let num = 0;
-  return function(prefix) {
+  return function (prefix) {
     const prefixStr = String(prefix) || '';
     num += 1;
     return prefixStr + num;
   };
 })();
 
-type RenderExtensionProps = {
-  renderExtension: (contentDocument: HTMLDocument, rootSelector: string) => React.ReactNode;
+interface RenderExtensionProps {
+  renderExtension: (contentDocument: Document, rootSelector: string) => React.ReactNode;
   selector: string;
   markup: string;
-  docContext?: HTMLDocument;
-};
+  docContext?: Document;
+}
 
 const RenderExtension: React.FC<RenderExtensionProps> = ({
   renderExtension,
@@ -213,7 +184,7 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
 }) => {
   const [frame, setFrame] = React.useState<HTMLIFrameElement>();
   const [loaded, setLoaded] = React.useState(false);
-  const updateTimeoutHandle = React.useRef<number>();
+  const updateTimeoutHandle = React.useRef<NodeJS.Timeout>();
 
   const updateDimensions = React.useCallback(() => {
     if (!frame?.contentWindow?.document.body.firstChild) {
@@ -222,14 +193,14 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
     frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
 
     // Let the new height take effect, then reset again once we recompute
-    // @ts-ignore
     updateTimeoutHandle.current = setTimeout(() => {
       if (exactHeight) {
         frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
       } else {
         // Increase by 15px for the case where a horizontal scrollbar might appear
-        frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight +
-          15}px`;
+        frame.style.height = `${
+          frame.contentWindow.document.body.firstElementChild.scrollHeight + 15
+        }px`;
       }
     });
   }, [frame, exactHeight]);
@@ -263,7 +234,7 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
   body {
     background-color: transparent !important;
     color: ${isEmpty ? '#999' : '#333'};
-    font-family: var(--pf-global--FontFamily--sans-serif);
+    font-family: var(--pf-v5-global--FontFamily--sans-serif);
     min-width: auto !important;
   }
   table {

package/src/ConsoleInternal/components/utils/_status-box.scss

@@ -2,7 +2,7 @@
   padding: 40px 20px;
 
   &__loading-message {
-    margin-top: var(--pf-global--spacer--sm);
+    margin-top: var(--pf-v5-global--spacer--sm);
   }
 }
 

package/src/ConsoleInternal/components/utils/camel-case-wrap.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 const MEMO = {};
 
-export const CamelCaseWrap: React.SFC<CamelCaseWrapProps> = ({ value, dataTest }) => {
+export const CamelCaseWrap: React.FC<CamelCaseWrapProps> = ({ value, dataTest }) => {
   if (!value) {
     return '-';
   }
@@ -27,7 +27,7 @@ export const CamelCaseWrap: React.SFC<CamelCaseWrapProps> = ({ value, dataTest }
   return rendered;
 };
 
-export type CamelCaseWrapProps = {
+export interface CamelCaseWrapProps {
   value: string;
   dataTest?: string;
-};
+}

package/src/ConsoleInternal/components/utils/router.ts

@@ -23,7 +23,6 @@ export const removeQueryArgument = (k: string) => {
   if (params.has(k)) {
     params.delete(k);
     const url = new URL(window.location.href);
-    // @ts-ignore
     history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
   }
 };
@@ -36,7 +35,6 @@ export const setQueryArgument = (k: string, v: string) => {
   if (params.get(k) !== v) {
     params.set(k, v);
     const url = new URL(window.location.href);
-    // @ts-ignore
     history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
   }
 };

package/src/ConsoleInternal/components/utils/status-box.tsx

@@ -37,58 +37,20 @@ export const EmptyBox: React.FC<EmptyBoxProps> = ({ label }) => {
 };
 EmptyBox.displayName = 'EmptyBox';
 
-type BoxProps = {
+interface BoxProps {
   children: React.ReactNode;
   className?: string;
-};
-
-type LoadErrorProps = {
-  label: string;
-  className?: string;
-  message?: string;
-  canRetry?: boolean;
-};
+}
 
-type LoadingProps = {
+interface LoadingProps {
   className?: string;
-};
-
-type LoadingBoxProps = {
-  className?: string;
-  message?: string;
-};
+}
 
-type EmptyBoxProps = {
-  label?: string;
-};
-
-type MsgBoxProps = {
-  title?: string;
-  detail?: React.ReactNode;
+interface LoadingBoxProps {
   className?: string;
-};
-
-type AccessDeniedProps = {
   message?: string;
-};
+}
 
-type DataProps = {
-  NoDataEmptyMsg?: React.ComponentType;
-  EmptyMsg?: React.ComponentType;
+interface EmptyBoxProps {
   label?: string;
-  unfilteredData?: any;
-  data?: any;
-  children?: React.ReactNode;
-};
-
-type StatusBoxProps = {
-  label?: string;
-  loadError?: any;
-  loaded?: boolean;
-  data?: any;
-  unfilteredData?: any;
-  skeleton?: React.ReactNode;
-  NoDataEmptyMsg?: React.ComponentType;
-  EmptyMsg?: React.ComponentType;
-  children?: React.ReactNode;
-};
+}

package/src/ConsoleInternal/module/k8s/types.ts

@@ -1,11 +1,11 @@
-export type AccessReviewResourceAttributes = {
+export interface AccessReviewResourceAttributes {
   group?: string;
   resource?: string;
   subresource?: string;
   verb?: K8sVerb;
   name?: string;
   namespace?: string;
-};
+}
 
 export type K8sVerb =
   | 'create'
@@ -17,16 +17,16 @@ export type K8sVerb =
   | 'deletecollection'
   | 'watch';
 
-export type OwnerReference = {
+export interface OwnerReference {
   name: string;
   kind: string;
   uid: string;
   apiVersion: string;
   controller?: boolean;
   blockOwnerDeletion?: boolean;
-};
+}
 
-export type ObjectMetadata = {
+export interface ObjectMetadata {
   name: string;
   annotations?: { [key: string]: string };
   clusterName?: string;
@@ -50,4 +50,4 @@ export type ObjectMetadata = {
   locale?: string;
   // anything else to custom define
   [key: string]: any;
-};
+}

package/src/ConsoleShared/src/components/layout/PageLayout.scss

@@ -1,29 +1,29 @@
 .pfext-page-layout {
   &__content {
-    padding: var(--pf-global--spacer--lg);
+    padding: var(--pf-v5-global--spacer--lg);
     flex: 1;
   }
 
   &__header {
     padding-top: 1px;
-    background-color: var(--pf-global--BackgroundColor--light-100);
+    background-color: var(--pf-v5-global--BackgroundColor--light-100);
   }
 
   &__hint {
-    padding-left: var(--pf-global--spacer--lg);
-    padding-right: var(--pf-global--spacer--lg);
-    padding-bottom: var(--pf-global--spacer--md);
+    padding-left: var(--pf-v5-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--lg);
+    padding-bottom: var(--pf-v5-global--spacer--md);
     font-size: 14px;
   }
 
   &__title {
-    padding-left: var(--pf-global--spacer--lg);
-    padding-right: var(--pf-global--spacer--lg);
-    font-size: var(--pf-global--FontSize--2xl);
+    padding-left: var(--pf-v5-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--lg);
+    font-size: var(--pf-v5-global--FontSize--2xl);
     margin-top: 23px;
     margin-bottom: 11.5px;
-    font-family: var(--pf-global--FontFamily--heading--sans-serif);
-    font-weight: var(--pf-global--FontWeight--normal);
+    font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
+    font-weight: var(--pf-v5-global--FontWeight--normal);
     line-height: 1.1;
   }
 }

package/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx

@@ -4,11 +4,11 @@ import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/q
 import { useEventListener } from '../../hooks';
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 
-type CopyClipboardProps = {
+interface CopyClipboardProps {
   element: HTMLElement;
   rootSelector: string;
-  docContext: HTMLDocument;
-};
+  docContext: Document;
+}
 
 export const CopyClipboard: React.FC<CopyClipboardProps> = ({
   element,
@@ -19,9 +19,11 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
   const [showSuccessContent, setShowSuccessContent] = React.useState<boolean>(false);
   const textToCopy = React.useMemo(() => {
     const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
-    return (docContext.querySelector(
-      `${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`,
-    ) as HTMLElement)?.innerText;
+    return (
+      docContext.querySelector(
+        `${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`,
+      ) as HTMLElement
+    )?.innerText;
   }, [element, docContext, rootSelector]);
 
   useEventListener(
@@ -49,24 +51,24 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
     <Tooltip
       key="after-copy"
       isVisible
-      reference={() => element as HTMLElement}
+      triggerRef={() => element as HTMLElement}
       content={getResource('Successfully copied to clipboard!')}
       className="pfext-quick-start__base"
     />
   ) : (
     <Tooltip
       key="before-copy"
-      reference={() => element as HTMLElement}
+      triggerRef={() => element as HTMLElement}
       content={getResource('Copy to clipboard')}
       className="pfext-quick-start__base"
     />
   );
 };
 
-type MarkdownCopyClipboardProps = {
-  docContext: HTMLDocument;
+interface MarkdownCopyClipboardProps {
+  docContext: Document;
   rootSelector: string;
-};
+}
 
 const MarkdownCopyClipboard: React.FC<MarkdownCopyClipboardProps> = ({
   docContext,

package/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx

@@ -10,8 +10,8 @@ import { removeTemplateWhitespace } from './utils';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
 import './showdown-extension.scss';
 
-const useAccordionShowdownExtension = () => {
-  return React.useMemo(
+const useAccordionShowdownExtension = () =>
+  React.useMemo(
     () => ({
       type: 'lang',
       regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
@@ -21,7 +21,7 @@ const useAccordionShowdownExtension = () => {
         _command: string,
         accordionHeading: string,
       ): string => {
-        const accordionId = new String(accordionHeading).replace(/\s/g, '-');
+        const accordionId = String(accordionHeading).replace(/\s/g, '-');
 
         return removeTemplateWhitespace(
           renderToStaticMarkup(
@@ -47,6 +47,5 @@ const useAccordionShowdownExtension = () => {
     }),
     [],
   );
-};
 
 export default useAccordionShowdownExtension;