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

package/src/catalog/QuickStartTileHeader.tsx

@@ -1,104 +1,27 @@
-import './QuickStartTileHeader.scss';
 import * as React from 'react';
-import { Button, ButtonProps, Flex, Label, Title } from '@patternfly/react-core';
-import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
-import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
-import { StatusIcon } from '@console/shared';
-import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
-import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
+import { Button, Flex, Title } from '@patternfly/react-core';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 
-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;
-}
-
 interface QuickStartTileHeaderProps {
-  status: string;
-  duration: number;
   name: string;
-  type?: QuickStartType;
   quickStartId?: string;
-  action?: QuickstartAction;
+  onSelect: (e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>) => void;
 }
 
-const statusColorMap = {
-  [QuickStartStatus.COMPLETE]: 'green',
-  [QuickStartStatus.IN_PROGRESS]: 'purple',
-  [QuickStartStatus.NOT_STARTED]: 'grey',
-};
-
 const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
-  status,
-  duration,
   name,
-  type,
   quickStartId,
-  action,
+  onSelect,
 }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-
-  const statusLocaleMap = {
-    [QuickStartStatus.COMPLETE]: getResource('Complete'),
-    [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
-    [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
-  };
-
-  const ActionIcon = action?.icon || OutlinedBookmarkIcon;
 
   return (
-    <div className="pfext-quick-start-tile-header">
-      <Flex flexWrap={{ default: 'nowrap' }}>
-        <Title headingLevel="h3" data-test="title" id={quickStartId}>
+    <Flex flexWrap={{ default: 'nowrap' }}>
+      <Title headingLevel="h3" data-test="title" id={quickStartId}>
+        <Button variant="link" isInline onClick={onSelect}>
           <QuickStartMarkdownView content={name} />
-        </Title>
-        {action && (
-          <Button
-            aria-label={action['aria-label']}
-            icon={<ActionIcon />}
-            variant="plain"
-            onClick={action.onClick}
-            {...action.buttonProps}
-          />
-        )}
-      </Flex>
-      <div className="pfext-quick-start-tile-header__status">
-        {type && (
-          <Label className="pfext-quick-start-tile-header--margin" color={type.color}>
-            {type.text}
-          </Label>
-        )}
-        {duration && (
-          <Label
-            variant="outline"
-            data-test="duration"
-            icon={<OutlinedClockIcon />}
-            className="pfext-quick-start-tile-header--margin"
-          >
-            {getResource('{{duration, number}} minutes', duration).replace(
-              '{{duration, number}}',
-              duration,
-            )}
-          </Label>
-        )}
-        {status !== QuickStartStatus.NOT_STARTED && (
-          <Label
-            variant="outline"
-            color={statusColorMap[status]}
-            icon={<StatusIcon status={status} />}
-            data-test="status"
-          >
-            {statusLocaleMap[status]}
-          </Label>
-        )}
-      </div>
-    </div>
+        </Button>
+      </Title>
+    </Flex>
   );
 };
 

package/src/catalog/Toolbar/QuickStartCatalogFilter.tsx

@@ -6,8 +6,6 @@ import {
   QuickStartCatalogFilterStatusWrapper,
 } from './QuickStartCatalogFilterItems';
 
-import './QuickStartCatalogFilter.scss';
-
 interface QuickStartCatalogFilterProps extends Omit<ToolbarProps, 'ref'> {
   quickStartsCount: number;
   onSearchInputChange: any;
@@ -20,13 +18,13 @@ const QuickStartCatalogFilter: React.FC<QuickStartCatalogFilterProps> = ({
   onStatusChange = () => {},
   ...props
 }) => (
-    <Toolbar usePageInsets className="pfext-quick-start-catalog-filter__flex" {...props}>
-      <ToolbarContent>
-        <QuickStartCatalogFilterSearchWrapper onSearchInputChange={onSearchInputChange} />
-        <QuickStartCatalogFilterStatusWrapper onStatusChange={onStatusChange} />
-        <QuickStartCatalogFilterCountWrapper quickStartsCount={quickStartsCount} />
-      </ToolbarContent>
-    </Toolbar>
-  );
+  <Toolbar {...props}>
+    <ToolbarContent>
+      <QuickStartCatalogFilterSearchWrapper onSearchInputChange={onSearchInputChange} />
+      <QuickStartCatalogFilterStatusWrapper onStatusChange={onStatusChange} />
+      <QuickStartCatalogFilterCountWrapper quickStartsCount={quickStartsCount} />
+    </ToolbarContent>
+  </Toolbar>
+);
 
 export default QuickStartCatalogFilter;

package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx

@@ -17,7 +17,7 @@ import { QuickStartContext, QuickStartContextValues } from '../../utils/quick-st
 export const QuickStartCatalogFilterSearch = ({ searchInputText, handleTextChange, ...props }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   return (
-    <ToolbarItem className="pfext-quick-start-catalog-filter__input">
+    <ToolbarItem>
       <SearchInput
         placeholder={getResource('Filter by keyword...')}
         value={searchInputText}
@@ -71,10 +71,7 @@ export const QuickStartCatalogFilterSelect = ({
 export const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   return (
-    <ToolbarItem
-      className="pfext-quick-start-catalog-filter__count"
-      align={{ default: 'alignEnd' }}
-    >
+    <ToolbarItem align={{ default: 'alignEnd' }}>
       {getResource('{{count, number}} item', quickStartsCount).replace(
         '{{count, number}}',
         quickStartsCount,

package/src/catalog/__tests__/QuickStartCatalog.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Gallery, GalleryItem } from '@patternfly/react-core';
+import { Gallery, Card } from '@patternfly/react-core';
 import { shallow } from 'enzyme';
 import { EmptyBox } from '@console/internal/components/utils';
 import { getQuickStarts } from '../../data/test-utils';
@@ -25,10 +25,10 @@ describe('QuickStartCatalog', () => {
     const QuickStartCatalogWrapper = shallow(<QuickStartCatalog {...QuickStartCatalogProps} />);
     expect(QuickStartCatalogWrapper.find(Gallery).exists()).toBeTruthy();
   });
-  it('should load galleryItems equal to the number of QS', () => {
+  xit('should load galleryItems equal to the number of QS', () => {
     const QuickStartCatalogProps = { quickStarts: getQuickStarts(), onClick: jest.fn() };
     const QuickStartCatalogWrapper = shallow(<QuickStartCatalog {...QuickStartCatalogProps} />);
-    const galleryItems = QuickStartCatalogWrapper.find(GalleryItem);
+    const galleryItems = QuickStartCatalogWrapper.find(Card);
     expect(galleryItems.exists()).toBeTruthy();
     expect(galleryItems.length).toEqual(getQuickStarts().length);
   });

package/src/catalog/__tests__/QuickStartTile.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CatalogTile } from '@patternfly/react-catalog-view-extension';
+import { Card } from '@patternfly/react-core';
 import { shallow } from 'enzyme';
 import { getQuickStarts } from '../../data/test-utils';
 import { QuickStartStatus } from '../../utils/quick-start-types';
@@ -17,9 +17,9 @@ describe('QuickStartTile', () => {
         isActive={false}
       />,
     );
-    const catalogTile = wrapper.find(CatalogTile);
+    const catalogTile = wrapper.find(Card);
     expect(catalogTile.exists()).toBeTruthy();
-    expect(catalogTile.prop('featured')).toBe(false);
+    expect(catalogTile.prop('isSelected')).toBe(false);
   });
 
   it('should load proper catalog tile with featured property', () => {
@@ -31,8 +31,8 @@ describe('QuickStartTile', () => {
         isActive
       />,
     );
-    const catalogTile = wrapper.find(CatalogTile);
+    const catalogTile = wrapper.find(Card);
     expect(catalogTile.exists()).toBeTruthy();
-    expect(catalogTile.prop('featured')).toBe(true);
+    expect(catalogTile.prop('isSelected')).toBe(true);
   });
 });

package/src/catalog/__tests__/QuickStartTileDescription.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Popover, Text } from '@patternfly/react-core';
+import { Popover } from '@patternfly/react-core';
 import { shallow } from 'enzyme';
 import { getQuickStarts } from '../../data/test-utils';
 import QuickStartTileDescription from '../QuickStartTileDescription';

package/src/catalog/index.ts

@@ -4,6 +4,6 @@ export { default as QuickStartTile } from './QuickStartTile';
 export { default as QuickStartTileDescription } from './QuickStartTileDescription';
 export { default as QuickStartTileFooter } from './QuickStartTileFooter';
 export { default as QuickStartTileFooterExternal } from './QuickStartTileFooterExternal';
-export { default as QuickStartTileHeader, QuickstartAction } from './QuickStartTileHeader';
+export { default as QuickStartTileHeader } from './QuickStartTileHeader';
 export * from './Toolbar/QuickStartCatalogFilterItems';
 export * from './Catalog';

package/src/controller/QuickStartConclusion.tsx

@@ -45,16 +45,16 @@ const QuickStartConclusion: React.FC<QuickStartConclusionProps> = ({
             variant="link"
             onClick={() => onQuickStartChange(nextQuickStart.metadata.name)}
             isInline
+            icon={<ArrowRightIcon />}
+            iconPosition="end"
             isBlock
             key={index}
+            style={{ marginTop: 'var(--pf-t--global--spacer--md' }}
           >
             {getResource('Start {{nextQSDisplayName}} quick start').replace(
               '{{nextQSDisplayName}}',
               nextQuickStart?.spec?.displayName,
-            )}{' '}
-            <ArrowRightIcon
-              style={{ marginLeft: 'var(--pf-t--global--spacer--xs)', verticalAlign: 'middle' }}
-            />
+            )}
           </Button>
         ))}
     </>

package/src/controller/QuickStartContent.scss

@@ -1,12 +1,8 @@
-.pfext-quick-start-content {
+.pfext-quick-start-task {
   flex: 1 1 0;
   overflow: auto;
-  padding: var(--pf-t--global--spacer--lg);
-  font-size: 16px;
 
-  .pf-v6-c-alert__description {
-    p {
-      font-size: 13px;
-    }
+  .pf-v6-c-code-block, .pf-v6-c-alert, .pf-v6-c-accordion {
+    margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
   }
 }

package/src/controller/QuickStartContent.tsx

@@ -3,9 +3,6 @@ import { QuickStart, QuickStartTaskStatus } from '../utils/quick-start-types';
 import QuickStartConclusion from './QuickStartConclusion';
 import QuickStartIntroduction from './QuickStartIntroduction';
 import QuickStartTasks from './QuickStartTasks';
-
-import './QuickStartContent.scss';
-
 interface QuickStartContentProps {
   quickStart: QuickStart;
   nextQuickStarts?: QuickStart[];
@@ -15,6 +12,7 @@ interface QuickStartContentProps {
   onTaskReview: (taskStatus: QuickStartTaskStatus) => void;
   onQuickStartChange?: (quickStartId: string) => void;
 }
+import './QuickStartContent.scss';
 
 const QuickStartContent = React.forwardRef<HTMLDivElement, QuickStartContentProps>(
   (
@@ -32,10 +30,10 @@ const QuickStartContent = React.forwardRef<HTMLDivElement, QuickStartContentProp
     const {
       spec: { introduction, tasks, conclusion, prerequisites },
     } = quickStart;
-    const totalTasks = tasks.length;
+    const totalTasks = tasks?.length;
 
     return (
-      <div className="pfext-quick-start-content" ref={ref}>
+      <div className="pfext-quick-start-task" ref={ref}>
         {taskNumber === -1 && (
           <QuickStartIntroduction
             tasks={tasks}

package/src/controller/QuickStartFooter.scss

@@ -1,13 +1,3 @@
 .pfext-quick-start-footer {
-  background-color: var(--pf-t--global--background--color--primary--default);   // this is an example about how we should use PF variables
-  flex: 0 0 auto;
-  padding: var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg);
-
-  &__actionbtn {
-    margin-right: var(--pf-t--global--spacer--md);
-  }
-
-  &__restartbtn {
-    float: right;
-  }
+  padding-top: var(--pf-t--global--spacer--md);
 }

package/src/controller/QuickStartFooter.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { Button } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStartStatus } from '../utils/quick-start-types';
 import { camelize } from '../utils/quick-start-utils';
-
+import { ActionList, ActionListItem, ActionListGroup } from '@patternfly/react-core';
 import './QuickStartFooter.scss';
 
 export interface QuickStartFooterProps {
   status: QuickStartStatus;
-  footerClass: string;
   taskNumber: number;
   totalTasks: number;
   onNext: () => void;
   onBack: () => void;
   quickStartId: string;
+  className?: string;
 }
 
 const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
@@ -22,24 +23,29 @@ const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
   totalTasks,
   onNext,
   onBack,
-  footerClass,
   quickStartId,
+  className,
 }) => {
-  const { restartQuickStart, getResource } = React.useContext<QuickStartContextValues>(
-    QuickStartContext,
-  );
+  const { restartQuickStart, getResource } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
 
-  const PrimaryButtonText = React.useMemo(() => ({
+  const PrimaryButtonText = React.useMemo(
+    () => ({
       START: getResource('Start'),
       CONTINUE: getResource('Continue'),
       NEXT: getResource('Next'),
       CLOSE: getResource('Close'),
-    }), [getResource]);
+    }),
+    [getResource],
+  );
 
-  const SecondaryButtonText = React.useMemo(() => ({
+  const SecondaryButtonText = React.useMemo(
+    () => ({
       BACK: getResource('Back'),
       RESTART: getResource('Restart'),
-    }), [getResource]);
+    }),
+    [getResource],
+  );
 
   const onRestart = React.useCallback(
     (e: React.SyntheticEvent) => {
@@ -70,7 +76,6 @@ const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
     () => (
       <Button
         variant="primary"
-        className="pfext-quick-start-footer__actionbtn"
         onClick={onNext}
         data-testid={`qs-drawer-${camelize(getPrimaryButtonText)}`}
         data-test={`${getPrimaryButtonText} button`}
@@ -100,12 +105,7 @@ const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
   const getSideNoteAction = React.useMemo(
     () =>
       taskNumber !== -1 && (
-        <Button
-          variant="link"
-          className="pfext-quick-start-footer__restartbtn"
-          onClick={onRestart}
-          data-testid="qs-drawer-side-note-action"
-        >
+        <Button variant="link" onClick={onRestart} data-testid="qs-drawer-side-note-action">
           {SecondaryButtonText.RESTART}
         </Button>
       ),
@@ -113,10 +113,16 @@ const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
   );
 
   return (
-    <div className={`pfext-quick-start-footer ${footerClass}`}>
-      {getPrimaryButton}
-      {getSecondaryButton}
-      {getSideNoteAction}
+    <div className={css('pfext-quick-start-footer', className)}>
+      <ActionList>
+        <ActionListGroup>
+          <ActionListItem>{getPrimaryButton}</ActionListItem>
+          <ActionListItem>{getSecondaryButton}</ActionListItem>
+        </ActionListGroup>
+        <ActionListGroup>
+          <ActionListItem>{getSideNoteAction}</ActionListItem>
+        </ActionListGroup>
+      </ActionList>
     </div>
   );
 };

package/src/controller/QuickStartIntroduction.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { ExpandableSection, List, ListItem } from '@patternfly/react-core';
+import { ExpandableSection, List, ListItem, Stack } from '@patternfly/react-core';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
 import TaskHeaderList from './QuickStartTaskHeaderList';
 
-import './QuickStartIntroduction.scss';
-
 interface QuickStartIntroductionProps {
   introduction: string;
   tasks: QuickStartTask[];
@@ -32,32 +30,29 @@ const QuickStartIntroduction: React.FC<QuickStartIntroductionProps> = ({
         prereqs.length,
       )}
       onToggle={() => setIsPrereqsExpanded(!isPrereqsExpanded)}
-      className="pfext-quick-start-intro__prereq"
     >
-      <List className="pfext-quick-start-intro__prereq-list">
+      <List>
         {prereqs.map((pr) => (
-            <ListItem key={pr} className="pfext-quick-start-intro__prereq-list__item">
-              <span className="pfext-quick-start-intro__prereq-list__item-content">
-                <QuickStartMarkdownView content={pr} />
-              </span>
-            </ListItem>
-          ))}
+          <ListItem key={pr}>
+            <QuickStartMarkdownView content={pr} />
+          </ListItem>
+        ))}
       </List>
     </ExpandableSection>
   );
   return (
-    <>
+    <Stack hasGutter>
       <QuickStartMarkdownView content={introduction} />
       {prereqList}
-      <p style={{ marginBottom: 'var(--pf-t--global--spacer--md)' }}>
+      <p>
         {getResource(
           'In this quick start, you will complete {{count, number}} task',
-          tasks.length,
-        ).replace('{{count, number}}', tasks.length)}
+          tasks?.length,
+        ).replace('{{count, number}}', tasks?.length || 0)}
         :
       </p>
       <TaskHeaderList tasks={tasks} allTaskStatuses={allTaskStatuses} onTaskSelect={onTaskSelect} />
-    </>
+    </Stack>
   );
 };
 

package/src/controller/QuickStartTaskHeader.scss

@@ -1,58 +1,36 @@
+button.pf-v6-c-wizard__nav-link {
+  margin-bottom: var(--pf-t--global--spacer--md);
+}
+button.pf-v6-c-wizard__nav-link.pf-m-current {
+  --pf-v6-c-wizard__nav-link-main--BackgroundColor: transparent;
+}
+button.pf-v6-c-wizard__nav-link::before {
+  background-color: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
+  color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
+  min-width: var(--pf-v6-c-wizard__nav-link--before--Width);
+}
+
 .pfext-quick-start-task-header {
-  margin-bottom: var(--pf-t--global--spacer--sm);
-  display: grid;
-  grid-template-columns: min-content auto;
-  font-size: var(--pf-t--global--font--size--body--default);
   button::before {
     content: none;
   }
 
   &__title {
-    color: var(--pf-t--global--text--color--brand--default) !important;
-    margin-right: var(--pf-t--global--spacer--md) !important;
+    font-family: var(--pf-t--global--font--family--body);
+    font-weight: var(---pf-t--global--font--weight--body--bold);
+    font-size: var(--pf-t--global--font--size--body--lg);
   }
 
   &__subtitle {
-    font-size: var(--pf-t--global--font--size--body--sm);
-    color: var(--pf-t--global--text--color--subtle) !important;
+    font-size: var(--pf-t--global--font--size--body--default);
+    color: var(--pf-t--global--text--color--subtle);
+    font-weight: var(--pf-t--global--font--weight--body)
   }
 
   &__tryagain {
     display: block;
     font-size: var(--pf-t--global--font--size--body--default);
-    color: var(--pf-t--global--text--color--subtle) !important;
-  }
-
-  &__title-success {
-    color: var(--pf-t--global--text--color--status--success--default) !important;
-  }
-
-  &__title-failed {
-    color: var(--pf-t--global--text--color--status--danger--default) !important;
-  }
-
-  &__task-icon {
-    &-init {
-      background-color: var(--pf-t--global--color--brand--default);
-      border-radius: var(--pf-t--global--border--radius--large);
-      color: var(--pf-t--global--text--color--on-brand--default);
-      display: inline-flex;
-      justify-content: center;
-      height: 1.5em;
-      width: 1.5em;
-    }
-
-    &-success,
-    &-failed {
-      vertical-align: middle !important;
-    }
-
-    &-success {
-      color: var(--pf-t--global--text--color--status--success--default) !important;
-    }
-
-    &-failed {
-      color: var(--pf-t--global--text--color--status--danger--default) !important;
-    }
+    color: var(--pf-t--global--text--color--subtle);
+    font-weight: var(--pf-t--global--font--weight--body);
   }
 }