@patternfly/quickstarts 6.0.0-alpha.1 → 6.0.0-alpha.3

package/src/QuickStartPanelContent.tsx

@@ -1,4 +1,3 @@
-import './QuickStartPanelContent.scss';
 import * as React from 'react';
 import {
   DrawerActions,
@@ -8,15 +7,13 @@ import {
   DrawerPanelContent,
   Title,
 } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
 import * as ReactDOM from 'react-dom';
-import { Shadows, useScrollShadows } from '@console/shared';
 import QuickStartController from './QuickStartController';
 import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
 import { QuickStart } from './utils/quick-start-types';
 import { camelize } from './utils/quick-start-utils';
-import { removeParagraphWrap } from './QuickStartMarkdownView';
-import { markdownConvert } from './ConsoleInternal/components/markdown-view';
+
+import './QuickStartPanelContent.scss';
 
 type HandleClose = () => void;
 
@@ -27,7 +24,7 @@ interface QuickStartPanelContentProps {
   appendTo?: HTMLElement | (() => HTMLElement);
   isResizable?: boolean;
   showClose?: boolean;
-  headerVariant?: '' | 'blue-white';
+  footerClass?: string;
 }
 
 const getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
@@ -52,14 +49,13 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
   appendTo,
   isResizable = true,
   showClose = true,
-  headerVariant = '',
+  footerClass,
   ...props
 }) => {
   const titleRef = React.useRef(null);
-  const { getResource, activeQuickStartState } =
+  const { getResource, activeQuickStartState, focusOnQuickStart } =
     React.useContext<QuickStartContextValues>(QuickStartContext);
   const [contentRef, setContentRef] = React.useState<HTMLDivElement>();
-  const shadows = useScrollShadows(contentRef);
   const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
   const taskNumber = activeQuickStartState?.taskNumber;
   useScrollTopOnTaskNumberChange(contentRef, taskNumber as number);
@@ -67,19 +63,8 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
     quickStart?.spec.nextQuickStart?.includes(qs.metadata.name),
   );
 
-  const headerClasses = css('pfext-quick-start-panel-content__header', {
-    'pfext-quick-start-panel-content__header__shadow':
-      shadows === Shadows.top || shadows === Shadows.both,
-    'pfext-quick-start-panel-content__header--blue-white': headerVariant === 'blue-white',
-  });
-
-  const footerClass = css({
-    'pfext-quick-start-panel-content__footer__shadow':
-      shadows === Shadows.bottom || shadows === Shadows.both,
-  });
-
   const getStep = () => {
-    const tasks = quickStart.spec.tasks.length;
+    const tasks = quickStart.spec.tasks?.length || 0;
     if (Number.parseInt(taskNumber as string) === -1) {
       return 'intro';
     }
@@ -90,45 +75,40 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
   };
 
   React.useEffect(() => {
-    if (quickStart) {
+    if (focusOnQuickStart && quickStart) {
       titleRef.current.focus();
     }
-  }, [quickStart]);
+  }, [focusOnQuickStart, quickStart]);
 
   const content = quickStart ? (
     <DrawerPanelContent
       isResizable={isResizable}
-      className="pfext-quick-start__base"
       data-testid={`qs-drawer-${camelize(quickStart.spec.displayName)}`}
       data-qs={`qs-step-${getStep()}`}
       data-test="quickstart drawer"
+      style={{ '--pf-v6-c-drawer__panel--PaddingBlockStart': '0' } as React.CSSProperties}
       {...props}
     >
-      <div className={headerClasses}>
+      <div className="pfext-quick-start-panel-content">
         <DrawerHead>
-          <div className="pfext-quick-start-panel-content__title" tabIndex={-1} ref={titleRef}>
+          <div tabIndex={-1} ref={titleRef}>
             <Title
               headingLevel="h2"
               size="xl"
-              className="pfext-quick-start-panel-content__name"
               style={{ marginRight: 'var(--pf-t--global--spacer--md)' }}
             >
-              <span
-                dangerouslySetInnerHTML={{
-                  __html: removeParagraphWrap(markdownConvert(quickStart?.spec.displayName)),
-                }}
-              />{' '}
-              <small className="pfext-quick-start-panel-content__duration">
-                {quickStart?.spec.durationMinutes
-                  ? getResource(
-                      '{{type}} • {{duration, number}} minutes',
-                      quickStart?.spec.durationMinutes,
-                    )
-                      .replace('{{duration, number}}', quickStart?.spec.durationMinutes)
-                      .replace('{{type}}', getResource('Type'))
-                  : getResource('Type')}
-              </small>
+              <span>{quickStart?.spec.displayName}</span>{' '}
             </Title>
+            <span>
+              {quickStart?.spec.durationMinutes
+                ? getResource(
+                    '{{type}} • {{duration, number}} minutes',
+                    quickStart?.spec.durationMinutes,
+                  )
+                    .replace('{{duration, number}}', quickStart?.spec.durationMinutes)
+                    .replace('{{type}}', getResource('Type'))
+                : getResource('Type')}
+            </span>
           </div>
           {showClose && (
             <DrawerActions>
@@ -141,11 +121,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
           )}
         </DrawerHead>
       </div>
-      <DrawerPanelBody
-        hasNoPadding
-        className="pfext-quick-start-panel-content__body"
-        data-test="content"
-      >
+      <DrawerPanelBody className="pfext-quick-start-panel-content__body" data-test="content">
         <QuickStartController
           quickStart={quickStart}
           nextQuickStarts={nextQuickStarts}

package/src/catalog/Catalog/QuickStartCatalogHeader.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Title } from '@patternfly/react-core';
 
 export interface QuickStartCatalogHeaderProps {
   title: string;
@@ -9,10 +10,10 @@ export const QuickStartCatalogHeader: React.FC<QuickStartCatalogHeaderProps> = (
   title,
   hint,
 }) => (
-  <div className="pfext-page-layout__header">
-    <h1 data-pf-content="true" className="pfext-page-layout__title">
+  <div>
+    <Title headingLevel="h1" data-pf-content="true">
       {title}
-    </h1>
-    {hint && <div className="pfext-page-layout__hint">{hint}</div>}
+    </Title>
+    {hint && <div>{hint}</div>}
   </div>
 );

package/src/catalog/Catalog/QuickStartCatalogSection.tsx

@@ -5,5 +5,5 @@ export interface QuickStartCatalogSectionProps {
 }
 
 export const QuickStartCatalogSection: React.FC<QuickStartCatalogSectionProps> = ({ children }) => (
-  <div className="pfext-page-layout__content">{children}</div>
+  <div>{children}</div>
 );

package/src/catalog/Catalog/QuickStartCatalogToolbar.tsx

@@ -6,7 +6,5 @@ export interface QuickStartCatalogToolbarProps {
 }
 
 export const QuickStartCatalogToolbar: React.FC<QuickStartCatalogToolbarProps> = ({ children }) => (
-  <Toolbar usePageInsets className="pfext-quick-start-catalog-filter__flex">
-    {children}
-  </Toolbar>
+  <Toolbar>{children}</Toolbar>
 );

package/src/catalog/QuickStartCatalog.tsx

@@ -1,37 +1,33 @@
 import * as React from 'react';
-import { Gallery, GalleryItem } from '@patternfly/react-core';
+import { Gallery } from '@patternfly/react-core';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStart } from '../utils/quick-start-types';
 import { getQuickStartStatus } from '../utils/quick-start-utils';
 import QuickStartTile from './QuickStartTile';
 
-import './QuickStartCatalog.scss';
-
 interface QuickStartCatalogProps {
   quickStarts: QuickStart[];
 }
 
 const QuickStartCatalog: React.FC<QuickStartCatalogProps> = ({ quickStarts }) => {
-  const { activeQuickStartID, allQuickStartStates } = React.useContext<QuickStartContextValues>(
-    QuickStartContext,
-  );
+  const { activeQuickStartID, allQuickStartStates } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
 
   return (
-    <div className="pfext-page-layout__content">
-      <Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
-        {quickStarts.map((quickStart) => {
+    <div>
+      <Gallery hasGutter>
+        {quickStarts.map((quickStart, index) => {
           const {
             metadata: { name: id },
           } = quickStart;
 
           return (
-            <GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
-              <QuickStartTile
-                quickStart={quickStart}
-                isActive={id === activeQuickStartID}
-                status={getQuickStartStatus(allQuickStartStates, id)}
-              />
-            </GalleryItem>
+            <QuickStartTile
+              key={index}
+              quickStart={quickStart}
+              isActive={id === activeQuickStartID}
+              status={getQuickStartStatus(allQuickStartStates, id)}
+            />
           );
         })}
       </Gallery>

package/src/catalog/QuickStartTile.scss

@@ -1,11 +1,13 @@
-.pfext-quick-start-tile {
-  height: 100%;
-  & .catalog-tile-pf-description .has-footer {
-    display: block;
-    -webkit-line-clamp: unset;
-  }
+.pf-v6-theme-dark .pfext-catalog-item-icon__img {
+  filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
+}
+
+// some icons provided to catalog tiles might have no defined height/width. Without this style, in those cases
+// the icons would have a height and width of 0.
+.pf-v6-c-card__header-main .pf-v6-c-icon__content, {
+  display: contents;
+}
 
-  & .catalog-tile-pf-icon {
-    display: flex;
-  }
+.pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
+  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth) !important;
 }

package/src/catalog/QuickStartTile.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { CatalogTile } from '@patternfly/react-catalog-view-extension';
 import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
 import { FallbackImg } from '@console/shared';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
@@ -9,15 +8,46 @@ import QuickStartTileDescription from './QuickStartTileDescription';
 import QuickStartTileFooter from './QuickStartTileFooter';
 import QuickStartTileFooterExternal from './QuickStartTileFooterExternal';
 import QuickStartTileHeader from './QuickStartTileHeader';
-import { Icon } from '@patternfly/react-core';
-
+import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  Icon,
+  Button,
+  ButtonProps,
+  Flex,
+  Stack,
+  Label
+} from '@patternfly/react-core';
+import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
+import { StatusIcon } from '@console/shared';
 import './QuickStartTile.scss';
 
-interface QuickStartTileProps {
+export interface QuickstartAction {
+  /** Screen reader aria label. */
+  'aria-label': string;
+  /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
+  icon?: React.ComponentType<unknown>;
+  /** Callback with synthetic event parameter. */
+  onClick?: (e: React.SyntheticEvent) => void;
+  /** Additional button props to be rendered as extra props. */
+  buttonProps?: ButtonProps;
+}
+
+export interface QuickStartTileProps {
+  /** The quickstart object triggered by this tile */
   quickStart: QuickStart;
+  /** Current status of the quickstart */
   status: QuickStartStatus;
+  /** Flag indicating whether the quickstart is active (drawer is open) */
   isActive: boolean;
+  /** Event handler attached to the tile */
   onClick?: () => void;
+  /** Action config for button rendered next to title */
+  action?: QuickstartAction;
 }
 
 const QuickStartTile: React.FC<QuickStartTileProps> = ({
@@ -25,33 +55,54 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   status,
   isActive,
   onClick = () => {},
+  action,
 }) => {
   const {
     metadata: { name: id },
     spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type },
   } = quickStart;
 
-  const { setActiveQuickStart, footer } =
+  const { setActiveQuickStart, footer, getResource } =
     React.useContext<QuickStartContextValues>(QuickStartContext);
 
-  const ref = React.useRef<HTMLDivElement>(null);
+
+  const statusColorMap = {
+    [QuickStartStatus.COMPLETE]: 'green',
+    [QuickStartStatus.IN_PROGRESS]: 'purple',
+    [QuickStartStatus.NOT_STARTED]: 'grey',
+  };
+
+  const statusLocaleMap = {
+    [QuickStartStatus.COMPLETE]: getResource('Complete'),
+    [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
+    [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
+  };
 
   let quickStartIcon: React.ReactNode;
   if (typeof icon === 'object') {
-    quickStartIcon = <Icon size="xl">{icon}</Icon>
+    quickStartIcon = <Icon size="2xl">{icon}</Icon>;
   } else {
     quickStartIcon = (
-      <Icon size="xl">
-      <FallbackImg
-        className="pfext-catalog-item-icon__img--large"
-        src={icon as string}
-        alt=""
-        fallback={<RocketIcon />}
-      />
+      <Icon size="2xl">
+        <FallbackImg
+          src={icon as string}
+          alt=""
+          className="pfext-catalog-item-icon__img"
+          fallback={<RocketIcon />}
+        />
       </Icon>
     );
   }
 
+  const onSelect = () => {
+    if (!link) {
+      setActiveQuickStart(id, tasks?.length);
+    } else {
+      window.open(link.href, '_blank', 'noopener,noreferrer');
+    }
+    onClick();
+  };
+
   const footerComponent = React.useMemo(() => {
     if (footer && footer.show === false) {
       return null;
@@ -61,59 +112,81 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
       return <QuickStartTileFooterExternal link={link} quickStartId={id} />;
     }
 
-    return <QuickStartTileFooter quickStartId={id} status={status} totalTasks={tasks?.length} />;
+    return (
+      <QuickStartTileFooter
+        quickStartId={id}
+        status={status}
+        totalTasks={tasks?.length}
+        onClickContinue={onSelect}
+      />
+    );
   }, [footer, id, link, status, tasks?.length]);
 
-  const handleClick = (
-    e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>,
-  ) => {
-    if (ref.current?.contains(e.target as Node)) {
-      if (link) {
-        window.open(link.href);
-      } else {
-        setActiveQuickStart(id, tasks?.length);
-      }
-      onClick();
-    }
-  };
+  const ActionIcon = action?.icon || OutlinedBookmarkIcon;
+  const additionalAction = action ? (
+    <Button
+      aria-label={action['aria-label']}
+      icon={<ActionIcon />}
+      variant="plain"
+      onClick={action.onClick}
+      {...action.buttonProps}
+    />
+  ) : undefined;
 
   return (
-    <div ref={ref}>
-      <CatalogTile
-        id={id + '-catalog-tile'}
-        style={{
-          cursor: 'pointer',
-        }}
-        icon={quickStartIcon}
-        className="pfext-quick-start-tile"
-        data-testid={`qs-card-${camelize(displayName)}`}
-        featured={isActive}
-        title={
-          <QuickStartTileHeader
-            name={displayName}
-            status={status}
-            duration={durationMinutes}
-            type={type}
-            quickStartId={id}
-          />
-        }
-        onClick={handleClick}
-        onKeyDown={(event) => {
-          if (event.key === 'Enter' || event.key === ' ') {
-            setActiveQuickStart(id, tasks?.length);
-            onClick();
-          }
-        }}
-        // https://github.com/patternfly/patternfly-react/issues/7039
-        href={link?.href}
-        data-test={`tile ${id}`}
-        description={
+    <Card
+      id={`${id}-catalog-tile`}
+      style={{ height: '100%' }}
+      data-testid={`qs-card-${camelize(displayName)}`}
+      {...(isActive && {
+        isClickable: true,
+        isSelectable: true,
+        isSelected: true,
+        isClicked: true,
+      })}
+    >
+      <CardHeader
+        {...(action && {
+          actions: { actions: additionalAction },
+        })}
+      >
+        {quickStartIcon}
+      </CardHeader>
+      <CardTitle>
+        <QuickStartTileHeader
+          name={displayName}
+          onSelect={onSelect}
+          quickStartId={id}
+        />
+      </CardTitle>
+      <CardBody>
+        <Stack hasGutter>
+          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+            {type && <Label color={type.color}>{type.text}</Label>}
+            {durationMinutes && (
+              <Label variant="outline" data-test="duration" icon={<OutlinedClockIcon />}>
+                {getResource('{{duration, number}} minutes', durationMinutes).replace(
+                  '{{duration, number}}',
+                  durationMinutes,
+                )}
+              </Label>
+            )}
+            {status !== QuickStartStatus.NOT_STARTED && (
+              <Label
+                variant="outline"
+                color={statusColorMap[status] as "green" | "purple" | "grey"}
+                icon={<StatusIcon status={status} />}
+                data-test="status"
+              >
+                {statusLocaleMap[status]}
+              </Label>
+            )}
+          </Flex>
           <QuickStartTileDescription description={description} prerequisites={prerequisites} />
-        }
-        footer={footerComponent}
-        tabIndex={0}
-      />
-    </div>
+        </Stack>
+      </CardBody>
+      <CardFooter>{footerComponent}</CardFooter>
+    </Card>
   );
 };
 

package/src/catalog/QuickStartTileDescription.tsx

@@ -1,18 +1,9 @@
 import * as React from 'react';
-import {
-  Button,
-  Popover,
-  Text,
-  TextList,
-  TextListItem,
-  TextVariants,
-} from '@patternfly/react-core';
+import { Button, Flex, Popover } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 
-import './QuickStartTileDescription.scss';
-
 interface QuickStartTileDescriptionProps {
   description: string;
   prerequisites?: string[];
@@ -23,55 +14,50 @@ const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
 }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   const prereqs = prerequisites?.filter((p) => p);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+
   return (
     <>
-      <QuickStartMarkdownView
-        content={description}
-        className="pfext-quick-start-tile-description"
-      />
+      <QuickStartMarkdownView content={description} />
       {prereqs?.length > 0 && (
-        <div className="pfext-quick-start-tile-prerequisites">
-          <Text component={TextVariants.h5} className="pfext-quick-start-tile-prerequisites__text">
+        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+          <h5>
             {getResource('Prerequisites ({{totalPrereqs}})').replace(
               '{{totalPrereqs}}',
               prereqs.length,
             )}{' '}
-          </Text>
+          </h5>
+          <Button
+            variant="link"
+            isInline
+            data-testid="qs-card-prereqs"
+            ref={buttonRef}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            aria-label={getResource('Show prerequisites')}
+          >
+            <InfoCircleIcon />
+          </Button>
           <Popover
             aria-label={getResource('Prerequisites')}
             headerContent={getResource('Prerequisites')}
-            className="pfext-quick-start__base"
+            triggerRef={buttonRef}
             bodyContent={
-              <div className="pfext-popover__base">
-                <TextList
-                  aria-label={getResource('Prerequisites')}
-                  className="pfext-quick-start-tile-prerequisites-list"
-                >
+              <div>
+                <ul aria-label={getResource('Prerequisites')}>
                   {prereqs.map((prerequisite, index) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <TextListItem key={index}>
+                    <li key={index}>
                       <QuickStartMarkdownView content={prerequisite} />
-                    </TextListItem>
+                    </li>
                   ))}
-                </TextList>
+                </ul>
               </div>
             }
-          >
-            <Button
-              variant="link"
-              isInline
-              className="pfext-quick-start-tile-prerequisites__icon"
-              data-testid="qs-card-prereqs"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-              aria-label={getResource('Show prerequisites')}
-            >
-              <InfoCircleIcon />
-            </Button>
-          </Popover>
-        </div>
+          />
+        </Flex>
       )}
     </>
   );

package/src/catalog/QuickStartTileFooter.tsx

@@ -7,35 +7,28 @@ interface QuickStartTileFooterProps {
   quickStartId: string;
   status: string;
   totalTasks?: number;
+  onClickContinue: (
+    e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>,
+  ) => void;
 }
 
 const QuickStartTileFooter: React.FC<QuickStartTileFooterProps> = ({
   quickStartId,
   status,
   totalTasks,
+  onClickContinue,
 }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const { activeQuickStartID, startQuickStart, restartQuickStart } = React.useContext<
-    QuickStartContextValues
-  >(QuickStartContext);
+  const { activeQuickStartID, startQuickStart, restartQuickStart } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
 
-  const start = React.useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      startQuickStart(quickStartId, totalTasks);
-    },
-    [quickStartId, startQuickStart, totalTasks],
-  );
+  const start = React.useCallback(() => {
+    startQuickStart(quickStartId, totalTasks);
+  }, [quickStartId, startQuickStart, totalTasks]);
 
-  const restart = React.useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      restartQuickStart(quickStartId, totalTasks);
-    },
-    [quickStartId, restartQuickStart, totalTasks],
-  );
+  const restart = React.useCallback(() => {
+    restartQuickStart(quickStartId, totalTasks);
+  }, [quickStartId, restartQuickStart, totalTasks]);
 
   return (
     <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
@@ -57,6 +50,7 @@ const QuickStartTileFooter: React.FC<QuickStartTileFooterProps> = ({
         <FlexItem>
           <Button
             variant="link"
+            onClick={onClickContinue}
             isInline
             data-testid="qs-card-inProgress-resume"
             id={`${quickStartId}-continue`}