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

package/src/controller/QuickStartTaskHeader.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
-import { Icon, Text, TextVariants, Title, WizardNavItem } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { css } from '@patternfly/react-styles';
-import { markdownConvert } from '../ConsoleInternal/components/markdown-view';
-import { removeParagraphWrap } from '../QuickStartMarkdownView';
-import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { Title, WizardNavItem } from '@patternfly/react-core';
+import { QuickStartContext } from '../utils/quick-start-context';
 import { QuickStartTaskStatus } from '../utils/quick-start-types';
 
 import './QuickStartTaskHeader.scss';
@@ -21,40 +16,6 @@ interface QuickStartTaskHeaderProps {
   children?: React.ReactNode;
 }
 
-const TaskIcon: React.FC<{
-  taskIndex: number;
-  taskStatus: QuickStartTaskStatus;
-}> = ({ taskIndex, taskStatus }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const success = taskStatus === QuickStartTaskStatus.SUCCESS;
-  const failed = taskStatus === QuickStartTaskStatus.FAILED;
-
-  const classNames = css('pfext-icon-and-text__icon', {
-    'pfext-quick-start-task-header__task-icon-init': !failed && !success,
-  });
-  let content: React.ReactNode;
-
-  if (success) {
-    content = (
-      <Icon size="md">
-        <CheckCircleIcon className="pfext-quick-start-task-header__task-icon-success" />{' '}
-      </Icon>
-    );
-  } else if (failed) {
-    content = (
-      <Icon size="md">
-        <ExclamationCircleIcon className="pfext-quick-start-task-header__task-icon-failed" />
-      </Icon>
-    );
-  } else {
-    content = getResource('{{taskIndex, number}}', taskIndex).replace(
-      '{{taskIndex, number}}',
-      taskIndex,
-    );
-  }
-  return <span className={classNames}>{content}</span>;
-};
-
 const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
   title,
   taskIndex,
@@ -74,17 +35,8 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
       titleRef.current.parentNode.focus();
     }
   }, [focusOnQuickStart, isActiveTask]);
-  const classNames = css('pfext-quick-start-task-header__title', {
-    'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
-    'pfext-quick-start-task-header__title-failed':
-      taskStatus === (QuickStartTaskStatus.FAILED || QuickStartTaskStatus.VISITED),
-  });
-  // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
-  // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
   const failedReview = taskStatus === QuickStartTaskStatus.FAILED;
 
-  // TODO: toned down when this is shown, investigate further when we should display it
-  // related: https://github.com/patternfly/patternfly-quickstarts/issues/104
   const tryAgain = failedReview && (
     <>
       <div />
@@ -94,23 +46,31 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
 
   const content = (
     <div ref={titleRef}>
-        <Title headingLevel="h3">
-          <span dangerouslySetInnerHTML={{ __html: removeParagraphWrap(markdownConvert(title)) }} />
-          {isActiveTask && subtitle && (
+      <Title headingLevel="h3" size={size}>
+        <span className="pfext-quick-start-task-header__title">{title}</span>
+        {isActiveTask && subtitle && (
+          <span>
+            {' '}
             <span
               data-test-id="quick-start-task-subtitle"
+              className="pfext-quick-start-task-header__subtitle"
             >
-              {' '}
-              <Text component={TextVariants.small}>
-                {subtitle}
-              </Text>
+              {subtitle}
             </span>
-          )}
+          </span>
+        )}
         {tryAgain}
-        </Title>
-    </div>    
+      </Title>
+    </div>
   );
 
+  let status: 'default' | 'error' | 'success' = 'default';
+  if (taskStatus === QuickStartTaskStatus.FAILED) {
+    status = 'error';
+  } else if (taskStatus === QuickStartTaskStatus.SUCCESS) {
+    status = 'success';
+  }
+
   return (
     <WizardNavItem
       content={content}
@@ -118,6 +78,7 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
       onClick={() => onTaskSelect(taskIndex - 1)}
       component="button"
       isCurrent={isActiveTask}
+      status={status}
     >
       {children}
     </WizardNavItem>

package/src/controller/QuickStartTaskHeaderList.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import { List } from '@patternfly/react-core';
 import { QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
 import TaskHeader from './QuickStartTaskHeader';
 
-import './QuickStartTaskHeaderList.scss';
-
 interface QuickStartTaskHeaderListProps {
   tasks: QuickStartTask[];
   allTaskStatuses: QuickStartTaskStatus[];
@@ -15,8 +12,9 @@ const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
   tasks,
   allTaskStatuses,
   onTaskSelect,
-}) => tasks.length > 0 ? (
-    <List className="pf-v6-c-wizard__nav-list">
+}) =>
+  tasks?.length > 0 ? (
+    <div className="pf-v6-c-wizard__nav-list">
       {tasks.map((task, index) => (
         <TaskHeader
           key={task.title}
@@ -27,7 +25,7 @@ const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
           onTaskSelect={onTaskSelect}
         />
       ))}
-    </List>
+    </div>
   ) : null;
 
 export default QuickStartTaskHeaderList;

package/src/controller/QuickStartTaskReview.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Alert, Radio } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import {
@@ -8,8 +7,6 @@ import {
   QuickStartTaskStatus,
 } from '../utils/quick-start-types';
 
-import './QuickStartTaskReview.scss';
-
 interface QuickStartTaskReviewProps {
   review: QuickStartTaskReviewType;
   taskStatus: QuickStartTaskStatus;
@@ -35,20 +32,17 @@ const QuickStartTaskReview: React.FC<QuickStartTaskReviewProps> = ({
   const { instructions, failedTaskHelp: taskHelp } = review;
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
 
-  const alertClassNames = css('pfext-quick-start-task-review', {
-    'pfext-quick-start-task-review--success': taskStatus === QuickStartTaskStatus.SUCCESS,
-    'pfext-quick-start-task-review--failed': taskStatus === QuickStartTaskStatus.FAILED,
-  });
-
-  const title = <span className={alertClassNames}>{getResource('Check your work')}</span>;
-
   return (
     <Alert
-      className="pfext-quick-start-task-review-alert"
       variant={getAlertVariant(taskStatus)}
-      title={title}
+      title={getResource('Check your work')}
       isInline
       role="alert"
+      style={
+        {
+          marginBottom: 'var(--pf-t--global--spacer--md)',
+        } as React.CSSProperties
+      }
     >
       <QuickStartMarkdownView content={instructions} />
       <span className="pfext-quick-start-task-review__actions">

package/src/controller/QuickStartTasks.tsx

@@ -5,8 +5,7 @@ import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start
 import { QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
 import TaskHeader from './QuickStartTaskHeader';
 import QuickStartTaskReview from './QuickStartTaskReview';
-
-import './QuickStartTasks.scss';
+import { Stack } from '@patternfly/react-core';
 
 interface QuickStartTaskProps {
   tasks: QuickStartTask[];
@@ -23,11 +22,10 @@ const QuickStartTasks: React.FC<QuickStartTaskProps> = ({
   onTaskReview,
   onTaskSelect,
 }) => {
-  const { getResource, alwaysShowTaskReview } = React.useContext<QuickStartContextValues>(
-    QuickStartContext,
-  );
+  const { getResource, alwaysShowTaskReview } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
   return (
-    <div className="pfext-quick-start-tasks__list">
+    <div className="pf-v6-c-wizard__nav-list" style={{ padding: '0 0 0 0' }}>
       <ul>
         {tasks
           .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
@@ -52,7 +50,7 @@ const QuickStartTasks: React.FC<QuickStartTaskProps> = ({
                   onTaskSelect={onTaskSelect}
                 >
                   {isActiveTask && (
-                    <div className="pfext-quick-start-task__content">
+                    <Stack hasGutter>
                       <QuickStartMarkdownView content={description} />
                       {shouldShowTaskReview && (
                         <QuickStartTaskReview
@@ -61,7 +59,7 @@ const QuickStartTasks: React.FC<QuickStartTaskProps> = ({
                           onTaskReview={onTaskReview}
                         />
                       )}
-                    </div>
+                    </Stack>
                   )}
                 </TaskHeader>
               </React.Fragment>

package/src/controller/__tests__/QuickStartConclusion.spec.tsx

@@ -43,12 +43,7 @@ describe('QuickStartConclusion', () => {
   });
 
   it('should render conclusion if there are no failed tasks', () => {
-    expect(
-      wrapper
-        .find(QuickStartMarkdownView)
-        .first()
-        .props().content,
-    ).toEqual('conclusion');
+    expect(wrapper.find(QuickStartMarkdownView).first().props().content).toEqual('conclusion');
   });
 
   it('should render link for next quick start if nextQuickStart prop is available and there are no failed tasks', () => {
@@ -58,12 +53,9 @@ describe('QuickStartConclusion', () => {
         nextQuickStarts={[getQuickStartByName('explore-pipelines', allQuickStarts)]}
       />,
     );
-    expect(
-      wrapper
-        .find(Button)
-        .at(0)
-        .props().children[0],
-    ).toEqual(`${i18nNS}~Start Installing the Pipelines Operator quick start`);
+    expect(wrapper.find(Button).at(0).props().children).toEqual(
+      `${i18nNS}~Start Installing the Pipelines Operator quick start`,
+    );
   });
 
   it('should not render link for next quick start if nextQuickStart props is not available', () => {
@@ -74,7 +66,7 @@ describe('QuickStartConclusion', () => {
     wrapper = shallow(
       <QuickStartConclusion
         {...props}
-        nextQuickStart={getQuickStartByName('explore-pipelines', allQuickStarts)}
+        nextQuickStarts={[getQuickStartByName('explore-pipelines', allQuickStarts)]}
         allTaskStatuses={[
           QuickStartTaskStatus.FAILED,
           QuickStartTaskStatus.SUCCESS,
@@ -82,12 +74,7 @@ describe('QuickStartConclusion', () => {
         ]}
       />,
     );
-    expect(
-      wrapper
-        .find(QuickStartMarkdownView)
-        .first()
-        .props().content,
-    ).toEqual(
+    expect(wrapper.find(QuickStartMarkdownView).first().props().content).toEqual(
       `${i18nNS}~One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.`,
     );
     expect(wrapper.find(Button).length).toBe(0);

package/src/controller/__tests__/QuickStartFooter.spec.tsx

@@ -39,12 +39,7 @@ describe('QuickStartFooter', () => {
     const footerButtons = quickStartFooterWrapper.find(Button);
     expect(footerButtons.exists()).toBeTruthy();
     expect(footerButtons.length).toEqual(1);
-    expect(
-      footerButtons
-        .at(0)
-        .childAt(0)
-        .text(),
-    ).toBe('quickstart~Start');
+    expect(footerButtons.at(0).childAt(0).text()).toBe('quickstart~Start');
   });
 
   it('should load Continue and Restart buttons for in progress tours at into page', () => {
@@ -62,18 +57,8 @@ describe('QuickStartFooter', () => {
     const footerButtons = quickStartFooterWrapper.find(Button);
     expect(footerButtons.exists()).toBeTruthy();
     expect(footerButtons.length).toEqual(2);
-    expect(
-      footerButtons
-        .at(0)
-        .childAt(0)
-        .text(),
-    ).toBe('quickstart~Continue');
-    expect(
-      footerButtons
-        .at(1)
-        .childAt(0)
-        .text(),
-    ).toBe('quickstart~Restart');
+    expect(footerButtons.at(0).childAt(0).text()).toBe('quickstart~Continue');
+    expect(footerButtons.at(1).childAt(0).text()).toBe('quickstart~Restart');
   });
 
   it('should load Next and Back buttons, and Restart link for in progress tours in task page', () => {
@@ -91,24 +76,9 @@ describe('QuickStartFooter', () => {
     const footerButtons = quickStartFooterWrapper.find(Button);
     expect(footerButtons.exists()).toBeTruthy();
     expect(footerButtons.length).toEqual(3);
-    expect(
-      footerButtons
-        .at(0)
-        .childAt(0)
-        .text(),
-    ).toBe('quickstart~Next');
-    expect(
-      footerButtons
-        .at(1)
-        .childAt(0)
-        .text(),
-    ).toBe('quickstart~Back');
-    expect(
-      footerButtons
-        .at(2)
-        .childAt(0)
-        .text(),
-    ).toBe('quickstart~Restart');
+    expect(footerButtons.at(0).childAt(0).text()).toBe('quickstart~Next');
+    expect(footerButtons.at(1).childAt(0).text()).toBe('quickstart~Back');
+    expect(footerButtons.at(2).childAt(0).text()).toBe('quickstart~Restart');
   });
 
   it('should load Close, Back and Restart buttons for completed tours in conclusion page', () => {
@@ -126,23 +96,8 @@ describe('QuickStartFooter', () => {
     const footerButtons = quickStartFooterWrapper.find(Button);
     expect(footerButtons.exists()).toBeTruthy();
     expect(footerButtons.length).toEqual(3);
-    expect(
-      footerButtons
-        .at(0)
-        .childAt(0)
-        .text(),
-    ).toBe('quickstart~Close');
-    expect(
-      footerButtons
-        .at(1)
-        .childAt(0)
-        .text(),
-    ).toBe('quickstart~Back');
-    expect(
-      footerButtons
-        .at(2)
-        .childAt(0)
-        .text(),
-    ).toBe('quickstart~Restart');
+    expect(footerButtons.at(0).childAt(0).text()).toBe('quickstart~Close');
+    expect(footerButtons.at(1).childAt(0).text()).toBe('quickstart~Back');
+    expect(footerButtons.at(2).childAt(0).text()).toBe('quickstart~Restart');
   });
 });

package/src/controller/__tests__/QuickStartTaskHeader.spec.tsx

@@ -27,7 +27,7 @@ describe('QuickStartTaskHeader', () => {
     expect(
       wrapper.find(WizardNavItem).dive().find('[data-test-id="quick-start-task-subtitle"]').props()
         .children,
-    ).toEqual([' ', props.subtitle]);
+    ).toEqual(props.subtitle);
   });
   it('should not render subtitle if task is not active', () => {
     wrapper = shallow(<QuickStartTaskHeader {...props} isActiveTask={false} />);

package/src/controller/__tests__/QuickStartTaskReview.spec.tsx

@@ -35,11 +35,8 @@ describe('QuickStartTaskReview', () => {
 
   it('should render task help in markdown when task status is failed', () => {
     wrapper = shallow(<QuickStartTaskReview {...props} />);
-    expect(
-      wrapper
-        .find(QuickStartMarkdownView)
-        .at(1)
-        .props().content,
-    ).toEqual(props.review.failedTaskHelp);
+    expect(wrapper.find(QuickStartMarkdownView).at(1).props().content).toEqual(
+      props.review.failedTaskHelp,
+    );
   });
 });

package/src/controller/__tests__/QuickStartTasks.spec.tsx

@@ -57,12 +57,9 @@ describe('QuickStartTasks', () => {
         taskNumber={2}
       />,
     );
-    expect(
-      wrapper
-        .find(QuickStartMarkdownView)
-        .at(0)
-        .props().content,
-    ).toEqual(props.tasks[2].description);
+    expect(wrapper.find(QuickStartMarkdownView).at(0).props().content).toEqual(
+      props.tasks[2].description,
+    );
   });
 
   it('should render review when task is active and in Review state', () => {

package/src/styles/_base.scss

@@ -1,51 +1,9 @@
-// Base element styles.
-// Please DO NOT add rules of this type.
-.pfext-quick-start-panel-content__body {
-  dl {
-    margin: 0px; }
-
-  // match pf4 styling / table col head styling
-  dt {
-    font-weight: var(--pf-t--global--font--weight--body--bold); }
-
-  dd {
-    margin-bottom: 20px; }
-
-  dd:last-child {
-    margin-bottom: 0px; }
-
-  input[type="number"] {
-    -webkit-appearance: textfield;
-    appearance: textfield;
-    max-width: 100px;
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-    }
-  }
-
-  input[type="radio"] {
-    margin-right: 7px;
-  }
-
-  .pf-v6-c-list {
-    --pf-v6-c-list--PaddingLeft: 20px;
-  }
+.pfext-quick-start-panel {
+  --pf-v6-c-drawer__panel--PaddingBlockStart: 0;
 }
 
-// drawer
-.pfext-quick-start-panel-content__header,
-.pfext-quick-start-panel-content__body,
-// catalog gallery wrapper
-.pfext-page-layout__content,
-// catalog item prereq popover
 .pfext-popover__base {
   ul {
-      list-style-type: disc;
-  }
-
-  input[type='radio'],
-  input[type='checkbox'] {
-    margin-top: 1px !important;
+      list-style-type: var(--pf-t--global--list-style);
   }
 }

package/src/styles/style.scss

@@ -1,12 +1,7 @@
 @import '@patternfly/patternfly/sass-utilities';
 @import './legacy-bootstrap/variables';
 
-// @import './base';
-// @import './dark-custom-override';
-
-// // React Components
-// @import '../ConsoleInternal/**/*.scss';
-// @import '../ConsoleShared/**/*.scss';
+@import './base';
 
 // legacy bootstrap typography styles for markdown content
 @import './legacy-bootstrap.scss';

package/src/utils/help-topic-context.tsx

@@ -22,9 +22,8 @@ export const HelpTopicContextDefaults = {
   loading: false,
 };
 
-export const HelpTopicContext = React.createContext<HelpTopicContextValues>(
-  HelpTopicContextDefaults,
-);
+export const HelpTopicContext =
+  React.createContext<HelpTopicContextValues>(HelpTopicContextDefaults);
 
 export const useValuesForHelpTopicContext = (
   value: HelpTopicContextValues = {},

package/src/utils/quick-start-context.tsx

@@ -152,12 +152,8 @@ export const useValuesForQuickStartContext = (
     });
   };
   const findResource = useCallback(
-    (resource: string, count?: number) => getResource(
-        resource,
-        count !== undefined ? { count } : null,
-        resourceBundle,
-        language,
-      ),
+    (resource: string, count?: number) =>
+      getResource(resource, count !== undefined ? { count } : null, resourceBundle, language),
     [resourceBundle, language],
   );
   const [loading, setLoading] = React.useState(combinedValue.loading);
@@ -420,9 +416,10 @@ export const useValuesForQuickStartContext = (
 
   const activeQuickStartState = allQuickStartStates?.[activeQuickStartID] ?? {};
 
-  const getQuickStartForId = useCallback((id: string) => allQuickStartStates[id], [
-    allQuickStartStates,
-  ]);
+  const getQuickStartForId = useCallback(
+    (id: string) => allQuickStartStates[id],
+    [allQuickStartStates],
+  );
 
   return {
     allQuickStarts: quickStarts,
@@ -469,7 +466,7 @@ export const QuickStartContextProvider: React.FC<{
   children: React.ReactNode;
   value: QuickStartContextValues;
 }> = ({ children, value }) => (
-    <QuickStartContext.Provider value={useValuesForQuickStartContext(value)}>
-      {children}
-    </QuickStartContext.Provider>
-  );
+  <QuickStartContext.Provider value={useValuesForQuickStartContext(value)}>
+    {children}
+  </QuickStartContext.Provider>
+);

package/src/utils/quick-start-types.ts

@@ -69,5 +69,5 @@ export interface QuickStartExternal {
 
 export interface QuickStartType {
   text: string;
-  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
+  color?: 'green' | 'purple' | 'grey' | 'blue' | 'orange' | 'red' | 'teal' | 'orangered' | 'yellow';
 }

package/src/utils/quick-start-utils.ts

@@ -16,7 +16,8 @@ export const getTaskStatusKey = (taskNumber: number): string => `taskStatus${tas
 export const getQuickStartStatusCount = (
   allQuickStartStates: AllQuickStartStates,
   quickStarts: QuickStart[],
-): Record<QuickStartStatus, number> => quickStarts.reduce(
+): Record<QuickStartStatus, number> =>
+  quickStarts.reduce(
     (totals, item) => {
       totals[getQuickStartStatus(allQuickStartStates, item.metadata.name)]++;
       return totals;
@@ -80,7 +81,8 @@ export const filterQuickStarts = (
   );
 };
 
-export const camelize = (str: string) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
+export const camelize = (str: string) =>
+  str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
     if (+match === 0) {
       return '';
     } // or if (/\s+/.test(match)) for white spaces

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

@@ -1,14 +0,0 @@
-.pfext-icon-and-text {
-  align-items: baseline;
-  display: flex;
-
-  // fix bug where concurrent .pf-v6-c-label are misaligned vertically
-  .pf-v6-c-label__icon & {
-    display: block;
-  }
-}
-
-.pfext-icon-and-text__icon {
-  flex-shrink: 0;
-  margin-right: 5px;
-}

package/src/ConsoleInternal/components/_markdown-view.scss

@@ -1,19 +0,0 @@
-.pfext-markdown-view {
-  &.is-empty {
-    color: #999;
-  }
-  table {
-    display: block;
-    margin-bottom: 11.5px;
-    overflow-x: auto;
-  }
-  td,
-  th {
-    border-bottom: 1px solid #ededed;
-    padding: 10px;
-    vertical-align: top;
-  }
-  th {
-    padding-top: 0;
-  }
-}