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

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

@@ -79,6 +79,7 @@ export interface QuickStartContextValues {
   setLoading?: any;
   alwaysShowTaskReview?: boolean;
   setAlwaysShowTaskReview?: any;
+  focusOnQuickStart?: boolean;
 }
 
 export const QuickStartContextDefaults = {
@@ -104,6 +105,7 @@ export const QuickStartContextDefaults = {
   markdown: null,
   loading: false,
   alwaysShowTaskReview: true,
+  focusOnQuickStart: true,
 };
 export const QuickStartContext = createContext<QuickStartContextValues>(QuickStartContextDefaults);
 
@@ -150,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);
@@ -418,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,
@@ -467,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;
-  }
-}