jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-01-06 06:01:31 -05:00
Code Issues Projects Releases Wiki Activity

feat(client): make checkmark a React component for the block (#50928)

Browse Source
This commit is contained in:
Muhammed Mustafa
2023-07-10 16:46:43 +03:00
committed by GitHub
parent 05a505bf2f
commit f256211032
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/templates/Introduction/components/block.tsx
View File

@@ -71,6 +71,14 @@ export const BlockIntros = ({ intros }: { intros: string[] }): JSX.Element => {
);
};
function CheckMark({ isCompleted }: { isCompleted: boolean }): JSX.Element {
return isCompleted ? (
<GreenPass hushScreenReaderText />
) : (
<GreenNotCompleted hushScreenReaderText />
);
}
class Block extends Component<BlockProps> {
static displayName: string;
constructor(props: BlockProps) {
@@ -85,14 +93,6 @@ class Block extends Component<BlockProps> {
toggleBlock(blockDashedName);
}
renderCheckMark(isCompleted: boolean): JSX.Element {
return isCompleted ? (
<GreenPass hushScreenReaderText />
) : (
<GreenNotCompleted hushScreenReaderText />
);
}
render(): JSX.Element {
const {
blockDashedName,
@@ -185,7 +185,7 @@ class Block extends Component<BlockProps> {
<span className='sr-only'>{blockTitle}</span>
</div>
<div className='map-title-completed course-title'>
{this.renderCheckMark(isBlockCompleted)}
<CheckMark isCompleted={isBlockCompleted} />
<span
aria-hidden='true'
className='map-completed-count'
@@ -264,7 +264,7 @@ class Block extends Component<BlockProps> {
}}
>
<span className='block-header-button-text map-title'>
{this.renderCheckMark(isBlockCompleted)}
<CheckMark isCompleted={isBlockCompleted} />
<span>
{blockTitle}
<span className='sr-only'>
@@ -331,7 +331,7 @@ class Block extends Component<BlockProps> {
}}
to={challengesWithCompleted[0].fields.slug}
>
{this.renderCheckMark(isBlockCompleted)}
<CheckMark isCompleted={isBlockCompleted} />
{blockTitle}{' '}
<span className='sr-only'>
{t('misc.certification-project')}