Skip to content

Commit 17a7f9b

Browse files
committed
Merge branch 'main' into preview-card
2 parents 1258bfa + bea6052 commit 17a7f9b

File tree

9 files changed

+59
-31
lines changed

9 files changed

+59
-31
lines changed

.github/workflows/checks.yml

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ on:
66
branches:
77
- main
88
jobs:
9+
linked_issue:
10+
name: Jira
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: openstax/[email protected]
14+
with:
15+
jira_site: openstax
16+
jira_project: DISCO
17+
jira_email: ${{ secrets.JiraEmail }}
18+
jira_token: ${{ secrets.JiraToken }}
919
build:
1020
runs-on: ubuntu-latest
1121

@@ -17,4 +27,4 @@ jobs:
1727
node-version: '16'
1828
- run: yarn
1929
- run: yarn lint
20-
- run: yarn test
30+
- run: yarn test

README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,6 @@ UI components for OpenStax assessments.
88
- `yarn test` run tests and get coverage results
99
- `yarn lint` run eslint
1010
- `yarn ladle serve` run Ladle server at http://localhost:61000 to view component stories
11+
12+
Note: exercises.json needs to be created at the top level for ladle
13+
See src/components/Print.stories.tsx

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@openstax/assessment-components",
3-
"version": "1.2.1",
3+
"version": "1.2.6",
44
"license": "MIT",
55
"source": "./src/index.ts",
66
"types": "./dist/src/index.d.ts",

src/components/Card.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,11 @@ const StepCardHeader = styled.div`
3939
line-height: 3rem;
4040
letter-spacing: -0.72px;
4141
42-
div.question-info {
42+
h2.question-info {
4343
display: flex;
4444
align-items: baseline;
45-
font-weight: bold;
45+
font-size: inherit;
46+
margin: inherit;
4647
4748
.question-id {
4849
font-weight: normal;
Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import { ProgressBar, ProgressBarItemVariant, ProgressBarProps } from './ProgressBar';
22

3-
const variants = new Array(8).fill({variant: null});
4-
const variantsInProgress: ProgressBarItemVariant[] = ['isIncorrect', 'isCorrect', 'isIncorrect', 'isIncorrect', null, null, null, null, 'isStatus'];
3+
const variants = new Array(8).fill({variant: 'isIncomplete'});
4+
const variantsInProgress: ProgressBarItemVariant[] = ['isIncorrect', 'isCorrect', 'isIncorrect', 'isIncorrect', 'isIncomplete', 'isIncomplete', 'isIncomplete', 'isIncomplete', 'isStatus'];
55

66
const props: ProgressBarProps<{variant: ProgressBarItemVariant}> = {
77
activeIndex: 0,
88
goToStep: (index: number, step) => console.log(index, step),
99
steps: variantsInProgress.map((variant) => ({variant})),
1010
}
1111

12+
const propsNoFeedback: ProgressBarProps<{variant: ProgressBarItemVariant}> = {
13+
...props,
14+
steps: variantsInProgress
15+
.map(variant => variant === 'isCorrect' || variant === 'isIncorrect' ? null : variant)
16+
.map(variant => ({ variant }))
17+
}
18+
1219
export const Default = () => <ProgressBar {...props} steps={[...variants, {variant: 'isStatus'}]} />;
1320
export const InProgress = () => <ProgressBar {...props} activeIndex={4} />;
1421
export const Review = () => <ProgressBar {...props} activeIndex={2} />;
1522
export const StatusStep = () => <ProgressBar {...props} activeIndex={8} />;
23+
export const InProgressNoFeedback = () => <ProgressBar {...propsNoFeedback} activeIndex={4} />;

src/components/ProgressBar.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import FlagIcon from '../assets/flag';
44
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
55
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
66
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
7+
import { faQuestion } from '@fortawesome/free-solid-svg-icons';
78

89
const ProgressBarWrapper = styled.nav`
910
display: flex;
@@ -92,7 +93,7 @@ const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
9293
`;
9394

9495
const ItemIcon = ({ variant }: { variant: ProgressBarItemVariant }) => {
95-
if (!variant || variant !== 'isCorrect' && variant !== 'isIncorrect') {
96+
if (!variant || variant !== 'isCorrect' && variant !== 'isIncorrect' && variant !== 'isIncomplete') {
9697
return null;
9798
}
9899

@@ -107,6 +108,11 @@ const ItemIcon = ({ variant }: { variant: ProgressBarItemVariant }) => {
107108
color: colors.answer.incorrect,
108109
label: 'Incorrect',
109110
},
111+
isIncomplete: {
112+
icon: faQuestion,
113+
color: colors.answer.neutral,
114+
label: 'Incomplete'
115+
}
110116
}[variant];
111117

112118
return <StyledFontAwesomeIcon
@@ -132,7 +138,7 @@ export interface ProgressBarItemProps<S> {
132138
goToStep: (index: number, step: S) => void;
133139
}
134140

135-
export type ProgressBarItemVariant = 'isCorrect' | 'isIncorrect' | 'isStatus' | null;
141+
export type ProgressBarItemVariant = 'isCorrect' | 'isIncorrect' | 'isStatus' | 'isIncomplete' | null;
136142

137143
export const ProgressBarItem = <S extends {variant: ProgressBarItemVariant}>({index, isActive, step, goToStep}: ProgressBarItemProps<S>) =>
138144
<StyledItemWrapper>

src/components/__snapshots__/Card.spec.tsx.snap

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ exports[`StepCard matches snapshot 1`] = `
1212
id="step-card"
1313
>
1414
<div
15-
className="sc-dkzDqf igaccC step-card-header"
15+
className="sc-dkzDqf jTQbcy step-card-header"
1616
>
1717
<div>
1818
<h2
@@ -65,7 +65,7 @@ exports[`StepCard matches snapshot with more than one question 1`] = `
6565
id="step-card"
6666
>
6767
<div
68-
className="sc-dkzDqf igaccC step-card-header"
68+
className="sc-dkzDqf jTQbcy step-card-header"
6969
>
7070
<div>
7171
<h2
@@ -125,7 +125,7 @@ exports[`TaskStepCard can optionally provide task 1`] = `
125125
id="step-card"
126126
>
127127
<div
128-
className="sc-dkzDqf igaccC step-card-header"
128+
className="sc-dkzDqf jTQbcy step-card-header"
129129
>
130130
<div>
131131
<h2
@@ -170,7 +170,7 @@ exports[`TaskStepCard can optionally provide type 1`] = `
170170
id="step-card"
171171
>
172172
<div
173-
className="sc-dkzDqf igaccC step-card-header"
173+
className="sc-dkzDqf jTQbcy step-card-header"
174174
>
175175
<div>
176176
<h2
@@ -215,7 +215,7 @@ exports[`TaskStepCard matches snapshot 1`] = `
215215
id="step-card"
216216
>
217217
<div
218-
className="sc-dkzDqf igaccC step-card-header"
218+
className="sc-dkzDqf jTQbcy step-card-header"
219219
>
220220
<div>
221221
<h2

src/components/__snapshots__/Exercise.spec.tsx.snap

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ exports[`Exercise using step data matches snapshot 1`] = `
99
data-task-step-id={1}
1010
>
1111
<div
12-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
12+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl iLMhfL"
1313
>
1414
<div>
1515
<div
1616
id="step-card"
1717
>
1818
<div
19-
className="sc-dkzDqf igaccC step-card-header"
19+
className="sc-dkzDqf jTQbcy step-card-header"
2020
>
2121
<div>
2222
<h2
@@ -206,7 +206,7 @@ exports[`Exercise with overlay rendering matches snapshot 1`] = `
206206
data-task-step-id={1}
207207
>
208208
<div
209-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
209+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl iLMhfL"
210210
>
211211
<div
212212
onBlur={[Function]}
@@ -218,7 +218,7 @@ exports[`Exercise with overlay rendering matches snapshot 1`] = `
218218
id="step-card"
219219
>
220220
<div
221-
className="sc-dkzDqf igaccC step-card-header"
221+
className="sc-dkzDqf jTQbcy step-card-header"
222222
>
223223
<div>
224224
<h2
@@ -408,14 +408,14 @@ exports[`Exercise with question state data matches snapshot 1`] = `
408408
data-task-step-id={1}
409409
>
410410
<div
411-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
411+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl iLMhfL"
412412
>
413413
<div>
414414
<div
415415
id="step-card"
416416
>
417417
<div
418-
className="sc-dkzDqf igaccC step-card-header"
418+
className="sc-dkzDqf jTQbcy step-card-header"
419419
>
420420
<div>
421421
<h2
@@ -653,14 +653,14 @@ exports[`Exercise with question state data renders header icons with multiple ch
653653
data-task-step-id={1}
654654
>
655655
<div
656-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
656+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl iLMhfL"
657657
>
658658
<div>
659659
<div
660660
id="step-card"
661661
>
662662
<div
663-
className="sc-dkzDqf igaccC step-card-header"
663+
className="sc-dkzDqf jTQbcy step-card-header"
664664
>
665665
<div>
666666
<h2
@@ -984,14 +984,14 @@ exports[`Exercise with question state data renders header icons with two-step ex
984984
data-task-step-id={1}
985985
>
986986
<div
987-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
987+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl iLMhfL"
988988
>
989989
<div>
990990
<div
991991
id="step-card"
992992
>
993993
<div
994-
className="sc-dkzDqf igaccC step-card-header"
994+
className="sc-dkzDqf jTQbcy step-card-header"
995995
>
996996
<div>
997997
<h2
@@ -1301,14 +1301,14 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
13011301
data-task-step-id={1}
13021302
>
13031303
<div
1304-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
1304+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl iLMhfL"
13051305
>
13061306
<div>
13071307
<div
13081308
id="step-card"
13091309
>
13101310
<div
1311-
className="sc-dkzDqf igaccC step-card-header"
1311+
className="sc-dkzDqf jTQbcy step-card-header"
13121312
>
13131313
<div>
13141314
<h2

src/components/__snapshots__/ExercisePreview.spec.tsx.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`ExercisePreview using step data matches snapshot %description 1`] = `
99
data-task-step-id={1}
1010
>
1111
<div
12-
className="sc-hKMtZM doPJeP exercise-step sc-fnykZs elrDSM sc-bjUoiL dcgACV preview-card is-selected"
12+
className="sc-hKMtZM doPJeP exercise-step sc-fnykZs elrDSM sc-bjUoiL dJvDYc preview-card is-selected"
1313
>
1414
<div
1515
onBlur={[Function]}
@@ -21,7 +21,7 @@ exports[`ExercisePreview using step data matches snapshot %description 1`] = `
2121
id="step-card"
2222
>
2323
<div
24-
className="sc-jSMfEi cfhjdW step-card-header"
24+
className="sc-jSMfEi biHTWy step-card-header"
2525
>
2626
<div>
2727
<h2
@@ -206,7 +206,7 @@ exports[`ExercisePreview using step data matches snapshot %description 2`] = `
206206
data-task-step-id={1}
207207
>
208208
<div
209-
className="sc-hKMtZM doPJeP exercise-step sc-fnykZs elrDSM sc-bjUoiL dcgACV preview-card is-selected"
209+
className="sc-hKMtZM doPJeP exercise-step sc-fnykZs elrDSM sc-bjUoiL dJvDYc preview-card is-selected"
210210
>
211211
<div
212212
onBlur={[Function]}
@@ -218,7 +218,7 @@ exports[`ExercisePreview using step data matches snapshot %description 2`] = `
218218
id="step-card"
219219
>
220220
<div
221-
className="sc-jSMfEi cfhjdW step-card-header"
221+
className="sc-jSMfEi biHTWy step-card-header"
222222
>
223223
<div>
224224
<h2
@@ -403,14 +403,14 @@ exports[`ExercisePreview using step data matches snapshot %description 3`] = `
403403
data-task-step-id={1}
404404
>
405405
<div
406-
className="sc-hKMtZM doPJeP exercise-step sc-fnykZs elrDSM sc-bjUoiL dcgACV preview-card"
406+
className="sc-hKMtZM doPJeP exercise-step sc-fnykZs elrDSM sc-bjUoiL dJvDYc preview-card"
407407
>
408408
<div>
409409
<div
410410
id="step-card"
411411
>
412412
<div
413-
className="sc-jSMfEi cfhjdW step-card-header"
413+
className="sc-jSMfEi biHTWy step-card-header"
414414
>
415415
<div>
416416
<h2

0 commit comments

Comments
 (0)