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) =>