-
Notifications
You must be signed in to change notification settings - Fork 205
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [FC-0056] courseware sidebar enhancement (#1386)
- Display section and sequence progress - Add tracking event to the unit button - Hide the horizontal unit navigation with enabled sidebar navigation
- Loading branch information
1 parent
07357b9
commit 58c8ec5
Showing
21 changed files
with
288 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
| CheckCircle as CheckCircleIcon, | ||
| LmsCompletionSolid as LmsCompletionSolidIcon, | ||
| } from '@openedx/paragon/icons'; | ||
|
|
||
| import { DashedCircleIcon } from '../icons'; | ||
|
|
||
| const CompletionIcon = ({ completionStat: { completed = 0, total = 0 } }) => { | ||
| const percentage = total !== 0 ? Math.min((completed / total) * 100, 100) : 0; | ||
| const remainder = 100 - percentage; | ||
|
|
||
| switch (true) { | ||
| case !completed: | ||
| return <LmsCompletionSolidIcon className="text-gray-300" data-testid="completion-solid-icon" />; | ||
| case completed === total: | ||
| return <CheckCircleIcon className="text-success" data-testid="check-circle-icon" />; | ||
| default: | ||
| return <DashedCircleIcon percentage={percentage} remainder={remainder} data-testid="dashed-circle-icon" />; | ||
| } | ||
| }; | ||
|
|
||
| CompletionIcon.propTypes = { | ||
| completionStat: PropTypes.shape({ | ||
| completed: PropTypes.number, | ||
| total: PropTypes.number, | ||
| }).isRequired, | ||
| }; | ||
|
|
||
| export default CompletionIcon; |
23 changes: 23 additions & 0 deletions
23
src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
|
|
||
| import CompletionIcon from './CompletionIcon'; | ||
|
|
||
| describe('CompletionIcon', () => { | ||
| it('renders check circle icon when completion is equal to total', () => { | ||
| const completionStat = { completed: 5, total: 5 }; | ||
| render(<CompletionIcon completionStat={completionStat} />); | ||
| expect(screen.getByTestId('check-circle-icon')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders dashed circle icon when completion is between 0 and total', () => { | ||
| const completionStat = { completed: 2, total: 5 }; | ||
| render(<CompletionIcon completionStat={completionStat} />); | ||
| expect(screen.getByTestId('dashed-circle-icon')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders completion solid icon when completion is 0', () => { | ||
| const completionStat = { completed: 0, total: 5 }; | ||
| render(<CompletionIcon completionStat={completionStat} />); | ||
| expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.