diff --git a/package.json b/package.json
index d61112a0..c32ef7b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@openstax/assessment-components",
- "version": "1.2.1",
+ "version": "1.2.5",
"license": "MIT",
"source": "./src/index.ts",
"types": "./dist/src/index.d.ts",
diff --git a/src/components/ProgressBar.stories.tsx b/src/components/ProgressBar.stories.tsx
index e61886a9..e47b4bcb 100644
--- a/src/components/ProgressBar.stories.tsx
+++ b/src/components/ProgressBar.stories.tsx
@@ -1,7 +1,7 @@
import { ProgressBar, ProgressBarItemVariant, ProgressBarProps } from './ProgressBar';
-const variants = new Array(8).fill({variant: null});
-const variantsInProgress: ProgressBarItemVariant[] = ['isIncorrect', 'isCorrect', 'isIncorrect', 'isIncorrect', null, null, null, null, 'isStatus'];
+const variants = new Array(8).fill({variant: 'isIncomplete'});
+const variantsInProgress: ProgressBarItemVariant[] = ['isIncorrect', 'isCorrect', 'isIncorrect', 'isIncorrect', 'isIncomplete', 'isIncomplete', 'isIncomplete', 'isIncomplete', 'isStatus'];
const props: ProgressBarProps<{variant: ProgressBarItemVariant}> = {
activeIndex: 0,
@@ -9,7 +9,15 @@ const props: ProgressBarProps<{variant: ProgressBarItemVariant}> = {
steps: variantsInProgress.map((variant) => ({variant})),
}
+const propsNoFeedback: ProgressBarProps<{variant: ProgressBarItemVariant}> = {
+ ...props,
+ steps: variantsInProgress
+ .map(variant => variant === 'isCorrect' || variant === 'isIncorrect' ? null : variant)
+ .map(variant => ({ variant }))
+}
+
export const Default = () => ;
export const InProgress = () => ;
export const Review = () => ;
export const StatusStep = () => ;
+export const InProgressNoFeedback = () => ;
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 6412cc73..ce3c2727 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -4,6 +4,7 @@ import FlagIcon from '../assets/flag';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
+import { faQuestion } from '@fortawesome/free-solid-svg-icons';
const ProgressBarWrapper = styled.nav`
display: flex;
@@ -92,7 +93,7 @@ const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
`;
const ItemIcon = ({ variant }: { variant: ProgressBarItemVariant }) => {
- if (!variant || variant !== 'isCorrect' && variant !== 'isIncorrect') {
+ if (!variant || variant !== 'isCorrect' && variant !== 'isIncorrect' && variant !== 'isIncomplete') {
return null;
}
@@ -107,6 +108,11 @@ const ItemIcon = ({ variant }: { variant: ProgressBarItemVariant }) => {
color: colors.answer.incorrect,
label: 'Incorrect',
},
+ isIncomplete: {
+ icon: faQuestion,
+ color: colors.answer.neutral,
+ label: 'Incomplete'
+ }
}[variant];
return {
goToStep: (index: number, step: S) => void;
}
-export type ProgressBarItemVariant = 'isCorrect' | 'isIncorrect' | 'isStatus' | null;
+export type ProgressBarItemVariant = 'isCorrect' | 'isIncorrect' | 'isStatus' | 'isIncomplete' | null;
export const ProgressBarItem = ({index, isActive, step, goToStep}: ProgressBarItemProps) =>