Skip to content

Commit 2be59e5

Browse files
JasirZaeemJasirZaeem
authored
Merge pull request #1036 from JasirZaeem/highlight-selection-btn
Highlight submission selection buttons
2 parents 86ab199 + 8635af5 commit 2be59e5

File tree

8 files changed

+67
-42
lines changed

8 files changed

+67
-42
lines changed

‎__tests__/__snapshots__/storyshots.test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13620,7 +13620,7 @@ exports[`Storyshots Components/SelectIteration Active 1`] = `
1362013620
onClick={[Function]}
1362113621
>
1362213622
<button
13623-
className="button m-2 btn btn-success"
13623+
className="button m-2 btn btn-outline-danger"
1362413624
disabled={false}
1362513625
type="button"
1362613626
>
@@ -13638,7 +13638,7 @@ exports[`Storyshots Components/SelectIteration Active 1`] = `
1363813638
onClick={[Function]}
1363913639
>
1364013640
<button
13641-
className="button m-2 btn btn-info"
13641+
className="button active m-2 btn active btn-outline-warning"
1364213642
disabled={false}
1364313643
type="button"
1364413644
>
@@ -13656,7 +13656,7 @@ exports[`Storyshots Components/SelectIteration Active 1`] = `
1365613656
onClick={[Function]}
1365713657
>
1365813658
<button
13659-
className="button m-2 btn btn-success"
13659+
className="button m-2 btn btn-outline-warning"
1366013660
disabled={false}
1366113661
type="button"
1366213662
>

‎__tests__/pages/review/__snapshots__/[lesson].test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -651,7 +651,7 @@ exports[`Lesson Page Should render new submissions 1`] = `
651651
data-testid="iteration 0"
652652
>
653653
<button
654-
class="button m-2 btn btn-success"
654+
class="button m-2 btn btn-outline-danger"
655655
type="button"
656656
>
657657
1
@@ -667,7 +667,7 @@ exports[`Lesson Page Should render new submissions 1`] = `
667667
data-testid="iteration 1"
668668
>
669669
<button
670-
class="button m-2 btn btn-success"
670+
class="button m-2 btn btn-outline-warning"
671671
type="button"
672672
>
673673
2
@@ -683,7 +683,7 @@ exports[`Lesson Page Should render new submissions 1`] = `
683683
data-testid="iteration 2"
684684
>
685685
<button
686-
class="button m-2 btn btn-info"
686+
class="button active m-2 btn active btn-outline-warning"
687687
type="button"
688688
>
689689
3

‎components/ChallengeMaterial.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -224,11 +224,11 @@ describe('Curriculum challenge page', () => {
224224
await screen.findByText('Select submission')
225225
expect(
226226
await screen.findByRole('button', { name: '3 2 comment count' })
227-
).toHaveClass('btn-info')
227+
).toHaveClass('active')
228228
userEvent.click(screen.getByTestId('iteration 1'))
229229
expect(
230230
await screen.findByRole('button', { name: '3 2 comment count' })
231-
).not.toHaveClass('btn-info')
231+
).not.toHaveClass('active')
232232
expect(container).toMatchSnapshot()
233233
})
234234
test('Should be able to select another challenge', async () => {

‎components/SelectIteration.tsx‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import React from 'react'
22
import styles from '../scss/selectIteration.module.scss'
33
import { ApolloError } from '@apollo/client'
4-
import { Submission, GetPreviousSubmissionsQuery } from '../graphql'
4+
import {
5+
Submission,
6+
GetPreviousSubmissionsQuery,
7+
SubmissionStatus
8+
} from '../graphql'
59
import { Badge, Button } from 'react-bootstrap'
610

711
type IterationLink = {
812
iteration: number
913
current: number
1014
id: number
1115
comments: number | undefined
16+
status: SubmissionStatus
17+
loading?: boolean
1218
}
1319

1420
type SelectIteration = {
@@ -21,30 +27,41 @@ type SelectIteration = {
2127
currentIndex: number
2228
}
2329

30+
const statusToBtnVariant = {
31+
[SubmissionStatus.Overwritten]: 'info',
32+
[SubmissionStatus.Open]: 'warning',
33+
[SubmissionStatus.NeedMoreWork]: 'danger',
34+
[SubmissionStatus.Passed]: 'success'
35+
}
36+
2437
const IterationLink: React.FC<IterationLink | { loading: boolean }> = props => {
25-
if (!props.hasOwnProperty('loading')) {
26-
props = props as IterationLink
27-
return (
28-
<Button
29-
variant={props.current === props.id ? 'info' : 'success'}
30-
className={`${styles['button']} m-2`}
31-
>
32-
{props.iteration}
33-
{props.comments !== 0 && (
34-
<Badge variant="light" className={styles['badge']}>
35-
{props.comments}
36-
</Badge>
37-
)}
38-
<span className="sr-only">comment count</span>
39-
</Button>
40-
)
41-
} else
38+
if (props.loading)
4239
return (
4340
<Button
4441
variant="light"
4542
className={`${styles['button']} ${styles['loading']}`}
4643
/>
4744
)
45+
46+
props = props as IterationLink
47+
const isSelected = props.current === props.id
48+
return (
49+
<Button
50+
variant={`outline-${statusToBtnVariant[props.status]}`}
51+
className={`${styles['button']} ${
52+
isSelected ? styles['active'] : ''
53+
} m-2`}
54+
active={isSelected}
55+
>
56+
{props.iteration}
57+
{props.comments !== 0 && (
58+
<Badge variant="light" className={styles['badge']}>
59+
{props.comments}
60+
</Badge>
61+
)}
62+
<span className="sr-only">comment count</span>
63+
</Button>
64+
)
4865
}
4966

5067
const SelectDisplay: React.FC<Omit<SelectIteration, 'error'>> = ({
@@ -54,7 +71,7 @@ const SelectDisplay: React.FC<Omit<SelectIteration, 'error'>> = ({
5471
setSubmission,
5572
currentId
5673
}) => {
57-
if (loading) return <IterationLink loading={true} />
74+
if (loading) return <IterationLink loading />
5875
if (data?.getPreviousSubmissions)
5976
return (
6077
<div>
@@ -74,6 +91,7 @@ const SelectDisplay: React.FC<Omit<SelectIteration, 'error'>> = ({
7491
current={currentId}
7592
id={submission.id}
7693
comments={submission.comments?.length}
94+
status={submission.status}
7795
/>
7896
</div>
7997
)

‎components/__snapshots__/ChallengeMaterial.test.js.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ exports[`Curriculum challenge page Should be able to select another challenge 1`
9595
data-testid="iteration 0"
9696
>
9797
<button
98-
class="button m-2 btn btn-success"
98+
class="button m-2 btn btn-outline-danger"
9999
type="button"
100100
>
101101
1
@@ -111,7 +111,7 @@ exports[`Curriculum challenge page Should be able to select another challenge 1`
111111
data-testid="iteration 1"
112112
>
113113
<button
114-
class="button m-2 btn btn-success"
114+
class="button m-2 btn btn-outline-warning"
115115
type="button"
116116
>
117117
2
@@ -127,7 +127,7 @@ exports[`Curriculum challenge page Should be able to select another challenge 1`
127127
data-testid="iteration 2"
128128
>
129129
<button
130-
class="button m-2 btn btn-info"
130+
class="button active m-2 btn active btn-outline-warning"
131131
type="button"
132132
>
133133
3
@@ -7463,7 +7463,7 @@ exports[`Curriculum challenge page Should select previous iterations 1`] = `
74637463
data-testid="iteration 0"
74647464
>
74657465
<button
7466-
class="button m-2 btn btn-success"
7466+
class="button m-2 btn btn-outline-danger"
74677467
type="button"
74687468
>
74697469
1
@@ -7479,7 +7479,7 @@ exports[`Curriculum challenge page Should select previous iterations 1`] = `
74797479
data-testid="iteration 1"
74807480
>
74817481
<button
7482-
class="button m-2 btn btn-info"
7482+
class="button active m-2 btn active btn-outline-warning"
74837483
type="button"
74847484
>
74857485
2
@@ -7495,7 +7495,7 @@ exports[`Curriculum challenge page Should select previous iterations 1`] = `
74957495
data-testid="iteration 2"
74967496
>
74977497
<button
7498-
class="button m-2 btn btn-success"
7498+
class="button m-2 btn btn-outline-warning"
74997499
type="button"
75007500
>
75017501
3

‎components/__snapshots__/ReviewCard.test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -581,7 +581,7 @@ exports[`ReviewCard Component Should be able to select previous submissions 1`]
581581
data-testid="iteration 0"
582582
>
583583
<button
584-
class="button m-2 btn btn-info"
584+
class="button active m-2 btn active btn-outline-danger"
585585
type="button"
586586
>
587587
1
@@ -597,7 +597,7 @@ exports[`ReviewCard Component Should be able to select previous submissions 1`]
597597
data-testid="iteration 1"
598598
>
599599
<button
600-
class="button m-2 btn btn-success"
600+
class="button m-2 btn btn-outline-warning"
601601
type="button"
602602
>
603603
2
@@ -613,7 +613,7 @@ exports[`ReviewCard Component Should be able to select previous submissions 1`]
613613
data-testid="iteration 2"
614614
>
615615
<button
616-
class="button m-2 btn btn-success"
616+
class="button m-2 btn btn-outline-warning"
617617
type="button"
618618
>
619619
3

‎components/__snapshots__/SelectIteration.test.js.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ exports[`SelectIteration component Should be able to select submissions 1`] = `
5454
data-testid="iteration 0"
5555
>
5656
<button
57-
class="button m-2 btn btn-success"
57+
class="button m-2 btn btn-outline-danger"
5858
type="button"
5959
>
6060
1
@@ -70,7 +70,7 @@ exports[`SelectIteration component Should be able to select submissions 1`] = `
7070
data-testid="iteration 1"
7171
>
7272
<button
73-
class="button m-2 btn btn-info"
73+
class="button active m-2 btn active btn-outline-warning"
7474
type="button"
7575
>
7676
2
@@ -86,7 +86,7 @@ exports[`SelectIteration component Should be able to select submissions 1`] = `
8686
data-testid="iteration 2"
8787
>
8888
<button
89-
class="button m-2 btn btn-success"
89+
class="button m-2 btn btn-outline-warning"
9090
type="button"
9191
>
9292
3
@@ -123,7 +123,7 @@ exports[`SelectIteration component Should treat negative index as last iteration
123123
data-testid="iteration 0"
124124
>
125125
<button
126-
class="button m-2 btn btn-success"
126+
class="button m-2 btn btn-outline-danger"
127127
type="button"
128128
>
129129
1
@@ -139,7 +139,7 @@ exports[`SelectIteration component Should treat negative index as last iteration
139139
data-testid="iteration 1"
140140
>
141141
<button
142-
class="button m-2 btn btn-info"
142+
class="button active m-2 btn active btn-outline-warning"
143143
type="button"
144144
>
145145
2
@@ -155,7 +155,7 @@ exports[`SelectIteration component Should treat negative index as last iteration
155155
data-testid="iteration 2"
156156
>
157157
<button
158-
class="button m-2 btn btn-success"
158+
class="button m-2 btn btn-outline-warning"
159159
type="button"
160160
>
161161
3

‎scss/selectIteration.module.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@
99
min-width: 2.5rem;
1010
min-height: 2.5rem;
1111
max-width: max-content;
12+
13+
&.active, &:hover {
14+
// Warning variant button has non-white color
15+
color: white !important;
16+
}
17+
1218
& .badge {
1319
color: rgb(122, 126, 120);
1420
position: absolute;
@@ -17,6 +23,7 @@
1723
border: 1px solid gainsboro;
1824
border-radius: 50%;
1925
}
26+
2027
&.loading {
2128
min-height: 3rem;
2229
}

0 commit comments

Comments
 (0)