@patternfly/quickstarts 2.2.3 → 2.3.1

package/src/controller/QuickStartFooter.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStartStatus } from '../utils/quick-start-types';
+import { camelize } from '../utils/quick-start-utils';
+
+import './QuickStartFooter.scss';
+
+export type QuickStartFooterProps = {
+  status: QuickStartStatus;
+  footerClass: string;
+  taskNumber: number;
+  totalTasks: number;
+  onNext: () => void;
+  onBack: () => void;
+  quickStartId: string;
+};
+
+const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
+  status,
+  taskNumber,
+  totalTasks,
+  onNext,
+  onBack,
+  footerClass,
+  quickStartId,
+}) => {
+  const { restartQuickStart, getResource } = React.useContext<QuickStartContextValues>(
+    QuickStartContext,
+  );
+
+  const PrimaryButtonText = React.useMemo(() => {
+    return {
+      START: getResource('Start'),
+      CONTINUE: getResource('Continue'),
+      NEXT: getResource('Next'),
+      CLOSE: getResource('Close'),
+    };
+  }, [getResource]);
+
+  const SecondaryButtonText = React.useMemo(() => {
+    return {
+      BACK: getResource('Back'),
+      RESTART: getResource('Restart'),
+    };
+  }, [getResource]);
+
+  const onRestart = React.useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      restartQuickStart(quickStartId, totalTasks);
+    },
+    [quickStartId, restartQuickStart, totalTasks],
+  );
+
+  const getPrimaryButtonText = React.useMemo(() => {
+    if (status === QuickStartStatus.NOT_STARTED) {
+      return PrimaryButtonText.START;
+    }
+
+    if (taskNumber === totalTasks) {
+      return PrimaryButtonText.CLOSE;
+    }
+
+    if (taskNumber > -1 && taskNumber < totalTasks) {
+      return PrimaryButtonText.NEXT;
+    }
+
+    return PrimaryButtonText.CONTINUE;
+  }, [taskNumber, totalTasks, PrimaryButtonText, status]);
+
+  const getPrimaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="primary"
+        className="pfext-quick-start-footer__actionbtn"
+        onClick={onNext}
+        data-testid={`qs-drawer-${camelize(getPrimaryButtonText)}`}
+        data-test={`${getPrimaryButtonText} button`}
+      >
+        {getPrimaryButtonText}
+      </Button>
+    ),
+    [getPrimaryButtonText, onNext],
+  );
+
+  const getSecondaryButton = React.useMemo(
+    () =>
+      taskNumber === -1 && status !== QuickStartStatus.NOT_STARTED ? (
+        <Button variant="secondary" onClick={onRestart} data-testid="qs-drawer-restart">
+          {SecondaryButtonText.RESTART}
+        </Button>
+      ) : (
+        taskNumber > -1 && (
+          <Button variant="secondary" onClick={onBack} data-testid="qs-drawer-back">
+            {SecondaryButtonText.BACK}
+          </Button>
+        )
+      ),
+    [onRestart, onBack, SecondaryButtonText, status, taskNumber],
+  );
+
+  const getSideNoteAction = React.useMemo(
+    () =>
+      taskNumber !== -1 && (
+        <Button
+          variant="link"
+          className="pfext-quick-start-footer__restartbtn"
+          onClick={onRestart}
+          data-testid="qs-drawer-side-note-action"
+        >
+          {SecondaryButtonText.RESTART}
+        </Button>
+      ),
+    [taskNumber, onRestart, SecondaryButtonText.RESTART],
+  );
+
+  return (
+    <div className={`pfext-quick-start-footer ${footerClass}`}>
+      {getPrimaryButton}
+      {getSecondaryButton}
+      {getSideNoteAction}
+    </div>
+  );
+};
+
+export default QuickStartFooter;

package/src/controller/QuickStartIntroduction.scss

@@ -0,0 +1,35 @@
+.pfext-quick-start-intro {
+  &__prereq {
+    margin-bottom: var(--pf-global--spacer--md);
+    .pf-c-expandable-section__content {
+      margin-top: var(--pf-global--spacer--sm);
+    }
+    .pf-c-expandable-section__toggle {
+      padding-top: 0;
+      padding-bottom: 0;
+      &-text {
+        margin-left: var(--pf-global--spacer--sm);
+      }
+      &-icon {
+        color: var(--pf-c-expandable-section__toggle--Color);
+        &:focus, &:hover {
+          --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
+        }
+      }
+    }
+
+    &-list {
+      padding-left: 20px;
+      &__item {
+        &::marker {
+          font-size: 0.8rem;
+        }
+        &-content {
+          position: relative;
+          left: 2px;
+        }
+      }
+    }
+
+  }
+}

package/src/controller/QuickStartIntroduction.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { ExpandableSection, List, ListItem } 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';
+
+type QuickStartIntroductionProps = {
+  introduction: string;
+  tasks: QuickStartTask[];
+  allTaskStatuses: QuickStartTaskStatus[];
+  prerequisites?: string[];
+  onTaskSelect: (selectedTaskNumber: number) => void;
+};
+
+const QuickStartIntroduction: React.FC<QuickStartIntroductionProps> = ({
+  tasks,
+  introduction,
+  allTaskStatuses,
+  prerequisites,
+  onTaskSelect,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const prereqs = prerequisites?.filter((p) => p);
+  const [isPrereqsExpanded, setIsPrereqsExpanded] = React.useState(false);
+  const prereqList = prereqs?.length > 0 && (
+    <ExpandableSection
+      toggleText={getResource('View Prerequisites ({{totalPrereqs}})').replace(
+        '{{totalPrereqs}}',
+        prereqs.length,
+      )}
+      onToggle={() => setIsPrereqsExpanded(!isPrereqsExpanded)}
+      className="pfext-quick-start-intro__prereq"
+    >
+      <List className="pfext-quick-start-intro__prereq-list">
+        {prereqs.map((pr) => {
+          return (
+            <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>
+          );
+        })}
+      </List>
+    </ExpandableSection>
+  );
+  return (
+    <>
+      <QuickStartMarkdownView content={introduction} />
+      {prereqList}
+      <p style={{ marginBottom: 'var(--pf-global--spacer--md)' }}>
+        {getResource(
+          'In this quick start, you will complete {{count, number}} task',
+          tasks.length,
+        ).replace('{{count, number}}', tasks.length)}
+        :
+      </p>
+      <TaskHeaderList tasks={tasks} allTaskStatuses={allTaskStatuses} onTaskSelect={onTaskSelect} />
+    </>
+  );
+};
+
+export default QuickStartIntroduction;

package/src/controller/QuickStartTaskHeader.scss

@@ -0,0 +1,58 @@
+.pfext-quick-start-task-header {
+  margin-bottom: var(--pf-global--spacer--sm);
+  display: grid;
+  grid-template-columns: min-content auto;
+  font-size: var(--pf-global--FontSize--md);
+  button::before {
+    content: none;
+  }
+
+  &__title {
+    color: var(--pf-global--primary-color--100) !important;
+    margin-right: var(--pf-global--spacer--md) !important;
+  }
+
+  &__subtitle {
+    font-size: var(--pf-global--FontSize--sm);
+    color: var(--pf-global--Color--dark-200) !important;
+  }
+
+  &__tryagain {
+    display: block;
+    font-size: var(--pf-global--FontSize--md);
+    color: var(--pf-global--Color--300) !important;
+  }
+
+  &__title-success {
+    color: var(--pf-global--success-color--100) !important;
+  }
+
+  &__title-failed {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+
+  &__task-icon {
+    &-init {
+      background-color: var(--pf-global--primary-color--100);
+      border-radius: var(--pf-global--BorderRadius--lg);
+      color: var(--pf-global--Color--light-100);
+      display: inline-flex;
+      justify-content: center;
+      height: 1.5em;
+      width: 1.5em;
+    }
+
+    &-success,
+    &-failed {
+      vertical-align: middle !important;
+    }
+
+    &-success {
+      color: var(--pf-global--success-color--100) !important;
+    }
+
+    &-failed {
+      color: var(--pf-global--danger-color--100) !important;
+    }
+  }
+}

package/src/controller/QuickStartTaskHeader.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { 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 { QuickStartTaskStatus } from '../utils/quick-start-types';
+
+import './QuickStartTaskHeader.scss';
+
+type QuickStartTaskHeaderProps = {
+  title: string;
+  taskIndex: number;
+  subtitle?: string;
+  taskStatus?: QuickStartTaskStatus;
+  size?: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  isActiveTask?: boolean;
+  onTaskSelect: (index: number) => void;
+  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: {};
+  if (success) {
+    content = (
+      <CheckCircleIcon size="md" className="pfext-quick-start-task-header__task-icon-success" />
+    );
+  } else if (failed) {
+    content = (
+      <ExclamationCircleIcon
+        size="md"
+        className="pfext-quick-start-task-header__task-icon-failed"
+      />
+    );
+  } else {
+    content = getResource('{{taskIndex, number}}', taskIndex).replace(
+      '{{taskIndex, number}}',
+      taskIndex,
+    );
+  }
+  return <span className={classNames}>{content}</span>;
+};
+
+const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
+  title,
+  taskIndex,
+  subtitle,
+  taskStatus,
+  size,
+  isActiveTask,
+  onTaskSelect,
+  children,
+}) => {
+  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 />
+      <div className="pfext-quick-start-task-header__tryagain">Try the steps again.</div>
+    </>
+  );
+
+  const content = (
+    <div className="pfext-quick-start-task-header">
+      <TaskIcon taskIndex={taskIndex} taskStatus={taskStatus} />
+      <Title headingLevel="h3" size={size} className={classNames}>
+        <span dangerouslySetInnerHTML={{ __html: removeParagraphWrap(markdownConvert(title)) }} />
+        {isActiveTask && subtitle && (
+          <span
+            className="pfext-quick-start-task-header__subtitle"
+            data-test-id="quick-start-task-subtitle"
+          >
+            {' '}
+            {subtitle}
+          </span>
+        )}
+      </Title>
+      {tryAgain}
+    </div>
+  );
+
+  return (
+    <WizardNavItem
+      content={content}
+      step={taskIndex}
+      onNavItemClick={() => onTaskSelect(taskIndex - 1)}
+      navItemComponent="button"
+      isCurrent={isActiveTask}
+    >
+      {children}
+    </WizardNavItem>
+  );
+};
+
+export default QuickStartTaskHeader;

package/src/controller/QuickStartTaskHeaderList.scss

@@ -0,0 +1,17 @@
+.pfext-quick-start-task-header {
+  &__list {
+    padding: 0 !important;
+
+    button::before {
+      content: none;
+    }
+
+    li {
+      list-style-type: none;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: var(--pf-global--spacer--xs);
+    }
+  }
+}

package/src/controller/QuickStartTaskHeaderList.tsx

@@ -0,0 +1,35 @@
+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';
+
+type QuickStartTaskHeaderListProps = {
+  tasks: QuickStartTask[];
+  allTaskStatuses: QuickStartTaskStatus[];
+  onTaskSelect: (selectedTaskNumber: number) => void;
+};
+
+const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
+  tasks,
+  allTaskStatuses,
+  onTaskSelect,
+}) => {
+  return tasks.length > 0 ? (
+    <List className="pfext-quick-start-task-header__list">
+      {tasks.map((task, index) => (
+        <TaskHeader
+          key={task.title}
+          title={task.title}
+          taskIndex={index + 1}
+          size="md"
+          taskStatus={allTaskStatuses[index]}
+          onTaskSelect={onTaskSelect}
+        />
+      ))}
+    </List>
+  ) : null;
+};
+
+export default QuickStartTaskHeaderList;

package/src/controller/QuickStartTaskReview.scss

@@ -0,0 +1,30 @@
+.pfext-quick-start-task-review-alert {
+  margin: var(--pf-global--spacer--lg) 0;
+}
+.pfext-quick-start-task-review {
+  font-size: var(--pf-global--FontSize--md);
+  line-height: var(--pf-global--FontSize--xl);
+  font-family: var(--pf-global--FontFamily--heading--sans-serif);
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: var(--pf-global--spacer--sm);
+    input[type='radio'] {
+      margin-top: 0;
+      margin-right: 0;
+    }
+  }
+
+  &__radio {
+    margin-right: var(--pf-global--spacer--xl) !important;
+  }
+
+  &--success {
+    color: var(--pf-global--success-color--100) !important;
+  }
+
+  &--failed {
+    color: var(--pf-chart-global--danger--Color--100);
+  }
+}

package/src/controller/QuickStartTaskReview.tsx

@@ -0,0 +1,81 @@
+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 {
+  QuickStartTaskReview as QuickStartTaskReviewType,
+  QuickStartTaskStatus,
+} from '../utils/quick-start-types';
+
+import './QuickStartTaskReview.scss';
+
+type QuickStartTaskReviewProps = {
+  review: QuickStartTaskReviewType;
+  taskStatus: QuickStartTaskStatus;
+  onTaskReview: (status: QuickStartTaskStatus) => void;
+};
+
+const getAlertVariant = (status) => {
+  switch (status) {
+    case QuickStartTaskStatus.SUCCESS:
+      return 'success';
+    case QuickStartTaskStatus.FAILED:
+      return 'danger';
+    default:
+      return 'info';
+  }
+};
+
+const QuickStartTaskReview: React.FC<QuickStartTaskReviewProps> = ({
+  review,
+  taskStatus,
+  onTaskReview,
+}) => {
+  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}
+      isInline
+      role="alert"
+    >
+      <QuickStartMarkdownView content={instructions} />
+      <span className="pfext-quick-start-task-review__actions">
+        <Radio
+          id="review-success"
+          name="review-success"
+          data-testid="qs-drawer-check-yes"
+          label={getResource('Yes')}
+          className="pfext-quick-start-task-review__radio"
+          isChecked={taskStatus === QuickStartTaskStatus.SUCCESS}
+          onChange={() => onTaskReview(QuickStartTaskStatus.SUCCESS)}
+        />
+        <Radio
+          id="review-failed"
+          name="review-failed"
+          data-testid="qs-drawer-check-no"
+          label={getResource('No')}
+          className="pfext-quick-start-task-review__radio"
+          isChecked={taskStatus === QuickStartTaskStatus.FAILED}
+          onChange={() => onTaskReview(QuickStartTaskStatus.FAILED)}
+        />
+      </span>
+      {taskStatus === QuickStartTaskStatus.FAILED && taskHelp && (
+        <QuickStartMarkdownView content={taskHelp} exactHeight />
+      )}
+    </Alert>
+  );
+};
+
+export default QuickStartTaskReview;

package/src/controller/QuickStartTasks.scss

@@ -0,0 +1,89 @@
+.pfext-quick-start-tasks {
+  &__list {
+    button::before {
+      content: none;
+    }
+
+    li {
+      &.pf-c-wizard__nav-item {
+        list-style-type: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: var(--pf-global--spacer--xs);
+      }
+    }
+    .pfext-quick-start-task__content {
+      margin-bottom: var(--pf-global--spacer--md);
+    }
+    // Custom styles on PF React List rendered in custom react renderer
+    .task-pflist {
+      &-title {
+        font-size: 14px !important;
+        margin-bottom: 6px;
+      }
+      &-subtitle {
+        color: var(--pf-global--Color--200);
+        font-size: 16px;
+      }
+      &-list {
+        font-size: 16px;
+        &--prereq {
+          padding-left: var(--pf-global--spacer--lg);
+          li + li {
+            margin-top: 4px;
+          }
+        }
+        &--proc {
+          padding-left: 10px;
+          li + li {
+            margin-top: 16px;
+          }
+        }
+        &__item {
+          &--prereq {
+            &::marker {
+              font-size: 0.8rem;
+            }
+            .task-pflist-list__item__content {
+              position: relative;
+              left: 2px;
+            }
+          }
+          &--proc {
+            font-size: 14px;
+            .task-pflist-list__item__content {
+              position: relative;
+              left: 4px;
+            }
+          }
+          &__content {
+            .pf-c-alert {
+              // add margins to match design
+              margin: var(--pf-global--spacer--md) 0;
+            }
+            .pf-c-alert__title {
+              // remove margins from markdown css
+              margin-top: 0;
+              margin-bottom: 0;
+              // lift PF style specificity to override markdown css
+              font-weight: var(--pf-c-alert__title--FontWeight);
+              font-family: inherit;
+              line-height: inherit;
+              color: var(--pf-c-alert__title--Color);
+              word-break: break-word;
+            }
+            .task-pflist-list__item__content__note {
+              background-color: var(--pf-global--palette--blue-50);
+              border-color: var(--pf-global--active-color--200);
+              margin: var(--pf-global--spacer--md) 0;
+              &__body {
+                font-size: 14px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}