@patternfly/quickstarts 2.4.2 → 5.0.0-prerelease.1

package/src/HelpTopicPanelContent.tsx

@@ -7,9 +7,10 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
-  OptionsMenu,
-  OptionsMenuItem,
-  OptionsMenuToggle,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
   Stack,
   StackItem,
   Title,
@@ -23,12 +24,12 @@ import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-
 import './QuickStartPanelContent.scss';
 import { HelpTopicContext, HelpTopicContextValues } from './utils/help-topic-context';
 
-type HelpTopicPanelContentProps = {
+interface HelpTopicPanelContentProps {
   activeHelpTopic: HelpTopic;
   filteredHelpTopics?: HelpTopic[];
   isResizable?: boolean;
   onClose: () => void;
-};
+}
 
 const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
   activeHelpTopic = null,
@@ -45,21 +46,22 @@ const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
     setIsHelpTopicMenuOpen(!isHelpTopicMenuOpen);
   };
 
-  const onSelectHelpTopic = (event) => {
-    const topicName = event.currentTarget.id;
-    setActiveHelpTopicByName(topicName);
+  const onSelectHelpTopic = (
+    _event?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    const topicName = value;
+    setActiveHelpTopicByName(topicName.toString());
     toggleHelpTopicMenu();
   };
 
-  const menuItems =
+  const helpTopicOptions =
     filteredHelpTopics.length > 1 &&
-    filteredHelpTopics.map((topic) => {
-      return (
-        <OptionsMenuItem key={topic.name} onSelect={onSelectHelpTopic} id={topic.name}>
-          {topic.title}
-        </OptionsMenuItem>
-      );
-    });
+    filteredHelpTopics.map((topic) => (
+      <SelectOption key={topic.name} value={topic.name}>
+        {topic.title}
+      </SelectOption>
+    ));
 
   const paddingContainer = (children) => <div style={{ padding: '24px' }}>{children}</div>;
 
@@ -69,26 +71,24 @@ const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
       {!!activeHelpTopic?.links?.length && <Divider />}
       {paddingContainer(
         <Stack hasGutter>
-          {activeHelpTopic?.links?.map(({ href, text, newTab, isExternal }, index) => {
-            return (
-              <StackItem key={index}>
-                <Button
-                  component="a"
-                  href={href}
-                  target={newTab ? '_blank' : ''}
-                  rel="noopener noreferrer"
-                  variant="link"
-                  aria-label={`Open documentation in new window`}
-                  isInline
-                  icon={isExternal ? <ExternalLinkAltIcon /> : null}
-                  iconPosition="right"
-                  style={{ fontSize: 'inherit' }}
-                >
-                  {text || href}
-                </Button>
-              </StackItem>
-            );
-          })}
+          {activeHelpTopic?.links?.map(({ href, text, newTab, isExternal }, index) => (
+            <StackItem key={index}>
+              <Button
+                component="a"
+                href={href}
+                target={newTab ? '_blank' : ''}
+                rel="noopener noreferrer"
+                variant="link"
+                aria-label={`Open documentation in new window`}
+                isInline
+                icon={isExternal ? <ExternalLinkAltIcon /> : null}
+                iconPosition="right"
+                style={{ fontSize: 'inherit' }}
+              >
+                {text || href}
+              </Button>
+            </StackItem>
+          ))}
         </Stack>,
       )}
     </>
@@ -99,27 +99,35 @@ const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
       <div>
         <DrawerHead>
           <div className="pfext-quick-start-panel-content__title">
-            {menuItems && (
-              <OptionsMenu
-                id={'helptopics'}
+            {helpTopicOptions && (
+              <Select
                 isPlain
+                id="help-topics-select"
+                selected={activeHelpTopic}
                 isOpen={isHelpTopicMenuOpen}
-                toggle={
-                  <OptionsMenuToggle
-                    style={{ paddingLeft: '0px' }}
-                    onToggle={toggleHelpTopicMenu}
-                    toggleTemplate={<BarsIcon />}
-                  />
-                }
-                menuItems={menuItems}
-              />
+                onSelect={onSelectHelpTopic}
+                onOpenChange={(isOpen: boolean) => setIsHelpTopicMenuOpen(isOpen)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    isFullWidth
+                    ref={toggleRef}
+                    icon={<BarsIcon />}
+                    onClick={toggleHelpTopicMenu}
+                    isExpanded={isHelpTopicMenuOpen}
+                  >
+                    {activeHelpTopic?.title}
+                  </MenuToggle>
+                )}
+              >
+                <SelectList>{helpTopicOptions}</SelectList>
+              </Select>
             )}
 
             <Title
               headingLevel="h1"
               size="xl"
               className="pfext-quick-start-panel-content__name"
-              style={{ marginRight: 'var(--pf-global--spacer--md)' }}
+              style={{ marginRight: 'var(--pf-v5-global--spacer--md)' }}
             >
               {activeHelpTopic?.title}
             </Title>

package/src/QuickStartCatalogPage.tsx

@@ -5,9 +5,10 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStatePrimary,
   Text,
-  Title,
+  EmptyStateFooter,
+  EmptyStateActions,
+  EmptyStateHeader,
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { EmptyBox, LoadingBox, clearFilterParams } from '@console/internal/components/utils';
@@ -17,33 +18,37 @@ import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-
 import { QuickStart } from './utils/quick-start-types';
 import { filterQuickStarts } from './utils/quick-start-utils';
 
-export type QuickStartCatalogPageProps = {
+export interface QuickStartCatalogPageProps {
   quickStarts?: QuickStart[];
   showFilter?: boolean;
   sortFnc?: (q1: QuickStart, q2: QuickStart) => number;
   title?: string;
   hint?: string;
   showTitle?: boolean;
-};
+}
 
 export const QuickStartCatalogEmptyState = ({ clearFilters }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <EmptyState>
-      <EmptyStateIcon icon={SearchIcon} />
-      <Title size="lg" headingLevel="h4">
-        {getResource('No results found')}
-      </Title>
+      <EmptyStateHeader
+        titleText={<>{getResource('No results found')}</>}
+        icon={<EmptyStateIcon icon={SearchIcon} />}
+        headingLevel="h4"
+      />
       <EmptyStateBody>
         {getResource(
           'No results match the filter criteria. Remove filters or clear all filters to show results.',
         )}
       </EmptyStateBody>
-      <EmptyStatePrimary>
-        <Button variant="link" onClick={clearFilters} data-test="clear-filter button">
-          {getResource('Clear all filters')}
-        </Button>
-      </EmptyStatePrimary>
+
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="link" onClick={clearFilters} data-test="clear-filter button">
+            {getResource('Clear all filters')}
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 };
@@ -56,7 +61,7 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
   hint,
   showTitle = true,
 }) => {
-  const sortFncCallback = React.useCallback(sortFnc, []);
+  const sortFncCallback = React.useCallback(sortFnc, [sortFnc]);
   const {
     allQuickStarts = [],
     setAllQuickStarts,

package/src/QuickStartCloseModal.tsx

@@ -3,11 +3,11 @@ import { Button, Flex, FlexItem, ModalVariant } from '@patternfly/react-core';
 import { Modal } from '@console/shared';
 import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
 
-type QuickStartCloseModalProps = {
+interface QuickStartCloseModalProps {
   isOpen: boolean;
   onConfirm: () => void;
   onCancel: () => void;
-};
+}
 
 const QuickStartCloseModal: React.FC<QuickStartCloseModalProps> = ({
   isOpen,

package/src/QuickStartController.tsx

@@ -4,12 +4,12 @@ import QuickStartFooter from './controller/QuickStartFooter';
 import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
 import { QuickStart, QuickStartStatus, QuickStartTaskStatus } from './utils/quick-start-types';
 
-type QuickStartControllerProps = {
+interface QuickStartControllerProps {
   quickStart: QuickStart;
   nextQuickStarts?: QuickStart[];
   footerClass: string;
   contentRef: React.Ref<HTMLDivElement>;
-};
+}
 
 const QuickStartController: React.FC<QuickStartControllerProps> = ({
   quickStart,
@@ -74,9 +74,7 @@ const QuickStartController: React.FC<QuickStartControllerProps> = ({
     return nextStep(totalTasks);
   }, [handleQuickStartChange, nextStep, status, taskNumber, totalTasks, handleQuickStartContinue]);
 
-  const handleBack = React.useCallback(() => {
-    return previousStep();
-  }, [previousStep]);
+  const handleBack = React.useCallback(() => previousStep(), [previousStep]);
 
   const handleTaskSelect = React.useCallback(
     (selectedTaskNumber: number) => {

package/src/QuickStartDrawer.scss

@@ -5,7 +5,7 @@
     z-index: 0;
     position: relative;
   }
-  &__modal > .pf-c-modal-box__footer {
+  &__modal > .pf-v5-c-modal-box__footer {
     display: block;
   }
 }

package/src/QuickStartDrawer.tsx

@@ -56,7 +56,7 @@ export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement
    */
   markdown?: {
     extensions?: any[];
-    renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
+    renderExtension?: (docContext: Document, rootSelector: string) => React.ReactNode;
   };
   /** additional quick start context props */
   contextProps?: QuickStartContextValues;
@@ -252,7 +252,7 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
             </DrawerContentBody>
           </DrawerContent>
         ) : (
-          <div className="pf-c-drawer__main">{panelContent}</div>
+          <div className="pf-v5-c-drawer__main">{panelContent}</div>
         )}
       </Drawer>
       <QuickStartCloseModal

package/src/QuickStartMarkdownView.tsx

@@ -15,11 +15,11 @@ import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-
 
 export const removeParagraphWrap = (markdown: string) => markdown.replace(/^<p>|<\/p>$/g, '');
 
-type QuickStartMarkdownViewProps = {
+interface QuickStartMarkdownViewProps {
   content: string;
   exactHeight?: boolean;
   className?: string;
-};
+}
 
 const QuickStartMarkdownView: React.FC<QuickStartMarkdownViewProps> = ({
   content,
@@ -45,12 +45,12 @@ const QuickStartMarkdownView: React.FC<QuickStartMarkdownViewProps> = ({
             if (!linkLabel || !linkType || !linkId) {
               return text;
             }
-            return `<button class="pf-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
+            return `<button class="pf-v5-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
           },
         },
         {
           type: 'output',
-          filter: function(text) {
+          filter(text) {
             // check HTML for patterns like: <em>Status: unknown</em>{#extension-requirement-status}
             // and replace with <em id="extension-requirement-status">Status: unknown</em>
             return text.replace(/<em>(.*)<\/em>{#(.*)}/g, '<em id="$2">$1</em>');

package/src/QuickStartPanelContent.scss

@@ -3,21 +3,21 @@
     position: sticky;
     top: 0px;
     background: inherit;
-    z-index: var(--pf-global--ZIndex--xs);
+    z-index: var(--pf-v5-global--ZIndex--xs);
     &__shadow {
-      box-shadow: var(--pf-global--BoxShadow--sm-bottom);
+      box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom);
     }
     &--blue-white {
-      background-color: var(--pf-global--palette--blue-400);
+      background-color: var(--pf-v5-global--palette--blue-400);
       .pfext-quick-start-panel-content__title {
-        color: var(--pf-global--Color--light-100);
+        color: var(--pf-v5-global--Color--light-100);
       }
       .pfext-quick-start-panel-content__duration {
-        color: var(--pf-global--Color--light-200);
+        color: var(--pf-v5-global--Color--light-200);
       }
       .pfext-quick-start-panel-content__close-button {
         button {
-          color: var(--pf-global--Color--light-100) !important;
+          color: var(--pf-v5-global--Color--light-100) !important;
         }
       }
     }
@@ -33,14 +33,14 @@
   }
   &__duration {
     display: inline-block;
-    font-size: var(--pf-global--FontSize--md);
+    font-size: var(--pf-v5-global--FontSize--md);
     font-weight: 400;
     line-height: 1;
     color: #9c9c9c;
   }
   &__footer {
     &__shadow {
-      box-shadow: var(--pf-global--BoxShadow--sm-top);
+      box-shadow: var(--pf-v5-global--BoxShadow--sm-top);
     }
   }
 }

package/src/QuickStartPanelContent.tsx

@@ -20,7 +20,7 @@ import { markdownConvert } from './ConsoleInternal/components/markdown-view';
 
 type HandleClose = () => void;
 
-type QuickStartPanelContentProps = {
+interface QuickStartPanelContentProps {
   quickStarts: QuickStart[];
   activeQuickStartID: string;
   handleClose: HandleClose;
@@ -28,7 +28,7 @@ type QuickStartPanelContentProps = {
   isResizable?: boolean;
   showClose?: boolean;
   headerVariant?: '' | 'blue-white';
-};
+}
 
 const getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
   if (typeof appendTo === 'function') {
@@ -56,9 +56,8 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
   ...props
 }) => {
   const titleRef = React.useRef(null);
-  const { getResource, activeQuickStartState } = React.useContext<QuickStartContextValues>(
-    QuickStartContext,
-  );
+  const { getResource, activeQuickStartState } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
   const [contentRef, setContentRef] = React.useState<HTMLDivElement>();
   const shadows = useScrollShadows(contentRef);
   const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
@@ -81,13 +80,13 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
 
   const getStep = () => {
     const tasks = quickStart.spec.tasks.length;
-    if (Number.parseInt(taskNumber as string, 10) === -1) {
+    if (Number.parseInt(taskNumber as string) === -1) {
       return 'intro';
     }
-    if (Number.parseInt(taskNumber as string, 10) === tasks) {
+    if (Number.parseInt(taskNumber as string) === tasks) {
       return 'conclusion';
     }
-    return Number.parseInt(taskNumber as string, 10) + 1;
+    return Number.parseInt(taskNumber as string) + 1;
   };
 
   React.useEffect(() => {
@@ -112,7 +111,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
               headingLevel="h2"
               size="xl"
               className="pfext-quick-start-panel-content__name"
-              style={{ marginRight: 'var(--pf-global--spacer--md)' }}
+              style={{ marginRight: 'var(--pf-v5-global--spacer--md)' }}
             >
               <span
                 dangerouslySetInnerHTML={{

package/src/catalog/Catalog/QuickStartCatalogHeader.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-export type QuickStartCatalogHeaderProps = {
+export interface QuickStartCatalogHeaderProps {
   title: string;
   hint?: string;
-};
+}
 
 export const QuickStartCatalogHeader: React.FC<QuickStartCatalogHeaderProps> = ({
   title,

package/src/catalog/Catalog/QuickStartCatalogSection.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-export type QuickStartCatalogSectionProps = {
+export interface QuickStartCatalogSectionProps {
   children: React.ReactNode;
-};
+}
 
 export const QuickStartCatalogSection: React.FC<QuickStartCatalogSectionProps> = ({ children }) => (
   <div className="pfext-page-layout__content">{children}</div>

package/src/catalog/Catalog/QuickStartCatalogToolbar.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Toolbar } from '@patternfly/react-core';
 
-export type QuickStartCatalogToolbarProps = {
+export interface QuickStartCatalogToolbarProps {
   children: React.ReactNode;
-};
+}
 
 export const QuickStartCatalogToolbar: React.FC<QuickStartCatalogToolbarProps> = ({ children }) => (
   <Toolbar usePageInsets className="pfext-quick-start-catalog-filter__flex">

package/src/catalog/QuickStartCatalog.scss

@@ -1,6 +1,6 @@
 .pfext-quick-start-catalog {
   &__gallery {
-    --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
+    --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
   }
   &__gallery-item {
     display: inherit !important;

package/src/catalog/QuickStartCatalog.tsx

@@ -7,9 +7,9 @@ import QuickStartTile from './QuickStartTile';
 
 import './QuickStartCatalog.scss';
 
-type QuickStartCatalogProps = {
+interface QuickStartCatalogProps {
   quickStarts: QuickStart[];
-};
+}
 
 const QuickStartCatalog: React.FC<QuickStartCatalogProps> = ({ quickStarts }) => {
   const { activeQuickStartID, allQuickStartStates } = React.useContext<QuickStartContextValues>(

package/src/catalog/QuickStartTile.tsx

@@ -12,12 +12,12 @@ import QuickStartTileHeader from './QuickStartTileHeader';
 
 import './QuickStartTile.scss';
 
-type QuickStartTileProps = {
+interface QuickStartTileProps {
   quickStart: QuickStart;
   status: QuickStartStatus;
   isActive: boolean;
   onClick?: () => void;
-};
+}
 
 const QuickStartTile: React.FC<QuickStartTileProps> = ({
   quickStart,
@@ -30,9 +30,8 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
     spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type },
   } = quickStart;
 
-  const { setActiveQuickStart, footer } = React.useContext<QuickStartContextValues>(
-    QuickStartContext,
-  );
+  const { setActiveQuickStart, footer } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
 
   const ref = React.useRef<HTMLDivElement>(null);
 
@@ -50,14 +49,21 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
     );
   }
 
-  const footerComponent =
-    footer && footer.show === false ? null : link ? (
-      <QuickStartTileFooterExternal link={link} quickStartId={id} />
-    ) : (
-      <QuickStartTileFooter quickStartId={id} status={status} totalTasks={tasks?.length} />
-    );
+  const footerComponent = React.useMemo(() => {
+    if (footer && footer.show === false) {
+      return null;
+    }
+
+    if (link) {
+      return <QuickStartTileFooterExternal link={link} quickStartId={id} />;
+    }
+
+    return <QuickStartTileFooter quickStartId={id} status={status} totalTasks={tasks?.length} />;
+  }, [footer, id, link, status, tasks?.length]);
 
-  const handleClick = (e: React.SyntheticEvent<HTMLElement, Event>) => {
+  const handleClick = (
+    e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>,
+  ) => {
     if (ref.current?.contains(e.target as Node)) {
       if (link) {
         window.open(link.href);
@@ -71,8 +77,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   return (
     <div ref={ref}>
       <CatalogTile
-        // @ts-ignore
-        component="div"
+        id={id + '-catalog-tile'}
         style={{
           cursor: 'pointer',
         }}
@@ -97,7 +102,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
           }
         }}
         // https://github.com/patternfly/patternfly-react/issues/7039
-        href="#"
+        href={link?.href}
         data-test={`tile ${id}`}
         description={
           <QuickStartTileDescription description={description} prerequisites={prerequisites} />

package/src/catalog/QuickStartTileDescription.scss

@@ -13,12 +13,12 @@
   &-prerequisites {
     display: inline-flex;
     &__text {
-      margin-right: var(--pf-global--spacer--sm);
-      font-size: var(--pf-global--FontSize--md);
+      margin-right: var(--pf-v5-global--spacer--sm);
+      font-size: var(--pf-v5-global--FontSize--md);
       margin-top: 11.5px;
       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/catalog/QuickStartTileDescription.tsx

@@ -13,10 +13,10 @@ import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start
 
 import './QuickStartTileDescription.scss';
 
-type QuickStartTileDescriptionProps = {
+interface QuickStartTileDescriptionProps {
   description: string;
   prerequisites?: string[];
-};
+}
 const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
   description,
   prerequisites,

package/src/catalog/QuickStartTileFooter.tsx

@@ -3,11 +3,11 @@ import { Button, Flex, FlexItem } from '@patternfly/react-core';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStartStatus } from '../utils/quick-start-types';
 
-type QuickStartTileFooterProps = {
+interface QuickStartTileFooterProps {
   quickStartId: string;
   status: string;
   totalTasks?: number;
-};
+}
 
 const QuickStartTileFooter: React.FC<QuickStartTileFooterProps> = ({
   quickStartId,

package/src/catalog/QuickStartTileFooterExternal.tsx

@@ -3,10 +3,10 @@ import { Button, Flex, FlexItem } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { QuickStartExternal } from '../utils/quick-start-types';
 
-type QuickStartTileFooterProps = {
+interface QuickStartTileFooterProps {
   link: QuickStartExternal;
   quickStartId?: string;
-};
+}
 
 const QuickStartTileFooterExternal: React.FC<QuickStartTileFooterProps> = ({
   link,

package/src/catalog/QuickStartTileHeader.scss

@@ -1,12 +1,12 @@
 .pfext-quick-start-tile-header {
   &__status {
-    margin: var(--pf-global--spacer--sm) 0;
+    margin: var(--pf-v5-global--spacer--sm) 0;
   }
   &--margin {
-    margin-right: var(--pf-global--spacer--sm);
-    margin-bottom: var(--pf-global--spacer--sm);
+    margin-right: var(--pf-v5-global--spacer--sm);
+    margin-bottom: var(--pf-v5-global--spacer--sm);
   }
-  & .pf-c-badge:not(:last-of-type) {
-    margin-right: var(--pf-global--spacer--sm);
+  & .pf-v5-c-badge:not(:last-of-type) {
+    margin-right: var(--pf-v5-global--spacer--sm);
   }
 }

package/src/catalog/QuickStartTileHeader.tsx

@@ -7,13 +7,13 @@ import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start
 import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 
-type QuickStartTileHeaderProps = {
+interface QuickStartTileHeaderProps {
   status: string;
   duration: number;
   name: string;
   type?: QuickStartType;
   quickStartId?: string;
-};
+}
 
 const statusColorMap = {
   [QuickStartStatus.COMPLETE]: 'green',