Skip to content

Commit

Permalink
feat: added skills quiz v2
Browse files Browse the repository at this point in the history
  • Loading branch information
zamanafzal committed Aug 3, 2023
1 parent e7d9549 commit 6a68926
Show file tree
Hide file tree
Showing 9 changed files with 253 additions and 2 deletions.
19 changes: 19 additions & 0 deletions src/components/skills-quiz-v2/CourseCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Card } from '@edx/paragon';

const CourseCard = () => (
<Card>
<Card.ImageCap
src="fakeURL"
srcAlt="Card image"
logoSrc="fakeURL"
fallbackLogoSrc="https://www.edx.org/images/logos/edx-logo-elm.svg"
logoAlt="Card logo"
/>
<Card.Header title="Title" subtitle="Subtitle" />
<Card.Section title="Section title">
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.
</Card.Section>
</Card>
);
export default CourseCard;
139 changes: 139 additions & 0 deletions src/components/skills-quiz-v2/SkillsQuiz.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<ModalDialog
title="Skills Quiz"
size="fullscreen"
className="bg-light-200 skills-quiz-modal"
isOpen
onClose={closeSkillsQuiz}
>
<ModalDialog.Hero className="md-img">
<ModalDialog.Hero.Background
backgroundSrc={headerImage}
/>
<ModalDialog.Hero.Content style={{ maxWidth: '15rem' }}>
<SkillsQuizHeader />
</ModalDialog.Hero.Content>
</ModalDialog.Hero>
<ModalDialog.Body>
<Container size="lg">
<div className="skills-quiz-dropdown my-4">
<p>
{SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2}
</p>
<h5 className="mt-3.5">
What roles are you interested in?
</h5>
<div className="mt-1">
<GoalDropdown />
<Button
variant="link"
className="mb-2 mb-sm-0 p-0 text-decoration-none"
onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
>
{showAdvancedOptions ? 'Hide advanced options' : 'Show advanced options'}
</Button>
</div>
{showAdvancedOptions
&& (
<div>
<h5 className="mt-3.5">
Tell us about what you want to acheive
</h5>
<div className="mt-2">
<GoalDropdown />
</div>
<h5 className="mt-3.5">
Search and select your current job title
</h5>
<div className="mt-2">
<GoalDropdown />
</div>
<h5 className="mt-3.5">
What industry are you interested in?
</h5>
<div className="mt-2">
<GoalDropdown />
</div>
</div>
)}
</div>
<div>
<SelectableBox.Set
type="radio"
value={value}
onChange={handleChange}
name="colors"
columns="3"
className="selectable-box "
>
{industryCards.map((card) => (
<SelectableBox
className="box"
value={card.name}
inputHidden={false}
type="radio"
aria-label={card.name}
>
<div>
<div className="lead">{card.name}</div>
<div className="x-small">Related skills</div>
{card.skills.map((skill) => (
<div>
<Chip>{skill}</Chip>
</div>
))}
</div>
</SelectableBox>
))}
</SelectableBox.Set>
</div>
<div className="mt-3.5">
<h4>Boot Camps for a Web technology Specialist</h4>
<CardGrid
columnSizes={{
xs: 12,
lg: 6,
xl: 6,
}}
>
<CourseCard />
<CourseCard />
</CardGrid>
</div>
</Container>
</ModalDialog.Body>
</ModalDialog>
);
};

export default SkillsQuizV2;
19 changes: 19 additions & 0 deletions src/components/skills-quiz-v2/SkillsQuizHeader.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import edxLogo from '../skills-quiz/images/edx-logo.svg';

const SkillsQuizHeader = () => (
<div style={{ display: 'flex' }} className="ml-2">
<img src={edxLogo} alt="edx-logo" height="110px" />
<div
className="ml-5 vertical-line"
/>
<div style={{ minWidth: 'max-content' }} className="ml-5 header-text">
<h1 className="heading">Skills builder</h1>
<h1 className="subheading-v2">
Let edX be your guide
</h1>
</div>
</div>
);

export default SkillsQuizHeader;
15 changes: 15 additions & 0 deletions src/components/skills-quiz-v2/constants.js
Original file line number Diff line number Diff line change
@@ -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'],
},
];
13 changes: 13 additions & 0 deletions src/components/skills-quiz-v2/styles/_JobCard.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
37 changes: 37 additions & 0 deletions src/components/skills-quiz-v2/styles/_SkillsQuizHeader.scss
Original file line number Diff line number Diff line change
@@ -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;
}
2 changes: 2 additions & 0 deletions src/components/skills-quiz-v2/styles/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import './SkillsQuizHeader';
@import './JobCard';
10 changes: 8 additions & 2 deletions src/components/skills-quiz/SkillsQuiz.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<Helmet title={PAGE_TITLE} />
<Container size="lg" className="py-5">
<Row>
<MainContent>

<SearchData>

<SkillsContextProvider>
<SkillsQuizStepper />
{v1
? <SkillsQuizStepper />
: <SkillsQuizV2 />}
</SkillsContextProvider>

</SearchData>
</MainContent>
</Row>
Expand Down
1 change: 1 addition & 0 deletions src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down

0 comments on commit 6a68926

Please sign in to comment.