diff --git a/src/components/skills-quiz-v2/CourseCard.jsx b/src/components/skills-quiz-v2/CourseCard.jsx new file mode 100644 index 0000000000..bb7649f361 --- /dev/null +++ b/src/components/skills-quiz-v2/CourseCard.jsx @@ -0,0 +1,19 @@ +import { Card } from '@edx/paragon'; + +const CourseCard = () => ( + + + + + This is a card section. It can contain anything but usually text, a list, or list of links. + Multiple sections have a card divider between them. + + +); +export default CourseCard; diff --git a/src/components/skills-quiz-v2/SkillsQuiz.jsx b/src/components/skills-quiz-v2/SkillsQuiz.jsx new file mode 100644 index 0000000000..7d1461de09 --- /dev/null +++ b/src/components/skills-quiz-v2/SkillsQuiz.jsx @@ -0,0 +1,139 @@ +/* eslint-disable object-curly-newline */ +import React, { useState, useContext } from 'react'; +import { + ModalDialog, Container, Button, SelectableBox, Chip, CardGrid, +} from '@edx/paragon'; +import { useHistory } from 'react-router-dom'; +import { AppContext } from '@edx/frontend-platform/react'; + +import GoalDropdown from '../skills-quiz/GoalDropdown'; +import { + industryCards, + SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2, +} from './constants'; +import SkillsQuizHeader from './SkillsQuizHeader'; + +import headerImage from '../skills-quiz/images/headerImage.png'; +import CourseCard from './CourseCard'; + +const SkillsQuizV2 = () => { + const [showAdvancedOptions, setShowAdvancedOptions] = useState(false); + + const { enterpriseConfig } = useContext(AppContext); + const [value, setValue] = useState('green'); + const handleChange = (e) => setValue(e.target.value); + const history = useHistory(); + + const closeSkillsQuiz = () => { + history.push(`/${enterpriseConfig.slug}/search`); + }; + + return ( + + + + + + + + + +
+

+ {SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2} +

+
+ What roles are you interested in? +
+
+ + +
+ {showAdvancedOptions + && ( +
+
+ Tell us about what you want to acheive +
+
+ +
+
+ Search and select your current job title +
+
+ +
+
+ What industry are you interested in? +
+
+ +
+
+ )} +
+
+ + {industryCards.map((card) => ( + +
+
{card.name}
+
Related skills
+ {card.skills.map((skill) => ( +
+ {skill} +
+ ))} +
+ + ))} + +
+
+

Boot Camps for a Web technology Specialist

+ + + + +
+ + + + ); +}; + +export default SkillsQuizV2; diff --git a/src/components/skills-quiz-v2/SkillsQuizHeader.jsx b/src/components/skills-quiz-v2/SkillsQuizHeader.jsx new file mode 100644 index 0000000000..a228dc3648 --- /dev/null +++ b/src/components/skills-quiz-v2/SkillsQuizHeader.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import edxLogo from '../skills-quiz/images/edx-logo.svg'; + +const SkillsQuizHeader = () => ( +
+ edx-logo +
+
+

Skills builder

+

+ Let edX be your guide +

+
+
+); + +export default SkillsQuizHeader; diff --git a/src/components/skills-quiz-v2/constants.js b/src/components/skills-quiz-v2/constants.js new file mode 100644 index 0000000000..5245b3dcb8 --- /dev/null +++ b/src/components/skills-quiz-v2/constants.js @@ -0,0 +1,15 @@ +export const SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2 = 'We combine the educational expertise with labor market data to help you reach your learning and professional goals. Whether you are looking to grow in your career, change careers, or just learn new skills, this toll can help you find a relevant course. Your role selection and recommendations are private and are not visible to your edX administrator.'; +export const industryCards = [ + { + name: 'Product Associate', + skills: ['Data Analysis', 'Communication', 'Strategy'], + }, + { + name: 'Python Developer', + skills: ['Data Analysis', 'Django', 'Flask'], + }, + { + name: 'Django Developer', + skills: ['Data Analysis', 'Django', 'Flask'], + }, +]; diff --git a/src/components/skills-quiz-v2/styles/_JobCard.scss b/src/components/skills-quiz-v2/styles/_JobCard.scss new file mode 100644 index 0000000000..a9fa6aa724 --- /dev/null +++ b/src/components/skills-quiz-v2/styles/_JobCard.scss @@ -0,0 +1,13 @@ +$dark-500: #00262b !default; + +.selectable-box { + .box { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + } + .pgn__form-radio-input { + min-width: 21px; + min-height: 21px; + } +} diff --git a/src/components/skills-quiz-v2/styles/_SkillsQuizHeader.scss b/src/components/skills-quiz-v2/styles/_SkillsQuizHeader.scss new file mode 100644 index 0000000000..a1e52a6ec1 --- /dev/null +++ b/src/components/skills-quiz-v2/styles/_SkillsQuizHeader.scss @@ -0,0 +1,37 @@ +.bg-img{ + min-height: 13vw; +} + +.skills-quiz-modal{ + .pgn__modal-close-button{ + color: #ffffff !important; + } +} + +.vertical-line{ + border-left: 7px solid #D23228; + transform: rotate(13deg); +} + +.heading{ + color: #F0CC00; +} +.subheading{ + color: #FFFFFF; + line-height: 36px; + letter-spacing: 1px; + font-size: 25px; +} + +.header-text{ + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + +.subheading-v2{ + color: #FFFFFF; + line-height: 36px; + letter-spacing: 1px; + font-size: 40px; +} diff --git a/src/components/skills-quiz-v2/styles/index.scss b/src/components/skills-quiz-v2/styles/index.scss new file mode 100644 index 0000000000..8c00cb4d4c --- /dev/null +++ b/src/components/skills-quiz-v2/styles/index.scss @@ -0,0 +1,2 @@ +@import './SkillsQuizHeader'; +@import './JobCard'; diff --git a/src/components/skills-quiz/SkillsQuiz.jsx b/src/components/skills-quiz/SkillsQuiz.jsx index d2f6c34e4a..25044454e7 100644 --- a/src/components/skills-quiz/SkillsQuiz.jsx +++ b/src/components/skills-quiz/SkillsQuiz.jsx @@ -11,21 +11,27 @@ import { import { MainContent } from '../layout'; import SkillsQuizStepper from './SkillsQuizStepper'; import { SkillsContextProvider } from './SkillsContextProvider'; +import SkillsQuizV2 from '../skills-quiz-v2/SkillsQuiz'; const SkillsQuiz = () => { const { enterpriseConfig } = useContext(AppContext); const PAGE_TITLE = `Skills Quiz - ${enterpriseConfig.name}`; - + const v1 = true; return ( <> + + - + {v1 + ? + : } + diff --git a/src/index.scss b/src/index.scss index 08c90678ea..b3b3dde9ce 100644 --- a/src/index.scss +++ b/src/index.scss @@ -21,6 +21,7 @@ $fa-font-path: "~font-awesome/fonts"; @import "./components/dashboard/styles/SubscriptionExpirationModal"; @import "./components/dashboard/styles/CourseRecommendations"; @import "./components/skills-quiz/styles"; +@import "./components/skills-quiz-v2/styles"; @import "./components/site-header/styles/Header"; @import "./components/preview-expand/styles/PreviewExpand"; @import "./components/pathway/styles";