@patternfly/quickstarts 6.3.0-prerelease.1 → 6.3.0-prerelease.10

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/admonition-extension.spec.tsx

@@ -0,0 +1,121 @@
+import { renderHook } from '@testing-library/react';
+import useAdmonitionShowdownExtension from '../admonition-extension';
+import { marked } from 'marked';
+
+// Mock marked
+jest.mock('marked', () => ({
+  marked: {
+    parseInline: jest.fn((text) => `<strong>${text}</strong>`),
+  },
+}));
+
+// Mock DOMPurify
+jest.mock('dompurify', () => ({
+  sanitize: jest.fn((html) => html),
+}));
+
+describe('useAdmonitionShowdownExtension', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return a showdown extension with correct properties', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const extension = result.current;
+
+    expect(extension.type).toBe('lang');
+    expect(extension.regex).toEqual(/\[(.+)]{{(admonition) ([\w-]+)}}/g);
+    expect(typeof extension.replace).toBe('function');
+  });
+
+  it('should match different admonition types', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { regex } = result.current;
+
+    const admonitionTypes = ['note', 'tip', 'important', 'warning', 'caution', 'custom-type'];
+
+    admonitionTypes.forEach((type) => {
+      const testText = `[Content for ${type}]{{admonition ${type}}}`;
+      // Reset regex state for global flag
+      regex.lastIndex = 0;
+      const matches = regex.exec(testText);
+
+      expect(matches).not.toBeNull();
+      if (matches) {
+        expect(matches[1]).toBe(`Content for ${type}`);
+        expect(matches[2]).toBe('admonition');
+        expect(matches[3]).toBe(type);
+      }
+    });
+  });
+
+  it('should not match malformed admonition syntax', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { regex } = result.current;
+
+    const malformedCases = [
+      'Content]{{admonition note}}',
+      '[Content{{admonition note}}',
+      '[Content]{{admonition}}',
+      '[Content]{{notadmonition note}}',
+    ];
+
+    malformedCases.forEach((testCase) => {
+      expect(testCase.match(regex)).toBeNull();
+    });
+  });
+
+  it('should generate correct alert HTML structure', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    const html = replace('[Test message]{{admonition note}}', 'Test message', 'admonition', 'note');
+
+    expect(html).toContain('pf-v6-c-alert');
+    expect(html).toContain('pf-m-info'); // note maps to info variant
+    expect(html).toContain('pf-m-inline');
+    expect(html).toContain('pfext-markdown-admonition');
+    expect(html).toContain('NOTE'); // uppercase title
+  });
+
+  it('should handle different admonition types with correct variants', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    const testCases = [
+      { type: 'note', expectedClass: 'pf-m-info' },
+      { type: 'warning', expectedClass: 'pf-m-warning' },
+      { type: 'important', expectedClass: 'pf-m-danger' },
+    ];
+
+    testCases.forEach(({ type, expectedClass }) => {
+      const html = replace(`[Content]{{admonition ${type}}}`, 'Content', 'admonition', type);
+
+      expect(html).toContain(expectedClass);
+      expect(html).toContain(type.toUpperCase());
+    });
+  });
+
+  it('should process content through marked', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    replace('[**Bold text**]{{admonition note}}', '**Bold text**', 'admonition', 'note');
+
+    expect(marked.parseInline).toHaveBeenCalledWith('**Bold text**');
+  });
+
+  it('should return original text for invalid cases', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    // Missing content
+    const originalText = '[Content]{{admonition note}}';
+    const result1 = replace(originalText, '', 'admonition', 'note');
+    expect(result1).toBe(originalText);
+
+    // Wrong command
+    const result2 = replace(originalText, 'Content', 'not-admonition', 'note');
+    expect(result2).toBe(originalText);
+  });
+});

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import {
   Accordion,
   AccordionItem,
@@ -8,34 +8,41 @@ import {
 import { renderToStaticMarkup } from 'react-dom/server';
 import { removeTemplateWhitespace } from './utils';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
+import { marked } from 'marked';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify = require('dompurify');
 
 const useAccordionShowdownExtension = () =>
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'lang',
-      regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+      regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
       replace: (
         _text: string,
         accordionContent: string,
         _command: string,
+        _quotedHeading: string,
         accordionHeading: string,
       ): string => {
         const accordionId = String(accordionHeading).replace(/\s/g, '-');
 
+        // Process accordion content with markdown
+        const processedContent = marked.parseInline(accordionContent);
+        const sanitizedContent = DOMPurify.sanitize(processedContent);
+
         return removeTemplateWhitespace(
           renderToStaticMarkup(
-            <>
-              <Accordion asDefinitionList>
-                <AccordionItem isExpanded={false}>
-                  <AccordionToggle id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}>
-                    {accordionHeading}
-                  </AccordionToggle>
-                  <AccordionContent id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`}>
-                    {accordionContent}
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            </>,
+            <Accordion>
+              <AccordionItem>
+                <AccordionToggle id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}>
+                  {accordionHeading}
+                </AccordionToggle>
+                <AccordionContent id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`} hidden>
+                  <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>,
           ),
         );
       },

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useState } from 'react';
 import { useEventListener } from '../../hooks';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
 
@@ -7,21 +7,35 @@ interface AccordionShowdownComponentProps {
   contentElement: HTMLElement;
 }
 
-const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
+const AccordionShowdownHandler: FC<AccordionShowdownComponentProps> = ({
   buttonElement,
   contentElement,
 }) => {
-  const [expanded, setExpanded] = React.useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
 
   const handleClick = () => {
+    const newExpanded = !expanded;
     const expandedModifier = 'pf-m-expanded';
 
-    buttonElement.className = `pf-v6-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
-    contentElement.hidden = expanded;
-    contentElement.className = `pf-v6-c-accordion__expanded-content ${
-      !expanded ? expandedModifier : ''
+    // Find the accordion item element (parent of the button)
+    const accordionItem = buttonElement.closest('.pf-v6-c-accordion__item');
+
+    // Update button - both visual state and aria-expanded
+    buttonElement.className = `pf-v6-c-accordion__toggle ${newExpanded ? expandedModifier : ''}`;
+    buttonElement.setAttribute('aria-expanded', newExpanded.toString());
+
+    // Update content - both visual state and hidden attribute
+    contentElement.hidden = !newExpanded;
+    contentElement.className = `pf-v6-c-accordion__expandable-content ${
+      newExpanded ? expandedModifier : ''
     }`;
-    setExpanded(!expanded);
+
+    // Update accordion item
+    if (accordionItem) {
+      accordionItem.className = `pf-v6-c-accordion__item ${newExpanded ? expandedModifier : ''}`;
+    }
+
+    setExpanded(newExpanded);
   };
 
   useEventListener(buttonElement, 'click', handleClick);
@@ -33,7 +47,7 @@ interface accordionRenderExtensionProps {
   docContext: Document;
 }
 
-const AccordionRenderExtension: React.FC<accordionRenderExtensionProps> = ({ docContext }) => {
+const AccordionRenderExtension: FC<accordionRenderExtensionProps> = ({ docContext }) => {
   const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
   const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
 

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

@@ -1,10 +1,13 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { removeTemplateWhitespace } from './utils';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { Alert } from '@patternfly/react-core';
 import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
 import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
-import QuickStartMarkdownView from '../../../../QuickStartMarkdownView';
+import { marked } from 'marked';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify = require('dompurify');
 
 enum AdmonitionType {
   TIP = 'TIP',
@@ -24,7 +27,7 @@ const admonitionToAlertVariantMap = {
 
 const useAdmonitionShowdownExtension = () =>
   // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'lang',
       regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
@@ -33,15 +36,23 @@ const useAdmonitionShowdownExtension = () =>
         content: string,
         admonitionLabel: string,
         admonitionType: string,
-        groupId: string,
       ): string => {
-        if (!content || !admonitionLabel || !admonitionType || !groupId) {
+        if (!content || !admonitionLabel || !admonitionType) {
+          return text;
+        }
+        if (admonitionLabel !== 'admonition') {
           return text;
         }
         admonitionType = admonitionType.toUpperCase();
 
-        const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
-        const mdContent = <QuickStartMarkdownView content={content} />;
+        // Process markdown content directly using marked
+        const processedContent = marked.parseInline(content);
+        const sanitizedContent = DOMPurify.sanitize(processedContent);
+
+        // Handle unknown admonition types by defaulting to NOTE
+        const admonitionConfig =
+          admonitionToAlertVariantMap[admonitionType] || admonitionToAlertVariantMap.NOTE;
+        const { variant, customIcon } = admonitionConfig;
         const pfAlert = (
           <Alert
             variant={variant}
@@ -50,7 +61,7 @@ const useAdmonitionShowdownExtension = () =>
             title={admonitionType}
             className="pfext-markdown-admonition"
           >
-            {mdContent}
+            <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
           </Alert>
         );
         return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));

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

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { removeTemplateWhitespace } from './utils';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { CodeBlock } from '@patternfly/react-core';
 
 const useCodeShowdownExtension = () =>
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'output',
       regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,

package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useMemo } from 'react';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { removeTemplateWhitespace } from './utils';
@@ -6,8 +6,8 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
 
 const useInlineCopyClipboardShowdownExtension = () => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  return React.useMemo(
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  return useMemo(
     () => ({
       type: 'lang',
       regex: /`([^`](.*?)[^`])`{{copy}}/g,

package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import * as React from 'react';
+import { useContext, useMemo } from 'react';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
 
 const useMultilineCopyClipboardShowdownExtension = () => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  return React.useMemo(
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  return useMemo(
     () => ({
       type: 'lang',
       regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,

package/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Spotlight } from '../spotlight';
 
 interface MarkdownHighlightExtensionProps {
   docContext: Document;
   rootSelector: string;
 }
-const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
+const MarkdownHighlightExtension: FC<MarkdownHighlightExtensionProps> = ({
   docContext,
   rootSelector,
 }) => {
-  const [selector, setSelector] = React.useState<string>(null);
-  React.useEffect(() => {
+  const [selector, setSelector] = useState<string>(null);
+  useEffect(() => {
     const elements = docContext.querySelectorAll(`${rootSelector} [data-highlight]`);
     let timeoutId: NodeJS.Timeout;
     function startHighlight(e) {
@@ -29,7 +29,7 @@ const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
       elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
     };
   }, [docContext, rootSelector]);
-  React.useEffect(() => {
+  useEffect(() => {
     const elements = docContext.querySelectorAll(`${rootSelector} [class^=data-highlight__]`);
     let timeoutId: NodeJS.Timeout;
     function startHighlight(e) {

package/src/ConsoleShared/src/components/modal/Modal.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
+import { FC, Ref } from 'react';
 import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core/deprecated';
 import { css } from '@patternfly/react-styles';
 
 type ModalProps = {
   isFullScreen?: boolean;
-  ref?: React.LegacyRef<PfModal>;
+  ref?: Ref<PfModal>;
 } & PfModalProps;
 
-const Modal: React.FC<ModalProps> = ({ isFullScreen = false, className, ...props }) => (
+const Modal: FC<ModalProps> = ({ isFullScreen = false, className, ...props }) => (
   <PfModal
     {...props}
     className={css('pfext-modal', className)}

package/src/ConsoleShared/src/components/popper/Portal.tsx

@@ -1,11 +1,11 @@
 import { useIsomorphicLayoutEffect } from '@patternfly/react-core';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { useState, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 type GetContainer = Element | null | undefined | (() => Element);
 
 interface PortalProps {
-  children: React.ReactNode;
+  children: ReactNode;
   container?: GetContainer;
 }
 
@@ -13,13 +13,13 @@ const getContainer = (container: GetContainer): Element | null | undefined =>
   typeof container === 'function' ? container() : container;
 
 const Portal = ({ children, container }: PortalProps) => {
-  const [containerNode, setContainerNode] = React.useState<Element>();
+  const [containerNode, setContainerNode] = useState<Element>();
 
   useIsomorphicLayoutEffect(() => {
     setContainerNode(getContainer(container) || document.body);
   }, [container]);
 
-  return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
+  return containerNode ? createPortal(children, containerNode) : null;
 };
 
 export default Portal;

package/src/ConsoleShared/src/components/popper/SimplePopper.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import Portal from './Portal';
 
 interface SimplePopperProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const SimplePopper = ({ children }: SimplePopperProps) => {
   const openProp = true;
-  const nodeRef = React.useRef<Element>();
-  const popperRef = React.useRef(null);
-  const [isOpen, setOpenState] = React.useState(openProp);
+  const nodeRef = useRef<Element>(null);
+  const popperRef = useRef(null);
+  const [isOpen, setOpenState] = useState(openProp);
 
-  const setOpen = React.useCallback((newOpen: boolean) => {
+  const setOpen = useCallback((newOpen: boolean) => {
     setOpenState(newOpen);
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setOpen(openProp);
   }, [openProp, setOpen]);
 
-  const onKeyDown = React.useCallback(
+  const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.keyCode === 27) {
         setOpen(false);
@@ -28,7 +28,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     [setOpen],
   );
 
-  const onClickOutside = React.useCallback(
+  const onClickOutside = useCallback(
     (e: MouseEvent) => {
       if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
         setOpen(false);
@@ -37,7 +37,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     [setOpen],
   );
 
-  const destroy = React.useCallback(() => {
+  const destroy = useCallback(() => {
     if (popperRef.current) {
       popperRef.current.destroy();
       document.removeEventListener('keydown', onKeyDown, true);
@@ -46,7 +46,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     }
   }, [onClickOutside, onKeyDown]);
 
-  const initialize = React.useCallback(() => {
+  const initialize = useCallback(() => {
     if (!nodeRef.current || !isOpen) {
       return;
     }
@@ -54,7 +54,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     destroy();
   }, [isOpen, destroy]);
 
-  const nodeRefCallback = React.useCallback(
+  const nodeRefCallback = useCallback(
     (node) => {
       nodeRef.current = node;
       initialize();
@@ -62,18 +62,18 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     [initialize],
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     initialize();
   }, [initialize]);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       destroy();
     },
     [destroy],
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen) {
       destroy();
     }

package/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import './spotlight.scss';
+import { CSSProperties, FC, useEffect, useState } from 'react';
 import { Portal, SimplePopper } from '../popper';
 
 interface InteractiveSpotlightProps {
@@ -15,9 +16,9 @@ const isInViewport = (elementToCheck: Element) => {
   );
 };
 
-const InteractiveSpotlight: React.FC<InteractiveSpotlightProps> = ({ element }) => {
+const InteractiveSpotlight: FC<InteractiveSpotlightProps> = ({ element }) => {
   const { top, bottom, left, right, height, width } = element.getBoundingClientRect();
-  const style: React.CSSProperties = {
+  const style: CSSProperties = {
     height,
     width,
     top,
@@ -25,9 +26,9 @@ const InteractiveSpotlight: React.FC<InteractiveSpotlightProps> = ({ element })
     bottom,
     right,
   };
-  const [clicked, setClicked] = React.useState(false);
+  const [clicked, setClicked] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!clicked) {
       if (!isInViewport(element)) {
         element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });

package/src/ConsoleShared/src/components/spotlight/Spotlight.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useMemo } from 'react';
 import InteractiveSpotlight from './InteractiveSpotlight';
 import StaticSpotlight from './StaticSpotlight';
 
@@ -7,9 +7,9 @@ interface SpotlightProps {
   interactive?: boolean;
 }
 
-const Spotlight: React.FC<SpotlightProps> = ({ selector, interactive }) => {
+const Spotlight: FC<SpotlightProps> = ({ selector, interactive }) => {
   // if target element is a hidden one return null
-  const element = React.useMemo(() => {
+  const element = useMemo(() => {
     const highlightElement = document.querySelector(selector);
     let hiddenElement = highlightElement;
     while (hiddenElement) {

package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import './spotlight.scss';
+import { CSSProperties, FC } from 'react';
 import { useBoundingClientRect } from '../../hooks';
 import Portal from '../popper/Portal';
 
@@ -6,9 +7,9 @@ interface StaticSpotlightProps {
   element: Element;
 }
 
-const StaticSpotlight: React.FC<StaticSpotlightProps> = ({ element }) => {
+const StaticSpotlight: FC<StaticSpotlightProps> = ({ element }) => {
   const clientRect = useBoundingClientRect(element as HTMLElement);
-  const style: React.CSSProperties = clientRect
+  const style: CSSProperties = clientRect
     ? {
         top: clientRect.top,
         left: clientRect.left,

package/src/ConsoleShared/src/components/spotlight/spotlight.scss

@@ -0,0 +1,63 @@
+@keyframes pfext-spotlight-expand {
+    0% {
+      outline-offset: -4px;
+      outline-width: 4px;
+      opacity: 1;
+    }
+    100% {
+      outline-offset: 21px;
+      outline-width: 12px;
+      opacity: 0;
+    }
+  }
+  
+  @keyframes pfext-spotlight-fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes pfext-spotlight-fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  
+  .pfext-spotlight {
+    pointer-events: none;
+    position: absolute;
+    &__with-backdrop {
+      mix-blend-mode: hard-light;
+    }
+    &__element-highlight-noanimate {
+      border: var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);
+      background-color: var(--pf-t--color--gray--40);
+      z-index: 9999;
+    }
+    &__element-highlight-animate {
+      pointer-events: none;
+      position: absolute;
+      box-shadow: inset 0px 0px 0px 4px var(--pf-t--global--color--brand--default);
+      opacity: 0;
+      animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
+      animation-fill-mode: forwards;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
+        animation-fill-mode: forwards;
+        outline: 4px solid var(--pf-t--global--color--brand--default);
+        outline-offset: -4px;
+      }
+    }
+  }