gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(client): add quick superblock cert claim steps (#42031)

Browse Source 
* feat(client): add quick superblock cert claim steps

* remove comments
This commit is contained in:
Shaun Hamilton
2021-05-06 19:45:19 +01:00
committed by GitHub
parent 955e6eea9d
commit e8578341b5
7 changed files with 133 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/i18n/locales/english/translations.json
View File

@@ -554,5 +554,14 @@
"Neural Network SMS Text Classifier": "Neural Network SMS Text Classifier"
}
}
},
"certification-card": {
"title": "Steps to Claim Your Certification",
"intro": "Complete the following steps to claim and view your {{i18nCertText}}",
"complete-project": "Complete {{i18nCertText}} Projects",
"accept-honesty": "Accept our Academic Honesty Policy",
"set-name": "Set your name, and make it public",
"set-certs-public": "Set your certificication settings to public",
"set-profile-public": "Set your profile settings to public"
}
}

2
client/src/components/settings/Honesty.js
View File

@@ -35,7 +35,7 @@ const Honesty = ({ isHonest, updateIsHonest }) => {
</Button>
);
return (
<section className='honesty-policy'>
<section className='honesty-policy' id='honesty-policy'>
<SectionHeader>{t('settings.headings.honesty')}</SectionHeader>
<FullWidthRow>
<Panel className='honesty-panel'>

2
client/src/components/settings/Privacy.js
View File

@@ -66,7 +66,7 @@ class PrivacySettings extends Component {
} = user.profileUI;
return (
<div className='privacy-settings'>
<div className='privacy-settings' id='privacy-settings'>
<SectionHeader>{t('settings.headings.privacy')}</SectionHeader>
<FullWidthRow>
<p>{t('settings.privacy')}</p>

2
client/src/components/settings/__snapshots__/Honesty.test.js.snap
View File

@@ -3,6 +3,7 @@
exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] = `
<section
className="honesty-policy"
id="honesty-policy"
>
<SectionHeader>
settings.headings.honesty
@@ -31,6 +32,7 @@ exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] =
exports[`<Honesty /> <Honesty /> snapshot when isHonest is true: HonestyAccepted 1`] = `
<section
className="honesty-policy"
id="honesty-policy"
>
<SectionHeader>
settings.headings.honesty

5
client/src/templates/Introduction/components/CertChallenge.js
View File

@@ -15,6 +15,7 @@ import {
certSlugTypeMap,
superBlockCertTypeMap
} from '../../../../../config/certification-settings';
import CertificationCard from './CertificationCard';
const propTypes = {
currentCerts: CurrentCertsType,
@@ -57,6 +58,10 @@ export class CertChallenge extends Component {
return (
<div className='block'>
<CertificationCard
i18nCertText={i18nCertText}
superBlock={superBlock}
/>
<button
className={`map-cert-title ${
isCertified ? 'map-is-cert' : 'no-cursor'

64
client/src/templates/Introduction/components/CertificationCard.js Normal file
View File

@@ -0,0 +1,64 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import ScrollableAnchor from 'react-scrollable-anchor';
import { useTranslation } from 'react-i18next';
import ClaimCertSteps from './ClaimCertSteps';
import Caret from '../../../assets/icons/Caret';
const propTypes = {
i18nCertText: PropTypes.string,
superBlock: PropTypes.string
};
const CertificationCard = ({ superBlock, i18nCertText }) => {
const { t } = useTranslation();
const [isExpanded, setIsExpanded] = useState(true);
const handleBlockClick = () => {
setIsExpanded(!isExpanded);
};
const {
expand: expandText,
collapse: collapseText,
courses: coursesText
} = t('intro:misc-text');
return (
<ScrollableAnchor id='claim-cert-block'>
<div className={`block ${isExpanded ? 'open' : ''}`}>
<div className='block-title-wrapper'>
<a className='block-link' href='#claim-cert-block'>
<h3 className='big-block-title'>
{t('certification-card.title')}
<span className='block-link-icon'>#</span>
</h3>
</a>
</div>
<div className='block-description'>
{t('certification-card.intro', { i18nCertText })}
</div>
<button
aria-expanded={isExpanded}
className='map-title'
onClick={handleBlockClick}
>
<Caret />
<h4 className='course-title'>
{`${
isExpanded ? collapseText : expandText
} ${coursesText.toLowerCase()}`}
</h4>
</button>
{isExpanded && (
<ClaimCertSteps i18nCertText={i18nCertText} superBlock={superBlock} />
)}
</div>
</ScrollableAnchor>
);
};
CertificationCard.displayName = 'CertStatus';
CertificationCard.propTypes = propTypes;
export default CertificationCard;

51
client/src/templates/Introduction/components/ClaimCertSteps.js Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'gatsby';
import { withTranslation, useTranslation } from 'react-i18next';
const propTypes = {
i18nCertText: PropTypes.string,
superBlock: PropTypes.string
};
const ClaimCertSteps = ({ i18nCertText, superBlock }) => {
const { t } = useTranslation();
const settingsLink = '/settings#privacy-settings';
const honestyPolicyAnchor = '/settings#honesty-policy';
return (
<ul className='map-challenges-ul'>
<li className='map-challenge-title map-challenge-wrap'>
<Link to={honestyPolicyAnchor}>
{t('certification-card.accept-honesty')}
</Link>
</li>
<li className='map-challenge-title map-challenge-wrap'>
<a href={`#${superBlock}-projects`}>
{t('certification-card.complete-project', {
i18nCertText
})}
</a>
</li>
<li className='map-challenge-title map-challenge-wrap'>
<Link to={settingsLink}>
{t('certification-card.set-profile-public')}
</Link>
</li>
<li className='map-challenge-title map-challenge-wrap'>
<Link to={settingsLink}>
{t('certification-card.set-certs-public')}
</Link>
</li>
<li className='map-challenge-title map-challenge-wrap'>
<Link to={settingsLink}>{t('certification-card.set-name')}</Link>
</li>
</ul>
);
};
ClaimCertSteps.displayName = 'ClaimCertSteps';
ClaimCertSteps.propTypes = propTypes;
export default withTranslation()(ClaimCertSteps);