diff --git a/client/src/assets/icons/IntroInformation.js b/client/src/assets/icons/IntroInformation.js new file mode 100644 index 0000000000..a78bbe7817 --- /dev/null +++ b/client/src/assets/icons/IntroInformation.js @@ -0,0 +1,49 @@ +import React, { Fragment } from 'react'; + +const propTypes = {}; + +function IntroInformation(props) { + return ( + + IntroInformation + + + IntroInformation + + + + + + ); +} + +IntroInformation.displayName = 'IntroInformation'; +IntroInformation.propTypes = propTypes; + +export default IntroInformation; diff --git a/client/src/components/Map/components/Block.js b/client/src/components/Map/components/Block.js index fdea2b1933..c9cad4d709 100644 --- a/client/src/components/Map/components/Block.js +++ b/client/src/components/Map/components/Block.js @@ -10,10 +10,10 @@ import { makeExpandedBlockSelector, toggleBlock } from '../redux'; import { completedChallengesSelector } from '../../../redux'; import Caret from '../../../assets/icons/Caret'; import { blockNameify } from '../../../../utils/blockNameify'; -/* eslint-disable max-len */ import GreenPass from '../../../assets/icons/GreenPass'; import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted'; -/* eslint-enable max-len */ +import IntroInformation from '../../../assets/icons/IntroInformation'; + const mapStateToProps = (state, ownProps) => { const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName); @@ -95,7 +95,11 @@ export class Block extends Component { key={'map-challenge' + challenge.fields.slug} > - {i !== 0 && this.renderCheckMark(challenge.isCompleted)} + {i === 0 ? ( + + ) : ( + this.renderCheckMark(challenge.isCompleted) + )} + > + + { const key = kebabCase(name); const type = name in types ? types[name] : 'text'; + const placeholder = + name in placeholders ? placeholders[name] : ''; return ( @@ -51,7 +53,7 @@ function FormFields(props) { id={key} name={name} onChange={onChange} - placeholder={placeholder ? name : ''} + placeholder={placeholder} required={required.includes(name)} rows={4} type={type} diff --git a/client/src/templates/Challenges/components/Tool-Panel.js b/client/src/templates/Challenges/components/Tool-Panel.js index 54392eaa6f..b926a75a00 100644 --- a/client/src/templates/Challenges/components/Tool-Panel.js +++ b/client/src/templates/Challenges/components/Tool-Panel.js @@ -98,47 +98,3 @@ export default connect( mapStateToProps, mapDispatchToProps )(ToolPanel); - -/* - -
- -
- {guideUrl && ( -
- -
-
- )} - -
-*/ diff --git a/client/src/templates/Challenges/project/Side-Panel.js b/client/src/templates/Challenges/project/Side-Panel.js deleted file mode 100644 index fe5e9f6909..0000000000 --- a/client/src/templates/Challenges/project/Side-Panel.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ChallengeTitle from '../components/Challenge-Title'; -import Spacer from '../../../components/helpers/Spacer'; - -const propTypes = { - description: PropTypes.string, - introPath: PropTypes.string, - isCompleted: PropTypes.bool, - isSignedIn: PropTypes.bool, - nextChallengePath: PropTypes.string, - prevChallengePath: PropTypes.string, - showPrevNextBtns: PropTypes.bool, - title: PropTypes.string -}; - -export default function SidePanel({ - title, - description, - introPath, - isCompleted, - nextChallengePath, - prevChallengePath, - showPrevNextBtns -}) { - return ( -
- - - {title} - -
-
- ); -} - -SidePanel.displayName = 'ProjectSidePanel'; -SidePanel.propTypes = propTypes; diff --git a/client/src/templates/Challenges/project/project.css b/client/src/templates/Challenges/project/project.css deleted file mode 100644 index a5622c03b4..0000000000 --- a/client/src/templates/Challenges/project/project.css +++ /dev/null @@ -1,9 +0,0 @@ -.project-show-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - max-width: 960px; - margin: 0 auto; - padding: 0 15px; -} diff --git a/client/src/templates/Challenges/project/ProjectForm.js b/client/src/templates/Challenges/projects/ProjectForm.js similarity index 78% rename from client/src/templates/Challenges/project/ProjectForm.js rename to client/src/templates/Challenges/projects/ProjectForm.js index aea0a1fa16..c9ae916845 100644 --- a/client/src/templates/Challenges/project/ProjectForm.js +++ b/client/src/templates/Challenges/projects/ProjectForm.js @@ -49,7 +49,18 @@ export class ProjectForm extends Component { buttonText={`${buttonCopy}`} formFields={isFrontEnd ? frontEndFields : backEndFields} id={isFrontEnd ? 'front-end-form' : 'back-end-form'} - options={options} + options={{ + ...options, + placeholders: { + solution: + 'Link to solution, ex: ' + + (isFrontEnd + ? 'https://codepen.io/camperbot/full/oNvPqqo' + : 'https://camperbot.glitch.me'), + githubLink: + 'Link to GitHub repo, ex: https://github.com/camperbot/hello' + } + }} submit={this.handleSubmit} /> ); diff --git a/client/src/templates/Challenges/project/Tool-Panel.js b/client/src/templates/Challenges/projects/Tool-Panel.js similarity index 100% rename from client/src/templates/Challenges/project/Tool-Panel.js rename to client/src/templates/Challenges/projects/Tool-Panel.js diff --git a/client/src/templates/Challenges/backend/Show.js b/client/src/templates/Challenges/projects/backend/Show.js similarity index 84% rename from client/src/templates/Challenges/backend/Show.js rename to client/src/templates/Challenges/projects/backend/Show.js index 237605d9ca..41c291ce45 100644 --- a/client/src/templates/Challenges/backend/Show.js +++ b/client/src/templates/Challenges/projects/backend/Show.js @@ -4,6 +4,7 @@ import { Grid, Col, Row } from '@freecodecamp/react-bootstrap'; import { createSelector } from 'reselect'; import { connect } from 'react-redux'; import { graphql } from 'gatsby'; +import Helmet from 'react-helmet'; import { executeChallenge, @@ -16,26 +17,26 @@ import { updateChallengeMeta, updateProjectFormValues, backendNS -} from '../redux'; -import { getGuideUrl } from '../utils'; +} from '../../redux'; +import { getGuideUrl } from '../../utils'; -import LearnLayout from '../../../components/layouts/Learn'; -import ChallengeTitle from '../components/Challenge-Title'; -import ChallengeDescription from '../components/Challenge-Description'; -import TestSuite from '../components/Test-Suite'; -import Output from '../components/Output'; -import CompletionModal from '../components/CompletionModal'; -import HelpModal from '../components/HelpModal'; -import ProjectToolPanel from '../project/Tool-Panel'; -import ProjectForm from '../project/ProjectForm'; -import { Form } from '../../../components/formHelpers'; -import Spacer from '../../../components/helpers/Spacer'; -import { ChallengeNode } from '../../../redux/propTypes'; -import { isSignedInSelector } from '../../../redux'; +import LearnLayout from '../../../../components/layouts/Learn'; +import ChallengeTitle from '../../components/Challenge-Title'; +import ChallengeDescription from '../../components/Challenge-Description'; +import TestSuite from '../../components/Test-Suite'; +import Output from '../../components/Output'; +import CompletionModal from '../../components/CompletionModal'; +import HelpModal from '../../components/HelpModal'; +import ProjectToolPanel from '../Tool-Panel'; +import ProjectForm from '../ProjectForm'; +import { Form } from '../../../../components/formHelpers'; +import Spacer from '../../../../components/helpers/Spacer'; +import { ChallengeNode } from '../../../../redux/propTypes'; +import { isSignedInSelector } from '../../../../redux'; -import { backend } from '../../../../utils/challengeTypes'; +import { backend } from '../../../../../utils/challengeTypes'; -import '../components/test-frame.css'; +import '../../components/test-frame.css'; const propTypes = { challengeMounted: PropTypes.func.isRequired, @@ -86,6 +87,9 @@ const options = { required: ['solution'], types: { solution: 'url' + }, + placeholders: { + solution: 'Link to solution, ex: https://codepen.io/camperbot/full/oNvPqqo' } }; @@ -181,6 +185,7 @@ export class BackEnd extends Component { return ( + @@ -228,7 +233,6 @@ export class BackEnd extends Component { output={output} /> - diff --git a/client/src/templates/Challenges/project/Show.js b/client/src/templates/Challenges/projects/frontend/Show.js similarity index 61% rename from client/src/templates/Challenges/project/Show.js rename to client/src/templates/Challenges/projects/frontend/Show.js index ce2c476177..0ff95c4d42 100644 --- a/client/src/templates/Challenges/project/Show.js +++ b/client/src/templates/Challenges/projects/frontend/Show.js @@ -1,29 +1,29 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { Grid, Col, Row } from '@freecodecamp/react-bootstrap'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { graphql } from 'gatsby'; import Helmet from 'react-helmet'; -import { ChallengeNode } from '../../../redux/propTypes'; +import { ChallengeNode } from '../../../../redux/propTypes'; import { challengeMounted, updateChallengeMeta, openModal, updateProjectFormValues -} from '../redux'; -import { frontEndProject } from '../../../../utils/challengeTypes'; -import { getGuideUrl } from '../utils'; +} from '../../redux'; +import { frontEndProject } from '../../../../../utils/challengeTypes'; +import { getGuideUrl } from '../../utils'; -import LearnLayout from '../../../components/layouts/Learn'; -import Spacer from '../../../components/helpers/Spacer'; -import ProjectForm from './ProjectForm'; -import SidePanel from './Side-Panel'; -import ToolPanel from './Tool-Panel'; -import CompletionModal from '../components/CompletionModal'; -import HelpModal from '../components/HelpModal'; - -import './project.css'; +import LearnLayout from '../../../../components/layouts/Learn'; +import ChallengeTitle from '../../components/Challenge-Title'; +import ChallengeDescription from '../../components/Challenge-Description'; +import Spacer from '../../../../components/helpers/Spacer'; +import ProjectForm from '../ProjectForm'; +import ProjectToolPanel from '../Tool-Panel'; +import CompletionModal from '../../components/CompletionModal'; +import HelpModal from '../../components/HelpModal'; const mapStateToProps = () => ({}); const mapDispatchToProps = dispatch => @@ -96,8 +96,7 @@ export class Project extends Component { fields: { blockName }, forumTopicId, title, - description, - guideUrl + description } }, openCompletionModal, @@ -111,28 +110,35 @@ export class Project extends Component { const blockNameTitle = `${blockName} - ${title}`; return ( - -
- - - - -
- - + + + + + + + {blockNameTitle} + + + + +
+ + + + +
+
); } diff --git a/client/src/templates/Challenges/project/ns.json b/client/src/templates/Challenges/projects/ns.json similarity index 100% rename from client/src/templates/Challenges/project/ns.json rename to client/src/templates/Challenges/projects/ns.json diff --git a/client/src/templates/Challenges/project/tool-panel.css b/client/src/templates/Challenges/projects/tool-panel.css similarity index 100% rename from client/src/templates/Challenges/project/tool-panel.css rename to client/src/templates/Challenges/projects/tool-panel.css diff --git a/client/src/templates/Introduction/Intro.js b/client/src/templates/Introduction/Intro.js index 8d8e5f2224..6aa0b121e1 100644 --- a/client/src/templates/Introduction/Intro.js +++ b/client/src/templates/Introduction/Intro.js @@ -57,7 +57,7 @@ function IntroductionPage({ data: { markdownRemark, allChallengeNode } }) { Go to the first lesson - + View the curriculum diff --git a/client/utils/challengeTypes.js b/client/utils/challengeTypes.js index 7090c111fc..4ffcf472fa 100644 --- a/client/utils/challengeTypes.js +++ b/client/utils/challengeTypes.js @@ -39,7 +39,7 @@ exports.viewTypes = { [html]: 'classic', [js]: 'classic', [bonfire]: 'classic', - [frontEndProject]: 'project', + [frontEndProject]: 'frontend', [backEndProject]: 'backend', [modern]: 'modern', [step]: 'step', diff --git a/client/utils/gatsby/challengePageCreator.js b/client/utils/gatsby/challengePageCreator.js index 91a981ec95..5d04a090f4 100644 --- a/client/utils/gatsby/challengePageCreator.js +++ b/client/utils/gatsby/challengePageCreator.js @@ -5,15 +5,15 @@ const { viewTypes } = require('../challengeTypes'); const backend = path.resolve( __dirname, - '../../src/templates/Challenges/backend/Show.js' + '../../src/templates/Challenges/projects/backend/Show.js' ); const classic = path.resolve( __dirname, '../../src/templates/Challenges/classic/Show.js' ); -const project = path.resolve( +const frontend = path.resolve( __dirname, - '../../src/templates/Challenges/project/Show.js' + '../../src/templates/Challenges/projects/frontend/Show.js' ); const intro = path.resolve( __dirname, @@ -28,7 +28,7 @@ const views = { backend, classic, modern: classic, - project + frontend // quiz: Quiz };